/* Rematon: layout and motion modelled on the ON Energy reference (sizes in vw of a 1440 / 375 design). */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black: #000;
  --dark: #202020;
  --charcoal: #323232;
  --arsenic: #4b4b4b;
  --mid: #7d7d7d;
  --silver: #afafaf;
  --light: #cdcdcd;
  --off: #eee;
  --off20: rgba(238, 238, 238, .2);
  --off40: rgba(238, 238, 238, .4);
  --yellow: #fff313;
  --base: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --expo-out: cubic-bezier(.16, 1, .3, 1);
  --expo-io: cubic-bezier(.87, 0, .13, 1);
  --cols: 2;
  --gut: 1.6vw;
  --out: 4.2667vw;
  --hdr: 11.7333vw;
}
@media (min-width: 834px) {
  :root { --cols: 24; --gut: 1.1111vw; --out: 2.5vw; --hdr: 1.9444vw; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--off);
  font-family: var(--base);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.375;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 300; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--yellow); color: var(--black); padding: 10px 16px; border-radius: 6px; font-family: var(--mono); font-size: 12px; }
.skip:focus { top: 12px; }

.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding: 0 var(--out); }

/* type */
.t-h1 { font-size: 9.6vw; line-height: 1.167; letter-spacing: -.02em; font-weight: 300; }
.t-h2 { font-size: 7.4667vw; line-height: 1.142; letter-spacing: -.02em; }
.t-h3 { font-size: 7.4667vw; line-height: 1; letter-spacing: -.04em; }
.t-l { font-size: 5.3333vw; line-height: 1.2; letter-spacing: -.04em; }
.t-m { font-size: clamp(15px, 4.8vw, 4.8vw); line-height: 1.22; letter-spacing: -.02em; }
.t-s { font-size: clamp(13px, 3.7333vw, 18px); line-height: 1.375; letter-spacing: -.02em; }
.t-mono { font-family: var(--mono); font-size: 12px; line-height: 1.67; letter-spacing: -.04em; text-transform: uppercase; font-weight: 400; }
@media (min-width: 834px) {
  .t-h1 { font-size: max(50px, 4.4444vw); line-height: 1.125; letter-spacing: -.04em; }
  .t-h2 { font-size: max(36px, 3.3333vw); line-height: 1.167; letter-spacing: -.04em; }
  .t-h3 { font-size: max(30px, 2.5vw); line-height: 1.167; }
  .t-l { font-size: max(20px, 1.6667vw); line-height: 1.167; }
  .t-m { font-size: max(16px, 1.3889vw); line-height: 1.2; }
  .t-s { font-size: clamp(14px, 1.1111vw, 18px); }
}
.label { display: flex; align-items: center; color: var(--silver); }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; flex: none; }
@media (min-width: 834px) { .label::before { margin-right: .4167vw; } }

/* base button: grey glass, yellow fill slides in from the left on hover */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  height: 40px; padding: 0 24px; border-radius: 4px; width: fit-content;
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: -.04em; line-height: 1.67; color: var(--off);
  transition: box-shadow .6s ease, color .6s;
}
.btn__bg { position: absolute; inset: 0; border-radius: 4px; background: var(--off20); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); z-index: 1; pointer-events: none; }
.btn__fill { position: absolute; inset: 0; background: var(--yellow); transform: translateX(-101%); z-index: 2; transition: transform .4s var(--expo-io); }
.btn__label { position: relative; z-index: 3; }
.btn--black { border-radius: 0; color: var(--yellow); }
.btn--black .btn__bg { background: var(--black); border-radius: 0; backdrop-filter: none; }
.btn--dark .btn__bg { background: var(--dark); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 0 20px rgba(255, 243, 19, .3); color: var(--black); }
  .btn--black:hover { box-shadow: none; }
  .btn:hover .btn__fill { transform: none; }
}

/* dots icon button (yellow square, icon made of dots) */
.dots {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 7.4667vw; height: 7.4667vw; min-width: 28px; min-height: 28px; border-radius: 1.6vw;
  background: var(--yellow); color: var(--dark); transition: background-color .2s, color .2s;
}
.dots svg { width: 50%; height: auto; overflow: visible; }
@media (min-width: 834px) { .dots { width: 1.9444vw; height: 1.9444vw; border-radius: .4167vw; } }

