/* ===================================================================
   ERYND — creative digital agency · Vilnius & Mexico City
   Oxblood-dominant editorial system. Cream reversed out. One tight kit,
   repeated. Heavy grotesque clauses + one serif-italic emphasis word.
   All values tokenized — no raw hex in markup.
   =================================================================== */

/* ---- Self-hosted fonts ---- */
@font-face{ font-family:'Schibsted Grotesk'; src:url('../assets/fonts/schibsted-grotesk.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../assets/fonts/inter.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../assets/fonts/fraunces.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face{ font-family:'JetBrains Mono'; src:url('../assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight:100 800; font-style:normal; font-display:swap; }

/* ---- Tokens ---- */
:root{
  --oxblood:    #4C030F;
  --oxblood-hi: #5E0A18;
  --oxblood-lo: #2A0207;
  --cream:      #F4EEE4;
  --cream-card: #F8F2E7;
  --muted:      rgba(244, 238, 228, 0.60);
  --muted-2:    rgba(244, 238, 228, 0.42);
  --ink:        #1A0A0D;
  --ink-muted:  rgba(26, 10, 13, 0.62);
  --accent:     #7A1322;
  --teal:       #2BB0C0;   /* the mark's core — single accent, small solid placements only */
  --line:       rgba(244, 238, 228, 0.18);
  --line-ink:   rgba(26, 10, 13, 0.14);

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 48px);
  --section-y: clamp(5.5rem, 11vw, 11rem);

  /* ~4 sizes */
  --fs-display: clamp(2.75rem, 6.5vw, 6rem);
  --fs-head:    clamp(2rem, 4vw, 3.5rem);
  --fs-body:    clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  --fs-mono:    0.8rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans-display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---- Reset / base ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7rem; }
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(135% 100% at 82% -10%, var(--oxblood-hi) 0%, var(--oxblood) 46%, var(--oxblood-lo) 100%);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* faint film grain */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--cream); color:var(--oxblood); }

/* keep interactive content above grain */
header, main, footer, .cursor, .page-transition, .menu { position:relative; z-index:2; }

/* ---- Layout primitives ---- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section-y); position:relative; }
.lead{ color:var(--muted); max-width:54ch; }
/* Services contextual CTA (line + button, not the full card) */
.svc-cta{ margin-top:clamp(3.5rem,7vw,6rem); display:flex; flex-direction:column; align-items:flex-start; gap:1.6rem; }
.svc-cta__line{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.2; color:var(--cream); max-width:26ch; }

/* ---- Headline system ---- */
.display{ font-family:var(--sans-display); font-weight:680; font-size:var(--fs-display); line-height:0.98; letter-spacing:-0.028em; }
.heading{ font-family:var(--sans-display); font-weight:680; font-size:var(--fs-head); line-height:1.02; letter-spacing:-0.022em; }
.em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; }
.em--box{ background:var(--cream); color:var(--oxblood); padding:0.02em 0.14em; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.em--ul{ text-decoration:underline; text-decoration-thickness:0.055em; text-underline-offset:0.12em; text-decoration-color:var(--cream); }
.em--muted{ color:var(--cream); opacity:0.5; }   /* receding word — clear hierarchy vs the inverted box */

/* ---- Mono meta ---- */
.mono{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:0.04em; color:var(--muted); }

/* ---- Tag pill (eyebrow) ---- */
.tag{
  display:inline-flex; align-items:center; gap:0.55em;
  font-family:var(--sans); font-size:var(--fs-mono); letter-spacing:0.04em;
  padding:0.5em 0.95em; border:1px solid var(--line); border-radius:100px; color:var(--cream);
}
.tag::before{ content:"●"; font-size:0.6em; color:var(--cream); opacity:0.9; }
.tag--ink{ color:var(--ink); border-color:var(--line-ink); }
.tag--ink::before{ color:var(--accent); opacity:1; }

/* ---- Bare section eyebrow (label, NOT a pill) ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--sans); font-size:var(--fs-mono); font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--cream); opacity:0.72;
  margin:0 0 1.4rem;
}
.eyebrow::before{ content:"●"; font-size:0.62em; opacity:0.85; }
.eyebrow--ink{ color:var(--ink); opacity:0.78; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--sans); font-size:0.95rem; font-weight:500; letter-spacing:0.01em;
  padding:0.85em 1.5em; border-radius:100px; cursor:pointer;
  transition:transform 0.4s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn .arrow{ transition:transform 0.4s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--primary{ background:var(--cream); color:var(--ink); border:1px solid var(--cream); }
.btn--primary:hover{ transform:translateY(-2px); background:transparent; color:var(--cream); }
.btn--secondary{ background:transparent; color:var(--cream); border:1px solid var(--line); }
.btn--secondary:hover{ border-color:var(--cream); transform:translateY(-2px); }
/* on cream surfaces */
.on-cream .btn--primary{ background:var(--oxblood); color:var(--cream); border-color:var(--oxblood); }
.on-cream .btn--primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--cream); }
.on-cream .btn--secondary{ color:var(--ink); border-color:var(--line-ink); }
.on-cream .btn--secondary:hover{ border-color:var(--ink); }

