/* Affiliate recruitment site (wedge #3) v3 — built end to end from MotionSites section specs:
   Aethera Studio (hero), Editorial Collection (statement + closing), Veloce Cards,
   NexaCore Process (light), Rocket Pricing (light), FAQ CTA, Zenith Footer.
   All visual values come from tokens.css (design/design-tokens.json). */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: var(--s-4); z-index: var(--z-nav); padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-pill); transform: translateY(-300%); }
.skip:focus { transform: none; }

.shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--s-6); }
.shell--narrow { max-width: var(--max-narrow); }

/* serif headings with grey italic emphasis (Aethera) */
.section-title { font-family: var(--serif); font-weight: var(--w-regular); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.08; letter-spacing: var(--track-tight); max-width: 16ch; }
.section-title em, .section-title--center { margin: 0 auto; text-align: center; }
.section-lead { color: var(--grey); font-size: var(--fs-lead); max-width: 34rem; }
.section-lead--center { margin: var(--s-6) auto 0; text-align: center; }

/* pills (Aethera rounded-full black, hover scale) */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-3) var(--s-6); border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font: inherit; font-size: var(--fs-ui); font-weight: var(--w-medium);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.pill:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.pill:active { transform: translateY(1px); }
.pill--ghost:hover { background: var(--mist); }
.pill--sm { min-height: 44px; padding: var(--s-2) var(--s-6); }
.pill--lg { min-height: 60px; padding: var(--s-5) var(--s-9); font-size: var(--fs-body); }
.pill--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.pill--ghost:hover { border-color: var(--ink); }
.pill--block { width: 100%; }
.pill[aria-busy="true"] { cursor: progress; transform: none; }

/* scroll reveal: fade + rise, driven by GSAP ScrollTrigger (no blur) */
.js .reveal { opacity: 0; transform: translateY(32px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* load animation: Aethera fade-rise */
@keyframes fade-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.fade-rise { animation: fade-rise var(--d-rise) var(--e-out) both; }
.fade-rise--1 { animation-delay: var(--d-delay-1); }
.fade-rise--2 { animation-delay: var(--d-delay-2); }

/* ================= HERO (Aethera) ================= */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--paper); }
.hero__video { position: absolute; top: 300px; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; }
/* video inset 2px inside its clip so a GPU video plane can never paint an
   unveiled row at the edges; the veil (Aethera from-background via-transparent
   to-background) is opaque paper at both edges */
.hero__video video {
  position: absolute; top: 2px; bottom: 2px; left: 0; width: 100%; height: calc(100% - 4px);
  object-fit: cover; object-position: 50% 70%; opacity: 0;
}
.hero__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper) 0%, transparent 30%, transparent 80%, var(--paper) 100%); }

.nav {
  position: relative; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  max-width: var(--max); margin: 0 auto; padding: var(--s-6) var(--s-6);
}
.logo { font-family: var(--aethera-serif); font-weight: 600; letter-spacing: -0.04em; font-size: 1.875rem; line-height: 1; letter-spacing: var(--track-tight); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { flex: none; width: 34px; height: 34px; }
.nav__links { display: none; gap: var(--s-7); }
.nav__links a { font-family: var(--aethera-sans); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-1); color: var(--grey); text-decoration: none; font-size: var(--fs-ui); transition: color var(--d-fast) var(--e-out); }
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }
.nav__cta { display: none; }
.nav__menu { position: relative; display: inline-flex; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper); cursor: pointer; }
/* Both bars sit on the button's centre, so the open state is a true X. */
.nav__bar { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin: -0.75px 0 0 -9px; background: var(--ink); border-radius: var(--r-pill); transition: transform var(--d-fast) var(--e-out); }
/* The sr-only label is the first span, so target bars by sibling order, not :first-of-type. */
.nav__bar { transform: translateY(-3.5px); }
.nav__bar + .nav__bar { transform: translateY(3.5px); }
.nav__menu[aria-expanded="true"] .nav__bar { transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__bar + .nav__bar { transform: rotate(-45deg); }
.mobile-menu { position: relative; z-index: var(--z-nav); display: grid; gap: var(--s-1); margin: 0 var(--s-6); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--paper); box-shadow: 0 10px 30px var(--shadow); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-3); font-family: var(--aethera-sans); font-size: var(--fs-lead); color: var(--ink); text-decoration: none; }
.mobile-menu .pill { margin-top: var(--s-2); }

.hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(8rem - 75px) var(--s-6) var(--s-12); }
.hero__title { font-family: var(--aethera-serif); font-weight: 500; font-size: clamp(2.25rem, 1.3rem + 4vw, 4.375rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 80rem; }
.hero__title em { font-style: normal; color: var(--grey); }
.hero__line { display: inline; }
@media (min-width: 640px) { .hero__line { display: block; } }
.hero__lead { margin-top: var(--s-7); max-width: 42rem; font-family: var(--aethera-sans); font-size: var(--fs-lead); line-height: 1.625; color: var(--grey); }
.pill--aethera { font-family: var(--aethera-sans); }
.pill--aethera:hover { transform: scale(1.03); background: var(--ink); border-color: var(--ink); }
.hero__body > .wl-hero { margin-top: var(--s-7); }
/* trust line over the light footage: dark text with a white halo (the kit's --shade halo is for dark heroes) */
.hero__body .wl-trust { color: var(--ink); opacity: 1; text-shadow: 0 0 12px oklch(100% 0 0 / 0.95), 0 0 3px oklch(100% 0 0 / 0.9); }

/* ================= QUIET (Editorial type) ================= */
.quiet { padding: var(--s-11) 0; }
.quiet__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.quiet__body { display: grid; gap: var(--s-5); color: var(--ink-soft); max-width: 36rem; }
.quiet__quote { margin: var(--s-3) 0 0; padding: var(--s-5) 0 0 0; border-top: 1px solid var(--line); }
.quiet__quote p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }

/* ================= GLASS (Veloce Cards) ================= */
.glass { padding: var(--s-11) 0; }
.glass__head { display: grid; gap: var(--s-7); }
.glass__cards { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-11); }
.gcard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: var(--s-8); border-radius: var(--r-card); background: var(--mist); }
.gcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gcard__tint { position: absolute; inset: 0; }
.gcard__tint--1 { background: var(--tint-1); }
.gcard__tint--2 { background: var(--tint-2); }
.gcard__tint--3 { background: var(--tint-3); }
.gcard__body { position: relative; z-index: 1; display: grid; gap: var(--s-5); max-width: 22rem; }
.gcard__n { font-family: var(--serif); font-size: var(--fs-stat); line-height: 1; letter-spacing: var(--track-tight); color: var(--glass-ink); }
.gcard__l { font-size: var(--fs-lead); line-height: 1.4; color: var(--glass-ink-soft); }

.jobs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-10); }
.jobs li { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--mist); transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out); }
.jobs li:hover { border-color: var(--line-strong); background: var(--paper); }
.jobs__n { font-size: var(--fs-micro); font-weight: var(--w-medium); letter-spacing: var(--track-caps); color: var(--leaf); }
.jobs__word { font-family: var(--serif); font-size: var(--fs-h3); font-weight: var(--w-medium); line-height: 1.1; letter-spacing: var(--track-tight); }
.jobs p { color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.6; }

/* ================= PROCESS (NexaCore, light) ================= */
.process { position: relative; overflow: hidden; padding: var(--s-11) 0; }
.process__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--ink) 30%, var(--ink) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--ink) 30%, var(--ink) 75%, transparent 100%);
}

.process__inner { position: relative; }
.process__head { margin-bottom: var(--s-11); }
.pcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.pcard {
  position: relative; display: flex; flex-direction: column; min-height: 220px; padding: var(--s-7);
  border-radius: var(--r-process); background: var(--frost); border: 1px solid var(--frost-edge);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px var(--shadow); outline: none;
}
.pcard__badge { display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--chip); font-size: var(--fs-ui); font-weight: var(--w-medium); }
.pcard__badge svg { width: 16px; height: 16px; fill: var(--leaf); }
.pcard__title { margin-top: auto; padding-top: var(--s-7); font-family: var(--serif); font-weight: var(--w-regular); font-size: var(--fs-h3); line-height: 1.1; transition: transform var(--d-card) var(--e-out); }
.pcard__list { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-ui); color: var(--ink-soft); transition: transform var(--d-card) var(--e-out); }
.pcard__list li { display: flex; align-items: flex-start; gap: var(--s-2); }
/* Lucide "check" as a mask, tinted with the brand green (no dot bullets) */
.pcard__list li::before { content: ""; width: 14px; height: 14px; margin-top: 0.2em; flex: none; background: var(--leaf); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat; }
.pcard__cta { margin-top: var(--s-5); align-self: stretch; }
@media (hover: hover) and (min-width: 1024px) {
  .pcard:hover .pcard__title, .pcard:focus-within .pcard__title, .pcard:hover .pcard__list, .pcard:focus-within .pcard__list { transform: translateY(-8px); }
}