/* ---------------- header / menu ---------------- */
.menu { position: fixed; left: 0; top: 0; width: 100%; z-index: 40; pointer-events: none; }
.menu__inner { position: relative; display: flex; }
.bar { position: absolute; top: var(--out); left: var(--out); right: var(--out); height: var(--hdr); display: flex; column-gap: 1px; z-index: 2; pointer-events: auto; }
.logo { position: relative; display: flex; align-items: center; flex: 1 1 auto; height: var(--hdr); padding: 0 3.7333vw; color: var(--black); overflow: hidden; }
.logo__bg { position: absolute; inset: 0; background: var(--yellow); border-radius: 1.6vw 0 0 1.6vw; transition: background-color .3s; }
.logo img { position: relative; z-index: 1; height: 4.8vw; width: auto; }
.logo .logo__alt { display: none; }
.burger { display: flex; align-items: center; justify-content: center; flex: none; width: var(--hdr); height: var(--hdr); background: var(--yellow); color: var(--black); border-radius: 0 1.6vw 1.6vw 0; transition: background-color .3s; }
.burger svg { width: 4.2667vw; height: 4.2667vw; }
.burger .d { transition: transform .4s var(--expo-out); transform-box: fill-box; transform-origin: center; }
.menu__panel {
  position: fixed; inset: 0; padding: calc(var(--out) * 2 + var(--hdr)) var(--out) calc(var(--out) * 2 + var(--hdr));
  background: var(--black); display: flex; flex-direction: column; overflow-y: auto; pointer-events: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.menu.is-open .menu__panel { opacity: 1; visibility: visible; transition: opacity .3s; }
.menu.is-open .logo__bg, .menu.is-open .burger { background: var(--off); }
.list { display: flex; flex-direction: column; row-gap: 4px; width: 100%; }
.list-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--hdr);
  padding: 0 4.8vw 0 3.7333vw; border-radius: 1.6vw; background: var(--off20);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-family: var(--base); font-weight: 400; font-size: clamp(14px, 4.2667vw, 18px); line-height: 1; letter-spacing: 0; color: var(--off);
  transition: background-color .2s, color .2s; text-align: left;
}
.list-link.is-sub { background: var(--off40); }
.list-link[aria-expanded="true"] { background: var(--mid); color: var(--off); }
.chev { width: 8px; height: 6px; flex: none; transition: transform .3s var(--expo-out); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }
.sub { display: none; flex-direction: column; row-gap: 4px; margin-top: 4px; }
.has-sub.is-open .sub { display: flex; }
.contact-button {
  position: fixed; left: var(--out); right: var(--out); bottom: var(--out); height: var(--hdr);
  display: flex; align-items: center; justify-content: center; border-radius: 1.6vw; background: var(--yellow); color: var(--black);
  font-family: var(--mono); font-weight: 600; font-size: clamp(14px, 4.2667vw, 18px); line-height: 1; letter-spacing: -.02em;
  transition: background-color .2s, color .2s;
}
.menu__panel .contact-button { position: fixed; }
@media (hover: hover) and (pointer: fine) {
  .list-link:hover { background: var(--off); color: var(--black); }
  .contact-button:hover { background: var(--black); color: var(--yellow); }
}
@media (min-width: 834px) {
  .menu { top: 1.1111vw; }
  .menu__inner { column-gap: 4px; padding: 0 1.0417vw; align-items: flex-start; }
  .bar { position: relative; inset: auto; height: var(--hdr); }
  .logo { flex: none; padding: 0 .625vw; }
  .logo__bg { border-radius: .4167vw; }
  .logo img { height: .9vw; min-height: 11px; }
  .burger { display: none; }
  .menu__panel {
    position: static; inset: auto; padding: 0; background: none; opacity: 1; visibility: visible; flex: 1;
    flex-direction: row; column-gap: 4px; overflow: visible; transition: none;
  }
  .list { flex-direction: row; column-gap: 4px; row-gap: 0; }
  .list > li { flex: 1; position: relative; }
  .list-link { height: var(--hdr); border-radius: .4167vw; padding: 0 .9722vw; font-size: 12px; }
  .chev { width: .45vw; min-width: 6px; }
  .sub { position: absolute; left: 0; right: 0; top: 100%; }
  .has-sub.is-open .sub li { animation: drop .45s var(--expo-out) both; }
  .has-sub.is-open .sub li:nth-child(2) { animation-delay: .04s; }
  .has-sub.is-open .sub li:nth-child(3) { animation-delay: .08s; }
  .has-sub.is-open .sub li:nth-child(4) { animation-delay: .12s; }
  .contact-button, .menu__panel .contact-button { position: relative; inset: auto; flex: none; height: var(--hdr); padding: 0 1.1806vw; border-radius: .4167vw; font-size: 12px; }
}