/* ---- Chip ---- */
.chips{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.chip{ font-family:var(--sans); font-size:0.9rem; padding:0.55em 1.1em; border-radius:100px; color:var(--cream); background:rgba(244,238,228,0.09); }
.on-cream .chip{ color:var(--ink); background:rgba(76,3,15,0.08); }

/* ---- Stat row ---- */
.stats{ display:flex; flex-wrap:wrap; gap:1.8rem 3.2rem; }
.stats .stat{ min-width:7rem; display:flex; flex-direction:column-reverse; gap:0.5rem; }
.stat__num{ font-family:var(--sans-display); font-weight:650; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; letter-spacing:-0.02em; }
.stat__label{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:0.04em; color:var(--muted); }

/* ---- ERYND aperture mark ---- */
.monogram{ display:block; }
.monogram .mark__blades path{ fill:none; stroke:var(--cream); stroke-width:13; stroke-linecap:round; }
.monogram .mark__ring{ fill:none; stroke:var(--cream); stroke-width:1; }
.monogram .mark__core{ fill:var(--cream); }
.monogram .mark__spark{ fill:var(--cream); }
.monogram .mark__dot{ fill:var(--cream); }
/* XL faded watermark, slowly rotating, bleeding off the hero right edge */
.hero__monogram{
  position:absolute; right:-9%; top:50%;
  width:min(56vw, 660px); opacity:0.08; pointer-events:none; z-index:0;
  transform:translateY(-50%) rotate(0deg);
  animation:spin-mark 90s linear infinite;
}
@keyframes spin-mark{ to{ transform:translateY(-50%) rotate(360deg); } }

/* ---- Marquees ---- */
.marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; width:max-content; will-change:transform; animation:marquee var(--mq,38s) linear infinite; }
.marquee__track > *{ flex:0 0 auto; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

.clients .marquee__track > span{ padding-inline:clamp(1.4rem,3vw,2.6rem); font-family:var(--sans-display); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--cream); opacity:0.78; letter-spacing:0.01em; }
.clients__caption{ margin-bottom:1.3rem; text-transform:uppercase; letter-spacing:0.14em; opacity:0.85; }
/* real client logos rendered mono/cream via mask (recolors any source art) */
.clients .marquee__track{ align-items:center; }
.clients__logo{ display:inline-block; height:clamp(1.2rem,1.8vw,1.5rem); background:var(--cream);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.clients__logo--motorola{ aspect-ratio:205.083 / 46; -webkit-mask-image:url(../assets/logos/motorola.svg); mask-image:url(../assets/logos/motorola.svg); }
.clients__logo--nespresso{ aspect-ratio:216.2 / 41.3; -webkit-mask-image:url(../assets/logos/nespresso.svg); mask-image:url(../assets/logos/nespresso.svg); }

/* ---- Top bar / nav ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
/* stays centered + full-width the whole time — only a blur backdrop appears on scroll */
.nav.is-scrolled{
  background:rgba(42,2,7,0.68); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  max-width:var(--maxw); margin-inline:auto;
  padding:1.3rem var(--pad);
}
.nav__brand{ display:flex; align-items:center; gap:0.6rem; }
.wordmark{ font-family:var(--sans-display); font-weight:700; font-size:1.05rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream); }
.nav__logo{ display:inline-flex; align-items:center; }
.nav__logo img{ height:26px; width:auto; display:block; }
.nav__links{ display:flex; align-items:center; gap:clamp(1.2rem,2.2vw,2rem); }
.nav__links a{ font-size:0.92rem; color:var(--cream); opacity:0.82; transition:opacity 0.3s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"]{ opacity:1; }
.nav__right{ display:flex; align-items:center; gap:1rem; }
.lang{ display:flex; align-items:center; gap:0.35rem; font-family:var(--mono); font-size:var(--fs-mono); }
.lang button{ background:none; border:none; color:var(--muted); cursor:pointer; font:inherit; padding:0.2em; transition:color 0.3s; }
.lang button.is-active{ color:var(--cream); }
.lang span{ color:var(--muted-2); }
.nav__toggle{ display:none; background:none; border:1px solid var(--line); color:var(--cream); border-radius:100px; padding:0.5em 1em; font-family:var(--mono); font-size:var(--fs-mono); cursor:pointer; }

@media(max-width:900px){
  .nav__links, .nav__right .btn{ display:none; }
  .nav__toggle{ display:inline-block; }
}

/* mobile overlay */
.menu{ position:fixed; inset:0; z-index:60; background:var(--oxblood-lo); display:flex; flex-direction:column; justify-content:center; gap:0.3rem; padding:var(--pad); transform:translateY(-100%); transition:transform 0.55s var(--ease); visibility:hidden; }
.menu.is-open{ transform:translateY(0); visibility:visible; }
.menu a{ font-family:var(--sans-display); font-weight:600; font-size:clamp(2rem,8vw,3.2rem); letter-spacing:-0.02em; color:var(--cream); }
.menu a .em{ font-weight:400; }
.menu__close{ position:absolute; top:1.4rem; right:var(--pad); background:none; border:none; color:var(--cream); font-size:2rem; line-height:1; cursor:pointer; }
.menu__meta{ margin-top:2rem; }

/* ---- Hero ---- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:7rem; overflow:hidden; }
.hero__content{ position:relative; z-index:2; max-width:62rem; }
.hero .display{ margin:1.6rem 0; max-width:18ch; line-height:1.1; }   /* more leading so the impact box never crowds the line above */
.hero__sub{ color:var(--muted); max-width:48ch; font-size:clamp(1.05rem,1.3vw,1.25rem); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero__stats{ margin-top:clamp(3rem,6vw,5rem); }

/* ---- Manifesto ---- */
.manifesto__grid{ display:grid; grid-template-columns:1fr; gap:var(--pad); margin-top:2rem; }
@media(min-width:900px){ .manifesto__grid{ grid-template-columns:1.25fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:start; } }
.manifesto__grid .heading{ font-size:clamp(2.3rem,4.8vw,4.1rem); line-height:1.03; }
.manifesto__body p + p{ margin-top:1.1rem; }
.manifesto__body{ color:var(--muted); }
.manifesto__body .chips{ margin-top:1.9rem; }

/* ---- Generic numbered list (services / method / process) ---- */
.numbered{ border-top:1px solid var(--line); margin-top:clamp(2.5rem,5vw,4rem); }
.numbered__item{ display:grid; grid-template-columns:auto 1fr; gap:0.6rem 1.5rem; padding-block:clamp(1.8rem,3.4vw,2.8rem); border-bottom:1px solid var(--line); align-items:baseline; transition:padding-left 0.4s var(--ease); }
.numbered__num{ font-family:var(--mono); font-size:var(--fs-mono); color:var(--muted); }
.numbered__title{ font-family:var(--sans-display); font-weight:650; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-0.02em; line-height:1.04; }
.numbered__desc{ grid-column:2; color:var(--muted); max-width:52ch; }
.numbered__item:hover{ padding-left:clamp(0.4rem,1.4vw,1.2rem); }
@media(min-width:900px){
  .numbered__item{ grid-template-columns:4.5rem 1fr 1fr; gap:2.5rem; }
  .numbered__desc{ grid-column:3; }
}

/* ---- Influence: creator tiles ---- */
.tiles{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:clamp(2.5rem,5vw,4rem); }
@media(min-width:700px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
.tile{ position:relative; border:1px solid var(--line); border-radius:24px; padding:1.6rem; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transition:border-color 0.4s var(--ease), transform 0.5s var(--ease); }
.tile::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, rgba(244,238,228,0.10), transparent 60%); opacity:0; transition:opacity 0.5s var(--ease); }
.tile:hover{ border-color:var(--cream); transform:translateY(-4px); }
.tile:hover::before{ opacity:1; }
.tile__role{ font-family:var(--mono); font-size:var(--fs-mono); color:var(--muted); }
.tile__name{ font-family:var(--sans-display); font-weight:650; font-size:1.4rem; letter-spacing:-0.01em; margin-top:0.3rem; }
.tile__handle{ color:var(--muted); margin-top:0.2rem; }
/* industry cards (Who we work with) — even 3×2 grid, description fills each box */
.tiles--industries .tile{ aspect-ratio:auto; min-height:clamp(190px,15vw,230px); justify-content:space-between; gap:1.4rem; }
.tiles--industries .tile__name{ font-size:clamp(1.4rem,2vw,1.75rem); margin-top:0; }
.tiles--industries .tile__desc{ color:var(--muted); font-size:0.92rem; line-height:1.5; margin-top:0.5rem; max-width:34ch; }

/* process steps */
.steps3{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:clamp(2.5rem,5vw,4rem); }
@media(min-width:768px){ .steps3{ grid-template-columns:repeat(3,1fr); } }
.step{ border:1px solid var(--line); border-radius:24px; padding:1.8rem; }
.step__num{ font-family:var(--mono); font-size:var(--fs-mono); color:var(--muted); }
.step__title{ font-family:var(--sans-display); font-weight:650; font-size:1.5rem; letter-spacing:-0.01em; margin:0.8rem 0 0.5rem; }
.step__title .em{ font-weight:400; }
.step p{ color:var(--muted); }

/* ---- Agency / locations ---- */
.locations{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:clamp(2.5rem,5vw,4rem); }
@media(min-width:768px){ .locations{ grid-template-columns:1fr 1fr; } }
.location{ border:1px solid var(--line); border-radius:24px; padding:2rem; }
.location__city{ font-family:var(--sans-display); font-weight:650; font-size:2rem; letter-spacing:-0.02em; }
.location__meta{ margin-top:0.8rem; }
.about__lead{ max-width:24ch; }
.about__grid{ display:grid; grid-template-columns:1fr; gap:var(--pad); margin-top:2rem; }
@media(min-width:900px){ .about__grid{ grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); } }
.about__body{ color:var(--muted); } .about__body p + p{ margin-top:1.1rem; }

