/* Vie home page v3 (EJ, 08/10/26), copied from v2 round 3 (Wayde, 08/10/26), a ground-up redesign of the approved
   page around Kirby's scroll animation brief. v3 keeps v2's design, and v2's hero zoom, and edits the rest of the
   motion down (see Motion.jsx); the changes here are the device's load-in, the statement's muted fill, the soft image
   reveal, the offices as a swipe row, and native scrolling with anchor offsets in place of Lenis.
   Independent of the design-system bundle: everything the page shows is styled here.

   Design rules for this round:
   - Palette locked by the client ("we don't want to introduce new colours"): charcoal, charcoal tint, slate, grey,
     silver, green light, green, white, plus the derived deep charcoal, green hover and silver soft. No white panels;
     white is for cards and fields only.
   - One typeface, Open Sans, as the variable font. Display type uses its condensed width (font-stretch 75%) at heavy
     weights; body is regular and leads are light, as the Brand Guidelines ask.
   - The device's stroke angle is the one recurring shape: eyebrow bars, USP dividers, sequence ticks and the slanted
     image reveal all lean at it. Everything else is quiet.
   - Muted text on silver soft is charcoal tint (7.3:1), never slate (3.8:1). Green text appears only on charcoal
     grounds (4.99:1 and up). Text on green is white, per the 28/09 decision (2.33:1, an open contrast item, §4). */

:root {
  --ch: #3b3836; --ch-deep: color-mix(in oklab, #3b3836 82%, #000); --ch-tint: #514d4a;
  --slate: #74787c; --grey: #898c8f; --silver: #d2d2d0; --silver-soft: color-mix(in oklab, #d2d2d0 40%, #fff);
  --green: #73bc44; --green-light: #9dd084; --green-hover: color-mix(in oklab, #73bc44 88%, #3b3836); --white: #fff;
  --rule-d: rgba(255, 255, 255, .16); --rule-l: rgba(59, 56, 54, .16);
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4vw, 48px); --max: 1360px; --hd: 84px;
  --r: 6px; --r-lg: 8px; --slant: -28deg;
  --pad: clamp(80px, 10vw, 144px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd); }
html.drawer-open { overflow: hidden; }
body { margin: 0; background: var(--ch-deep); color: var(--ch); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
main { overflow-x: clip; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--white); color: var(--ch); padding: 10px 16px; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.h2 { font-stretch: 75%; font-weight: 780; font-size: clamp(2.4rem, 4.8vw, 4.5rem); line-height: .98; letter-spacing: -.012em; margin: 14px 0 22px; text-wrap: balance; }
.eb { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; letter-spacing: .01em; line-height: 1.2; }
.eb-bar { width: 7px; height: 18px; background: var(--green); transform: skewX(var(--slant)); flex: none; }
.sec-lead { margin: 0; max-width: 56ch; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.sec-head .btns { margin-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; margin-bottom: 56px; }
.sec-head > div:first-child { max-width: 680px; }
.stars { color: var(--green); letter-spacing: 2px; font-size: 15px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 22px; border-radius: var(--r); background: var(--green); color: var(--white); border: 2px solid var(--green); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn-line:hover { background: transparent; border-color: var(--green); color: inherit; }
.btn-text { background: none; border-color: transparent; color: inherit; padding: 0 4px; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.btn-text:hover { background: none; border-color: transparent; text-decoration-thickness: 3px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 56px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--white); transition: background .3s, box-shadow .3s; background: linear-gradient(rgba(0, 0, 0, .28), transparent); }
.hd.is-solid { background: var(--ch-deep); box-shadow: 0 1px 0 var(--rule-d); }
.hd-bar { display: flex; align-items: center; gap: 24px; height: var(--hd); }
.hd-logo img { height: 40px; width: auto; }
.hd-nav { display: flex; gap: 4px; margin: 0 auto; height: 100%; align-items: center; }
.hd-link { background: none; border: 0; color: inherit; font-weight: 600; font-size: 15px; padding: 10px 14px; cursor: pointer; position: relative; }
.hd-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.hd-link.on::after, .hd-link:hover::after { transform: scaleX(1); }
.hd-cta { display: flex; align-items: center; gap: 18px; }
.hd-phone { font-weight: 700; text-decoration: none; font-size: 15px; }
.hd-burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.hd-burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .25s; }
.hd-burger span:first-child { top: 17px; } .hd-burger span:last-child { top: 25px; }
.hd-burger[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.hd-burger[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mp { position: absolute; left: 0; right: 0; top: var(--hd); background: var(--ch-deep); border-top: 3px solid var(--green); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); padding: 40px 0 48px; }
.mp-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; gap: 48px; }
.mp-title { font-stretch: 75%; font-weight: 780; font-size: 32px; line-height: 1.05; }
.mp-intro p { color: var(--silver); font-size: 15px; line-height: 1.6; }
.mp-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 32px; }
.mp-grp + .mp-grp { margin-top: 24px; }
.mp-h { color: var(--green); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.mp-cols a { display: block; color: var(--white); text-decoration: none; font-size: 15px; line-height: 1.35; padding: 5px 0; }
.mp-cols a:hover { color: var(--green-light); }
.mp-cols a.mp-sub { padding-left: 16px; color: var(--silver); font-size: 14px; }
.mp-feature { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; }
.mp-feature img { width: 100%; height: 100%; object-fit: cover; }
.mp-feature span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: var(--ch-deep); font-weight: 700; font-size: 14px; color: var(--green); }

.dr { position: fixed; inset: var(--hd) 0 0; background: var(--ch-deep); overflow-y: auto; padding: 8px var(--gutter) 32px; overscroll-behavior: contain; }
.dr-h { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--rule-d); color: var(--white); font-stretch: 75%; font-weight: 750; font-size: 26px; padding: 16px 0; cursor: pointer; text-align: left; }
.dr-h span { color: var(--green); font-stretch: 100%; }
.dr-items { padding: 8px 0 16px; }
.dr-items a { display: block; color: var(--silver); text-decoration: none; padding: 8px 0; font-size: 16px; }
.dr-items a.dr-sub { padding-left: 18px; font-size: 15px; }
.dr-cta { display: grid; gap: 12px; margin-top: 28px; }

