/* Self-hosted latin subsets of the two Google Fonts this site uses, so the
   only render-blocking stylesheet is this same-origin one: the cross-origin
   fonts.googleapis.com sheet used to sit on the critical path ahead of it.
   Manrope ships as one variable file covering 200-800. Both are OFL. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-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:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-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:#071a32; --navy-2:#0d2b4f; --red:#d82f2f; --red-deep:#b82028; --blue:#1f67aa;
  --cream:#fff8ee; --paper:#f7efe4; --sweep:#f3ece1; --white:#fff; --ink:#101d2c; --muted:#546172;
  --line:rgba(7,26,50,.16); --shadow:0 28px 70px rgba(7,26,50,.22); --bar-h:70px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--cream);color:var(--ink);font:500 16px/1.55 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
section[id]{scroll-margin-top:var(--bar-h)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:4px;box-shadow:0 0 0 7px #ffd966;border-radius:7px}
.skip-link{position:fixed;z-index:200;left:14px;top:-60px;padding:10px 14px;background:#fff;color:var(--navy);font-weight:800}.skip-link:focus{top:10px}

.journey-bar{position:fixed;z-index:100;inset:0 0 auto;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(16px,3.5vw,42px);background:rgba(255,248,238,.88);border-bottom:1px solid var(--line);backdrop-filter:blur(16px) saturate(1.35)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font:400 17px/1 "Archivo Black",Impact,sans-serif;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap}
.brand-mark{width:38px;height:34px;display:grid;place-items:center;border-radius:5px;background:var(--navy);box-shadow:inset 0 -4px var(--red);color:#fff;font-size:12px;letter-spacing:0}
.brand small{display:block;margin-top:5px;color:var(--muted);font:800 8px/1 Manrope,sans-serif;letter-spacing:.15em}
.scene-pills{display:flex;align-items:center;gap:5px}
.scene-pills button{position:relative;isolation:isolate;min-height:44px;padding:0 12px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
.scene-pills button::before{content:"";position:absolute;z-index:-1;inset:5px 0;border-radius:999px;background:transparent;transition:.18s}
.scene-pills button:hover{color:var(--navy)}.scene-pills button:hover::before{background:rgba(7,26,50,.06)}
.scene-pills button.active{color:#fff}.scene-pills button.active::before{background:var(--navy);box-shadow:0 5px 15px rgba(7,26,50,.2)}
.bar-actions{display:flex;align-items:center;gap:15px}.bar-phone{color:var(--navy);font-size:14px;font-weight:800;white-space:nowrap}
.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border:2px solid transparent;border-radius:999px;background:var(--red);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 9px 24px rgba(216,47,47,.24);transition:.18s}
.button:hover{background:var(--red-deep);transform:translateY(-1px)}

.journey{height:calc((var(--scenes,3) * var(--scene-vh,130) + var(--bridge-vh,0)) * 1svh);background:var(--stage-bg,var(--sweep))}
.journey-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;contain:layout paint;background:var(--stage-bg,var(--sweep))}
.journey-rig{position:absolute;z-index:1;inset:0;transform:translate3d(var(--rig-x,0%),0,0)}
/* Promotion only while the stage is the thing being scrolled through:
   a permanent will-change keeps a layer alive for the whole page. */