@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* nav over yellow / off-white sections */
.menu.is-light:not(.is-open) .logo__bg, .menu.is-light:not(.is-open) .burger { background: var(--black); color: var(--yellow); }
.menu.is-light:not(.is-open) .logo__ink { display: none; }
.menu.is-light:not(.is-open) .logo__alt { display: block; }
@media (min-width: 834px) {
  .menu.is-light .list-link { background: rgba(0, 0, 0, .12); color: var(--black); }
  .menu.is-light .list-link.is-sub { background: rgba(0, 0, 0, .2); }
  .menu.is-light .list-link[aria-expanded="true"] { background: var(--black); color: var(--off); }
  .menu.is-light .contact-button { background: var(--black); color: var(--yellow); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 834px) {
  .menu.is-light .list-link:hover { background: var(--black); color: var(--off); }
  .menu.is-light .contact-button:hover { background: var(--off); color: var(--black); }
}

/* ---------------- hero + intro (yellow panel slides over the sticky hero) ---------------- */
.stage { position: relative; }
.hero { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: 1; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 60%, var(--black) 100%); pointer-events: none; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__title { position: absolute; left: var(--out); top: 50%; transform: translateY(-50%); z-index: 2; }
.hero__title span { display: block; }
.hero__copy { display: none; }
.card {
  position: absolute; z-index: 2; left: var(--out); right: var(--out); bottom: var(--out);
  display: flex; column-gap: 12px; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--yellow); color: var(--black);
  transition: filter .2s;
}
.card .label { color: var(--black); }
.card__content { padding: 6px 0; flex: 1; }
.card__copy { margin-top: 7px; color: var(--black); }
.card__img { flex: none; width: 28.2667vw; max-width: 106px; aspect-ratio: 1; border-radius: 2.4vw; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .card:hover { filter: brightness(.95); } }
@media (min-width: 834px) {
  .hero__copy { display: block; position: absolute; z-index: 2; left: var(--out); bottom: var(--out); max-width: 27vw; }
  .card { left: auto; right: 1.0417vw; bottom: 1.1111vw; max-width: 400px; border-radius: 1.1111vw; column-gap: .8333vw; }
  .card__content { min-width: 180px; width: 14.3056vw; padding: .4514vw 0; }
  .card__copy { margin-top: .4861vw; }
  .card__img { width: clamp(106px, 7.3611vw, 120px); max-width: none; border-radius: .625vw; }
}

.intro { position: relative; z-index: 2; }
.intro__inner { background: var(--yellow); color: var(--black); border-radius: 4.2667vw; margin: 0 var(--out); min-height: 100vh; display: flex; align-items: center; padding: 16vw 4.2667vw; }
.intro__copy { font-size: 8vw; line-height: 1.167; letter-spacing: -.04em; font-weight: 300; }
@media (min-width: 834px) {
  .intro__inner { border-radius: 1.6667vw; padding: 8.3333vw 2.5vw; margin: 0 1.0417vw; }
  .intro__copy { font-size: max(32px, 3.3333vw); line-height: 1.167; max-width: 87vw; }
}