/* ---------- hero ---------- */
.hx { position: relative; background: var(--ch-deep); color: var(--white); }
.hx-frame { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; }
.hx.is-live { height: 240vh; }
.hx.is-live .hx-frame { position: sticky; top: 0; height: 100svh; }
.hx-window { position: absolute; inset: 0; display: none; opacity: 0; pointer-events: none; -webkit-mask-image: url(../assets/logo/vie-device.png); mask-image: url(../assets/logo/vie-device.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hx.is-live .hx-window { display: block; }
.hx-window img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; }
.hx-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-top: calc(var(--hd) + 24px); padding-bottom: 64px; }
.hx-copy { position: relative; z-index: 2; will-change: opacity, transform; }
.hx-kicker { color: var(--green); font-weight: 800; font-size: 14px; letter-spacing: .2em; }
.hx-h1 { font-stretch: 75%; font-weight: 800; font-size: clamp(2.9rem, 6.4vw, 6.4rem); line-height: .92; letter-spacing: -.014em; margin: 18px 0 22px; }
.hx-h1 span { display: block; }
.hx-h1 .hx-h1-sm { font-weight: 400; font-size: .5em; line-height: 1.1; color: var(--silver); margin-top: .35em; letter-spacing: 0; }
.hx-lead { color: var(--silver); font-weight: 300; font-size: 18px; max-width: 52ch; margin: 0 0 28px; }
.hx-call { margin-top: 18px; color: var(--silver); font-size: 15px; }
.hx-call a { color: var(--white); font-weight: 700; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hx-anchor { height: min(72svh, 700px); aspect-ratio: 902 / 1163; justify-self: center; position: relative; z-index: 1; }
.hx-device { width: 100%; height: 100%; transform-origin: 81.6% 94.7%; will-change: transform, opacity; }
.hx-cue { position: absolute; left: 50%; bottom: 24px; width: 2px; height: 48px; background: var(--rule-d); overflow: hidden; }
.hx-cue span { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--green); animation: cue 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* hero search */
.hs { position: relative; z-index: 5; max-width: 580px; }
.hs-switch { display: inline-flex; border: 1px solid var(--rule-d); border-radius: var(--r); padding: 3px; margin-bottom: 12px; }
.hs-switch button { background: none; border: 0; color: var(--silver); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.hs-switch button.on { background: var(--white); color: var(--ch); }
.hs-field { position: relative; display: flex; align-items: center; background: var(--white); border-radius: var(--r); height: 60px; padding: 6px 6px 6px 16px; color: var(--ch); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
.hs-ico { color: var(--ch-tint); flex: none; }
.hs-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ch); padding: 0 12px; height: 100%; }
.hs-input::placeholder { color: var(--ch-tint); opacity: 1; }
.hs-field:focus-within { box-shadow: 0 0 0 3px var(--green), 0 20px 40px rgba(0, 0, 0, .25); }
.hs-go { height: 100%; border: 0; border-radius: 4px; background: var(--green); color: var(--white); font-weight: 700; font-size: 15px; padding: 0 22px; cursor: pointer; }
.hs-go:hover { background: var(--green-hover); }
.hs-pop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--white); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
.hs-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; }
.hs-list ul { list-style: none; margin: 0; padding: 0; }
.hs-h { font-size: 13px; font-weight: 700; color: var(--ch-tint); padding: 12px 18px 4px; }
.hs-opt { padding: 9px 18px; font-size: 15px; cursor: pointer; line-height: 1.3; }
.hs-opt.hs-sub { padding-left: 34px; }
.hs-opt.on { background: var(--silver-soft); box-shadow: inset 3px 0 0 var(--green); }
.hs-empty { padding: 16px 18px; font-size: 15px; }
.hs-empty button { background: none; border: 0; padding: 0; color: var(--ch); font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); cursor: pointer; }

