/* =============================================================================
   CarePoint v6: styles
   Direction: thinkcompany.com (deep navy, two-tone display type, mono labels,
   cream sections, serif statements, an orange call band) in CarePoint's colours.
   ============================================================================= */

/* fonts, served from the site (latin and latin-ext; the variable ones cover their weights in one file) */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/geist-latin.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: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/newsreader-italic-latin.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: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/newsreader-latin.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: "Schibsted Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin.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: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-mono-latin.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; }

:root {
  --navy: #061E3A;
  --navy-deep: #03132A;
  --orange: #F06A12;
  --orange-hi: #FF7B26;
  --cream: #FAF7EE;
  --cream-2: #F1ECDF;
  --white: #FFFFFF;

  --ink: var(--navy);
  --ink-70: rgba(6, 30, 58, .72);
  --ink-55: rgba(6, 30, 58, .66);   /* at least 4.5:1 on cream and white */
  --orange-ink: #9E4208;            /* orange for small text on light grounds (6.5:1) */
  --line: rgba(6, 30, 58, .14);
  --line-strong: rgba(6, 30, 58, .22);
  --c-90: rgba(250, 247, 238, .9);
  --c-75: rgba(250, 247, 238, .76);
  --c-55: rgba(250, 247, 238, .58);
  --line-d: rgba(250, 247, 238, .16);

  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "Space Mono", ui-monospace, Menlo, monospace;

  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);      /* reveals and line rises */
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);   /* things that travel while visible: the photo shutter */

  --bg-navy:
    radial-gradient(55% 60% at 88% -5%, rgba(150, 180, 222, .30), transparent 70%),
    radial-gradient(40% 55% at -5% 38%, rgba(128, 160, 212, .22), transparent 70%),
    radial-gradient(50% 45% at 62% 112%, rgba(240, 106, 18, .14), transparent 70%),
    var(--navy);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }

/* navy sections: deep navy with soft blue and orange light */
.navy-bg { position: relative; isolation: isolate; background: var(--bg-navy); }
.navy-bg > .wrap { position: relative; z-index: 1; }

/* type primitives */
.mono { font-family: var(--f-mono); font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.label { color: var(--ink-70); }
.label-d { color: var(--c-55); }
.kicker-d { color: var(--c-75); }
.dot { display: inline-block; width: 6px; height: 6px; margin: 0 10px; border-radius: 50%; background: var(--orange); vertical-align: middle; transform: translateY(-1px); }
.hl { color: var(--orange); }
.lm { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.ln { display: inline-block; white-space: nowrap; will-change: transform; }

.h2 {
  font: 500 clamp(40px, 5.6vw, 84px)/1 var(--f-display);
  letter-spacing: -.035em;
  margin: 18px 0 0;
  text-wrap: balance;
}
.h2-orange { color: var(--orange); }
.lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-70); max-width: 620px; margin-top: 22px; }
.dark .lede { color: var(--c-75); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  font: 600 15.5px/1 var(--f-body); text-decoration: none;
  transition: background-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: var(--navy-deep); }
.btn-orange:hover { background: var(--orange-hi); box-shadow: 0 10px 30px -10px rgba(240, 106, 18, .7); }
.btn-navy { background: var(--navy-deep); color: var(--cream); }
.btn-navy:hover { background: var(--navy); }
.btn-line { background: transparent; color: var(--navy-deep); box-shadow: inset 0 0 0 1.5px var(--navy-deep); }
.btn-line:hover { background: rgba(3, 19, 42, .08); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--ink); }
.link-arrow svg, .sq-arrow svg, .ap-go svg, .svc-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.link-arrow:hover svg, .svc-cta:hover svg { transform: translateX(3px); }