/* ---------------- pinned sequence: one panel -> one roof -> a field ---------------- */
.seq { position: relative; z-index: 2; background: var(--black); }
.js .seq { height: 400vh; }
.seq__pin { position: relative; height: 100vh; overflow: hidden; }
.js .seq__pin { position: sticky; top: 0; }
.seq__layer { position: absolute; inset: 0; }
.seq__layer img { width: 100%; height: 100%; object-fit: cover; }
.seq__layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, transparent 30%, transparent 70%, var(--black) 100%); }
.js .seq__layer:not(:first-child) { opacity: 0; }
.seq__title { position: absolute; z-index: 3; left: var(--out); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; row-gap: 4.5333vw; }
.seq__title h2 span { display: block; }
.seq__copy { position: absolute; z-index: 3; left: var(--out); bottom: var(--out); width: calc(100% - var(--out) * 2); color: var(--mid); }
.seq__copy b { font-weight: 300; color: var(--off); }
@media (min-width: 834px) {
  .seq__title { top: 18%; transform: none; row-gap: 1.875vw; }
  .seq__copy { width: 26.9444vw; }
}

/* ---------------- features (2x2 on the right half) ---------------- */
.features { position: relative; z-index: 2; background: var(--black); padding: 32vw 0 53.3333vw; }
.features__items { grid-column: 1 / -1; display: flex; flex-direction: column; row-gap: 19.2vw; }
.feature__icon { width: 13.6vw; height: 10.6667vw; color: var(--off); }
.feature__icon svg { width: auto; height: 100%; }
.feature__title { margin-top: 9.6vw; max-width: 69.3333vw; }
.feature__copy { margin-top: 6.4vw; color: var(--mid); }
@media (min-width: 834px) {
  .features { padding: 8.3333vw 0 13.8889vw; }
  .features__items { grid-column: 13 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 4.1667vw; }
  .feature__icon { width: 3.5417vw; height: 2.7778vw; }
  .feature__title { margin-top: 2.2222vw; max-width: none; }
  .feature__copy { margin-top: 1.6667vw; }
}

/* ---------------- solutions (expertise overview) ---------------- */
.solutions { position: relative; z-index: 2; background: var(--dark); padding: 32vw 0; overflow: hidden; }
.solutions__head { grid-column: 1 / -1; }
.solutions__head h2 { margin-top: 3.4667vw; }
.solutions__head h2 span { display: block; }
.solutions__copy { grid-column: 1 / -1; margin-top: 16vw; color: var(--light); }
.cards { grid-column: 1 / -1; margin-top: 16vw; display: flex; flex-direction: column; row-gap: 4.2667vw; }
.sol {
  position: relative; display: flex; column-gap: 3.2vw; width: 100%; padding: 1.6vw; border-radius: 16px; overflow: hidden;
  background: var(--charcoal); text-align: left; transition: background-color .2s;
}
.sol__img { flex: none; width: 22.3%; aspect-ratio: 1; border-radius: 2.4vw; overflow: hidden; }
.sol__img img { width: 100%; height: 100%; object-fit: cover; }
.sol__content { display: flex; flex-direction: column; justify-content: center; width: 66%; padding: 3px 0; }
.sol__name { color: var(--off); transition: color .2s; }
.sol__copy { color: var(--silver); margin-top: 2px; transition: color .2s; }
.sol .dots { position: absolute; right: 1.6vw; bottom: 1.6vw; }
@media (hover: hover) and (pointer: fine) {
  .sol:hover { background: var(--yellow); }
  .sol:hover .sol__name { color: var(--black); }
  .sol:hover .sol__copy { color: var(--arsenic); }
  .sol:hover .dots { background: var(--black); color: var(--yellow); }
}
@media (min-width: 834px) {
  .solutions { padding: 8.3333vw 0 10.4167vw; }
  .solutions__head { grid-column: span 6; }
  .solutions__head h2 { margin-top: .9028vw; }
  .solutions__copy { grid-column: 13 / -1; margin-top: 2.0833vw; }
  .cards { grid-column: 13 / -1; margin-top: 4.1667vw; row-gap: 1.1111vw; }
  .sol { border-radius: 1.1111vw; column-gap: 2.2222vw; padding: 1.1111vw; }
  .sol__img { width: 29.58%; border-radius: .625vw; }
  .sol__content { justify-content: flex-start; padding: 1.3889vw 0 .4514vw; }
  .sol__copy { margin-top: 1.1111vw; }
  .sol .dots { right: 1.1111vw; bottom: 1.1111vw; }
}