/* ---------- USP bar ---------- */
.usp { position: relative; background: var(--ch); color: var(--white); }
.usp-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; height: 64px; white-space: nowrap; }
.usp-probe { position: absolute; inset: 0 0 auto; height: 0; visibility: hidden; overflow: hidden; }
.usp-i { display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; flex: none; }
.usp-i::before { content: ''; width: 6px; height: 16px; background: var(--green); transform: skewX(var(--slant)); margin-right: 12px; }
.usp-marquee { overflow: hidden; height: 64px; display: flex; align-items: center; }
.usp-track { display: flex; width: max-content; animation: usp 40s linear infinite; }
.usp-track .usp-i { margin-right: 48px; }
@keyframes usp { to { transform: translateX(-50%); } }

/* ---------- statement ---------- */
.st { background: var(--ch-deep); color: var(--white); padding: var(--pad) 0; overflow: clip; }
.st-h { display: flex; flex-direction: column; margin: 0; font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(5.5rem, 19vw, 20rem); line-height: .8; letter-spacing: -.02em; }
.st-line { display: block; color: var(--green); }
.st-line-2 { align-self: flex-end; }
/* the fill: a green-to-slate gradient clipped to the type, moved from its slate end to its green end. A soft band
   between the two keeps the leading edge from reading as a hard wipe; the gradient is 220% wide with the band at
   45.4-54.6%, which is exactly the part the type never shows at either end, so the line starts wholly slate and
   finishes wholly green (at 200% the band bled onto the last letters) */
.st.is-live .st-line { color: transparent; background-image: linear-gradient(90deg, var(--green) 0 45.4%, var(--slate) 54.6% 100%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.st-p { max-width: 44ch; margin: 64px 0 0 auto; color: var(--silver); font-weight: 300; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.55; }

/* ---------- about ---------- */
.ab { background: var(--silver-soft); color: var(--ch); }
.ab-frame-wrap { padding: var(--pad) 0; }
.ab-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.ab-copy p { color: var(--ch-tint); max-width: 52ch; margin: 0 0 14px; }
/* the slideshow (SectionsA About): every photo stacked in one frame. The incoming photo (.on) fades in on top while the
   outgoing one (.was) stays opaque underneath, so the frame never shows through; the rest sit at 0 */
.ab-seq { position: relative; }
.ab-frames { position: relative; height: min(70svh, 660px); border-radius: var(--r-lg); overflow: hidden; background: var(--ch); touch-action: pan-y; }
.ab-frame { position: absolute; inset: 0; margin: 0; opacity: 0; }
.ab-frame.was { opacity: 1; }
.ab-frame.on { opacity: 1; z-index: 1; transition: opacity 1s cubic-bezier(.4, 0, .2, 1); }
.ab-frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ab-seq.is-pre:not(.is-in) { opacity: 0; transform: translate3d(0, 20px, 0); }
.ab-seq.is-in { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.ab-stamp { position: absolute; left: -28px; bottom: -28px; z-index: 2; display: flex; align-items: center; gap: 14px; background: var(--ch); color: var(--white); padding: 16px 22px 16px 18px; border-radius: var(--r-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, .2); }
.ab-stamp b { display: flex; font-stretch: 75%; font-weight: 800; font-size: 60px; line-height: .9; color: var(--green); font-variant-numeric: tabular-nums; }
.ab-stamp > span { font-weight: 600; font-size: 14px; line-height: 1.3; max-width: 10ch; }
/* controls: one small charcoal pill bottom right, the ticks (each a 34x32 hit area round a 26x5 slanted bar that fills
   green as its photo holds) and a pause button */
.ab-ctrl { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; padding: 0 4px 0 8px; border-radius: 999px; background: rgba(47, 45, 43, .62); }
.ab-tick { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.ab-tick span { position: relative; width: 26px; height: 5px; overflow: hidden; background: rgba(255, 255, 255, .5); transform: skewX(var(--slant)); }
.ab-tick i { position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }
.ab-tick.on i { transform: scaleX(1); }
.ab-tick:hover span { background: rgba(255, 255, 255, .8); }
.ab-pause { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--white); cursor: pointer; }
.ab-pause svg { width: 12px; height: 12px; }
.ab-pause:hover { color: var(--green-light); }

/* ---------- service indexes ---------- */
.si { padding: var(--pad) 0; }
.si-ins { background: var(--ch); color: var(--white); --rule: var(--rule-d); --muted: var(--silver); }
.si-fin { background: var(--silver-soft); color: var(--ch); --rule: var(--rule-l); --muted: var(--ch-tint); }
.si-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.si-head .h2 { margin-bottom: 0; }
.si-lead p { color: var(--muted); margin: 0; }
.si-lead .btns { margin-top: 24px; }
.si-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ch-tint); position: relative; }
.si-photo img, .wy-photo img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
.si-photo-wide { aspect-ratio: 21 / 8; }
/* image reveal (Motion.jsx PageMotion): a mask three frames wide, opaque on its left third and clear on its right, with
   a soft band between that leans at the device's slant (118deg = the -28deg stroke). Sliding it from its right end to
   its left end sweeps the photo in from the left. Only applied while the reveal runs. */
[data-reveal].is-masking { -webkit-mask-image: linear-gradient(118deg, #000 38%, transparent 62%); mask-image: linear-gradient(118deg, #000 38%, transparent 62%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: calc((1 - var(--rv, 1)) * 100%) 0; mask-position: calc((1 - var(--rv, 1)) * 100%) 0; }
.si-photo-tall { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--hd) + 32px); }
.si-split { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.si-fin .si-list { border-top: 1px solid var(--rule); }
.si-gh { font-stretch: 75%; font-weight: 780; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; margin: 64px 0 0; padding-bottom: 16px; border-bottom: 3px solid var(--green); }
.si-group:first-child .si-gh { margin-top: 48px; }
.si-list { list-style: none; margin: 0; padding: 0; }
.si-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px 40px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.si-name { display: flex; gap: 16px; align-items: center; align-self: start; }
.si-name .ico { flex: none; }
.si-h { font-stretch: 75%; font-weight: 750; font-size: clamp(23px, 2vw, 29px); line-height: 1.1; margin: 0; }
.si-h a { text-decoration: none; background: linear-gradient(var(--green), var(--green)) no-repeat 0 100% / 0 3px; padding-bottom: 3px; transition: background-size .3s; }
.si-h a:hover { background-size: 100% 3px; }
.si-pages { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.si-pages a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.si-pages a:hover { text-decoration-thickness: 3px; }
.si-topics { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.si-fin .si-row { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.si-row.si-row-personal { display: flex; align-items: center; gap: 16px 24px; }
.si-row-personal .si-pages { margin: 0; }

/* ---------- calculators ---------- */
.ca { background: var(--ch-tint); color: var(--white); padding: var(--pad) 0; }
.ca-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.ca-lead { color: var(--silver); margin: 0; max-width: 52ch; }
.ca-list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--rule-d); }
.ca-list a { display: flex; align-items: center; gap: 18px; padding: 15px 4px; border-bottom: 1px solid var(--rule-d); text-decoration: none; font-weight: 600; font-size: 18px; transition: color .2s, padding .25s; }
.ca-list a::after { content: ''; margin-left: auto; width: 10px; height: 10px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: rotate(45deg); flex: none; }
.ca-list a:hover { color: var(--green-light); padding-left: 12px; }
.ce { background: var(--white); color: var(--ch); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.ce-t { font-weight: 700; font-size: 15px; color: var(--ch-tint); }
.ce-out { display: grid; margin: 8px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule-l); }
.ce-l, .ce-s { font-size: 14px; color: var(--ch-tint); }
.ce-v { font-stretch: 75%; font-weight: 800; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.ce-f { display: block; margin-bottom: 20px; }
.ce-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 10px; }
.ce input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green) var(--fill), var(--silver) var(--fill)); margin: 0; cursor: pointer; }
.ce input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ce input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); }
.ce-seg, .seg { display: flex; border: 1px solid var(--ch); border-radius: var(--r); padding: 3px; }
.ce-seg button, .seg button { flex: 1; background: none; border: 0; border-radius: 4px; min-height: 40px; padding: 0 14px; font-weight: 700; font-size: 14px; color: var(--ch); cursor: pointer; }
.ce-seg button.on, .seg button.on { background: var(--ch); color: var(--white); }
.ce-note { font-size: 13px; line-height: 1.5; color: var(--ch-tint); margin: 14px 0 0; }

