/* Cleancraft — Home (editorial). Components reference style.css tokens only.
   Distinctive UX artifacts: one-screen split hero with interactive arm-index rail,
   hairline-draw section dividers, count-up proof, magnetic CTAs, mint-"+" motif. */

/* ════ HERO — fits one 1080p screen (nav 64px + hero = 100svh) ════ */
.hero { min-height: calc(100svh - var(--nav-h)); display: grid; grid-template-columns: 1.06fr 0.94fr; border-bottom: var(--hair); }
.hero__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vh, 64px) clamp(24px, 4vw, 72px); border-right: var(--hair); }
.hero__eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: clamp(16px, 2.4vh, 28px); }
.hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display); line-height: 1.04; color: var(--c-ink); margin: 0; }
.hero__title em { font-style: italic; color: var(--c-body); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; will-change: transform; }
.hero__sub { font-size: var(--t-md); color: var(--c-body); line-height: 1.7; margin: clamp(18px, 2.6vh, 30px) 0 clamp(22px, 3vh, 34px); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero__trust { list-style: none; padding: clamp(16px, 2.2vh, 24px) 0 0; margin: clamp(22px, 3.4vh, 40px) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); border-top: var(--hair); }
.hero__trust li { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__trust b { color: var(--c-ink); font-weight: 400; }

.hero__media { position: relative; overflow: hidden; background: var(--c-stone); }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 52%, transparent), color-mix(in srgb, var(--c-ink) 12%, transparent) 34%, transparent 52%); pointer-events: none; }
.hero__rail { position: absolute; left: clamp(16px, 2vw, 34px); top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2vh, 22px); text-shadow: 0 1px 16px color-mix(in srgb, var(--c-ink) 60%, transparent); }
.hero__rail a { display: flex; align-items: baseline; gap: var(--s-3); color: var(--c-cream); opacity: 0.82; transition: opacity var(--d-base), transform var(--d-base) var(--ease-out); }
.hero__rail a:hover { opacity: 1; transform: translateX(6px); }
.hero__rail .r-num { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--c-mint); }
.hero__rail .r-name { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); font-weight: 300; }
.hero__rail .r-tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); opacity: .8; }
.hero__scroll { position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2.4vh, 28px); z-index: 2; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-cream); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); }
.hero__scroll span { width: 28px; height: 0.5px; background: color-mix(in srgb, var(--c-cream) 60%, transparent); position: relative; overflow: hidden; }
.hero__scroll span::after { content: ""; position: absolute; inset: 0; background: var(--c-mint); transform: translateX(-100%); animation: scrollwipe 2.2s var(--ease-soft) infinite; }
@keyframes scrollwipe { 0% { transform: translateX(-100%);} 60%,100% { transform: translateX(100%);} }
@media (prefers-reduced-motion: reduce) { .hero__scroll span::after { animation: none; } }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { border-right: 0; order: 2; padding-block: var(--s-12); }
  .hero__media { order: 1; min-height: 54svh; }
  .hero__rail { flex-direction: row; left: 0; right: 0; bottom: 0; top: auto; justify-content: space-around; padding: var(--s-4); background: linear-gradient(transparent, color-mix(in srgb, var(--c-ink) 55%, transparent)); }
  .hero__rail .r-tag, .hero__scroll { display: none; }
  .hero__rail .r-name { font-size: 1.2rem; }
}