/* ---------------- full-bleed text over a still ---------------- */
.bleed { position: relative; z-index: 2; min-height: 100vh; overflow: hidden; background: var(--black); display: flex; align-items: center; }
.bleed__media { position: absolute; inset: -8% 0; z-index: 0; }
.bleed__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.bleed::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--black) 0%, transparent 18%, transparent 72%, var(--black) 100%), linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, .55) 100%); }
.bleed .grid { position: relative; z-index: 2; width: 100%; }
.bleed__content { grid-column: 1 / -1; margin: 32vw 0; }
.bleed__content h2 { margin-top: 9.6vw; }
.bleed__copy { color: var(--off40); }
.bleed__content .btn { margin-top: 9.6vw; }
@media (min-width: 834px) {
  .bleed__content { grid-column: 13 / -3; margin: 8.3333vw 0; }
  .bleed__content h2 { margin-top: 2.5vw; }
  .bleed__content .btn { margin-top: 2.5vw; }
}

/* ---------------- steps bento (numbers are step numbers, not figures) ---------------- */
.steps { position: relative; z-index: 2; background: var(--black); padding: 16vw 0 32vw; }
.steps__cards { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--out); }
.step {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 1; padding: var(--out); border-radius: 6.4vw; overflow: hidden;
  background: var(--dark);
}
.step__num { align-self: flex-end; color: var(--silver); font-size: 25.6vw; font-weight: 250; letter-spacing: -.08em; line-height: 1; }
.step__content { margin-top: auto; }
.step__copy { color: var(--silver); margin-top: 1.6vw; max-width: 67.7333vw; }
@media (min-width: 834px) {
  .steps { padding: 2.5vw 0 2.5vw; }
  .steps__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 1.1111vw; }
  .step { aspect-ratio: 674 / 450; border-radius: 3.8889vw; padding: 3.3333vw; }
  .step__num { font-size: 8.3333vw; }
  .step__copy { margin-top: 1.1111vw; max-width: 20.8333vw; }
}