/* ---------- why ---------- */
.wy { background: var(--silver-soft); color: var(--ch); padding: var(--pad) 0; }
.wy-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.wy-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--hd) + 32px); background: var(--ch-tint); }
.wy-lead { color: var(--ch-tint); margin: 0; max-width: 54ch; }
.wy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 40px 0 0; }
.wy-i { padding: 26px 0; border-top: 1px solid var(--rule-l); }
.wy-i dt { display: grid; gap: 6px; }
.wy-big { font-stretch: 75%; font-weight: 800; font-size: clamp(42px, 4.2vw, 64px); line-height: .95; letter-spacing: -.01em; }
.wy-t { font-weight: 700; font-size: 17px; }
/* count-up (SectionsA CountUp): the final number holds the width underneath, invisible; the count sits right-aligned
   over it, so nothing beside it shifts. Open Sans figures are tabular already, so the digits do not jitter. */
.cu { display: inline-grid; }
.cu > span { grid-area: 1 / 1; text-align: right; }
.cu-ghost { visibility: hidden; }
/* Why Vie's % and + in green (EJ, 08/10/26); like "what’s next", green on silver soft is about 2:1, a brand-rule exception */
.wy-big .cu-sfx { color: var(--green); }
.wy-i dd { margin: 8px 0 0; font-size: 15px; color: var(--ch-tint); line-height: 1.6; }