/* ════ TRUST STRIP ════ */
/* aligned to the site max-width container (not full-bleed) so it lines up with every other section */
.trust-strip { display: flex; border-bottom: var(--hair); max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.t-item { flex: 1; padding: var(--s-4) var(--s-3); text-align: center; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-muted); border-right: var(--hair); display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.t-item:last-child { border-right: 0; }
.t-item b { color: var(--c-ink); font-weight: 400; }
@media (max-width: 680px) { .trust-strip { flex-wrap: wrap; } .t-item { flex: 1 1 50%; border-bottom: var(--hair); } .t-item:nth-child(even) { border-right: 0; } }

/* ════ CLIENT LOGO WALL ════ */
.clients { padding-block: clamp(48px, 6vw, 88px); border-bottom: var(--hair); }
.clients__head { text-align: left; margin-bottom: clamp(32px, 4vw, 52px); }
.clients__head .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); }
.clients__note { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); margin-top: var(--s-3); }
.clients__wall { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: clamp(30px, 4vw, 60px) clamp(40px, 5.5vw, 84px); }
.clients__wall li { flex: 0 0 auto; width: clamp(116px, 13.5vw, 162px); }
.clients__wall img { width: 100%; height: auto; display: block; }
.clients__dup { display: none; }                 /* duplicate set — only feeds the mobile marquee */
@media (min-width: 800px) {
  /* 9 logos → always 5+4. li = (content − 4×gap)/5 fills the row exactly:
     5li+4g = 100% at any width, and a 6th can never fit (6li+5g > 100% for all W).
     800px floor (not 1200): 4K desktops at 250–300% browser zoom × OS scaling land
     at ~850–1024 CSS px and must still get 2 rows; iPad portrait (768) stays on wrap */
  .clients__wall { gap: clamp(30px, 4vw, 60px) clamp(40px, 4.5vw, 64px); }
  .clients__wall li { width: calc((100% - 4 * clamp(40px, 4.5vw, 64px)) / 5 - 1px); } /* -1px: sub-pixel slack so rounding never wraps the 5th */
}
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 680px) {
  /* single row, auto-scrolling right-to-left; duplicate set makes the loop seamless */
  .clients { overflow: hidden; }
  .clients__wall { flex-wrap: nowrap; width: max-content; gap: 0; animation: logo-marquee 32s linear infinite; will-change: transform; }
  .clients__wall li { width: 116px; margin-right: 40px; }
  .clients__dup { display: block; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  /* motion off → static wrap grid, no duplicates */
  .clients__wall { animation: none; flex-wrap: wrap; width: auto; gap: 30px 40px; }
  .clients__wall li { margin-right: 0; }
  .clients__dup { display: none; }
}

/* ════ SECTION INTRO ════ */
.section-intro { text-align: left; max-width: 640px; margin: 0 0 var(--s-16); display: flex; flex-direction: column; gap: var(--s-4); }
.section-intro .eyebrow { justify-content: flex-start; }
.section-intro h2 { font-size: var(--t-xl); }

/* hairline-draw divider */
.hair-draw { height: 0.5px; background: var(--c-border); transform: scaleX(0); transform-origin: center; }
.hair-draw.is-in { transform: scaleX(1); transition: transform var(--d-slow) var(--ease-out); }

/* ════ THREE ARMS ════ */
.arms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.arm { background: var(--c-cream); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; transition: background var(--d-base) var(--ease-soft); position: relative; }
.arm--mid { background: var(--c-cream-deep); }
.arm:hover { background: var(--c-cream-deep); }
.arm--mid:hover { background: #E6DDCD; }
.arm__num { font-family: var(--font-display); font-style: italic; font-size: var(--t-num); font-weight: 300; color: var(--c-stone); line-height: 1; margin-bottom: var(--s-3); transition: color var(--d-base); }
.arm:hover .arm__num { color: var(--c-mint-deep); }
.arm__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); margin-bottom: var(--s-1); }
.arm__tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); margin-bottom: var(--s-4); }
.arm__desc { font-size: var(--t-sm); color: var(--c-body); line-height: 1.75; margin-bottom: var(--s-6); }
.arm__svcs { list-style: none; padding: var(--s-4) 0 0; margin: 0 0 var(--s-6); border-top: var(--hair); display: flex; flex-direction: column; flex: 1; }
.arm__svcs li { font-size: var(--t-sm); color: var(--c-body); padding: var(--s-2) 0; border-bottom: var(--hair); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.arm__svcs li > .svc-name { display: inline-flex; align-items: center; color: var(--c-body); transition: color var(--d-fast); }
a.svc-name:hover { color: var(--c-ink); }
.arm__svcs li > .svc-name::before { content: "+"; color: var(--c-mint-deep); margin-right: var(--s-2); opacity: 0; transform: translateX(-4px); transition: opacity var(--d-base), transform var(--d-base); }
.arm:hover .arm__svcs li > .svc-name::before { opacity: 1; transform: translateX(0); }
.arm__svcs .pill { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-faint); border: 0.5px solid var(--c-border); padding: 1px var(--s-2); }
.arm__link { align-self: flex-start; }
@media (max-width: 880px) { .arms { grid-template-columns: 1fr; } }