/* ================= DIFFERENCE + PROMISE ================= */
.diff { padding: var(--s-11) 0; }
.diff__head { display: grid; gap: var(--s-7); }


.ct { margin-top: var(--s-10); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--paper); -webkit-overflow-scrolling: touch; }
.ct table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); }
.ct th, .ct td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.ct tbody tr:last-child th, .ct tbody tr:last-child td { border-bottom: 0; }
.ct thead th { padding-top: var(--s-6); padding-bottom: var(--s-5); vertical-align: bottom; }
.ct__name { display: block; font-size: var(--fs-body); font-weight: var(--w-medium); color: var(--ink); }
.ct__sub { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: var(--w-regular); color: var(--grey); }
.ct tbody th { position: sticky; left: 0; z-index: 1; width: 26%; font-weight: var(--w-medium); color: var(--ink); background: var(--paper); }
.ct td { color: var(--ink-soft); }
.ct .ct__us { background: var(--mist); color: var(--ink); font-weight: var(--w-medium); }
.ct thead .ct__us { position: relative; border-top: 2px solid var(--leaf); }
.ct thead .ct__us .ct__sub { color: var(--leaf); }
.ct__yes, .ct__no { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.ct__yes { border-radius: var(--r-pill); background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ct__no { position: relative; }
.ct__no::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; background: var(--line-strong); }
.ct tbody tr:last-child td, .ct tbody tr:last-child th { font-weight: var(--w-medium); color: var(--ink); }
@media (max-width: 639px) {
  .ct { overflow: visible; border: 0; background: none; }
  .ct table, .ct tbody { display: block; min-width: 0; }
  .ct thead { display: none; }
  .ct tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; margin-bottom: var(--s-3); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--line); }
  .ct tbody th { order: -2; position: static; grid-column: 1 / -1; width: auto; padding: var(--s-3) var(--s-4); border: 0; background: var(--paper); }
  .ct td { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 0; background: var(--paper); }
  .ct td::before { content: attr(data-label); font-size: var(--fs-micro); font-weight: var(--w-regular); color: var(--grey); }
  .ct td.ct__us { order: -1; background: var(--mist); }
  .ct td.ct__us::before { color: var(--leaf); font-weight: var(--w-medium); }
}
.ct__note { margin-top: var(--s-4); font-size: var(--fs-micro); color: var(--grey); }

/* ================= FAQ + CTA (FAQ CTA) ================= */
.faq { padding: var(--s-11) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.faq__intro .section-lead { margin-top: var(--s-4); }
.faq__intro .section-lead a { color: var(--ink); }

.accordion { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.acc { border: 1px solid var(--line); border-radius: var(--r-item); background: var(--paper); box-shadow: 0 2px 8px var(--shadow); transition: box-shadow var(--d-fast) var(--e-out); }
.acc.is-open { box-shadow: 0 4px 12px var(--shadow); }
.acc h3 { font-size: inherit; font-weight: inherit; }
.acc button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-4) var(--s-5); border: 0; background: none; font: inherit; font-size: var(--fs-ui); text-align: left; color: var(--ink); cursor: pointer; border-radius: var(--r-item); }
.acc__icon { flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform var(--d-fast) var(--e-out); }
.acc.is-open .acc__icon { transform: translateY(2px) rotate(-135deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--d-card) var(--e-out), opacity var(--d-card) var(--e-out); }
.acc.is-open .acc__panel { grid-template-rows: 1fr; opacity: 1; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__panel p { padding: 0 var(--s-5) var(--s-4); font-size: var(--fs-ui); color: var(--ink-soft); }

/* ================= FINALE (Editorial Collection + Zenith Footer) ================= */
.finale { position: relative; overflow: hidden; background: var(--paper); padding-top: clamp(200px, 32vh, 360px); padding-bottom: var(--s-7); }
.finale__media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.finale__video { position: absolute; top: 2px; bottom: 2px; left: 0; width: 100%; height: calc(100% - 4px); object-fit: cover; object-position: 50% 60%; }
.finale__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper) 0%, transparent 42%, transparent 92%, var(--paper) 100%); }