/* =============================================================================
   Top bar + menu
   ============================================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: 92px; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  pointer-events: none; transition: height .4s var(--ease);
}
.topbar > * { pointer-events: auto; }
/* past the film the bar turns to frosted glass, tinted by the section under it (app.js sets t-light,
   t-dark or t-orange from the sections' data-bar) */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bar-bg, transparent); box-shadow: inset 0 -1px 0 var(--bar-line, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  opacity: 0; transition: opacity .4s var(--ease), background-color .3s ease;
}
.topbar.t-light { --bar-bg: rgba(250, 247, 238, .68); --bar-line: rgba(6, 30, 58, .08); --bar-ink: var(--navy); }
.topbar.t-dark { --bar-bg: rgba(3, 19, 42, .52); --bar-line: rgba(250, 247, 238, .1); --bar-ink: var(--cream); }
.topbar.t-orange { --bar-bg: rgba(3, 19, 42, .66); --bar-line: rgba(3, 19, 42, .2); --bar-ink: var(--cream); }   /* dark enough that the orange in the logo reads */
.topbar.is-past:not(.menu-open) { height: 72px; }
.topbar.is-past:not(.menu-open)::before { opacity: 1; }
.tb-logo { position: relative; display: block; }
.tb-logo img { height: 36px; width: auto; transition: opacity .3s ease; }
.tb-logo .lg-n { position: absolute; left: 0; top: 0; opacity: 0; }
.topbar.is-past.t-light:not(.menu-open) .lg-w { opacity: 0; }
.topbar.is-past.t-light:not(.menu-open) .lg-n { opacity: 1; }
.tb-links { display: none; margin: 0 auto; gap: 30px; }
.tb-links a { font: 500 14.5px/1 var(--f-body); color: var(--bar-ink, var(--cream)); text-decoration: none; text-underline-offset: 6px; text-decoration-color: var(--orange); transition: color .3s ease; }
.tb-links a:hover { text-decoration-line: underline; }
@media (min-width: 1081px) { .topbar.is-past:not(.menu-open) .tb-links { display: flex; } }
.tb-pill { transition: opacity .45s var(--ease), background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.tb-right { display: flex; align-items: center; gap: 12px; }
.tb-pill {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px;
  font: 500 14.5px/1 var(--f-body); color: var(--cream); text-decoration: none;
  background: rgba(250, 247, 238, .08); box-shadow: inset 0 0 0 1px rgba(250, 247, 238, .22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tb-pill:hover { background: rgba(250, 247, 238, .16); }
.topbar.is-past.t-light:not(.menu-open) .tb-pill { background: var(--navy); color: var(--cream); box-shadow: none; }
.topbar.menu-open .tb-pill { opacity: 0; visibility: hidden; }

.menu-btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--orange); display: grid; place-items: center;
  box-shadow: 0 8px 24px -8px rgba(240, 106, 18, .6);
  transition: transform .3s var(--ease), background-color .25s;
}
.menu-btn:hover { transform: scale(1.06); background: var(--orange-hi); }
.topbar.on-orange:not(.menu-open) .menu-btn { background: var(--navy-deep); box-shadow: 0 8px 24px -8px rgba(3, 19, 42, .6); }
.topbar.on-orange:not(.menu-open) .mb-lines span { background: var(--cream); }
.mb-lines { position: relative; width: 18px; height: 10px; }
.mb-lines span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--navy-deep); transition: transform .35s var(--ease), top .35s var(--ease); }
.mb-lines span:first-child { top: 0; }
.mb-lines span:last-child { top: 8px; }
.menu-btn[aria-expanded="true"] .mb-lines span:first-child { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .mb-lines span:last-child { top: 4px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: minmax(320px, 34%) 1fr;
  /* frosted glass over the page, with a warm glow low down */
  background:
    radial-gradient(70% 60% at 70% 105%, rgba(240, 106, 18, .32), transparent 70%),
    radial-gradient(50% 50% at 90% 0%, rgba(150, 180, 222, .16), transparent 70%),
    rgba(3, 19, 42, .62);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  clip-path: circle(0 at calc(100% - var(--pad) - 28px) 46px);
  transition: clip-path .7s cubic-bezier(.7, 0, .2, 1);
}
.menu.open { clip-path: circle(150% at calc(100% - var(--pad) - 28px) 46px); }
.menu[hidden] { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu { background: radial-gradient(70% 60% at 70% 105%, rgba(240, 106, 18, .45), transparent 70%), var(--navy-deep); }
}
.menu > * { position: relative; z-index: 1; }
.menu-side {
  display: flex; flex-direction: column; gap: 40px;
  padding: 128px var(--pad) 32px; border-right: 1px solid var(--line-d);
  background: rgba(3, 19, 42, .32); overflow-y: auto;
}
.menu-links { list-style: none; margin-top: 18px; }
.menu-links li { margin: 4px 0; }
.menu-links a { font: 500 clamp(28px, 2.8vw, 40px)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--cream); text-decoration: none; transition: color .2s; }
.menu-links a:hover { color: var(--orange); }
.menu-contact { display: flex; flex-direction: column; gap: 6px; color: var(--c-75); font-size: 15px; }
.menu-contact .mono { margin-bottom: 10px; }
.menu-contact a { color: var(--cream); text-decoration: none; }
.menu-contact a:hover { color: var(--orange); }
.menu-card { margin-top: auto; padding: 20px; border-radius: 16px; background: rgba(250, 247, 238, .06); box-shadow: inset 0 0 0 1px var(--line-d); }
.menu-card p { font: 600 20px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--cream); margin-bottom: 14px; }
.menu-stage { display: grid; place-items: center; overflow: hidden; }
.menu-giant { font: 700 clamp(64px, 11vw, 190px)/.9 var(--f-display); letter-spacing: -.045em; color: var(--orange); opacity: .5; white-space: nowrap; }
.menu .menu-side > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu.open .menu-side > * { opacity: 1; transform: none; }
.menu.open .menu-side > :nth-child(1) { transition-delay: .22s; }
.menu.open .menu-side > :nth-child(2) { transition-delay: .3s; }
.menu.open .menu-side > :nth-child(3) { transition-delay: .38s; }