/* ---- Cream contact card ---- */
.contact-card{ background:var(--cream-card); color:var(--ink); border-radius:32px; padding:clamp(2rem,5vw,4.5rem); position:relative; overflow:hidden; }
.contact-card .heading{ color:var(--ink); margin:1.4rem 0; max-width:16ch; }
.contact-card .em--box{ background:var(--oxblood); color:var(--cream); }
.contact-card__grid{ display:grid; grid-template-columns:1fr; gap:2.4rem; position:relative; z-index:2; }
@media(min-width:860px){ .contact-card__grid{ grid-template-columns:1.25fr 0.75fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:stretch; } }
.contact-card__body{ color:var(--ink-muted); max-width:46ch; }
.contact-card__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.8rem; }
.contact-card__reply{ color:var(--ink-muted); margin-top:1.2rem; }
/* right column: mono meta pinned top, mark contained bottom-right — never overlap */
.contact-card__side{ display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
@media(min-width:860px){ .contact-card__side{ align-items:flex-end; text-align:right; } }
.contact-card__meta{ display:flex; flex-direction:column; gap:0.35rem; }
.contact-card__meta .mono{ color:var(--ink-muted); }
.contact-card__mark{ width:clamp(240px, 26vw, 360px); height:auto; margin-top:auto; align-self:flex-end; }
.contact-card__mark .mark__blades path{ stroke:var(--oxblood); stroke-width:12; }
.contact-card__mark .mark__ring{ stroke:var(--oxblood); opacity:0.32; }
.contact-card__mark .mark__core{ fill:var(--teal); }
.contact-card__mark .mark__spark{ fill:var(--cream-card); }
.contact-card__mark .mark__dot{ fill:var(--oxblood); }

/* ---- Intake form (Start) ---- */
.intake{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:860px){ .intake{ grid-template-columns:auto 1fr; gap:clamp(2.5rem,5vw,4.5rem); } }
.stepper{ display:flex; flex-direction:row; gap:1.2rem; }
@media(min-width:860px){ .stepper{ flex-direction:column; gap:1.4rem; } }
.stepper__item{ display:flex; align-items:center; gap:0.7rem; font-family:var(--mono); font-size:var(--fs-mono); color:var(--ink-muted); }
.stepper__dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--oxblood); opacity:0.4; }
.stepper__item.is-active{ color:var(--ink); }
.stepper__item.is-active .stepper__dot, .stepper__item.is-done .stepper__dot{ background:var(--oxblood); opacity:1; }
.intake__panel{ min-height:300px; display:flex; flex-direction:column; }
.intake__step{ display:none; }
.intake__step.is-active{ display:block; animation:fade 0.5s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.intake__step h3{ font-family:var(--sans-display); font-weight:650; font-size:1.5rem; letter-spacing:-0.01em; margin-bottom:1.2rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.1rem; }
.field label{ font-family:var(--mono); font-size:var(--fs-mono); color:var(--ink-muted); letter-spacing:0.04em; text-transform:uppercase; }
.field input, .field textarea{ background:#fff; color:var(--ink); border:1px solid var(--line-ink); border-radius:12px; padding:0.85em 1em; font-family:var(--sans); font-size:1rem; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--oxblood); box-shadow:0 0 0 3px rgba(76,3,15,0.12); }
.field--error input, .field--error textarea{ border-color:var(--accent); }
.field__err{ color:var(--accent); font-size:0.85rem; min-height:1em; }
.selectable{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.selectable input{ position:absolute; opacity:0; pointer-events:none; }
.selectable label{ cursor:pointer; padding:0.6em 1.1em; border:1px solid var(--line-ink); border-radius:100px; transition:all 0.3s var(--ease); font-family:var(--sans); font-size:0.95rem; text-transform:none; color:var(--ink); }
.selectable input:checked + label{ background:var(--oxblood); color:var(--cream); border-color:var(--oxblood); }
.selectable input:focus-visible + label{ outline:2px solid var(--oxblood); outline-offset:2px; }
.intake__nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:1.6rem; }
.intake__progress{ font-family:var(--mono); font-size:var(--fs-mono); color:var(--ink-muted); }
.intake__success{ text-align:left; }

/* ---- FAQ accordion ---- */
.faq{ border-top:1px solid var(--line); margin-top:clamp(2.5rem,5vw,4rem); max-width:60rem; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; background:none; border:none; color:var(--cream); cursor:pointer; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.3rem,2.6vw,2rem) 0; font-family:var(--sans-display); font-weight:600; font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:-0.01em; }
.faq__icon{ flex:0 0 auto; width:1.2em; height:1.2em; position:relative; }
.faq__icon::before, .faq__icon::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--cream); }
.faq__icon::before{ width:1em; height:1.5px; }
.faq__icon::after{ width:1.5px; height:1em; transition:transform 0.4s var(--ease); }
.faq__item.is-open .faq__icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ overflow:hidden; height:0; transition:height 0.45s var(--ease); }
.faq__a-inner{ padding-bottom:clamp(1.3rem,2.6vw,2rem); color:var(--muted); max-width:60ch; }