/* ---------- offices ---------- */
.ot { background: var(--ch-deep); color: var(--white); padding: var(--pad) 0; }
.ot-head { margin-bottom: 40px; }
.ot-head .h2 { margin-bottom: 0; }
.ot-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px max(var(--gutter), calc((100vw - var(--max)) / 2)); scroll-padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2)); scrollbar-width: none; }
.ot-track::-webkit-scrollbar { display: none; }
.ot-card { flex: none; width: min(46vw, 640px); scroll-snap-align: start; }
.ot-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: var(--ch-tint); }
.ot-img img { width: 100%; height: 100%; object-fit: cover; }
.ot-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding-top: 18px; flex-wrap: wrap; }
.ot-state { color: var(--green); font-weight: 700; font-size: 14px; }
.ot-name { font-stretch: 75%; font-weight: 800; font-size: clamp(32px, 3.8vw, 56px); line-height: 1; margin: 4px 0 0; }
.ot-meta { display: grid; gap: 2px; text-align: right; font-size: 15px; }
.ot-meta a { color: var(--silver); text-decoration: none; }
.ot-meta a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--green); }

/* ---------- testimonials (v3 redesign, SectionsB Testimonials) ---------- */
.ts { background: var(--silver-soft); color: var(--ch); padding: var(--pad) 0; overflow: clip; }
.ts .sec-lead { color: var(--ch-tint); }
.ts-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px clamp(48px, 7vw, 128px); align-items: start; }
.g-score { display: grid; gap: 4px; max-width: 360px; font-size: 15px; }
.ts-side .g-score { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule-l); }
.g-top { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.g-offices { color: var(--ch-tint); font-size: 14px; }
.g-offices a { color: var(--ch); font-weight: 600; text-decoration-color: var(--green); text-underline-offset: 3px; }
/* the review: every slide in one grid cell (the cell takes the longest), so the controls below never move */
.tq { min-width: 0; padding-top: 6px; }
.tq-stack { display: grid; touch-action: pan-y; }
.tq-slide { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; }
.tq-slide.on { visibility: visible; opacity: 1; }
.tq-q { margin: 0; }
.tq-q p { margin: 0; font-weight: 300; font-size: clamp(21px, 2vw, 30px); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.tq-mark { margin-left: -.42em; }
.tq-by { padding-top: 32px; display: grid; gap: 4px; }
.tq-by b { font-size: 17px; }
.tq-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--ch-tint); }
.tq-nav { margin-top: 32px; }
.tq-track { height: 2px; background: var(--rule-l); overflow: hidden; }
.tq-track span { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.tq-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.tq-count { font-size: 14px; letter-spacing: .08em; color: var(--ch-tint); font-variant-numeric: tabular-nums; }
.tq-count b { color: var(--ch); font-weight: 700; }
.tq-btns { display: flex; gap: 8px; }
.ts .arrow { border-color: rgba(59, 56, 54, .3); color: var(--ch); }
.ts .arrow:hover { border-color: var(--green); }
/* entrance, once (is-pre is only added when motion is allowed, so without it everything is simply there) */
.ts.is-pre:not(.is-in) .ts-in { opacity: 0; transform: translate3d(0, 20px, 0); }
.ts.is-in .ts-in { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 140ms); }

/* ---------- team (v3 redesign, SectionsB Team) ---------- */
.tm { background: var(--ch); color: var(--white); padding: var(--pad) 0; overflow: clip; }
.tm .sec-lead { color: var(--silver); }
.tm-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px clamp(40px, 5vw, 88px); align-items: center; }
.tm-intro .h2 { margin-bottom: 18px; }
.tm-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 40px; }
.tm-play { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-left: 8px; padding: 0 18px 0 16px; border: 2px solid rgba(255, 255, 255, .4); border-radius: var(--r); background: none; color: var(--white); font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color .2s; }
.tm-play:hover { border-color: var(--green); }
/* the gallery runs from its column to the screen's right edge; the glide fades cards out over 56px at its left */
.tm-view { min-width: 0; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2)); }
.tm-view:not(.is-glide) { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.tm-view:not(.is-glide)::-webkit-scrollbar { display: none; }
.tm-view.is-glide { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.tm-view:focus-visible { outline-offset: -3px; }
.tm-track { display: flex; gap: 24px; width: max-content; will-change: transform; }
.tm-view:not(.is-glide) .tm-track { padding-right: var(--gutter); will-change: auto; }
.tm-list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.tm-card { flex: none; width: clamp(220px, 16vw, 268px); scroll-snap-align: start; }
.tm-img { aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--ch-tint); margin-bottom: 18px; }
.tm-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.tm-name { display: block; font-stretch: 75%; font-weight: 750; font-size: 25px; line-height: 1.08; }
.tm-role { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--silver); }
.tm-office { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--green-light); }
/* entrance, once (is-pre only when motion is allowed): the intro rises 20px, then the first cards 80ms apart */
.tm.is-pre:not(.is-in) .tm-in { opacity: 0; transform: translate3d(0, 20px, 0); }
.tm.is-pre:not(.is-in) .tm-card { opacity: 0; transform: translate3d(0, 24px, 0); }
.tm.is-in .tm-in { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 100ms); }
.tm.is-in .tm-card { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(200ms + var(--d, 0) * 80ms); }