/* =============================================================================
   WhatsApp
   ============================================================================= */
.wa-wrap { position: fixed; right: 20px; bottom: 28px; z-index: 55; }
.wa {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 15px; border-radius: 999px;
  background: #25D366; color: #072B14; text-decoration: none; font: 600 15px/1 var(--f-body);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease);
}
.wa:hover { transform: translateY(-2px); }
.wa-wrap { transition: transform .45s var(--ease), opacity .3s ease; }
.wa-wrap.compact .wa { width: 56px; height: 56px; padding: 0; justify-content: center; }
.wa-wrap.compact .wa svg { width: 28px; height: 28px; }
.wa-wrap.compact .wa-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wa-wrap.away { transform: translateY(150%); opacity: 0; pointer-events: none; }   /* the contact section has its own WhatsApp links */
.tb-wa {
  display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center;
  background: #25D366; color: #072B14; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}
.tb-wa svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 1080px) {   /* phones and tablets: WhatsApp lives in the top bar, so it never covers text */
  .tb-wa { display: grid; }
  .wa-wrap { display: none; }
}
.wa svg { width: 24px; height: 24px; fill: currentColor; }

/* =============================================================================
   Hero + film
   ============================================================================= */
/* 8 chapters + the end card held one screen + one screen in which the services sheet slides over it */
.film { position: relative; height: 1100vh; background: var(--navy); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; transform-origin: 50% 35%; }
.stage::after {   /* darkens the held film as the sheet covers it (--cov from app.js) */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--navy-deep); opacity: calc(var(--cov, 0) * .55);
}

.hero {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(104px, 15vh, 150px) var(--pad) 0;
  will-change: transform, opacity;
}
.hero .kicker-d { margin-bottom: 22px; }
.hero-h {
  font: 600 clamp(44px, 6.4vw, 96px)/.98 var(--f-display);
  letter-spacing: -.038em; color: var(--cream);
}
.hero-sub { max-width: 600px; margin-top: 22px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.5; color: var(--c-75); }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.ask-pill {
  position: relative; display: inline-flex; align-items: center; gap: 20px;
  height: 58px; padding: 0 8px 0 26px; border-radius: 999px;
  background: rgba(250, 247, 238, .07); box-shadow: inset 0 0 0 1px rgba(250, 247, 238, .2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--cream); font: 500 15.5px/1 var(--f-body); text-decoration: none;
  transition: background-color .25s;
}
.ask-pill::after {   /* orange glow under the pill */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--orange); box-shadow: 0 0 18px 4px rgba(240, 106, 18, .55); opacity: .9;
}
.ask-pill:hover { background: rgba(250, 247, 238, .13); }
.ap-go { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--navy-deep); }
.ask-pill:hover .ap-go svg { transform: translateX(2px); }
.hint { color: var(--c-55); font-size: 12px; }
.card-slot { flex: none; width: min(980px, 66vw); aspect-ratio: 16 / 9; margin-top: clamp(28px, 5vh, 56px); visibility: hidden; }

/* intro on first paint (pure CSS, so it never waits for the script or the film): the headline lines
   rise out of their masks, the rest fades up, the photos settle. Reduced motion: no intro at all. */