/* ════ SPECIALIST SERVICES (2×2 editorial hairline grid) ════ */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.spec-card { background: var(--c-cream); display: flex; flex-direction: column; transition: background var(--d-base) var(--ease-soft); }
.spec-card:hover { background: var(--c-cream-deep); }
.spec-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-stone); }
.spec-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.spec-card:hover .spec-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .spec-card:hover .spec-card__media img { transform: none; } }
.spec-card__body { padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.spec-card__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); }
.spec-card__desc { font-size: var(--t-sm); color: var(--c-body); line-height: 1.75; flex: 1; }
.spec-card__link { align-self: flex-start; margin-top: var(--s-2); }
@media (max-width: 1024px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .spec-grid { grid-template-columns: 1fr; } }

/* general-care footnote row */
.spec-also { margin-top: var(--s-12); padding-top: var(--s-6); border-top: var(--hair); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-8); }
.spec-also__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
.spec-also__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-6); }
.spec-also__links a { position: relative; font-size: var(--t-sm); color: var(--c-body); padding-bottom: 1px; transition: color var(--d-fast); }
.spec-also__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.5px; background: var(--c-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-out); }
.spec-also__links a:hover { color: var(--c-ink); }
.spec-also__links a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .spec-also__links a::after { display: none; } }

/* ════ EDITORIAL SPLIT ════ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; border: var(--hair); }
.editorial__media { position: relative; overflow: hidden; min-height: 420px; background: var(--c-stone); }
.editorial__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.editorial:hover .editorial__media img { transform: scale(1.04); }
.editorial__text { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); background: var(--c-cream-deep); border-left: var(--hair); }
.editorial__text h2 { font-size: var(--t-xl); }
.editorial__text p { font-size: var(--t-base); color: var(--c-body); line-height: 1.8; }
@media (max-width: 880px) { .editorial { grid-template-columns: 1fr; } .editorial__media { min-height: 300px; } .editorial__text { border-left: 0; border-top: var(--hair); } }

/* ════ MECHANISM ════ */
.mech { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--hair); position: relative; }
.step { padding: clamp(24px, 2.6vw, 40px); border-right: var(--hair); display: flex; flex-direction: column; gap: var(--s-3); }
.step:last-child { border-right: 0; }
.step__num { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--t-num); color: var(--c-stone); line-height: 1; }
.step h3 { font-size: var(--t-lg); }
.step p { font-size: var(--t-sm); color: var(--c-body); line-height: 1.75; }
@media (max-width: 880px) { .mech { grid-template-columns: 1fr; } .step { border-right: 0; border-bottom: var(--hair); } .step:last-child { border-bottom: 0; } }

/* ════ PROOF STATS ════ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.stats .tile-data { border: 0; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ════ AUDIENCE SPLIT ════ */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.audience__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--c-stone); border: var(--hair); }
.audience__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.audience ul { list-style: none; padding: var(--s-4) 0 0; margin: var(--s-4) 0 0; border-top: var(--hair); display: flex; flex-direction: column; }
.audience li { font-size: var(--t-base); color: var(--c-body); padding: var(--s-3) 0; border-bottom: var(--hair); display: flex; align-items: center; gap: var(--s-3); }
.audience li::before { content: "+"; color: var(--c-mint-deep); font-size: 1.1em; }
@media (max-width: 880px) { .audience { grid-template-columns: 1fr; } }

/* ════ TESTIMONIAL ════ */
.quote { text-align: left; max-width: 760px; margin: 0; }
.quote__mark { font-family: var(--font-display); font-style: italic; font-size: 4rem; line-height: 0.5; color: var(--c-mint-deep); display: block; margin-bottom: var(--s-6); }
.quote blockquote { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-style: italic; color: var(--c-ink); line-height: 1.4; margin: 0 0 var(--s-6); }
.quote cite { font-style: normal; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }

/* ════ FINAL CTA ════ */
.cta-final { text-align: left; }
.cta-final .band__head { margin-inline: 0; align-items: flex-start; text-align: left; }
.cta-final h2 { font-size: var(--t-2xl); }
.cta-final .hero__actions { justify-content: flex-start; margin-top: var(--s-8); }