.journey-stage.is-live .journey-rig,.journey-stage.is-live .journey-box{will-change:transform,opacity}
.journey-stage.is-live .scene-copy{will-change:opacity,transform}
.journey-poster,#journey-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--sweep)}
.journey-poster{transition:opacity .25s}.journey-stage.canvas-ready .journey-poster{opacity:0}#journey-canvas{opacity:0}.journey-stage.canvas-ready #journey-canvas{opacity:var(--canvas-a,1)}
.scene-copy{position:absolute;z-index:3;left:clamp(24px,5.8vw,92px);top:51%;width:min(34vw,480px);transform:translateY(calc(-50% + var(--copy-y,0px)));opacity:var(--copy-alpha,1);color:var(--navy);pointer-events:none}
.scene-step,.kicker{margin:0 0 14px;color:var(--red-deep);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.dark .kicker,.accent{color:#ff9b9b!important}
.scene-copy h1,.journey-intro h2,.section h2,.section h3{margin-top:0;font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase}
.scene-copy h1{margin-bottom:17px;font-size:clamp(45px,6vw,84px);font-weight:400;letter-spacing:-.06em;line-height:.9;text-wrap:balance}
.scene-body{max-width:40ch;margin:0 0 18px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);font-weight:650}.scene-proof{margin:-6px 0 18px;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.035em}.scene-proof[hidden]{display:none}
.scene-tags{display:flex;flex-wrap:wrap;gap:8px}.scene-tags span{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.scroll-cue{position:absolute;z-index:4;left:clamp(24px,5.8vw,92px);bottom:26px;margin:0;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;transition:opacity .2s}.scroll-cue>span{display:inline-block;margin-right:7px;color:var(--red);animation:nudge 1.6s ease-in-out infinite}.scroll-cue small{margin-left:18px;font-size:10px}
@keyframes nudge{50%{transform:translateY(5px)}}
.scene-dots{opacity:var(--dots-a,1);position:absolute;z-index:5;right:clamp(15px,3vw,38px);top:50%;transform:translateY(-50%)}.scene-dots ol{display:grid;gap:0;margin:0;padding:0;list-style:none}
.scene-dots button{display:flex;align-items:center;justify-content:flex-end;gap:9px;width:86px;min-height:44px;padding:0;border:0;background:none;color:var(--navy);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.scene-dots button::after{content:"";width:8px;height:8px;border:1px solid currentColor;border-radius:50%;transition:.18s}.scene-dots button span{opacity:0;transform:translateX(4px);transition:opacity .18s,transform .18s ease}.scene-dots button:hover span,.scene-dots button:focus-visible span,.scene-dots button[aria-current=step] span{opacity:1;transform:none}.scene-dots button[aria-current=step]::after{transform:scale(1.5);border-color:var(--red);background:var(--red)}
/* The meter is scaled, not resized: animating width lays the bar out
   again on every frame, animating transform does not. */
.journey-progress{position:absolute;z-index:6;inset:auto 0 0;height:3px;background:rgba(7,26,50,.1)}.journey-progress i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}

.motion-fallback{display:none}.journey-intro{padding:clamp(60px,7vw,98px) 0;background:var(--cream)}.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px 7vw;align-items:end}.intro-grid>.kicker{grid-column:1/-1}.journey-intro h2{margin:0;color:var(--navy);font-size:clamp(52px,8vw,102px);font-weight:400;letter-spacing:-.06em;line-height:.9}.stats-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-block:1px solid var(--line)}.stats-strip span{padding:24px 4px;border-right:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.stats-strip span:last-child{border:0}.stats-strip b{display:block;color:var(--navy);font:400 clamp(28px,4vw,46px)/1 "Archivo Black",Impact,sans-serif;letter-spacing:-.04em;text-transform:none}

.section{padding:clamp(76px,10vw,124px) 0}.section.paper{background:var(--paper)}.section.dark{background:var(--navy);color:#fff}.section-head{display:grid;grid-template-columns:1.1fr .7fr;gap:42px;align-items:end;margin-bottom:42px}.section h2{margin-bottom:0;font-size:clamp(42px,6.5vw,78px);line-height:.94;letter-spacing:-.05em}.section h3{margin-bottom:0}.section-lead{margin:0;color:var(--muted);font-size:clamp(17px,2vw,20px)}.dark .section-lead{color:rgba(255,255,255,.7)}
.services-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.service-card{grid-column:span 4;min-height:310px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid var(--line);border-radius:10px;background:#fff}.service-card.featured{grid-column:span 8;background:var(--navy);color:#fff}.service-num{color:var(--red);font:400 13px "Archivo Black",Impact,sans-serif}.featured .service-num{color:#ff9b9b}.service-card h3{max-width:11ch;font-size:clamp(25px,3.5vw,42px);line-height:.98;letter-spacing:-.035em}.service-card p{max-width:43ch;margin:22px 0 0;color:var(--muted)}.featured p{color:rgba(255,255,255,.7)}
.care-grid{display:grid;gap:20px}.photo-stack{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:370px;gap:12px}.photo,.work-shot{position:relative;overflow:hidden;margin:0;border-radius:10px;background:var(--navy-2)}.photo img,.work-shot img{width:100%;height:100%;object-fit:cover;transition:.6s}.photo:nth-child(1) img,.photo:nth-child(3) img{object-position:center 72%}.photo:hover img,.work-shot:hover img{transform:scale(1.035)}.photo figcaption,.work-shot figcaption{position:absolute;inset:auto 14px 14px;padding:8px 11px;border-radius:5px;background:rgba(7,26,50,.86);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.care-copy{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-rows:auto auto 1fr;column-gap:clamp(36px,6vw,82px);padding:clamp(30px,5vw,66px);border:1px solid rgba(255,255,255,.14);border-radius:10px;background:var(--navy-2)}.care-copy .kicker{grid-column:1;grid-row:1}.care-copy h2{grid-column:1;grid-row:2;font-size:clamp(40px,5vw,68px)}.care-copy>.section-lead{grid-column:1;grid-row:3;margin-top:20px}.care-list{grid-column:2;grid-row:1/span 3;display:grid;gap:22px;margin:0;padding:0;list-style:none}.care-list li{display:grid;grid-template-columns:36px 1fr;gap:13px;color:rgba(255,255,255,.72)}.care-list b{display:block;margin-bottom:3px;color:#fff}.check{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-weight:900}.work-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.work-shot{min-height:310px;border:1px solid rgba(255,255,255,.14)}
.team-story{display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden;margin-bottom:18px;border-radius:10px;background:var(--navy);color:#fff;box-shadow:var(--shadow)}.team-story img{width:100%;height:100%;min-height:340px;object-fit:cover}.team-story-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,6vw,70px)}.team-story h3{max-width:12ch;font-size:clamp(34px,5vw,58px);line-height:.98;letter-spacing:-.04em}.team-story p:last-child{max-width:48ch;margin:20px 0 0;color:rgba(255,255,255,.72);font-size:17px}
.review-stars{color:#ffd45e;letter-spacing:.09em;font-size:20px}.review-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.text-link{min-height:44px;display:inline-flex;align-items:center;color:var(--navy);font-size:13px;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.bar-phone:hover,.call-link:hover{color:var(--red-deep)}.brand:hover{opacity:.8}.text-link:hover{color:var(--red-deep)}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:42px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--line)}.step{min-height:230px;padding:30px;background:var(--cream)}.step b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff}.step h3{margin-top:36px;color:var(--navy);font-size:24px}.step p{margin-bottom:0;color:var(--muted)}
.faq-grid{display:grid;gap:12px;margin-top:42px}.faq-item{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}.faq-item summary{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;cursor:pointer;color:var(--navy);font-weight:800;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";color:var(--red);font:400 24px "Archivo Black",Impact,sans-serif}.faq-item summary:hover{background:var(--paper)}.faq-item[open] summary{background:var(--navy);color:#fff}.faq-item[open] summary::after{content:"–";color:#ff9b9b}.faq-item p{max-width:76ch;margin:0;padding:0 22px 22px;color:var(--muted)}.faq-item[open] p{padding-top:22px}
.area-banner{position:relative;overflow:hidden;background:var(--red);color:#fff}.area-banner::after{content:"";position:absolute;width:42vw;height:42vw;right:-12vw;top:-19vw;border:68px solid rgba(255,255,255,.12);border-radius:50%}.area-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}.area-banner h2{max-width:12ch}.white{color:#fff!important}.area-copy>p{max-width:52ch;font-size:18px}.area-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.area-tags span{padding:8px 12px;border:1px solid rgba(255,255,255,.44);border-radius:999px;font-size:12px;font-weight:800}.booking-card{padding:clamp(28px,5vw,48px);border-radius:10px;background:var(--cream);color:var(--navy);box-shadow:var(--shadow)}.booking-card h3{font-size:clamp(30px,4vw,46px);line-height:1}.booking-card p{color:var(--muted)}.booking-card .button{width:100%;margin-top:8px}.call-link{min-height:44px;display:flex;align-items:center;justify-content:center;margin-top:10px;color:var(--navy);font-weight:800}
footer{padding:42px 0 98px;background:#041222;color:rgba(255,255,255,.62)}footer .brand{color:#fff}footer .brand small{color:rgba(255,255,255,.62)}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}.footer-grid .brand{margin-bottom:18px}.footer-grid p{max-width:54ch;margin:0;font-size:13px}.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px;font-size:13px;font-weight:800}.footer-links a:hover{color:#fff}.concept-note{margin-top:26px!important;color:rgba(255,255,255,.55);font-size:11px!important}.mobile-book{display:none}

@media(max-width:980px){.scene-pills{display:none}.section-head,.care-grid,.team-story,.area-grid{grid-template-columns:1fr}.service-card,.service-card.featured{grid-column:span 6}.photo-stack{grid-template-rows:280px}.care-copy{grid-template-columns:1fr;grid-template-rows:auto}.care-copy .kicker,.care-copy h2,.care-copy>.section-lead,.care-list{grid-column:1;grid-row:auto}.care-list{margin-top:30px}.work-gallery{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}
@media(max-width:760px){:root{--bar-h:64px}.wrap{width:min(100% - 30px,1180px)}.journey-bar{gap:9px;padding-inline:12px}.brand{font-size:13px}.brand small{display:none}.brand-mark{width:34px;height:31px}.bar-actions{gap:8px}.bar-phone{font-size:12px}.bar-phone span{display:none}.scene-copy{left:20px;right:20px;top:auto;bottom:max(54px,calc(env(safe-area-inset-bottom) + 28px));width:auto;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(255,248,238,.92);box-shadow:0 12px 36px rgba(7,26,50,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateY(var(--copy-y,0px));color:var(--navy);text-align:center}.scene-copy h1{margin-bottom:10px;font-size:clamp(38px,12vw,58px)}.scene-body{max-width:37ch;margin:0 auto 8px;font-size:15px}.scene-proof{margin-bottom:12px}.scene-tags{justify-content:center}.scene-step{margin-bottom:8px}.scroll-cue{left:16px;bottom:14px}.scene-dots{right:13px;top:31%}.scene-dots button{width:44px}.scene-dots button span{display:none}.intro-grid{grid-template-columns:1fr;gap:22px}.intro-grid>.kicker,.stats-strip{grid-column:1}.stats-strip{grid-template-columns:1fr;margin-top:34px}.stats-strip span{border-right:0;border-bottom:1px solid var(--line)}.section-head{gap:20px;margin-bottom:30px}.photo-stack{grid-template-columns:1fr;grid-template-rows:repeat(3,240px)}.work-gallery{grid-template-columns:1fr}.work-shot{min-height:260px}.team-story img{min-height:0;aspect-ratio:4/3}.footer-links{gap:14px}}
@media(max-width:600px){.journey-bar>.brand>span:last-child{display:none}.bar-phone{font-size:0}.bar-phone::before{content:"Call";font-size:12px}.bar-actions .button{min-height:42px;padding:0 12px;font-size:11px}.scene-tags{display:none}}
/* Portrait: the poster mirrors the canvas's portrait fit (app.js PORT_Y .12,
   PORT_H .50, centred on the box). Its top and bottom edges are feathered
   into the stage colour by two gradient bands rather than a mask-image,
   because a mask on the LCP image delays its first paint on phones. */
@media(max-aspect-ratio:9/10){
  .journey-poster{top:12%;height:50%;object-position:61.7% 50%}
  .journey-stage::before,.journey-stage::after{content:"";position:absolute;z-index:0;left:0;right:0;height:3.5%;pointer-events:none}
  .journey-stage::before{top:12%;background:linear-gradient(var(--sweep),rgba(243,236,225,0))}
  .journey-stage::after{top:58.5%;background:linear-gradient(rgba(243,236,225,0),var(--sweep))}
  .journey-stage.canvas-ready::before,.journey-stage.canvas-ready::after{display:none}
}
@media(max-width:480px){.scene-copy{bottom:max(calc(var(--bar-h) + 16px),calc(env(safe-area-inset-bottom) + var(--bar-h) + 16px))}
/* The floating request/call bar sits over the foot of every section, and
   the reveal's copy is the one block that regularly ends underneath it. */
.reveal .reveal-panel{padding-bottom:max(78px,calc(env(safe-area-inset-bottom) + 78px))}
.services-grid{grid-template-columns:1fr}.service-card,.service-card.featured{grid-column:1;min-height:260px}.care-copy{padding:30px 24px}.area-banner::after{width:90vw;height:90vw;right:-40vw;top:-20vw}.mobile-book{position:fixed;z-index:90;inset:auto 12px max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(7,26,50,.95);box-shadow:0 18px 48px rgba(7,26,50,.36);backdrop-filter:blur(14px);transition:opacity .2s,transform .2s,visibility .2s}.mobile-book.journey-hidden{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px)}.mobile-book .button{min-height:46px}.mobile-book .secondary{width:48px;padding:0;border-color:rgba(255,255,255,.68);background:transparent}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.journey{display:none}.motion-fallback{display:block;padding:calc(var(--bar-h) + 42px) 20px 70px;background:var(--sweep)}.motion-fallback header,.motion-fallback figure{width:min(1050px,100%);margin:0 auto 42px}.motion-fallback header h2{max-width:12ch;margin:0 0 48px;color:var(--navy);font:400 clamp(44px,9vw,94px)/.9 "Archivo Black",Impact,sans-serif;letter-spacing:-.06em;text-transform:uppercase}.motion-fallback figure{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 18px 54px rgba(7,26,50,.11)}.motion-fallback img{width:100%;aspect-ratio:16/9;object-fit:cover;scale:1.015}.motion-fallback figcaption{display:grid;gap:4px;padding:18px 22px;color:var(--muted)}.motion-fallback figcaption b{color:var(--red);font-size:12px;text-transform:uppercase}.motion-fallback figcaption span{color:var(--navy);font:400 25px "Archivo Black",Impact,sans-serif;text-transform:uppercase}.motion-fallback figcaption small{font-size:15px}.scene-pills{display:none}}

/* ================================================================
   Scroll upgrade — 2026-09-16
   Every effect below degrades to a finished static state when JS is
   off, the viewport is under 720px, or motion is reduced.
   ================================================================ */

/* --- hero at rest: headline wipe-in + slow drift on the poster --- */
@keyframes hhm-wipe{from{clip-path:inset(0 100% -24% 0);transform:translateY(7%)}to{clip-path:inset(0 -10% -24% 0);transform:none}}
@keyframes hhm-drift{from{transform:scale(1.015)}to{transform:scale(1.075) translate(-1.6%,-1.1%)}}
@media (prefers-reduced-motion:no-preference){
  #scene-title{animation:hhm-wipe .78s cubic-bezier(.2,.75,.25,1) both}
  .motion-fallback header h2{animation:hhm-wipe .78s cubic-bezier(.2,.75,.25,1) both}
}
/* The poster drift stays a landscape-only touch: on a phone the poster is
   the LCP image and an animating transform on it during load costs
   Lighthouse points for a drift nobody sees behind the scrub. */
@media (prefers-reduced-motion:no-preference) and (min-aspect-ratio:9/10){
  .journey-poster{animation:hhm-drift 30s ease-in-out infinite alternate;transform-origin:58% 52%}
  .journey-stage.canvas-ready .journey-poster{animation:none}
}

/* --- scrubbed clip: an off-screen decode surface the canvas reads from --- */
.journey-video{position:absolute;z-index:0;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none;object-fit:cover}
.scene-note{max-width:38ch;margin:15px 0 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.02em}
.scene-note[hidden]{display:none}
.fallback-note{width:min(1050px,100%);margin:-22px auto 42px;color:var(--muted);font-size:13px;font-weight:600}

/* ================= SERVICE AREA — A MAP THAT DRAWS ITSELF ========= */
.coverage{padding-bottom:clamp(44px,5vw,72px)}
.cov-track{position:relative;margin-top:clamp(26px,3.4vw,44px)}
.cov-stage{position:relative}
.cov-panel{display:grid;gap:clamp(22px,3vw,40px);align-items:center}
.cov-map{position:relative;margin:0 auto;width:100%;max-width:520px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#08203c;box-shadow:0 26px 60px rgba(0,0,0,.34)}
.camap{display:block;width:100%;height:100%}

.sea{fill:#08203c}
.land path{fill:var(--sweep);stroke:#c8bba7;stroke-width:1.6;stroke-linejoin:round}
.geo-label{font:800 24px Manrope,system-ui,sans-serif;letter-spacing:.17em}
.geo-sea{fill:rgba(255,248,238,.5)}
.geo-land{fill:rgba(7,26,50,.44)}
.ghost{fill:none;stroke:rgba(255,248,238,.2);stroke-width:2.4;stroke-dasharray:6 10;stroke-linecap:round}
.run{fill:none;stroke:var(--red-deep);stroke-width:4.2;stroke-linecap:round}
.run-long{stroke-dasharray:none}
.arrow{fill:none;stroke:var(--red-deep);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.lane{fill:none;stroke:url(#hhmLane);stroke-width:6.6;stroke-linecap:round;filter:url(#hhmGlow)}
.lane-mask{fill:none;stroke:#fff;stroke-width:13;stroke-linecap:round}
.lane-dash{fill:none;stroke:rgba(7,26,50,.5);stroke-width:2.6;stroke-dasharray:14 21;stroke-linecap:butt}
/* The marching ants and the home-base pulse repaint for as long as they
   run, so on the scrubbed desktop map they are held to the stretch of
   scroll where the map is actually on screen. The static map below
   720px keeps them running exactly as before. */
@media (prefers-reduced-motion:no-preference){.coverage:not(.is-scrubbed) .lane-dash,.coverage.is-live .lane-dash{animation:hhm-march 1.4s linear infinite}}
@keyframes hhm-march{to{stroke-dashoffset:-35}}
.pin-dot{fill:var(--navy);stroke:#fff8ee;stroke-width:3}
.pin-home .pin-dot{fill:var(--red)}
.pin-halo{fill:none;stroke:var(--red);stroke-width:2;opacity:.5}
.pin-pulse{fill:none;stroke:var(--red);stroke-width:2.6;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.coverage:not(.is-scrubbed) .pin-home .pin-pulse,.coverage.is-live .pin-home .pin-pulse{animation:hhm-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite}}
@keyframes hhm-pulse{0%{transform:scale(.45);opacity:0}14%{opacity:.75}70%,100%{transform:scale(2.4);opacity:0}}
.pin-label,.pin-sub{paint-order:stroke fill;stroke:var(--sweep);stroke-width:7px;stroke-linejoin:round;text-anchor:middle}
.pin-label{fill:var(--navy);font:800 25px Manrope,system-ui,sans-serif;letter-spacing:.11em}
.pin-sub{fill:var(--red-deep);font:800 22px Manrope,system-ui,sans-serif;letter-spacing:.11em}
.pin-label.pl-start,.pin-sub.pl-start,.geo-label.pl-start{text-anchor:start}
.pin-label.pl-end,.pin-sub.pl-end,.geo-label.pl-end{text-anchor:end}
.pin-long .pin-label,.pin-long .pin-sub{stroke:#08203c}
.pin-long .pin-label{fill:#fff8ee}
.pin-long .pin-sub{fill:#ffb0b0}
.truck{opacity:0}
.truck-glyph rect,.truck-glyph path{fill:var(--navy)}
.truck-glyph .wheel{fill:#fff8ee;stroke:var(--navy);stroke-width:2}
.truck-halo{fill:var(--red);opacity:.34}
.truck-glyph rect{stroke:#fff8ee;stroke-width:2}

.cov-kicker{margin:0 0 12px;color:#ff9b9b;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.cov-lane{margin:0;color:#fff;font:400 clamp(27px,3.1vw,44px)/1.02 "Archivo Black",Impact,sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.cov-sub{min-height:1.4em;margin:12px 0 0;color:rgba(255,255,255,.74);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cov-bar{display:flex;align-items:center;gap:12px;margin-top:22px}
.cov-end{color:rgba(255,255,255,.72);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cov-rail{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.2)}
.cov-rail i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:3px;background:var(--red);transform-origin:0 50%}
.cov-ticks{display:grid;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.cov-tick{display:grid;grid-template-columns:12px 1fr;gap:13px;align-items:start;padding:15px 17px;border:1px solid rgba(255,255,255,.16);border-radius:10px;color:rgba(255,255,255,.74);font-size:13px;line-height:1.5;transition:opacity .35s,border-color .35s,background .35s,color .35s}
.cov-tick>i{width:11px;height:11px;margin-top:5px;border:1px solid currentColor;border-radius:50%}
.cov-tick b{display:block;margin-bottom:3px;color:#fff;font-size:14px;letter-spacing:.01em}
.cov-tick.on{border-color:var(--red);background:rgba(216,47,47,.14);color:rgba(255,255,255,.88)}
.cov-tick.on>i{border-color:var(--red);background:var(--red)}
.cov-note{margin:22px 0 0;max-width:58ch;color:rgba(255,255,255,.66);font-size:12px;font-weight:600}
.cov-note .text-link{color:#fff}
.cov-note .text-link:hover{color:#ff9b9b}

@media (min-width:720px){
  .cov-panel{grid-template-columns:auto 1fr;gap:clamp(24px,3.4vw,64px)}
  .cov-map{width:auto;max-width:none;height:min(52svh,430px);aspect-ratio:1000/1154;margin:0}
}
@media (min-width:980px){
  .cov-map{height:min(70svh,640px)}
}
@media (prefers-reduced-motion:no-preference){
  .coverage.is-scrubbed .cov-track{height:300vh}
  .coverage.is-scrubbed .cov-stage{position:sticky;top:var(--bar-h);height:calc(100svh - var(--bar-h));min-height:520px;display:flex;align-items:center;contain:layout}
  .coverage.is-scrubbed .truck{opacity:1}
  .coverage.is-scrubbed .pin-run,.coverage.is-scrubbed .run-head{opacity:0;transition:opacity .45s ease}
  .coverage.is-scrubbed .pin-run.on,.coverage.is-scrubbed .run-head.on{opacity:1}
  .coverage.is-scrubbed .cov-tick{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.62)}
  .coverage.is-scrubbed .cov-tick b{color:rgba(255,255,255,.8)}
  .coverage.is-scrubbed .cov-tick.on{border-color:var(--red);color:rgba(255,255,255,.88)}
  .coverage.is-scrubbed .cov-tick.on b{color:#fff}
  .coverage.is-scrubbed .cov-rail i{transform:scaleX(0)}
}
/* The phone map: full width, cropped tighter (app.js swaps the viewBox),
   a compact readout beneath it, and the three lane tiles as one row of
   chips so map + readout fit a phone's stage together. */
@media (max-width:719.98px) and (prefers-reduced-motion:no-preference){
  .coverage.is-scrubbed .cov-track{height:230svh}
  .coverage.is-scrubbed .cov-stage{min-height:0;align-items:flex-start;padding-top:12px}
  .coverage.is-scrubbed .cov-panel{gap:14px}
  .coverage.is-scrubbed .cov-map{max-width:none;border-radius:10px}
  .coverage.is-scrubbed .cov-kicker{margin-bottom:6px;font-size:10px}
  .coverage.is-scrubbed .cov-lane{font-size:clamp(22px,7vw,30px)}
  .coverage.is-scrubbed .cov-sub{min-height:0;margin-top:6px;font-size:11px}
  .coverage.is-scrubbed .cov-bar{margin-top:12px}
  .coverage.is-scrubbed .cov-ticks{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
  .coverage.is-scrubbed .cov-tick{grid-template-columns:8px 1fr;gap:6px;padding:9px 8px;line-height:1.2}
  .coverage.is-scrubbed .cov-tick>i{width:8px;height:8px;margin-top:3px}
  .coverage.is-scrubbed .cov-tick span{font-size:0;line-height:0}
  .coverage.is-scrubbed .cov-tick b{margin:0;font-size:11px;line-height:1.2}
  .coverage.is-scrubbed .cov-note{display:none}
}
@media (max-width:979px){
  .cov-map{max-width:560px}
  .pin-label,.pin-sub,.pin-halo,.geo-label{display:none}
  .pin-dot{stroke-width:4}
  .lane{stroke-width:9}
  .run{stroke-width:6}
  .arrow{stroke-width:7}
  .lane-mask{stroke-width:17}
  .lane-dash{stroke-width:3.4;stroke-dasharray:17 24}
}

/* ================= REVIEWS — ONE BIG SWAPPING PULL QUOTE ========= */
.pq-track{position:relative;margin-top:clamp(24px,3vw,40px)}
.pq-stage{position:relative}
.pq{position:relative;padding-top:clamp(10px,2vw,26px)}
.pq-ghost{position:absolute;z-index:0;left:-2.5vw;top:50%;transform:translateY(-54%);color:rgba(7,26,50,.075);font:400 clamp(210px,36vw,470px)/.72 "Archivo Black",Impact,sans-serif;letter-spacing:-.06em;white-space:nowrap;pointer-events:none;user-select:none}
.pq-stack{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,46px)}
.pq-item{margin:0}
.pq-item p{max-width:22ch;margin:18px 0 0;color:var(--navy);font:400 clamp(30px,4.4vw,62px)/1.02 "Archivo Black",Impact,sans-serif;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance}
.pq-item footer{padding:0;margin-top:clamp(18px,2.4vw,30px);background:none;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.02em}
.pq-item cite{font-style:normal}
.pq-nav{display:none;margin-top:clamp(20px,3vw,34px)}
.pq.is-swap .pq-nav{display:block}
.pq-dots{display:flex;flex-wrap:wrap;gap:9px}
.pq-dot{min-width:46px;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.09em;cursor:pointer;transition:.16s}
.pq-dot:hover{border-color:var(--navy);color:var(--navy)}
.pq-dot[aria-pressed="true"]{border-color:var(--red);background:var(--red);color:#fff}
.pq-src{position:relative;z-index:1;max-width:62ch;margin:20px 0 0;color:var(--muted);font-size:13px;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .pq.is-swap .pq-stack{gap:0;align-items:center;min-height:min(46vh,340px)}
  .pq.is-swap .pq-item{grid-area:1/1;visibility:hidden}
  .pq-track.is-swap-track{height:190vh}
  .pq-track.is-swap-track .pq-stage{position:sticky;top:calc(var(--bar-h) + 10px);min-height:calc(100svh - var(--bar-h) - 20px);display:flex;flex-direction:column;justify-content:center;contain:layout}
}
@media (max-width:719.98px) and (prefers-reduced-motion:no-preference){
  .pq-track.is-swap-track{height:170svh}
  .pq.is-swap .pq-stack{min-height:min(40svh,300px)}
  .pq.is-swap .pq-item p{font-size:clamp(26px,8vw,40px)}
  .pq.is-swap .pq-ghost{left:-4vw;font-size:clamp(150px,44vw,210px)}
  .pq.is-swap .pq-nav{margin-top:18px;padding-bottom:max(70px,calc(env(safe-area-inset-bottom) + 70px))}
  .pq-dot{min-width:44px;height:44px}
}

/* ================= WORK GALLERY — MOVING-TRUCK DECK (narrow) ===== */
@media (max-width:980px){
  .work-gallery{
    display:flex;gap:14px;
    padding:18px 20px 26px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-radius:12px;border:1px solid rgba(255,255,255,.12);
    background:
      repeating-linear-gradient(90deg,rgba(255,248,238,.05) 0 2px,transparent 2px 46px),
      repeating-linear-gradient(90deg,rgba(7,26,50,.55) 0 44px,rgba(13,43,79,.55) 44px 88px);
  }
  .work-gallery::-webkit-scrollbar{display:none}
  .work-shot{flex:0 0 min(78%,320px);scroll-snap-align:center;min-height:250px}
}
@media (prefers-reduced-motion:no-preference){
  .pq.is-swap .pq-item{opacity:0;transform:translateY(9px);transition:opacity .42s ease,transform .42s cubic-bezier(.2,.75,.25,1),visibility .42s}
  .pq.is-swap .pq-item.on{visibility:visible;opacity:1;transform:none}
}

/* ================================================================
   THE BRIDGE — pull back onto a flat truck, then drive off
   One scroll track shared with the pack/protect/wrap scenes: the
   journey canvas scales down around the box (--box-x/--box-y are the
   wrapped box's centre in the stage), settles on a flatbed drawn in
   the frame beneath it, then the whole rig slides off to the right
   while the backdrop crossfades to the navy of the coverage section.
   All of it is gated on >=720px and no-preferred-reduced-motion; the
   static state is simply the wrapped box, exactly as before.
   ================================================================ */
:root{
  --tu:0px;            /* one truck unit, in px — app.js writes it per viewport */
}
/* The box on the deck is the cut-out, not the frame: no radius, no card
   shadow, no backdrop. app.js sets left/top/width/height so it starts
   exactly on top of the canvas's own rendering of the same box, then
   --pull scales it about its own centre down onto the bed. */
.journey-box{
  position:absolute;z-index:2;max-width:none;visibility:hidden;
  opacity:var(--cut-a,0);
  transform-origin:54.247% 48.601%;
  transform:scale(calc(1 + (var(--cut-k,1) - 1) * var(--pull,0)));
  pointer-events:none;
}
.journey-stage.has-rig .journey-box{visibility:visible}
.rig-frame{
  position:absolute;display:block;height:auto;pointer-events:none;overflow:visible;
  left:var(--rigl,0px);
  top:var(--rigt,0px);
  width:calc(49 * var(--tu));
  aspect-ratio:49 / 25.6;
  transform:translateY(-62.5%);   /* puts the deck's top face on --rigt */
}
.truck-rig{z-index:0;opacity:var(--truck-a,0)}
.journey-road{z-index:0;opacity:var(--road-a,0)}
.tr-deck,.tr-cab{fill:var(--navy);stroke:var(--sweep);stroke-width:.55;stroke-linejoin:round}
.tr-rail{fill:var(--red)}
.tr-glass{fill:rgba(213,231,247,.92)}
.tr-lamp{fill:#ffd45e}
.tr-wheels circle{fill:#08182d;stroke:var(--sweep);stroke-width:.5}
.tr-hub{fill:var(--sweep);stroke:none}
.tr-shadow{fill:rgba(7,26,50,.16)}
.tr-road{stroke:rgba(7,26,50,.13);stroke-width:.45}
.tr-road-dash{stroke:rgba(216,47,47,.34);stroke-width:.6;stroke-dasharray:4 15;stroke-dashoffset:var(--road-dash,0)}

/* map marker: same flatbed, map palette */
.truck-glyph .tr-deck,.truck-glyph .tr-cab,.truck-glyph .tr-load{fill:var(--navy);stroke:#fff8ee;stroke-width:2;stroke-linejoin:round}
.truck-glyph .tr-rail{fill:var(--red);stroke:none}

/* ================================================================
   THE REVEAL — "Your stuff, home safe." as a clip-path text mask
   The headline is SVG <text> inside a clipPath; a real crew photo is
   clipped by it and a solid navy rect behind the cut-out makes the
   letters read as windows. Scroll scales the text up to ~12x until
   the counters leave the frame, the veil fades and the photo owns
   the stage, then the booking card slides up onto it.
   ================================================================ */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reveal{background:var(--navy);color:#fff}
.reveal-lead .kicker{color:#ff9b9b}
.reveal-track{position:relative}
.reveal-stage{width:min(1180px,calc(100% - 40px));margin:auto;display:grid;gap:clamp(26px,3.4vw,44px)}
.reveal-svg{display:none}
.reveal-still{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:12px;box-shadow:var(--shadow)}
.reveal-lead{display:grid;gap:0}
.reveal-lead h2{margin:0;font-size:clamp(42px,6.5vw,78px);line-height:.94;letter-spacing:-.05em}
.reveal-panel{display:grid;gap:14px;align-content:start}
.reveal-sub{max-width:46ch;margin:0;color:rgba(255,255,255,.76);font-size:clamp(16px,1.7vw,19px)}
.reveal-panel .booking-card{margin-top:10px}
.reveal-line{font:400 190px/1 "Archivo Black",Impact,sans-serif;letter-spacing:-.04em}
#reveal-veil{fill:var(--navy)}

@media (prefers-reduced-motion:no-preference){
  .reveal.is-scrubbed{padding:0}
  .reveal.is-scrubbed .reveal-track{height:300svh}
  .reveal.is-scrubbed .reveal-stage{position:sticky;top:0;width:auto;margin:0;display:block;height:100svh;overflow:hidden;contain:layout paint;background:var(--navy)}
  .reveal.is-scrubbed .reveal-svg{display:block;position:absolute;inset:0;width:100%;height:100%}
  .reveal.is-scrubbed .reveal-still{display:none}
  .reveal.is-scrubbed .reveal-lead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .reveal.is-scrubbed .reveal-panel[inert]{pointer-events:none}
  .reveal.is-scrubbed .reveal-panel{
    position:absolute;z-index:2;inset:auto 0 0;align-content:end;
    grid-template-columns:minmax(0,1fr) minmax(300px,400px);
    gap:8px clamp(24px,4vw,64px);
    padding:clamp(70px,9vw,120px) clamp(24px,5.8vw,92px) clamp(26px,3vw,42px);
    background:linear-gradient(0deg,rgba(7,26,50,.95),rgba(7,26,50,.9) 38%,rgba(7,26,50,.55) 72%,rgba(7,26,50,0));
    transform:translateY(112%)}
  .reveal.is-live .reveal-panel{will-change:transform}
  .reveal.is-scrubbed .reveal-sub{grid-column:1;align-self:end;max-width:34ch;margin:0 0 10px;color:rgba(255,255,255,.86);font-size:clamp(16px,1.6vw,19px);font-weight:650;text-shadow:0 1px 14px rgba(7,26,50,.7)}
  .reveal.is-scrubbed .reveal-panel .booking-card{grid-column:2;grid-row:1;margin:0;padding:clamp(22px,2.4vw,32px)}
  .reveal.is-scrubbed .reveal-panel .booking-card h3{font-size:clamp(26px,2.6vw,36px)}
  .reveal.is-scrubbed .reveal-panel .booking-card p{font-size:14px}
}
@media (max-width:1040px){
  .reveal.is-scrubbed .reveal-panel{grid-template-columns:minmax(0,1fr)}
  .reveal.is-scrubbed .reveal-panel .booking-card{grid-column:1;grid-row:auto}
  .reveal.is-scrubbed .reveal-sub{display:none}
}
@media (max-width:719.98px) and (prefers-reduced-motion:no-preference){
  .reveal.is-scrubbed .reveal-track{height:240svh}
  .reveal.is-scrubbed .reveal-panel{padding:54px 16px max(84px,calc(env(safe-area-inset-bottom) + 84px))}
  .reveal.is-scrubbed .reveal-panel .booking-card{padding:20px}
  .reveal.is-scrubbed .reveal-panel .booking-card h3{font-size:clamp(24px,7vw,30px)}
  .reveal.is-scrubbed .reveal-panel .booking-card p{margin:10px 0 0;font-size:13px}
  .reveal-line{font-size:200px}
}

.coverage.is-home .pin-home .pin-halo{stroke-width:4.5;opacity:1}
.coverage.is-home .pin-home .pin-dot{fill:var(--red)}

/* ================================================================
   CLOSING CTA — the last word, after the service-area banner
   The reveal's booking card is the in-story conversion point; this
   is the one for a reader who scrolled straight past it. Navy so it
   lands between the red banner above and the near-black footer
   below, with the deck's stripe motif as texture.
   ================================================================ */
.closing-cta{
  position:relative;overflow:hidden;
  padding:clamp(52px,6.5vw,86px) 0;
  border-top:4px solid var(--red);
  background:var(--navy);color:#fff;
}
.closing-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,248,238,.05) 0 2px,transparent 2px 42px);
}
.closing-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,64px);align-items:end}
.closing-cta .kicker{color:#ff9b9b}
.closing-cta h2{
  margin:0;font-family:"Archivo Black",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,5.4vw,66px);line-height:.92;letter-spacing:-.05em;
}
.closing-do{display:grid;gap:12px;justify-items:stretch}
.closing-do .button{width:100%}
.closing-call{
  min-height:46px;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,248,238,.34);border-radius:999px;
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:.18s;
}
.closing-call:hover{border-color:#fff;background:rgba(255,248,238,.08);color:#fff}
.closing-note{margin:6px 0 0;color:rgba(255,255,255,.62);font-size:12.5px;font-weight:600;line-height:1.5}
@media (max-width:860px){
  .closing-grid{grid-template-columns:1fr;align-items:start}
  .closing-cta h2{font-size:clamp(34px,8.5vw,52px)}
}