@keyframes rise { from { transform: translateY(108%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { opacity: 0; scale: .9; } }   /* scale, not transform: JS drives transform on scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .ln { animation: rise 1.1s var(--ease) both; }
  .js .hero .lm:nth-child(2) .ln { animation-delay: .08s; }
  .js .hero .kicker-d, .js .hero-sub { animation: fade-up .9s var(--ease) .12s both; }
  .js .hero-actions { animation: fade-up .9s var(--ease) .22s both; }
  .js .floats .float { animation: settle 1.4s var(--ease) .4s both; }
}

/* floating photos around the headline */
.floats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.float {
  position: absolute; width: clamp(130px, 13vw, 210px); aspect-ratio: 4 / 5;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6);
}
.float-in { position: relative; width: 100%; height: 100%; animation: bob 7s ease-in-out infinite alternate; }
/* every 5 s app.js lays new photos on all four and they fade in over the old ones together */
.float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease-in-out; }
.float img.enter { opacity: 0; }
.f1 { left: 2.5%; top: 100px; width: clamp(120px, 11vw, 180px); }
.f2 { right: 2.5%; top: 108px; aspect-ratio: 1; width: clamp(120px, 11vw, 180px); }
.f3 { left: 6%; top: 55%; aspect-ratio: 1; width: clamp(110px, 10vw, 170px); }
.f4 { right: 3%; top: 50%; }
.f2 .float-in { animation-delay: -2s; }
.f3 .float-in { animation-delay: -4s; }
.f4 .float-in { animation-delay: -1s; }
@keyframes bob { from { transform: scale(1.08) translateY(-6px); } to { transform: scale(1.08) translateY(6px); } }

#film-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }

/* everything placed on the film card */
.js .card-ui:not(.placed) { visibility: hidden; }   /* shown once app.js has put it on the card: no layout jump */
.card-ui {
  position: absolute; z-index: 4; pointer-events: none;
  left: var(--cx, 0); top: var(--cy, 0); width: var(--cw, 100%); height: var(--ch, 100%);
  border-radius: var(--cr, 0); overflow: hidden;
}
.card-ui::before,
.card-ui::after {   /* soft shades: along the top for the logo and menu, along the bottom for the timecode */
  content: ""; position: absolute; left: 0; right: 0; height: 160px;
  opacity: var(--ui, 0);
}
.card-ui::before { top: 0; background: linear-gradient(180deg, rgba(3, 19, 42, .55), transparent); }
.card-ui::after { bottom: 0; background: linear-gradient(0deg, rgba(3, 19, 42, .5), transparent); }
.scrim { position: absolute; inset: 0; opacity: 0; }
.sc-left { background: linear-gradient(90deg, rgba(3, 19, 42, .8) 0%, rgba(3, 19, 42, .5) 36%, rgba(3, 19, 42, 0) 66%); }
.sc-right { background: linear-gradient(270deg, rgba(3, 19, 42, .8) 0%, rgba(3, 19, 42, .5) 36%, rgba(3, 19, 42, 0) 66%); }

.chapters { position: absolute; inset: 0; }
.chap {
  position: absolute; top: 50%; max-width: 62%;
  transform: translateY(-50%);
  visibility: hidden; opacity: 0;
}
.chap.on { visibility: visible; }
.side-left { left: 6%; }
.side-right { right: 6%; }
.chap-h {
  font: 600 clamp(60px, 7.8vw, 124px)/.94 var(--f-display);
  letter-spacing: -.042em; color: var(--cream);
  margin: 18px 0 24px;
  text-shadow: 0 2px 30px rgba(3, 19, 42, .25);
}
.chap-sub { max-width: 440px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--c-90); }

.timecode { position: absolute; left: 26px; bottom: 24px; color: var(--c-90); opacity: calc(var(--ui, 0) * (1 - var(--end, 0))); letter-spacing: .1em; }
.end-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--cream); white-space: nowrap; opacity: var(--end, 0); }
.eh-arrow { display: inline-block; margin-left: 6px; color: var(--orange); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(250, 247, 238, .16); opacity: var(--ui, 0); }
.progress span { display: block; height: 100%; width: 0; background: var(--orange); }

/* =============================================================================
   Sections
   ============================================================================= */
.light { background: var(--cream); color: var(--ink); }
.dark { color: var(--cream); }

.sec-head { max-width: 920px; }
.sec-head .h2 { text-wrap: balance; }

/* ---------- services ---------- */
.services {
  position: relative; z-index: 2;
  margin-top: -100vh;   /* slides up over the last screen of the film */
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -24px 60px -20px rgba(3, 19, 42, .5);
  padding: clamp(84px, 11vw, 160px) 0 clamp(84px, 10vw, 140px);
}
.svc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 44px 0 52px; }
.svc-nav a {
  padding: 11px 18px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .2s, color .2s, box-shadow .2s;
}
.svc-nav a:hover { background: var(--navy); color: var(--cream); box-shadow: none; }