/* ---------------- company details (news list rows on off-white) ---------------- */
.company { position: relative; z-index: 2; background: var(--off); color: var(--black); padding: 32vw 0 40vw; }
.company__title { grid-column: 1 / -1; }
.company__copy { grid-column: 1 / -1; margin-top: 16vw; color: var(--arsenic); }
.rows { grid-column: 1 / -1; margin-top: 16vw; border-top: 1px solid var(--light); }
.row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--light); }
.row dt { color: var(--mid); }
.row dd a { display: inline-block; padding: 4px 0 2px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.row dd a:hover { border-color: currentColor; }
.row--link { display: flex; justify-content: space-between; align-items: center; }
.row--link span:last-child { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 834px) {
  .company { padding: 8.3333vw 0 12.5vw; }
  .company__title { grid-column: 1 / 8; }
  .company__copy { grid-column: 1 / 8; margin-top: 8.3333vw; }
  .rows { margin-top: 5vw; }
  .row { grid-template-columns: 7fr 17fr; column-gap: var(--gut); padding: 1.25vw 0; align-items: baseline; }
}

/* ---------------- footer ---------------- */
.footer { position: relative; z-index: 2; background: var(--black); padding: var(--out) 0 var(--out); }
.footer__box { margin: 0 var(--out); background: var(--yellow); color: var(--black); border-radius: 4.2667vw; padding: 9.6vw 4.2667vw 6.4vw; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12.8vw; }
.footer__copy p { max-width: 30em; }
.footer__copy .btn { margin-top: 6.4vw; }
.flist { border-top: 1px solid rgba(0, 0, 0, .18); }
.flist a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .18); font-size: clamp(22px, 6.4vw, 28px); letter-spacing: -.04em; line-height: 1.2; transition: padding .3s var(--expo-out); }
.flist a:hover { padding-left: 8px; }
.fdetails { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.fdetails dt { color: rgba(0, 0, 0, .55); }
.fdetails a { display: inline-block; padding: 4px 0 2px; border-bottom: 1px solid rgba(0, 0, 0, .3); }
.fdetails a:hover { border-color: var(--black); }
.footer__logo img { width: 100%; height: auto; }
.footnote { display: flex; flex-direction: column; row-gap: 12px; color: rgba(0, 0, 0, .7); }
.legal-links { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.legal-links a { display: inline-flex; min-height: 44px; align-items: center; }
.legal-links a:hover, .footnote a:hover { text-decoration: underline; }
@media (min-width: 834px) {
  .footer { padding: 1.1111vw 0 1.1111vw; }
  .footer__box { margin: 0 1.0417vw; border-radius: 1.6667vw; padding: 2.5vw 2.5vw 2.2222vw; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 4.1667vw; }
  .footer__copy { grid-column: 1 / 10; }
  .footer__copy p { font-size: max(18px, 1.6667vw); line-height: 1.167; letter-spacing: -.04em; }
  .footer__copy .btn { margin-top: 2.2222vw; }
  .flist { grid-column: 13 / -1; }
  .flist a { font-size: max(22px, 2.2222vw); padding: .55vw 0; }
  .fdetails { grid-column: 13 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 1.4vw; }
  .footer__logo { grid-column: 1 / 12; align-self: end; }
  .footnote { grid-column: 13 / -1; align-self: end; flex-direction: row; justify-content: space-between; align-items: center; }
  .legal-links a { min-height: 0; }
}

/* ---------------- quote panel ---------------- */
.quote { position: relative; z-index: 2; background: var(--black); padding: 16vw var(--out); }
.quote__inner { background: var(--dark); border-radius: 4.2667vw; padding: 4.2667vw; }
.quote__close, .quote__bg { display: none; }
.js .quote { position: fixed; inset: 0; z-index: 100; padding: 0; background: none; overflow: auto; overscroll-behavior: contain; display: none; scrollbar-width: none; }
.js .quote::-webkit-scrollbar { display: none; }
.js .quote__bg { display: block; position: fixed; inset: 0; z-index: 1; width: 100%; background: rgba(0, 0, 0, .9); opacity: 0; cursor: pointer; }
.js .quote__inner { position: relative; z-index: 2; min-height: 100%; border-radius: 4.2667vw; margin: 0; transform: translateX(105%); }
.js .quote__close { display: flex; position: fixed; z-index: 3; right: calc(var(--out) + 4.2667vw); top: calc(var(--out) + 4.2667vw); width: 40px; height: 40px; border-radius: 10px; transform: scale(0); }
.js .quote.is-open { display: block; }
.js .quote.is-closing, .js .quote.is-closing * { pointer-events: none; }
@media (min-width: 834px) {
  .quote { padding: 8.3333vw var(--out); }
  .quote__inner { max-width: 36.3889vw; min-width: 460px; margin-left: auto; border-radius: 1.6667vw; padding: 2.2222vw; }
  .js .quote__inner { position: absolute; right: 2.5vw; top: 1.7361vw; min-height: 0; margin: 0 0 1.7361vw; border-radius: 1.6667vw; }
  .js .quote__close { right: calc(2.5vw + max(36.3889vw, 460px) + 1.1111vw); top: 3.8889vw; width: 3.3333vw; height: 3.3333vw; border-radius: .8333vw; min-width: 40px; min-height: 40px; }
}
.quote__close:hover { background: var(--black); color: var(--off); }
.quote h2, .quote__lead { padding-right: 52px; }
@media (min-width: 834px) { .quote h2, .quote__lead { padding-right: 0; } }
.quote__lead { margin-top: 12px; color: var(--silver); }
.form { margin-top: 32px; display: flex; flex-direction: column; row-gap: 32px; }
.fgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; row-gap: 6px; }
.fgroup legend, .fgroup__title { padding: 0; margin-bottom: 14px; font-size: 18px; letter-spacing: -.04em; line-height: 1.167; }
.radios { display: flex; flex-direction: column; row-gap: 8px; }
.radio { position: relative; display: flex; align-items: center; column-gap: 8px; min-height: 18px; cursor: pointer; font-size: 13px; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio__dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--mid); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: border-color .2s; }
.radio__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); transform: scale(0); transition: transform .2s var(--expo-out); }
.radio input:checked + .radio__dot { border-color: var(--yellow); }
.radio input:checked + .radio__dot::after { transform: scale(1); }
.radio input:focus-visible + .radio__dot { outline: 2px solid var(--yellow); outline-offset: 2px; }
.radio:hover .radio__dot { border-color: var(--off); }
.radios--row { flex-direction: row; flex-wrap: wrap; column-gap: 20px; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.field { grid-column: 1 / -1; position: relative; display: block; }
.field.half { grid-column: span 1; }
.field span { position: absolute; left: 12px; top: 8px; font-size: 10px; letter-spacing: 0; color: var(--mid); pointer-events: none; font-family: var(--mono); text-transform: uppercase; }
.field input, .field select, .field textarea {
  display: block; width: 100%; height: 48px; padding: 20px 12px 6px; border: 1px solid var(--arsenic); border-radius: 4px; background: transparent;
  font-size: 13px; color: var(--off); transition: border-color .2s; appearance: none; -webkit-appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23afafaf' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 28px; }
.field select option { background: var(--dark); color: var(--off); }
.field textarea { height: 120px; resize: vertical; padding-top: 24px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mid); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); }
.field input::placeholder, .field textarea::placeholder { color: var(--arsenic); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 12px; }
.form__note { font-size: 12px; color: var(--mid); }
.form__note a { color: var(--silver); text-decoration: underline; }
.form__status { font-size: 14px; color: var(--off); min-height: 0; }
.form__status:empty { display: none; }
.form__status a { color: var(--yellow); text-decoration: underline; }
.form__status.is-error { color: var(--yellow); }