/* ---------- FAQ ---------- */
.fq { background: var(--silver-soft); color: var(--ch); padding: var(--pad) 0; }
.fq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.fq-side { position: sticky; top: calc(var(--hd) + 32px); }
.fq-side .sec-lead { color: var(--ch-tint); }
.fq-list { border-top: 1px solid var(--rule-l); }
.fq-i { border-bottom: 1px solid var(--rule-l); }
.fq-i h3 { margin: 0; }
.fq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: none; border: 0; padding: 24px 0; text-align: left; font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--ch); cursor: pointer; }
.fq-ico { position: relative; width: 22px; height: 22px; flex: none; }
.fq-ico::before, .fq-ico::after { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--ch); transition: transform .3s; }
.fq-ico::after { transform: rotate(90deg); }
.fq-i.on .fq-ico::after { transform: rotate(0); }
.fq-i.on .fq-ico::before, .fq-i.on .fq-ico::after { background: var(--green-hover); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.fq-i.on .fq-a { grid-template-rows: 1fr; }
.fq-a > div { overflow: hidden; }
.fq-a p { margin: 0; padding: 0 48px 26px 0; color: var(--ch-tint); }

/* ---------- locations ---------- */
.lc { background: var(--ch-deep); color: var(--white); padding: var(--pad) 0; }
.lc .sec-lead { color: var(--silver); }
.lc-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
.lc-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--rule-d); }
.lc-tabs button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 4px 18px 22px; background: none; border: 0; border-bottom: 1px solid var(--rule-d); color: var(--silver); text-align: left; cursor: pointer; position: relative; }
.lc-tabs button::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 20px; margin-top: -10px; background: var(--green); transform: skewX(var(--slant)) scaleY(0); transition: transform .25s; }
.lc-tabs button.on { color: var(--white); }
.lc-tabs button.on::before { transform: skewX(var(--slant)) scaleY(1); }
.lc-tn { font-stretch: 75%; font-weight: 750; font-size: 25px; line-height: 1.1; }
.lc-ts { font-size: 13px; color: var(--silver); }
.lc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.lc-info { background: var(--ch); border-radius: var(--r-lg); overflow: hidden; }
.lc-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lc-body { padding: 28px; }
.lc-name { font-stretch: 75%; font-weight: 800; font-size: 36px; line-height: 1; margin: 0 0 10px; }
.lc-blurb { color: var(--silver); margin: 0; font-size: 15px; }
.lc-dl { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px 16px; font-size: 15px; margin: 20px 0 0; }
.lc-dl dt { color: var(--silver); font-weight: 600; }
.lc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lc-dl a { text-decoration-color: var(--green); text-underline-offset: 3px; }
.lc-body .btns { margin-top: 24px; }
.lc-map { border-radius: var(--r-lg); overflow: hidden; min-height: 440px; background: var(--ch); }
.lc-map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }

/* ---------- social ---------- */
.sf { background: var(--silver-soft); color: var(--ch); padding: var(--pad) 0; }
.sf .sec-lead { color: var(--ch-tint); }
.ig-profile { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 20px; }
.ig-profile b { display: block; } .ig-profile span span { font-size: 14px; color: var(--ch-tint); }
.ig-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 2px solid var(--green); display: grid; place-items: center; }
.ig-avatar img { width: 24px; }
.ig-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ig-post { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--ch-tint); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; }
.ig-hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(59, 56, 54, .55); color: var(--white); opacity: 0; transition: opacity .2s; }
.ig-post:hover .ig-hover, .ig-post:focus-visible .ig-hover { opacity: 1; }
.ig-actions { justify-content: center; }