.svc-list { display: grid; gap: 22px; }
.svc-card {
  position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 64px);
  padding: clamp(18px, 2.6vw, 36px); border-radius: 28px; background: var(--cream-2);
  scroll-margin-top: 24px;
}
.svc-card.flip .svc-img { order: -1; }
/* wide screens: the cards stack. app.js adds .stack and sets each card's --stick (it sticks once it
   has been seen whole, a little lower than the one before) and --under (0…1 as the next card covers it) */
.svc-list.stack .svc-card { position: sticky; top: var(--stick, 84px); transform-origin: 50% 0; }
.svc-list.stack .svc-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--navy-deep); opacity: calc(var(--under, 0) * .2);
}
.svc-text { display: flex; flex-direction: column; padding: clamp(6px, 1.4vw, 22px) clamp(0px, 1vw, 12px); }
.svc-tag { align-self: flex-start; display: inline-flex; gap: 10px; padding: 7px 11px; border-radius: 7px; background: rgba(6, 30, 58, .07); color: var(--ink-70); font-size: 12px; }
/* each service's list opens from "What's included": the cards stay short enough to stack on laptops */
.svc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px;
  margin-top: 24px; padding: 0 2px; border: 0; border-top: 1px solid var(--line); background: none;
  font: 600 15.5px/1.2 var(--f-body); color: var(--ink); text-align: left; transition: color .2s;
}
.svc-toggle:hover { color: var(--orange-ink); }
.svc-toggle::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.svc-card.open .svc-toggle::after { transform: translateY(2px) rotate(-135deg); }
.svc-count { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(6, 30, 58, .08); font-weight: 500; font-size: 13px; color: var(--ink); }
.svc-toggle > span:first-child { flex: 1; }
.svc-card:not(.open) .svc-subs { display: none; }
.svc-card.open .svc-subs { margin-top: 4px; }
.svc-tag b { color: var(--orange-ink); font-weight: 400; }
.svc-name { font: 600 clamp(32px, 3.5vw, 52px)/1.02 var(--f-display); letter-spacing: -.032em; margin: 24px 0 16px; }
.svc-intro { font: 400 clamp(20px, 1.85vw, 27px)/1.3 var(--f-serif); letter-spacing: -.005em; color: var(--ink); max-width: 560px; }
.svc-subs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin-top: 30px; }
.svc-subs li { padding: 13px 0 14px; border-top: 1px solid var(--line); }
.sub-n { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.sub-d { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-55); }
.badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px; background: var(--orange); color: var(--navy-deep); font: 400 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.svc-cta {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 10px; background: var(--navy); color: var(--cream);
  font-weight: 500; font-size: 15px; text-decoration: none; transition: background-color .2s;
}
.svc-cta:hover { background: var(--navy-deep); }
.svc-subs + .svc-cta { margin-top: 30px; }
.svc-img { position: relative; min-height: 440px; border-radius: 18px; overflow: hidden; background: var(--navy); }
.svc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.svc-more { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 44px; }
.ghost-pill {
  position: relative; display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 999px;
  background: rgba(6, 30, 58, .07); text-decoration: none; font-weight: 500; transition: background-color .2s;
}
.ghost-pill::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--orange); box-shadow: 0 0 14px 3px rgba(240, 106, 18, .45); }
.ghost-pill:hover { background: rgba(6, 30, 58, .12); }

/* ---------- who we work with ---------- */
.who { padding: clamp(96px, 12vw, 170px) 0; }
.who-rows { list-style: none; margin-top: clamp(48px, 6vw, 80px); }
.who-rows li {
  position: relative; display: grid; grid-template-columns: 1fr 1.15fr 48px; gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 3vw, 36px) 0;
}
/* the line above each row (drawn across as the row arrives) */
.who-rows li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-d); transform-origin: left; }
.who-rows li:last-child { border-bottom: 1px solid var(--line-d); }
.who-n { font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--f-serif); color: var(--cream); }
.who-d { font: 600 clamp(16.5px, 1.45vw, 20.5px)/1.4 var(--f-body); color: var(--cream); max-width: 520px; }
.sq-arrow {
  width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(250, 247, 238, .08); box-shadow: inset 0 0 0 1px var(--line-d); color: var(--cream);
  transition: background-color .2s, color .2s;
}
.sq-arrow:hover { background: var(--orange); color: var(--navy-deep); }
.sq-arrow:hover svg { transform: translateX(2px); }