/* ---------------- cookie notice ---------------- */
.cookie {
  position: fixed; z-index: 60; right: var(--out); top: calc(var(--out) + var(--hdr) + 8px); max-width: min(420px, calc(100% - var(--out) * 2));
  display: flex; align-items: center; column-gap: 14px; padding: 10px 10px 10px 16px; border-radius: 12px;
  background: rgba(32, 32, 32, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--silver); font-size: 13px; line-height: 1.35;
}
.cookie[hidden] { display: none; }
/* the open menu takes the whole screen on phones; the notice waits until it closes */
.menu-open .cookie { visibility: hidden; }
.cookie a { color: var(--off); text-decoration: underline; }
.cookie button { flex: none; height: 44px; min-width: 56px; padding: 0 16px; border-radius: 6px; background: var(--yellow); color: var(--black); font-family: var(--mono); font-size: 12px; font-weight: 600; transition: background-color .2s, color .2s; }
.cookie button:hover { background: var(--off); }
@media (min-width: 834px) {
  .cookie { top: calc(1.1111vw + var(--hdr) + 8px); right: 1.0417vw; }
  .cookie button { height: 32px; }
}

/* ---------------- legal pages / 404 ---------------- */
.page { padding: calc(var(--out) * 3 + var(--hdr) + 8vw) var(--out) 16vw; background: var(--black); }
.prose { max-width: 720px; margin: 0 auto; color: var(--light); font-size: 16px; line-height: 1.6; letter-spacing: -.01em; }
.prose h1 { color: var(--off); margin-bottom: 8px; }
.prose .updated { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: -.04em; color: var(--mid); margin-bottom: 40px; }
.prose h2 { color: var(--off); font-size: 22px; line-height: 1.25; letter-spacing: -.03em; margin: 40px 0 12px; }
.prose p, .prose ul, .prose dl { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--off); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 6px 0; margin: -6px 0; }
.prose a:hover { color: var(--yellow); }
.prose dl { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; border-top: 1px solid var(--charcoal); }
.prose dl div { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--charcoal); }
.prose dt { color: var(--mid); font-size: 14px; }
.prose dd { color: var(--off); }
@media (min-width: 834px) {
  .page { padding: 12vw var(--out) 8vw; }
  .prose dl div { grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; }
}
.nf { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--out); row-gap: 24px; }
.nf p { color: var(--silver); max-width: 32em; }

/* ---------------- motion start states (only with JS, never with reduced motion) ---------------- */
.js:not(.rm) [data-reveal="blur"] { opacity: 0; filter: blur(12px); }
.js:not(.rm) [data-reveal="fade"] { opacity: 0; }
.js:not(.rm) [data-reveal="up"] { opacity: 0; transform: translateY(60px); }
.js:not(.rm) .hero__media { opacity: 0; }
.js:not(.rm) .hero .card, .js:not(.rm) .hero__copy { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.js.rm .seq { height: auto; }
.js.rm .seq__pin { position: relative; }
.js.rm .seq__layer:not(:first-child) { display: none; }