/* ---- Footer ---- */
.footer{ background:var(--oxblood-lo); padding-top:clamp(3.5rem,7vw,6rem); margin-top:clamp(3rem,6vw,6rem); overflow:hidden; }
.footer__cols{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media(min-width:768px){ .footer__cols{ grid-template-columns:2fr 1fr 1fr; gap:2rem; } }
.footer__tagline{ color:var(--muted); max-width:34ch; margin-top:1rem; }
.footer__col h4{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1rem; }
.footer__col a{ display:block; color:var(--cream); opacity:0.82; padding:0.3rem 0; transition:opacity 0.3s; }
.footer__col a:hover{ opacity:1; }
.footer__marquee{ margin-top:clamp(3rem,6vw,5rem); }
.footer__marquee .marquee__track > span{ font-family:var(--serif); font-style:italic; font-size:clamp(3.5rem,12vw,9rem); color:transparent; -webkit-text-stroke:1px var(--cream); opacity:0.14; padding-inline:0.4em; white-space:nowrap; }
.footer__bottom{ border-top:1px solid var(--line); margin-top:clamp(2rem,4vw,3rem); padding-block:1.6rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; }
.footer__bottom, .footer__bottom a{ font-family:var(--mono); font-size:var(--fs-mono); color:var(--muted); }
.footer__legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }

/* ---- Mouse-following background glow (native cursor kept) ---- */
.cursor-light{
  position:fixed; top:0; left:0; z-index:1; pointer-events:none;
  width:560px; height:560px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(244,238,228,0.11) 0%, rgba(94,10,24,0.12) 36%, transparent 62%);
  mix-blend-mode:screen; will-change:transform;
}
.cursor-light--bright{ width:680px; height:680px; background:radial-gradient(circle, rgba(244,238,228,0.15) 0%, rgba(94,10,24,0.16) 36%, transparent 62%); }

/* ---- Page transition wipe ---- */
.page-transition{ position:fixed; inset:0; z-index:300; background:var(--oxblood-lo); transform:translateY(0); pointer-events:none; }
.page-transition.is-hidden{ transform:translateY(-101%); transition:transform 0.6s var(--ease); }
.page-transition.is-covering{ transform:translateY(0); transition:transform 0.5s var(--ease); }
.page-transition.is-below{ transform:translateY(101%); transition:none; }

/* ---- Scroll reveal ---- */
html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js [data-reveal-group].is-visible .reveal, html.js .reveal.is-visible{ opacity:1; transform:none; }

/* ---- Focus ---- */
:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; border-radius:4px; }
.on-cream :focus-visible, .contact-card :focus-visible, .intake :focus-visible{ outline-color:var(--oxblood); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html.js .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none !important; }
  .page-transition{ display:none !important; }
  .cursor-light{ display:none !important; }
  .hero__monogram{ animation:none !important; }
}