/* ---------- site visit ---------- */
.visit { padding: clamp(96px, 11vw, 160px) 0; }
.visit-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.visit-copy { position: sticky; top: 110px; }
.call-block { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.cb-num { font: 600 clamp(28px, 2.6vw, 36px)/1.1 var(--f-display); letter-spacing: -.02em; text-decoration: none; }
.cb-num:hover { color: var(--orange); }
.cb-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cb-links a { font-weight: 500; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.cb-hours { font-size: 14px; color: var(--ink-55); }

.form-card {
  padding: clamp(22px, 3.4vw, 48px); border-radius: 28px; background: var(--white);
  box-shadow: 0 1px 0 rgba(6, 30, 58, .05), 0 40px 80px -48px rgba(6, 30, 58, .35);
}
.fq { border: 0; padding: 0; margin: 0 0 38px; min-width: 0; }
.fq-h { display: flex; align-items: baseline; gap: 12px; padding: 0; font: 600 clamp(21px, 1.8vw, 25px)/1.2 var(--f-display); letter-spacing: -.02em; }
.fq-n { color: var(--orange-ink); letter-spacing: .08em; }
.fq-hint { margin: 8px 0 18px; font-size: 14.5px; color: var(--ink-55); }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick {
  position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 3px 12px; align-items: start;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .2s, background-color .2s;
}
.pick:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-mark { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(6, 30, 58, .4); position: relative; transition: background-color .2s, box-shadow .2s; }
.pick-mark::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--navy-deep); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); }
.pick-n { font-weight: 600; font-size: 15px; line-height: 1.3; }
.pick-d { grid-column: 2; font-size: 13px; line-height: 1.4; color: var(--ink-55); }
.pick:has(input:checked) { background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--navy); }
.pick input:checked + .pick-mark { background: var(--orange); box-shadow: none; }
.pick input:checked + .pick-mark::after { transform: rotate(45deg) scale(1); }
.pick input:focus-visible + .pick-mark { outline: 2px solid var(--orange); outline-offset: 2px; }
.pick-other { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14.5px; cursor: pointer; }
.pick-other input, .f-chips input { accent-color: var(--orange); }
.pick-other input { width: 18px; height: 18px; }