.footer { position: relative; }
.footer__card { padding: var(--s-6); border: 1px solid var(--frost-edge); border-radius: var(--r-footer); background: var(--cream); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px var(--shadow); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); }
.footer__brand { grid-column: 1 / -1; display: grid; gap: var(--s-4); justify-items: start; max-width: 24rem; }
.footer__mark { flex: none; width: 32px; height: 32px; }
.footer__wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: var(--fs-h3); font-weight: var(--w-medium); letter-spacing: var(--track-tight); line-height: 1; }
.footer__tag { color: var(--ink-soft); font-size: var(--fs-ui); }
.footer__col { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-size: var(--fs-ui); }
.footer__col a[href^="mailto:"] { overflow-wrap: break-word; }
.footer__head { margin-bottom: var(--s-1); font-size: var(--fs-micro); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--track-caps); }
.footer__col a, .footer__col span { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-1) 0; color: var(--ink-soft); text-decoration: none; }
.footer__col a:hover { color: var(--ink); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); justify-content: space-between; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-ui); color: var(--grey); }

/* ================= DIALOG ================= */
.field { display: grid; gap: var(--s-2); margin-top: var(--s-5); font-size: var(--fs-ui); font-weight: var(--w-medium); }
.field em { font-style: normal; font-weight: var(--w-regular); color: var(--grey); }
.field input { min-height: 48px; width: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-item); background: var(--paper); font: inherit; font-size: var(--fs-body); font-weight: var(--w-regular); color: var(--ink); transition: border-color var(--d-fast) var(--e-out); }
.field input::placeholder { color: var(--grey); }
.field input:hover, .field input:focus { border-color: var(--ink); }
.field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= ≥ 640 ================= */
@media (min-width: 640px) {
  .shell { padding: 0 var(--s-7); }
  .nav { padding: var(--s-6) var(--s-7); }
  .hero__lead { font-size: var(--fs-lead); }
  .jobs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .footer__card { padding: var(--s-8) var(--s-10); }
}

/* ================= ≥ 1024 ================= */
@media (min-width: 1024px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__menu, .mobile-menu { display: none !important; }
  .glass__head, .diff__head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; justify-content: space-between; }
  .glass__cards { flex-direction: row; align-items: flex-end; }
  .gcard { flex: 1; min-height: 450px; }
  .gcard:not(.gcard--tall) { min-height: 350px; }
  .jobs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcard { min-height: 260px; }
            .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-10); align-items: start; }
    .quiet__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-10); align-items: start; }
  .footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: auto; }
}

/* ================= < 640: phone rhythm ================= */
/* Sections keep 120px on larger screens; on phones that stacked to ~240px between sections. */
@media (max-width: 639px) {
  .quiet, .glass, .process, .diff, .faq { padding: var(--s-9) 0; }
  .glass__head, .diff__head { gap: var(--s-5); }
  .glass__cards { margin-top: var(--s-8); }
  .process__head { margin-bottom: var(--s-8); }
  .ct { margin-top: var(--s-8); }
  .finale { padding-top: var(--s-10); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__video video { opacity: 1 !important; }
}


/* text inputs: no focus ring around the field; its own border changes colour on focus instead */
input:not([type="radio"]):not([type="checkbox"]):focus,
input:not([type="radio"]):not([type="checkbox"]):focus-visible { outline: none; }

/* ---- Team · "The people behind" (growth-studio-1 V2Team, LinkedIn links and the client-logo strip left out) ----
   Same layout as the source: centred heading + line, three cards (two founders, "Our Team"), photo 392×430 on top,
   name 600 24/33.6, role 500 16/19.2, card radius 30, 31 between cards, 56 under the heading. Laid out in this
   site's container instead of the source's scaled 1920 frame; under 900px the cards stack at max 392 wide, as in
   the source. Only the colours follow the site's theme, through the four --tm-* values below. */
.tm { --tm-title: #262626; --tm-sub: #6d727e; --tm-card: #f2f2f2; --tm-name: #161616; --tm-role: rgba(75, 75, 75, 0.6);
  display: flex; flex-direction: column; align-items: center; }
.tm__head { width: min(880px, 100%); text-align: center; }
.tm__title { margin: 0; color: var(--tm-title); font-weight: 700; font-size: 39.5px; line-height: 44px; letter-spacing: 0; text-wrap: balance; }
.tm__sub { margin: 12px 0 0; color: var(--tm-sub); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; }
.tm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 392px)); justify-content: center; gap: 31px; width: 100%; margin: 56px 0 0; padding: 1px 0 0; list-style: none; }
.tm__card { overflow: hidden; border-radius: 30px; background: var(--tm-card); }
.tm__photo { display: block; width: 100%; height: auto; aspect-ratio: 392 / 430; object-fit: cover; }
.tm__body { padding: 20px; }
.tm__body h3 { margin: 0; color: var(--tm-name); font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: 0; }
.tm__body p { min-height: 20px; margin: 3px 0 0; color: var(--tm-role); font-weight: 500; font-size: 16px; line-height: 19.2px; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .tm__title { font-size: 28px; line-height: 32px; }
  .tm__sub { font-size: 15px; line-height: 22px; }
  .tm__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 392px; margin-top: 32px; }
  .tm__body { padding-bottom: 24px; }
}
/* this site (Roster theme, light paper): the title and names in the page ink, the line in its soft ink, roles in its grey, the card on the mist panel */
.tm { --tm-title: var(--ink); --tm-sub: var(--ink-soft); --tm-card: var(--mist); --tm-name: var(--ink); --tm-role: var(--grey); }