/* ---------- blog ---------- */
.bl { background: var(--ch); color: var(--white); padding: var(--pad) 0; }
.bl .sec-lead { color: var(--silver); }
.arrow { width: 48px; height: 48px; border-radius: var(--r); border: 2px solid rgba(255, 255, 255, .4); background: none; color: var(--white); display: grid; place-items: center; cursor: pointer; transition: border-color .2s; }
.arrow:hover { border-color: var(--green); }
.bl-row { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px max(var(--gutter), calc((100vw - var(--max)) / 2)); scroll-padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2)); scrollbar-width: none; }
.bl-row::-webkit-scrollbar { display: none; }
.bp { flex: none; width: min(410px, 80vw); scroll-snap-align: start; }
.bp-img { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: var(--ch-tint); }
.bp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bp:hover .bp-img img { transform: scale(1.04); }
.bp-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--silver); margin: 18px 0 6px; }
.bp-meta span:first-child { color: var(--green-light); font-weight: 700; }
.bp-t { font-stretch: 75%; font-weight: 760; font-size: 27px; line-height: 1.1; margin: 0 0 10px; }
.bp-t a { text-decoration: none; }
.bp-t a:hover { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.bp p { color: var(--silver); font-size: 15px; margin: 0 0 18px; }

/* ---------- closing ---------- */
.cc { background: var(--silver-soft); color: var(--ch); padding: var(--pad) 0; overflow: clip; }
/* two set lines, one per span. "Let’s talk about" is about 6em wide, so below about 390px the size steps down to keep
   it on one line (6.6 rather than 6 leaves room for a scrollbar); everywhere else the size is v2's */
.cc-h { font-stretch: 75%; font-weight: 800; font-size: min(clamp(3.4rem, 9.4vw, 10rem), calc((100vw - 2 * var(--gutter)) / 6.6)); line-height: .88; letter-spacing: -.022em; margin: 18px 0 56px; }
.cc-h span { display: block; }
/* "what’s next": the statement's fill (SectionsB ClosingCta), charcoal to green. The span is only as wide as its words
   so the fill's edge crosses the text, not the empty width beside it. Solid green without motion. Green on silver soft
   is about 2:1, below the 3:1 large text needs, so this is a brand-rule exception (green text otherwise only on charcoal). */
.cc-h .cc-fill { width: fit-content; color: var(--green); }
.cc.is-live .cc-fill { color: transparent; background-image: linear-gradient(90deg, var(--green) 0 45.4%, var(--ch) 54.6% 100%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.cc-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cc-lead { color: var(--ch-tint); margin: 0; }
.cc-routes { margin-top: 36px; border-top: 1px solid var(--rule-l); }
.cc-routes > * { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule-l); text-decoration: none; }
.cc-routes span { color: var(--ch-tint); font-size: 14px; font-weight: 600; padding-top: 2px; }
.cc-routes b { font-weight: 700; }
.cc-routes a:hover b { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.cc-form { background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; box-shadow: 0 30px 60px rgba(59, 56, 54, .12); }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.cc-ft { font-stretch: 75%; font-weight: 800; font-size: 32px; line-height: 1; }
.cc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: grid; gap: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.fld i { font-style: normal; color: var(--ch-tint); }
.fld input, .fld select, .fld textarea { width: 100%; font: inherit; font-weight: 400; font-size: 16px; color: var(--ch); background: var(--silver-soft); border: 1px solid transparent; border-bottom: 2px solid var(--slate); border-radius: var(--r) var(--r) 0 0; padding: 12px 14px; min-height: 50px; }
.fld textarea { resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-bottom-color: var(--green); box-shadow: 0 0 0 3px rgba(115, 188, 68, .35); }
.chk { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ch-tint); }
.chk input { width: 20px; height: 20px; accent-color: var(--green); margin: 1px 0 0; flex: none; }
.cc-done { text-align: center; padding: 40px 0; }
.cc-tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 30px; }
.cc-done-t { font-stretch: 75%; font-weight: 800; font-size: 32px; margin: 16px 0 8px; }
.cc-done p { color: var(--ch-tint); margin: 0 0 24px; }

/* ---------- footer ---------- */
.ft { position: relative; background: var(--ch-deep); color: var(--white); padding-top: 88px; overflow: clip; }
.ft-main { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-bottom: 48px; }
.ft-logo { width: 150px; }
.ft-phone { display: block; margin: 26px 0 18px; font-stretch: 75%; font-weight: 800; font-size: 32px; line-height: 1; text-decoration: none; }
.ft-social { display: flex; gap: 8px; }
.ft-social a { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--rule-d); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.ft-social a:hover { background: var(--green); border-color: var(--green); }
.ft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.ft-h { color: var(--green); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.ft-cols a { display: block; color: var(--silver); text-decoration: none; font-size: 14px; line-height: 1.35; padding: 4px 0; }
.ft-cols a:hover { color: var(--white); }
.ft-cols a.ft-sub { padding-left: 12px; font-size: 13px; }
.ft-accred { padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--rule-d); }
.ft-accred-row { display: flex; flex-wrap: wrap; gap: 20px 44px; align-items: center; }
.ft-tile img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.ft-tile img[src$='mfaa.png'] { height: 44px; }
.ft-legal { border-top: 1px solid var(--rule-d); padding-top: 24px; }
.ft-legal p { color: var(--silver); font-size: 13px; line-height: 1.6; max-width: 110ch; margin: 0 0 8px; }
.ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 16px; padding-bottom: 32px; font-size: 13px; color: var(--silver); }
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft-links a, .ft-5x5 { color: var(--silver); text-decoration: none; }
.ft-links a:hover, .ft-5x5:hover { color: var(--white); }
.ft-5x5 { display: inline-flex; align-items: center; gap: 8px; }
.ft-5x5-mark { width: 18px; height: 18px; background: url(../assets/brand/5x5-icon.png) center / contain no-repeat; }
.ft-wordmark { padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.ft-wordmark svg { display: block; width: 100%; height: auto; fill: var(--ch-tint); }

/* ---------- sticky bar, toast ---------- */
.sk { position: fixed; left: 50%; bottom: 16px; z-index: 90; width: min(1200px, calc(100vw - 32px)); transform: translate(-50%, calc(100% + 32px)); display: flex; align-items: center; gap: 20px; background: var(--ch-deep); color: var(--white); border-radius: var(--r-lg); padding: 10px 10px 10px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--rule-d); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sk.on { transform: translate(-50%, 0); }
.sk-g { display: flex; align-items: center; gap: 10px; padding-right: 20px; border-right: 1px solid var(--rule-d); text-decoration: none; flex: none; }
.sk-g-top { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.sk-g-sub { display: block; font-size: 12px; color: var(--silver); line-height: 1.3; }
.sk-txt { flex: 1; min-width: 0; line-height: 1.35; }
.sk-txt b { display: block; font-size: 15px; }
.sk-txt span { display: block; font-size: 13px; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.sk-phone { font-weight: 700; font-size: 15px; padding: 0 10px; text-decoration: none; }
.sk-x { width: 36px; height: 36px; background: none; border: 0; color: var(--silver); font-size: 24px; line-height: 1; cursor: pointer; }
.toast { position: fixed; right: 24px; bottom: 104px; z-index: 300; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; max-width: 380px; background: var(--white); color: var(--ch); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); border-left: 4px solid var(--green); }
.toast span { grid-column: 1; font-size: 14px; color: var(--ch-tint); }
.toast button { grid-column: 2; grid-row: 1 / 3; background: none; border: 0; font-size: 22px; color: var(--ch-tint); cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .mp-feature { display: none; }
}
@media (max-width: 1180px) {
  .si-row, .si-fin .si-row { grid-template-columns: 1fr; }
  .sk-txt { display: none; }
}
@media (max-width: 1100px) {
  .tm-grid { grid-template-columns: 1fr; }
  .tm-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px; }
  .tm-intro .btns { grid-column: 1; }
  .tm-ctrl { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: 0; }
  .tm-card { width: clamp(220px, 30vw, 268px); }
  .hd-nav, .hd-phone, .mp { display: none; }
  .hd-cta { margin-left: auto; }
  .hd-burger { display: block; }
  .lc-grid { grid-template-columns: 1fr; }
  .lc-tabs { flex-direction: row; overflow-x: auto; border-top: 0; scrollbar-width: none; }
  .lc-tabs button { flex: none; border-bottom-width: 3px; padding: 12px 18px 12px 22px; }
  .lc-tabs button.on { border-bottom-color: var(--green); }
  .lc-tabs .lc-ts { display: none; }
}
@media (max-width: 900px) {
  :root { --hd: 72px; }
  .hd-logo img { height: 34px; }
  .hx-grid { grid-template-columns: 1fr; padding-top: calc(var(--hd) + 26svh); padding-bottom: 48px; }
  .hx-anchor { position: absolute; top: calc(var(--hd) + 8px); right: max(-6vw, -40px); height: 34svh; z-index: 0; }
  .hx-copy { background: linear-gradient(transparent, var(--ch-deep) 24px); }
  .hx-lead { font-size: 16px; margin-bottom: 22px; }
  .hx-cue { display: none; }
  .hx.is-live { height: 200vh; }
  .si-head, .ab-grid, .ca-grid, .wy-grid, .fq-grid, .cc-grid, .si-split, .lc-panel { grid-template-columns: 1fr; }
  .si-photo-wide { aspect-ratio: 4 / 3; }
  .si-photo-tall, .wy-photo { position: relative; top: 0; aspect-ratio: 4 / 3; }
  .ab-stamp { left: 12px; bottom: -22px; padding: 12px 16px; }
  .ab-stamp b { font-size: 44px; }
  .ab-frames { height: auto; aspect-ratio: 4 / 3; }
  .ab-ctrl { right: 10px; bottom: 10px; }
  .ab-copy { order: 1; }
  .ab-seq { order: 2; margin-bottom: 22px; }
  .fq-side { position: static; }
  .ts-grid { grid-template-columns: 1fr; }
  .ts-side .g-score { margin-top: 28px; padding-top: 22px; }
  .tq-by { padding-top: 24px; }
  .tq-q p { font-size: clamp(21px, 3vw, 26px); }
  .ot-card { width: 84vw; }
  .ot-meta { text-align: left; }
  .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-grid .ig-post:nth-child(n + 10) { display: none; }
  .ft-main { grid-template-columns: 1fr; gap: 40px; }
  .lc-map, .lc-map iframe { min-height: 320px; }
}
@media (max-width: 700px) {
  .ab-ctrl { top: 10px; bottom: auto; }
  .tm-intro { grid-template-columns: 1fr; }
  .tm-ctrl { grid-column: 1; grid-row: auto; margin-top: 28px; }
  .tm-card { width: 74vw; }
  .tm-track, .tm-list { gap: 16px; }
  .tm-name { font-size: 24px; }
  .wy-list { grid-template-columns: 1fr; }
  .cc-2 { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-routes > * { grid-template-columns: 1fr; gap: 2px; }
  .hd-cta .btn { display: none; }
  .sk { left: 0; bottom: 0; width: 100%; transform: translateY(100%); border-radius: 0; padding: 10px var(--gutter); gap: 12px; }
  .sk.on { transform: translateY(0); }
  .sk-g { padding-right: 0; border-right: 0; }
  .sk-g-sub, .sk-phone, .sk-btns .btn-line, .sk-g .stars { display: none; }
  .sk-btns .btn-sm { padding: 0 14px; }
  .sk-btns { margin-left: auto; }
  .hs-go { padding: 0 16px; }
  .st-p { margin-top: 40px; }
  .si-row { padding: 22px 0; }
  .toast { left: 16px; right: 16px; bottom: 84px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .tm-card:hover .tm-img img { transform: scale(1.03); }
  .hx-anchor { animation: hx-in 1.4s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
}
@keyframes hx-in { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .usp-marquee { overflow-x: auto; }
  .usp-track { animation: none; }
  .hx-cue span { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}