.fq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f { min-width: 0; }
.f-wide { grid-column: 1 / -1; }
.f label, .f-chips legend { display: block; margin-bottom: 8px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-70); }
.opt { font-weight: 400; color: var(--ink-55); }
.f input, .f textarea {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: #FCFBF7;
  box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 400 16px/1.4 var(--f-body);
  transition: box-shadow .2s, background-color .2s;
}
.f textarea { resize: vertical; min-height: 96px; }
.f input::placeholder, .f textarea::placeholder { color: rgba(6, 30, 58, .38); }
.f input:focus, .f textarea:focus { outline: 0; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 4px rgba(240, 106, 18, .22); }
.f .invalid { background: #FFF5EF; box-shadow: inset 0 0 0 1.5px #C2410C; }
.f-chips { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; margin: 0; font-weight: 400; color: var(--ink); cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 10px 16px; border-radius: 999px; font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .2s, color .2s, box-shadow .2s; }
.chips label:hover span { box-shadow: inset 0 0 0 1px var(--navy); }
.chips input:checked + span { background: var(--navy); color: var(--cream); box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.f-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.f-note { font-size: 14px; color: var(--ink-55); }
.f-privacy { margin-top: 18px; font-size: 13px; color: var(--ink-55); }
.f-privacy a { color: var(--ink); text-underline-offset: 3px; }
.f-error { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #FEF3F2; color: #B42318; font-size: 14.5px; }
.f-error a { color: inherit; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks:focus { outline: 0; }
.thanks-h { margin-top: 14px; font: 600 clamp(32px, 3.4vw, 44px)/1.05 var(--f-display); letter-spacing: -.03em; }
.thanks a { text-underline-offset: 3px; }

/* ---------- call band ---------- */
.band {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(96px, 12vw, 160px) 0 clamp(130px, 15vw, 200px);
  background: var(--orange); color: var(--navy-deep);
}
.band-in { position: relative; z-index: 1; }
.band-h { font: 400 clamp(38px, 4.8vw, 68px)/1.08 var(--f-serif); letter-spacing: -.012em; color: var(--white); }
.band-p { margin: 18px auto 32px; font-size: clamp(16.5px, 1.35vw, 19px); color: rgba(3, 19, 42, .86); max-width: 560px; }
.band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.band-dots {
  position: absolute; top: 0; right: 0; width: 42%; height: 80%;
  background-image: radial-gradient(rgba(3, 19, 42, .38) 1.3px, transparent 1.7px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 65%); mask-image: linear-gradient(225deg, #000 10%, transparent 65%);
}
.band-ticks { position: absolute; left: 0; bottom: 0; width: 56%; height: 96px; }
.band-ticks line { stroke: var(--navy-deep); stroke-width: 1.5; }

/* ---------- footer ---------- */
/* navy at the top, an orange glow rising from the bottom, a blue haze at the right edge (the static
   version: the moving glow in app.js covers it once drawn) */
.footer {
  padding: clamp(72px, 9vw, 120px) 0 28px; color: var(--cream);
  background:
    radial-gradient(90% 72% at 58% 106%, rgba(230, 96, 24, 1) 0%, rgba(214, 84, 26, .85) 20%, rgba(172, 62, 42, .58) 44%, rgba(96, 42, 58, .24) 66%, transparent 84%),
    radial-gradient(40% 58% at 100% 90%, rgba(255, 146, 98, .6), transparent 70%),
    radial-gradient(28% 64% at 104% 30%, rgba(168, 188, 224, .34), transparent 70%),
    radial-gradient(52% 46% at 0% 102%, rgba(194, 65, 12, .6), transparent 75%),
    var(--navy-deep);
}
/* the moving glow (WebGL, app.js) covers the gradient above once its first frame is drawn */
.ft-glow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.ft-glow.on { opacity: 1; }
.footer .label-d { color: var(--c-75); }
.ft-giant { font: 700 clamp(44px, 7.4vw, 124px)/.94 var(--f-display); letter-spacing: -.046em; }
.ft-giant span { display: block; }
.ft-cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; margin-top: clamp(56px, 8vw, 96px); padding-top: 40px; border-top: 1px solid var(--line-d); }
.f-logo { height: 34px; width: auto; }
.ft-tag { margin-top: 18px; max-width: 300px; font-size: 14.5px; color: var(--c-75); }
.ft-col h3 { margin-bottom: 16px; font-weight: 400; }
.ft-col ul { list-style: none; }
.ft-col li { margin: 9px 0; font-size: 15px; color: var(--c-90); }
.ft-col a { color: var(--cream); text-decoration: none; text-underline-offset: 4px; }
.ft-col a:hover { color: var(--white); text-decoration: underline; }
.ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(64px, 9vw, 120px); padding-top: 22px; border-top: 1px solid rgba(250, 247, 238, .24); font-size: 13px; color: var(--c-90); }

/* ---------- scroll reveals (app.js adds .in once, as each block enters) ----------
   Heading lines rise out of their masks, then the block's parts (.r) fade up in reading order,
   90 ms apart (--i); a service photo opens like a shutter and settles from a slight zoom; the
   lines between client rows draw across. Hidden states apply only with JS and motion allowed. */
.h2 .ln, .band-h .ln, .ft-giant .ln { white-space: normal; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .ln { transform: translateY(108%); }
  .js [data-reveal] .r, .js [data-reveal="self"] { opacity: 0; transform: translateY(24px); }
  .js [data-reveal].in .ln { transform: none; transition: transform 1s var(--ease-expo) calc(var(--i, 0) * 90ms); }
  .js [data-reveal].in .r, .js [data-reveal="self"].in {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease-expo) calc(var(--i, 0) * 90ms), transform .8s var(--ease-expo) calc(var(--i, 0) * 90ms);
  }
  .js .svc-card[data-reveal] .svc-img { clip-path: inset(12% 10% round 18px); }
  .js .svc-card[data-reveal] .svc-img img { transform: scale(1.14); }
  .js .svc-card[data-reveal].in .svc-img { clip-path: inset(0 round 18px); transition: clip-path 1.2s var(--ease-in-out) .12s; }
  .js .svc-card[data-reveal].in .svc-img img { transform: none; transition: transform 1.6s var(--ease-expo) .12s; }
  .js .who-rows li[data-reveal]::before { transform: scaleX(0); }
  .js .who-rows li[data-reveal].in::before { transform: none; transition: transform 1.1s var(--ease-expo); }
}

/* ---------- privacy notice page ---------- */
.legal-page { background: var(--cream); }
.legal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--pad); }
.legal-bar img { height: 34px; width: auto; }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--pad) clamp(64px, 9vw, 120px); }
.legal .h2 { margin-bottom: 0; }
.legal h2 { margin: 44px 0 12px; font: 600 clamp(21px, 1.8vw, 25px)/1.2 var(--f-display); letter-spacing: -.02em; }
.legal p:not(.label):not(.lede) { font-size: 17px; line-height: 1.65; color: var(--ink); max-width: 66ch; }
.legal a:not(.link-arrow) { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.legal-back { margin-top: 48px; }
.legal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px var(--pad); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-55); }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1080px) {
  .svc-card, .svc-card.flip { grid-template-columns: 1fr; }
  .svc-img { order: -1; min-height: 0; aspect-ratio: 16 / 9; }   /* one column: the photo always comes first (flipped cards too) */
  .visit-grid { grid-template-columns: 1fr; }
  .visit-copy { position: static; }
  .ft-cols { grid-template-columns: repeat(4, 1fr); }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .floats { display: none; }
  .card-slot { width: calc(100vw - 2 * var(--pad)); }
  .menu { grid-template-columns: 1fr; }
  .menu-stage { display: none; }
  .menu-side { border-right: 0; background: transparent; }
}
/* phones, tablets and other touch screens: taps of at least 44 px */
@media (max-width: 1080px), (pointer: coarse) {
  .tb-logo { padding: 7px 0; }
  .svc-nav a, .link-arrow, .cb-num, .cb-links a, .ft-col a, .svc-cta, .legal-back a { display: inline-flex; align-items: center; min-height: 44px; }
  .chips span { padding: 12px 16px; }
  .pick-other { min-height: 44px; margin-top: 6px; }
  .ft-col li { margin: 0; }
  .ft-col h3 { margin-bottom: 4px; }
}
@media (max-width: 600px) {
  .topbar { height: 76px; }
  .tb-logo img { height: 30px; }
  .tb-pill { display: none; }
  .menu-btn { width: 50px; height: 50px; }
  .menu { clip-path: circle(0 at calc(100% - var(--pad) - 25px) 38px); }
  .menu.open { clip-path: circle(150% at calc(100% - var(--pad) - 25px) 38px); }
  .menu-side { padding-top: 104px; gap: 32px; }

  .hero { padding-top: 104px; }
  .hero .kicker-d { margin-bottom: 18px; }
  .hero-h { font-size: clamp(40px, 12vw, 52px); }
  .hero-h .ln { white-space: normal; }
  .hero-sub { margin-top: 18px; }
  .hero-actions { margin-top: 24px; }
  .card-slot { margin-top: 28px; }

  .chap { left: 20px; right: 20px; top: auto; bottom: 64px; max-width: none; transform: none; }
  .chap-h { font-size: clamp(46px, 14vw, 64px); margin: 14px 0 16px; }
  .chap-sub { font-size: 16px; }
  .sc-left, .sc-right { background: linear-gradient(0deg, rgba(3, 19, 42, .88) 0%, rgba(3, 19, 42, .55) 34%, rgba(3, 19, 42, 0) 62%); }
  .timecode { left: 20px; bottom: 22px; }
  .end-hint { left: 20px; bottom: 30px; transform: none; }   /* clear of the WhatsApp button */

  .services { border-radius: 24px 24px 0 0; }
  .svc-nav { margin: 32px 0 36px; }
  .svc-subs { grid-template-columns: 1fr; }
  .svc-img { aspect-ratio: 3 / 2; }
  .svc-more { gap: 18px; }

  .who-rows li { grid-template-columns: 1fr; gap: 10px; padding-right: 60px; }
  .who-rows .sq-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  .pick-grid, .fq-grid { grid-template-columns: 1fr; }
  .f-submit .btn { width: 100%; }

  .band-dots { width: 70%; height: 50%; }
  .band-ticks { width: 100%; height: 64px; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .tb-right { gap: 10px; }
  .svc-more { flex-direction: column; align-items: stretch; gap: 8px; }
  .ghost-pill { justify-content: center; text-align: center; height: auto; min-height: 54px; padding: 12px 22px; }
  .svc-more .link-arrow { justify-content: center; }

}

/* reduced motion: no drifting; reveals are off (their hidden states only exist with motion allowed) */
@media (prefers-reduced-motion: reduce) {
  .float-in, .eh-arrow { animation: none; }
  .menu { transition: none; }
}