/* ---- Contact page (/contact): heading, lede, email + address on the left, the message form on the right; stacked
   under 900px. Only the colours follow the site's theme, through the --ct-* values set after this block. Inputs show
   no focus ring: the border colour changes instead (as on every wedge site). ---- */
.ct-page { --ct-ink: #161616; --ct-ink-2: #4b4b4b; --ct-line: rgba(0, 0, 0, 0.12); --ct-card: #f2f2f2; --ct-field: #fff; --ct-focus: rgba(0, 0, 0, 0.45);
  padding: 160px 0 112px; color: var(--ct-ink); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.ct__title { margin: 0; color: var(--ct-ink); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.ct__lede { max-width: 30rem; margin: 20px 0 0; color: var(--ct-ink-2); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.ct__info { display: grid; gap: 24px; margin: 40px 0 0; }
.ct__row { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--ct-line); }
.ct__row dt { color: var(--ct-ink-2); font-size: 0.875rem; font-weight: 500; }
.ct__row dd { margin: 0; color: var(--ct-ink); font-size: 1.0625rem; line-height: 1.55; overflow-wrap: anywhere; }
.ct__row address { font-style: normal; }
.ct__row a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ct-line); }
.ct__row a:hover { text-decoration-color: currentColor; }
.ct__form { display: grid; gap: 20px; padding: 32px; border: 1px solid var(--ct-line); border-radius: 24px; background: var(--ct-card); }
.ct__field { display: grid; gap: 8px; color: var(--ct-ink); font-size: 0.875rem; font-weight: 500; }
.ct__field input, .ct__field textarea { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 16px; border: 1px solid var(--ct-line); border-radius: 12px;
  background: var(--ct-field); color: var(--ct-ink); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; outline: none; box-shadow: none;
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.ct__field input { min-height: 48px; }
.ct__field textarea { min-height: 160px; resize: vertical; }
.ct__field input::placeholder, .ct__field textarea::placeholder { color: var(--ct-ink-2); opacity: 0.7; }
.ct__field input:focus, .ct__field textarea:focus, .ct__field input:focus-visible, .ct__field textarea:focus-visible { border-color: var(--ct-focus); outline: none; box-shadow: none; }
.ct__field [aria-invalid="true"] { border-color: oklch(62% 0.2 25); }
.ct__send { justify-self: start; }
.ct__form[aria-busy="true"] .ct__send { opacity: 0.7; cursor: progress; }
@media (max-width: 900px) {
  .ct-page { padding: 120px 0 80px; }
  .ct__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ct__form { padding: 24px 20px; }
  .ct__send { justify-self: stretch; }
}
/* this site (Roster theme, light paper): page ink and its grey, theme hairlines, the form on the mist panel (as the team cards), fields on the paper.
   .ct is the comparison table on this site, so the contact section is .ct-page (its --ct-* values and padding only). */
.ct-page { --ct-ink: var(--ink); --ct-ink-2: var(--grey); --ct-line: var(--line); --ct-card: var(--mist); --ct-field: var(--paper); --ct-focus: var(--grey); }