/* reveal primitives (JS adds .is-in; no-JS shows all) */
.r-up { opacity: 0; transform: translateY(24px); }
.r-up.is-in { opacity: 1; transform: none; transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .r-up, .r-up.is-in { opacity: 1 !important; transform: none !important; } }

/* ════════════════════════════════════════════════════════════════════════
   CINEMATIC HERO — restored from the pre-redesign design (commit 9d29e35).
   The old monochrome tokens (ivory / ink / taupe) + Bricolage display font are
   re-declared LOCALLY here so the hero renders exactly as it did, without
   disturbing the editorial cream/brown system the rest of the site now uses.
   ════════════════════════════════════════════════════════════════════════ */
.hero-cine,
.site-nav--overlay {
  --c-ivory:      oklch(97.5% 0.009 100);
  --c-ivory-deep: oklch(94.5% 0.012 96);
  --c-taupe:      oklch(74% 0.03 72);
  --c-ink:        oklch(17% 0.004 80);
  --bg:           oklch(97.5% 0.009 100);
  /* display font intentionally NOT overridden — inherits the editorial
     Cormorant Garamond so the hero reads as one system with the rest of the site */
}

.hero-cine {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: clip; isolation: isolate; /* fixed overlay nav is out of flow — hero already starts at y=0 */
}
.hero-cine__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  /* warm gradient = load fallback behind the photo */
  background:
    radial-gradient(130% 90% at 64% 24%, color-mix(in oklch, var(--c-taupe) 62%, var(--bg)), transparent 58%),
    linear-gradient(158deg, var(--c-ivory-deep) 0%, color-mix(in oklch, var(--c-taupe) 72%, var(--c-ink)) 64%, var(--c-ink) 100%);
}
.hero-cine__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transform-origin: 62% 42%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cine__photo[data-kenburns] { animation: kenburns 26s var(--ease-soft) infinite alternate; }
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.6%, -1.8%, 0); }
}
.hero-cine__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* bottom-up + left-side wash so bottom-left text stays legible over bright photos */
  background:
    linear-gradient(to top,
      color-mix(in oklch, var(--c-ink) 88%, transparent) 0%,
      color-mix(in oklch, var(--c-ink) 52%, transparent) 34%,
      color-mix(in oklch, var(--c-ink) 12%, transparent) 62%,
      transparent 82%),
    linear-gradient(to right,
      color-mix(in oklch, var(--c-ink) 68%, transparent) 0%,
      color-mix(in oklch, var(--c-ink) 22%, transparent) 34%,
      transparent 62%);
}
/* On tall mobile viewports the text block sits ~25-40% up the hero, where the
   default bottom-up scrim has already faded out — light text then lands on the
   bright photo. Darken the whole column and add a text-shadow safety net. */
@media (max-width: 640px) {
  .hero-cine__scrim {
    background:
      linear-gradient(to top,
        color-mix(in oklch, var(--c-ink) 92%, transparent) 0%,
        color-mix(in oklch, var(--c-ink) 74%, transparent) 42%,
        color-mix(in oklch, var(--c-ink) 48%, transparent) 72%,
        color-mix(in oklch, var(--c-ink) 24%, transparent) 100%);
  }
  .hero-cine__eyebrow,
  .hero-cine__title,
  .hero-cine__sub { text-shadow: 0 1px 20px color-mix(in oklch, var(--c-ink) 55%, transparent); }
}

/* ---- inner-page cinematic hero (shorter than the 100svh home hero) ---- */
.hero-cine--inner { min-height: clamp(400px, 58svh, 600px); }
.hero-cine--inner .hero-cine__inner { padding-top: var(--s-16); padding-bottom: var(--s-16); }
.hero-cine--inner .hero-cine__title { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.2rem); max-width: 20ch; }
.hero-cine--inner .hero-cine__sub { max-width: 46ch; }
.hero-cine--inner .breadcrumb,
.hero-cine--inner .breadcrumb a,
.hero-cine--inner .breadcrumb span[aria-current] { color: color-mix(in oklch, var(--c-ivory) 78%, transparent); }
.hero-cine--inner .breadcrumb a:hover { color: var(--c-ivory); }
.hero-cine--inner .breadcrumb__sep { color: var(--c-mint); }
.hero-cine__inner .breadcrumb { margin-bottom: var(--s-5); }
.hero-cine__inner { width: 100%; color: var(--c-ivory); padding-top: var(--s-24); padding-bottom: clamp(var(--s-24), 12vh, var(--s-32)); }
.hero-cine__eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); font-weight: 400; color: color-mix(in oklch, var(--c-ivory) 82%, transparent); }
.hero-cine__title {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: 0; line-height: 1.02; margin-top: var(--s-4); color: var(--c-ivory);
  font-size: clamp(3rem, 2rem + 6vw, 6.6rem);
}
.hero-cine__title em { font-style: italic; color: color-mix(in oklch, var(--c-ivory) 90%, var(--c-taupe)); }
.hero-cine__sub { margin-top: var(--s-6); max-width: 52ch; font-size: var(--t-md); color: color-mix(in oklch, var(--c-ivory) 90%, transparent); }
.hero-cine__actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }
/* on-photo button treatment — scoped to the hero so the editorial CTA buttons stay editorial */
.hero-cine .btn--on-photo { background: var(--c-ivory); color: var(--c-ink); border-color: var(--c-ivory); }
.hero-cine .btn--on-photo:hover { background: #fff; }
.hero-cine .btn--ghost-photo {
  background: color-mix(in oklch, var(--c-ink) 24%, transparent); color: var(--c-ivory);
  border-color: color-mix(in oklch, var(--c-ivory) 50%, transparent); backdrop-filter: blur(4px);
}
.hero-cine .btn--ghost-photo:hover { border-color: var(--c-ivory); background: color-mix(in oklch, var(--c-ink) 36%, transparent); }
.hero-cine__trust {
  display: flex; gap: var(--s-6); margin-top: var(--s-12); flex-wrap: wrap; list-style: none; padding: 0;
  padding-top: var(--s-6); border-top: 1px solid color-mix(in oklch, var(--c-ivory) 26%, transparent);
}
.hero-cine__trust li { font-size: var(--t-sm); color: color-mix(in oklch, var(--c-ivory) 82%, transparent); font-weight: 300; }
.hero-cine__trust b { color: var(--c-ivory); font-weight: 400; }
.hero-cine__scroll {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;
  bottom: calc(var(--sticky-h) + var(--s-3));
  width: 26px; height: 42px; border: 1.5px solid color-mix(in oklch, var(--c-ivory) 55%, transparent);
  border-radius: 14px; display: grid; place-items: start center; padding-top: 7px;
}
.hero-cine__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--c-ivory); display: block; }
@media (prefers-reduced-motion: no-preference) { .hero-cine__scroll span { animation: scrollbob 1.7s var(--ease-soft) infinite; } }
@keyframes scrollbob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(11px); opacity: 0.25; } }
@media (max-width: 640px) { .hero-cine__scroll { display: none; } }

/* ---- overlay nav (home only): transparent over hero → solid on scroll ---- */
.site-nav--overlay { position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background var(--d-base) var(--ease-soft), border-color var(--d-base) var(--ease-soft); }
.site-nav--overlay::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklch, var(--c-ink) 45%, transparent), transparent); transition: opacity var(--d-base) var(--ease-soft); }
.site-nav--overlay.is-solid::after { opacity: 0; }
.site-nav--overlay .site-nav__links > a,
.site-nav--overlay .site-nav__links .nav-mega__trigger,
.site-nav--overlay .site-nav__toggle { color: var(--c-ivory); }
.site-nav--overlay .site-nav__links > a:hover,
.site-nav--overlay .site-nav__links .nav-mega__trigger:hover { color: #fff; }
.site-nav--overlay.is-solid { background: color-mix(in oklch, var(--c-cream) 92%, transparent); backdrop-filter: blur(8px); border-bottom-color: var(--c-border); }
.site-nav--overlay.is-solid .site-nav__toggle { color: var(--c-ink); }
.site-nav--overlay.is-solid .site-nav__links > a,
.site-nav--overlay.is-solid .site-nav__links .nav-mega__trigger { color: var(--c-body); }
.site-nav--overlay.is-solid .site-nav__links > a:hover,
.site-nav--overlay.is-solid .site-nav__links .nav-mega__trigger:hover { color: var(--c-ink); }

/* fixed-nav anchor offset so jump targets aren't hidden behind the overlay bar (home only) */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }