/* ============================================================================
   styles.css — Lorenzo Plumbing & Heating
   Reset · base · layout · components · utilities · media
   Consumes tokens.css. Build/spec refs: docs/design-system.md, interaction-spec.md,
   wireframes.md, scroll-effects.md.
   ============================================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);font-size:var(--fs-body);line-height:1.7;color:var(--ink);
  background:var(--surface);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
picture{display:contents}  /* <picture> wrappers never affect layout */
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}
a{text-underline-offset:.18em;text-decoration-thickness:1.5px}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;
  letter-spacing:0}
h3,h4{font-weight:600}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h1,h2,h3,h4{text-wrap:balance}
p{max-width:64ch}
p + p{margin-top:1em}
strong{font-weight:600}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-65);font-weight:400}
p,.lede{text-wrap:pretty}

/* ---------- Layout primitives ---------- */
.wrap{width:min(100% - var(--gutter)*2, var(--container));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.section--soft{background:var(--surface-soft)}
/* a section that sits directly under another one would otherwise stack two
   full section paddings; this drops the top half of that gap */
.section--flush{padding-top:0}
.section--deep{background:var(--surface-deep);color:#fff}
/* skip render/layout work for off-screen sections; intrinsic-size:auto remembers real
   height after first paint so the scrollbar never jumps. Excludes anything sticky. */
@supports (content-visibility:auto){
  .ticker,.cta,.site-footer,.section--cv{content-visibility:auto;contain-intrinsic-size:auto 600px}
}



/* ---------- Buttons ---------- */
.btn{--bg:var(--blue);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;min-height:52px;padding:0 1.6rem;border:2px solid transparent;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);font-weight:600;font-size:1rem;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),box-shadow var(--t);
  white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.on-dark .btn--ghost,.btn--ghost.on-dark{--fg:#fff;border-color:rgba(255,255,255,.5)}
.on-dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--white{--bg:#fff;--fg:var(--blue-deep)}
.btn--white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--lg{min-height:58px;padding:0 2rem;font-size:1.05rem}
.btn:active{transform:translateY(0)}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--blue);
  border-bottom:2px solid transparent;padding-bottom:2px;transition:gap var(--t-fast),border-color var(--t)}
.link-arrow:hover{gap:.85rem;border-color:var(--blue)}
.link-arrow .on-dark,.on-dark .link-arrow{color:var(--water-bright)}


/* ============================================================================
   HEADER
   ============================================================================ */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--blue);padding:.8rem 1.2rem;
  z-index:calc(var(--z-nav) + 1);border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  transition:background var(--t),box-shadow var(--t),border-color var(--t)}
.site-header__bar{display:flex;align-items:center;gap:1rem;
  padding:.85rem var(--gutter);max-width:var(--container-wide);margin-inline:auto;
  transition:padding var(--t)}
.site-header.is-solid .site-header__bar{padding-block:.5rem}
.brand{display:inline-flex;align-items:center;line-height:0;flex:none}
.brand img{height:48px;width:auto;transition:opacity var(--t),height var(--t)}
/* bigger, more confident header on desktop */
@media(min-width:1080px){
  .brand img{height:68px}
  .site-header.is-solid .brand img{height:60px}
  .site-header__bar{padding-block:1.05rem}
}
.brand .logo-white{position:absolute;opacity:1}
.brand .logo-color{opacity:0}
.site-header.is-solid{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.site-header.is-solid .logo-white{opacity:0}
.site-header.is-solid .logo-color{opacity:1}
.brand{position:relative}
.nav-center{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.nav__links{display:flex;align-items:center;gap:clamp(.6rem,1.8vw,1.8rem)}
.nav__links a{display:inline-flex;align-items:center;gap:.32rem;
  font-weight:600;font-size:.98rem;color:#fff;padding:.4rem .2rem;position:relative;
  transition:color var(--t)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--blue);transition:right var(--t) var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{right:0}
.site-header.is-solid .nav__links a{color:var(--ink)}
.site-header.is-solid .nav__links a[aria-current]{color:var(--blue)}
.nav__cta{flex:none;display:flex;align-items:center;gap:.9rem;margin-left:auto}
.nav__links .has-menu{position:relative}
.nav__links .has-menu>a{display:inline-flex;align-items:center;gap:.32rem}
.nav__chev{transition:transform var(--t) var(--ease);opacity:.8}
.has-menu:hover>a .nav__chev,.has-menu:focus-within>a .nav__chev{transform:rotate(180deg)}
.has-menu::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:.45rem;list-style:none;margin:0;z-index:calc(var(--z-header)+1);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;
  pointer-events:auto;transform:translateX(-50%) translateY(0)}
.submenu li a{display:block;padding:.62rem .85rem;border-radius:var(--r-sm);font-size:.96rem;
  font-weight:500;color:var(--ink)!important;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),padding-left var(--t-fast)}
.submenu li a::after{display:none}
.submenu li a:hover{background:var(--blue-tint);color:var(--blue-deep)!important;padding-left:1.1rem}
/* View All Projects: brand-blue row set apart from the three flagship jobs */
.submenu li.submenu-all{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.3rem}
.submenu li.submenu-all a{display:flex;align-items:center;gap:.5rem;color:var(--blue)!important;font-weight:700}
.submenu li.submenu-all a svg{transition:transform var(--t) var(--ease)}
.submenu li.submenu-all a:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.submenu,.nav__chev,.submenu li.submenu-all a svg{transition:none}}
.header-phone{display:none;font-weight:700;font-family:var(--display);font-size:1.2rem;
  letter-spacing:.02em;color:#fff;align-items:center;gap:.4rem}
.site-header.is-solid .header-phone{color:var(--ink)}
@media(min-width:1080px){
  .header-phone{display:inline-flex;font-size:1.34rem}
  .nav__links{gap:clamp(1.1rem,2.1vw,2.4rem)}
  .nav__links a{font-size:1.14rem}
}

/* Hamburger */
.burger{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;
  position:relative;z-index:calc(var(--z-nav)+1)}
.burger span{position:absolute;left:11px;right:11px;height:2.5px;background:#fff;border-radius:2px;
  transition:transform var(--t) var(--ease),opacity var(--t)}
.site-header.is-solid .burger span,.nav-open .burger span{background:var(--ink)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:920px){
  .nav-center,.nav__cta{display:none}
  .burger{display:block;margin-left:auto}
}

/* ============================================================================
   Mobile off-canvas nav — full-height slide-in, deep-blue brand header,
   scrollable link list with active-state accent + refined submenu treatment,
   sticky contact CTA card at the bottom.
   ============================================================================ */
.mobile-nav{position:fixed;inset:0;z-index:var(--z-nav);visibility:hidden;pointer-events:none}
.mobile-nav__scrim{position:absolute;inset:0;background:rgba(8,20,34,.62);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;
  transition:opacity var(--t)}
.mobile-nav__panel{position:absolute;top:0;right:0;height:100dvh;width:min(88vw,380px);
  background:#fff;box-shadow:-20px 0 60px rgba(8,20,34,.35);transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease);display:flex;flex-direction:column;
  padding:0;overflow:hidden}
.nav-open .mobile-nav{visibility:visible;pointer-events:auto}
.nav-open .mobile-nav__scrim{opacity:1}
.nav-open .mobile-nav__panel{transform:none}

/* Branded header slab: same blue treatment as the ticker + footer */
.mnav-head{flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.4rem 1.1rem 1.5rem 1.6rem;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));
  padding-top:calc(1.4rem + env(safe-area-inset-top))}
.mnav-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.mnav-head .flogo{height:42px;width:auto;display:block}
/* Close (X): always visible in the panel header, comfortable 44px tap target */
.mnav-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -6px -4px 0;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background var(--t-fast)}
.mnav-close:hover,.mnav-close:focus-visible{background:rgba(255,255,255,.28);outline:0}
.mnav-close:active{transform:scale(.94)}

/* Scrollable body: nav links + subsections + contact card */
.mobile-nav__panel > a,
.mobile-nav__panel > .mnav-sub,
.mobile-nav__panel > .mnav-cta{flex:none}
.mobile-nav__panel{overflow-y:auto;overscroll-behavior:contain}

/* Primary links: confident display type, a chevron that resolves on hover.
   No accent rails, no dots — the type and the motion carry the hierarchy. */
.mobile-nav__panel > a{position:relative;display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:1.55rem;line-height:1;letter-spacing:.005em;
  color:var(--ink);padding:1.15rem 1.6rem;
  border-bottom:1px solid var(--line);
  transition:color var(--t-fast),background var(--t-fast)}
/* a link that owns a sub-list connects to the card below it, so drop its rule */
.mobile-nav__panel > a:has(+ .mnav-sub){border-bottom:0;padding-bottom:.7rem}
.mobile-nav__panel > a::after{content:"";width:19px;height:19px;flex:none;margin-left:auto;
  background:currentColor;opacity:.22;transform:translateX(-5px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.mobile-nav__panel > a:hover,.mobile-nav__panel > a:focus-visible{color:var(--blue-deep);
  background:linear-gradient(90deg,var(--blue-tint) 0%,rgba(234,241,251,0) 78%);outline:0}
.mobile-nav__panel > a:hover::after,.mobile-nav__panel > a:focus-visible::after{opacity:.85;transform:none}
.mobile-nav__panel > a[aria-current="page"]{color:var(--blue-deep)}
.mobile-nav__panel > a[aria-current="page"]::after{opacity:.9;transform:none;color:var(--blue)}

/* Sub-lists (Services, Projects): a soft grouped card — no vertical rails,
   no bullets. Grouping and the active pill do the work the lines used to. */
.mnav-sub{display:flex;flex-direction:column;gap:.1rem;margin:.15rem .95rem 1.1rem;
  padding:.45rem;background:rgba(234,241,251,.5);border-radius:16px}
.mnav-sub a{font-family:var(--body);font-size:1rem;font-weight:500;color:var(--ink-65);
  padding:.66rem .85rem;border-radius:10px;
  transition:color var(--t-fast),background var(--t-fast)}
.mnav-sub a:hover,.mnav-sub a:focus-visible{color:var(--blue-deep);background:rgba(255,255,255,.72);outline:0}
.mnav-sub a[aria-current="page"]{color:var(--blue-deep);font-weight:600;background:#fff;
  box-shadow:0 1px 3px rgba(11,20,28,.08)}
.mnav-sub a.mnav-all{display:flex;align-items:center;gap:.5rem;color:var(--blue);font-weight:700}
.mnav-sub a.mnav-all svg{flex:none}

/* Bottom contact card: sticky-feel, subtle surface, prominent CTA + phone */
.mnav-cta{margin-top:auto;padding:1.3rem 1.4rem calc(1.3rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#fff,#f6f8fb);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.7rem;align-items:stretch;text-align:center}
.mnav-cta .btn{margin:0;font-size:1rem;padding:.95rem 1.2rem;box-shadow:var(--shadow-blue)}
.mnav-phone{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.01em;
  color:var(--blue-deep);padding:.35rem 0}
.mnav-phone svg{color:var(--blue)}
.mnav-avail{font:600 .7rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-65)}

@media (prefers-reduced-motion:reduce){.mobile-nav__panel,.mobile-nav__scrim,
  .mobile-nav__panel > a,.mobile-nav__panel > a::after,.mnav-sub a{transition:none}}


/* ============================================================================
   PORTFOLIO JOB GALLERY — editorial masonry, feature lead, lightbox
   (photos keep their native aspect ratio; portraits run tall, aerials run wide)
   ============================================================================ */
.gal-head{margin-bottom:clamp(1.3rem,2.6vw,1.9rem)}
.gal-head h2{margin:0}
/* full-width lead shot with a caption bar, same visual family as .smedia */
.glead{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);margin-bottom:clamp(.8rem,1.6vw,1.2rem);color:#fff;isolation:isolate}
.glead img{display:block;width:100%;height:auto;aspect-ratio:16/8.5;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.glead::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,16,28,.68),transparent 42%)}
.glead__cap{position:absolute;left:0;bottom:0;z-index:2;padding:1rem 1.2rem;
  font:600 .88rem/1.3 var(--body);color:#dce5f2;letter-spacing:.02em}
@media(hover:hover){.glead:hover img{transform:scale(1.02)}}
/* video variant of the lead: client aerial footage over its poster frame */
.glead--video{margin:0 0 clamp(.8rem,1.6vw,1.2rem)}
.glead--video .glead__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.glead--video figcaption{margin:0}
@media(hover:hover){.glead--video:hover img{transform:none}}
/* the masonry itself: CSS columns preserve every photo's natural proportions.
   gallery.js upgrades this to height-balanced flex columns (.m-js) so no
   column trails off with a lone tile; the columns rules are the no-JS path. */
.masonry{columns:3;column-gap:clamp(.7rem,1.4vw,1.1rem)}
.masonry--few{columns:2}
.masonry.m-js{columns:auto;display:flex;align-items:flex-start;gap:clamp(.7rem,1.4vw,1.1rem)}
.masonry.m-js .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  gap:clamp(.7rem,1.4vw,1.1rem)}
.masonry.m-js .mitem{margin:0}
.mitem{display:block;position:relative;overflow:hidden;border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);margin:0 0 clamp(.7rem,1.4vw,1.1rem);break-inside:avoid;
  background:var(--blue-tint,#eef4fc);isolation:isolate}
.mitem img{display:block;width:100%;height:auto;transition:transform var(--t-slow) var(--ease)}
.mitem::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(0deg,rgba(7,16,28,.38),transparent 45%);transition:opacity var(--t) var(--ease)}
.m-zoom{position:absolute;right:.65rem;bottom:.65rem;z-index:2;width:38px;height:38px;
  border-radius:50%;display:grid;place-items:center;background:rgba(10,18,30,.55);color:#fff;
  opacity:0;transform:translateY(5px);pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.m-zoom svg{width:17px;height:17px}
@media(hover:hover){
  .mitem:hover img,.masonry--few .mitem:hover img{transform:scale(1.035)}
  .mitem:hover::after{opacity:1}
  .mitem:hover .m-zoom{opacity:1;transform:none}}
/* copy band set between two runs of photos on the bigger jobs */
/* copy band between photo walls: framed as a card in the same family as the
   Job Details aside (white surface, gradient accent edge), not floating text */
.gal-note{position:relative;overflow:hidden;max-width:46rem;
  margin:clamp(1.8rem,3.6vw,2.8rem) auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:clamp(1.6rem,3.4vw,2.5rem) clamp(1.5rem,3.4vw,2.8rem);text-align:left}
.gal-note::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--blue),var(--water-bright))}
.gal-note h2{margin-bottom:.7rem;font-size:clamp(1.45rem,2.2vw,1.8rem)}
.gal-note p{color:var(--ink-65)}
.gal-note p+p{margin-top:.8rem}
@media(max-width:560px){.gal-note{padding:1.4rem 1.2rem}}
@media(max-width:1000px){.masonry{columns:2}}
@media(max-width:560px){
  .masonry,.masonry--few{columns:2;column-gap:.55rem}
  .mitem{margin-bottom:.55rem}
  .glead img{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.mitem img,.glead img,.m-zoom,.mitem::after{transition:none}}
/* lightbox counter (viewer chrome itself is defined with the legacy lightbox rules) */
.lb-count{display:block;margin-top:.3rem;font:600 .78rem/1 var(--body);
  letter-spacing:.14em;color:#9fb2cc}
html.lb-lock{overflow:hidden}
.lightbox figure{margin:0;display:flex;align-items:center;justify-content:center}

/* ============================================================================
   HERO
   ============================================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(2.5rem,6vw,5rem);overflow:hidden;color:#fff}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media > picture,.hero__media > .hero__video{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
/* autoplay video layers over its poster and fades in only once it is truly playing.
   Gated on .js so a no-JS visitor sees the video/poster normally, never a blank frame. */
.js .autovideo{opacity:0;transition:opacity 1s var(--ease);will-change:opacity;background:transparent}
.js .autovideo.is-playing{opacity:1}
.hero__sheen{z-index:1}
.hero__media::after{z-index:2}
@media (prefers-reduced-motion:reduce){.autovideo{display:none}}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(7,16,28,.86) 0%,rgba(7,16,28,.55) 42%,rgba(7,16,28,.25) 70%,rgba(7,16,28,.45) 100%),
             linear-gradient(0deg,rgba(7,16,28,.75),transparent 45%)}
.hero__inner{position:relative;z-index:1;width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.hero__eyebrow{color:#cfe0f7}
/* sized so neither headline phrase ever breaks mid-line */
.hero h1{font-size:clamp(2.5rem,5.6vw,5.1rem);max-width:22ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 .accent{color:var(--water-bright)}
.hero__sub{font-size:var(--fs-lede);max-width:46ch;color:#e8eef7;margin-top:1.2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem;align-items:center}

/* Hero entrance */
.hero__inner>*{opacity:0;transform:translateY(26px);filter:blur(10px);
  animation:rise 1.05s var(--ease) forwards}
.hero__inner>*:nth-child(1){animation-delay:.15s}.hero__inner>*:nth-child(2){animation-delay:.28s}
.hero__inner>*:nth-child(3){animation-delay:.41s}.hero__inner>*:nth-child(4){animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}

/* ============================================================================
   SECTION HEAD
   ============================================================================ */
.section-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:var(--s7);max-width:60ch}
.section-head--between{flex-direction:row;justify-content:space-between;align-items:flex-end;
  max-width:none;gap:2rem;flex-wrap:wrap}
.section-head h2{margin-top:.2rem}
.section-head .lede{margin-top:.4rem}


/* ============================================================================
   STATEMENT + ANGLED AERIAL COLLAGE (dynamic "scale" showcase)
   ============================================================================ */
.statement{display:grid;grid-template-columns:1.5fr auto;align-items:end;
  gap:clamp(2rem,5vw,5rem);margin-bottom:var(--s7)}
.statement__lines{font-family:var(--display);
  font-size:clamp(2.3rem,5.6vw,4.8rem);line-height:1.04;margin:0 0 1.4rem}
.statement__lines span{display:block;overflow:hidden}
.statement__lines span i{font-style:normal;display:block}
.statement__lines span:nth-child(2){padding-left:clamp(1rem,7vw,5rem)}
.statement__lines span:nth-child(3){padding-left:clamp(2rem,13vw,9rem)}
.statement__accent i{background:linear-gradient(92deg,var(--blue) 35%,var(--water));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* masked line rise (JS + motion only; static without either) */
.js .statement.reveal .statement__lines i{transform:translateY(115%);
  transition:transform .85s var(--ease)}
.js .statement.reveal .statement__lines span:nth-child(2) i{transition-delay:.1s}
.js .statement.reveal .statement__lines span:nth-child(3) i{transition-delay:.2s}
.js .statement.reveal.in .statement__lines i{transform:none}
.statement__meta{border-left:1px solid var(--line);padding:0 0 .5rem clamp(1.4rem,2.4vw,2.4rem);
  display:grid;gap:1.3rem;align-content:end}
.statement__meta b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1;font-variant-numeric:tabular-nums}
.statement__meta span{font-size:.9rem;color:var(--ink-65)}
@media(max-width:760px){
  .statement{grid-template-columns:1fr}
  .statement__lines span{padding-left:0!important}
  .statement__meta{border-left:0;border-top:1px solid var(--line);
    grid-template-columns:repeat(3,auto);justify-content:space-between;
    padding:1.3rem 0 0;gap:1rem}}

.collage{display:flex;align-items:flex-start;gap:clamp(8px,1.2vw,16px)}
.collage__item{position:relative;flex:1 1 0;min-width:0;overflow:hidden;aspect-ratio:3/4;
  color:#fff;box-shadow:var(--shadow-md)}
.collage__item img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.collage__item:hover img{transform:scale(1.06)}
.collage__item::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(7,16,28,.85),transparent 55%)}
.collage__item figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:1.2rem 1.3rem}
.collage__item figcaption b{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1rem,1.4vw,1.35rem);line-height:1}
.collage__item figcaption span{font-size:.85rem;color:#dce5f2}
/* the angled, staggered "mechanical drawing" arrangement */
.collage__item--a{clip-path:polygon(0 0,100% 0,93% 100%,0 100%)}
.collage__item--b{margin-top:clamp(1.5rem,4vw,3.5rem);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.collage__item--c{margin-top:clamp(3rem,8vw,7rem);clip-path:polygon(7% 0,100% 0,100% 100%,0 100%)}
@media(max-width:680px){
  .collage{flex-direction:column;gap:1rem}
  .collage__item{flex:none;aspect-ratio:auto;height:min(64vw,360px);
    margin-top:0!important;clip-path:none!important}
}

/* showcase media: large hero-video frame on the left, two stacked photos on the right */
.showcase-media{margin-top:clamp(2rem,4vw,3.2rem);display:grid;
  grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;
  gap:clamp(10px,1.2vw,16px)}
.smedia{position:relative;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);min-width:0;color:#fff}
/* two-tile layout: the main tile's aspect drives the row heights (both tiles
   use absolutely-positioned media, so something must give the grid height) */
.smedia--main{grid-row:1 / span 2;aspect-ratio:16/10}
.smedia--top{grid-row:1 / span 2}
.smedia picture{display:block;width:100%;height:100%}
.smedia img,.smedia video{display:block;width:100%;height:100%;object-fit:cover}
.smedia--main img,.smedia--main .smedia__video,
.smedia--video img,.smedia--video .smedia__video{position:absolute;inset:0}
.smedia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,16,28,.82),transparent 55%)}
.smedia figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:1.1rem 1.2rem}
.smedia figcaption b{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1rem,1.4vw,1.3rem);line-height:1}
.smedia figcaption span{font-size:.85rem;color:#dce5f2}
@media(max-width:820px){
  .showcase-media{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .smedia--main{grid-row:1;grid-column:1 / span 2;aspect-ratio:16/9}
  .smedia--top{grid-row:2;grid-column:1 / span 2;aspect-ratio:16/9}
  .smedia--bot{grid-row:2;grid-column:2}
}
@media(max-width:520px){
  .showcase-media{grid-template-columns:1fr}
  .smedia--main,.smedia--top,.smedia--bot{grid-column:1;aspect-ratio:16/10}
  .smedia--top{grid-row:2}.smedia--bot{grid-row:3}
}

/* ============================================================================
   SERVICES — numbered rows with image reveal
   ============================================================================ */
/* (homepage services list replaced by the Media Stage section, see below) */

/* ============================================================================
   FEATURED PROJECT — homepage: full-width cinematic band for The Warren,
   flanked below by the two other flagship jobs
   ============================================================================ */
.feat{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);color:#fff;isolation:isolate;aspect-ratio:21/10;min-height:400px}
.feat img,.feat .feat__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(76deg,rgba(7,16,28,.82) 0%,rgba(7,16,28,.45) 45%,transparent 72%)}
.feat__body{position:absolute;left:0;bottom:0;z-index:1;
  padding:clamp(1.5rem,3.4vw,2.8rem);max-width:34rem}
.feat__kicker{font:600 .74rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:#bcd4f2;margin-bottom:.7rem}
.feat__body h2{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:.95}
.feat__body>p{margin-top:.7rem;color:#dce5f2;font-size:clamp(.98rem,1.2vw,1.08rem);
  max-width:46ch;text-wrap:pretty}
.feat__body .btn{margin-top:1.3rem}
.feat-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.4vw,1.1rem);
  margin-top:clamp(.8rem,1.4vw,1.1rem)}
.feat-duo .proj{min-height:320px}
@media(max-width:900px){.feat{aspect-ratio:16/11}}
@media(max-width:700px){
  .feat{aspect-ratio:auto;min-height:480px}
  .feat-duo{grid-template-columns:1fr}
  .feat-duo .proj{min-height:260px}}

/* ============================================================================
   PROJECTS preview — feature + standard tiles
   ============================================================================ */
.proj-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}
.proj{position:relative;overflow:hidden;border-radius:var(--r-md);min-height:240px;
  display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform var(--t-slow) var(--ease)}
.proj::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(7,16,28,.85),transparent 62%)}
.proj:hover img{transform:scale(1.06)}
.proj__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.proj__body{padding:1.3rem}
/* proj__tag pill removed (brand kit: no pills) */
.proj h3{font-size:1.35rem}
.proj p{font-size:.9rem;color:#dce5f2;margin-top:.2rem}
.proj--feature{grid-column:span 2;grid-row:span 2;min-height:500px}
.proj--feature h3{font-size:2rem}
/* full-width banner tile: the third flagship runs across the grid's bottom */
.proj--wide{grid-column:1 / -1;min-height:360px}
.proj--wide h3{font-size:2rem}
@media(max-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj--feature{grid-column:span 2;grid-row:span 1;min-height:300px}
  .proj--wide{min-height:300px}}
@media(max-width:520px){.proj-grid{grid-template-columns:1fr}
  .proj--feature,.proj--wide{grid-column:span 1}}

/* ============================================================================
   TRUST STRIP + gauges
   ============================================================================ */
.trust{background:linear-gradient(120deg,var(--blue),var(--blue-deep));color:#fff;
  border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.5rem);box-shadow:var(--shadow-blue)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.trust-grid--4{grid-template-columns:repeat(4,1fr)}
.trust-grid>*+*{position:relative}
.trust-grid>*+*::before{content:"";position:absolute;left:-.75rem;top:15%;bottom:15%;width:1px;
  background:rgba(255,255,255,.2)}
@media(max-width:780px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:2rem}
  .trust-grid>*+*::before{display:none}}

/* ---- Pressure-gauge stat dials (instrument-panel trust strip) ---- */
.gauge{display:flex;flex-direction:column;align-items:center;text-align:center}
.gauge__dial{width:clamp(116px,15vw,160px);height:auto;overflow:visible;margin-bottom:.2rem}
.gauge__track{fill:none;stroke:rgba(255,255,255,.20);stroke-width:6.5;stroke-linecap:round}
.gauge__fill{fill:none;stroke:var(--water-bright);stroke-width:6.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--g,0));
  filter:drop-shadow(0 0 5px rgba(143,211,255,.55))}
.gauge__ticks line{stroke:rgba(255,255,255,.38);stroke-width:1.6;stroke-linecap:round}
.gauge__needle{transform-origin:50px 58px;transform:rotate(calc(-90deg + var(--g,0)*180deg))}
.gauge__needle line{stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.gauge__needle circle{fill:#fff;stroke:var(--blue-deep);stroke-width:1.5}
.gauge__num{font-family:var(--display);font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:.85;
  font-variant-numeric:tabular-nums;margin-top:-.5rem}
.gauge__lbl{text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;font-weight:600;
  color:#EAF3FF;margin-top:.55rem}
.gauge__unit{font-size:.42em;color:#9fc4f0;letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.gauge__needle{transition:none}}

/* ============================================================================
   CT SERVICE-AREA TICKER (custom marquee — local texture, motion-gated)
   ============================================================================ */
.ticker{background:linear-gradient(180deg,var(--blue-deep),var(--blue));color:#fff;overflow:hidden;position:relative}
.ticker__label{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;
  padding:0 1.2rem;background:var(--blue-deep);box-shadow:1px 0 0 rgba(255,255,255,.18);
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.95rem;white-space:nowrap}
.ticker__viewport{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;flex:none;align-items:center;gap:0;padding-block:1rem;
  animation:ticker 45s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{display:inline-flex;align-items:center;font-family:var(--display);
  text-transform:uppercase;font-size:1.05rem;letter-spacing:.06em;color:rgba(255,255,255,.92);white-space:nowrap}
.ticker__track span::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);
  margin:0 1.5rem;transform:rotate(45deg);border-radius:1px}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__viewport{mask-image:none;-webkit-mask-image:none}
  .ticker__track{animation:none;flex-wrap:wrap;justify-content:center;gap:.2rem 0}
}



/* ============================================================================
   TESTIMONIALS
   ============================================================================ */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.tcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.9rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:1rem;
  transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t)}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#B9D2F0}
.tcard::before{content:"\201C";position:absolute;top:.2rem;right:1.4rem;
  font-family:var(--display);font-weight:800;font-size:5.2rem;line-height:1;
  color:var(--blue-tint);pointer-events:none}
.stars{color:var(--gold);letter-spacing:.1em;font-size:1.05rem}
.tcard blockquote{font-size:1.08rem;line-height:1.55;color:var(--ink-80)}
.tcard cite{font-style:normal;margin-top:auto;display:grid;
  grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center}
.tcard .ava{grid-row:span 2;font-style:normal;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;letter-spacing:.04em}
.tcard cite b{font-weight:600;color:var(--ink);font-size:.95rem}
.tcard cite span{color:var(--ink-65);font-weight:400;font-size:.85rem}
@media(max-width:860px){.tcards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tcard:hover{transform:none}}

/* ============================================================================
   CTA BAND
   ============================================================================ */
.cta{position:relative;background:linear-gradient(120deg,var(--blue),var(--blue-700));color:#fff;
  overflow:hidden}
/* cinematic backdrop: two soft glows drifting very slowly through the blue */
.cta::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 55% at 76% 20%,rgba(143,211,255,.34),transparent 70%),
    radial-gradient(52% 62% at 14% 90%,rgba(7,32,64,.5),transparent 72%),
    radial-gradient(30% 40% at 40% 55%,rgba(63,169,245,.16),transparent 75%);
  animation:ctaDrift 30s var(--ease-inout) infinite alternate}
@keyframes ctaDrift{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.07)}}
@media(prefers-reduced-motion:reduce){.cta::before{animation:none}}
.cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.3rem;
  position:relative}
.cta h2{font-size:clamp(2.2rem,5vw,4rem);max-width:18ch;color:#fff}
.cta .lede{color:#dbe7f7;max-width:54ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer{background:linear-gradient(180deg,var(--blue-deep),var(--blue));
  color:rgba(255,255,255,.92);padding-top:var(--section-y)}
.footer-grid{display:grid;grid-template-columns:1.7fr .8fr 1fr 1.2fr;gap:2.5rem;
  padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.22)}
.site-footer img.flogo{height:44px;width:auto;margin-bottom:1rem}
.site-footer h4{font-family:var(--body);text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;color:#fff;margin-bottom:1rem;font-weight:700}
.site-footer a{color:rgba(255,255,255,.92);transition:color var(--t)}
.site-footer a:hover{color:#fff}
.site-footer li{margin-bottom:.55rem}
.site-footer a.f-all{display:inline-flex;align-items:center;gap:.45rem;font-weight:700}
.site-footer a.f-all svg{transition:transform var(--t) var(--ease)}
.site-footer a.f-all:hover svg{transform:translateX(4px)}
.footer-contact .big{font-family:var(--display);font-size:1.8rem;color:#fff;letter-spacing:.02em}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:1.5rem 0;font-size:.82rem;color:rgba(255,255,255,.92)}
.footer-bottom .footer-legal{justify-self:center}
.footer-bottom span:last-child{justify-self:end;text-align:right}
.footer-bottom a{color:rgba(255,255,255,.92)}
.footer-bottom a:hover{color:#fff}
@media(max-width:700px){
  .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.45rem}
  .footer-bottom span:last-child{justify-self:center;text-align:center}
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  /* comfortable 44px+ touch targets for the footer link lists */
  .site-footer li{margin-bottom:.15rem}
  .site-footer li a{display:inline-flex;align-items:center;min-height:44px;padding-block:.35rem}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================================
   REVEALS (JS adds .in; hidden state only applied when JS+motion allowed)
   ============================================================================ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* Cinematic type: inside text blocks the container holds still and the words settle
   in from a soft blur, headline first, copy a beat later. No boxes, just motion. */
.js .reveal:is(.section-head,.svc-body,.faq-intro){opacity:1;transform:none}
.js .reveal:is(.section-head,.svc-body,.faq-intro) :is(h2,h3),
.js h2.reveal{opacity:0;transform:translateY(30px);filter:blur(10px);
  transition:opacity .8s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js .reveal.in:is(.section-head,.svc-body,.faq-intro) :is(h2,h3),
.js h2.reveal.in{opacity:1;transform:none;filter:blur(0)}
.js .reveal:is(.section-head,.svc-body,.faq-intro) :is(p,.lede){opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease) .16s,transform .85s var(--ease) .16s}
.js .reveal.in:is(.section-head,.svc-body,.faq-intro) :is(p,.lede){opacity:1;transform:none}
.js .statement.reveal .lede{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease) .3s,transform .85s var(--ease) .3s}
.js .statement.reveal.in .lede{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .reveal[data-d="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .hero__inner>*{animation:none!important;opacity:1!important;transform:none!important}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .js .reveal :is(h1,h2,h3,p,.lede),.js h2.reveal{opacity:1!important;transform:none!important;
    filter:none!important;transition:none!important}
  .hero__inner>*{filter:none!important}
  .show-tile:hover img,.proj:hover img{transform:none!important}
}

/* ============================================================================
   COMPACT HERO (inner pages)
   ============================================================================ */
.hero--compact{min-height:62vh;align-items:center;padding-top:7rem;padding-bottom:4rem}
.hero--compact h1{font-size:var(--fs-h1)}
.hero--compact .hero__inner{padding-block:2rem}
/* Interior heroes are centered and full-width on phones, so the diagonal
   "reveal the photo on the right" scrim leaves the subhead over bright sky.
   Darken it uniformly below 768 so the copy always clears. */
@media(max-width:768px){
  .hero--compact .hero__media::after{
    background:linear-gradient(180deg,rgba(7,16,28,.6) 0%,rgba(7,16,28,.42) 34%,rgba(7,16,28,.66) 100%),
               linear-gradient(105deg,rgba(7,16,28,.62),rgba(7,16,28,.3) 88%)}
}
.breadcrumbs{font-size:.82rem;color:#cfe0f7;margin-top:1rem;letter-spacing:.04em}
.breadcrumbs a{border-bottom:1px solid transparent}.breadcrumbs a:hover{border-color:currentColor}

/* ============================================================================
   SPLIT (two-column content — about)
   ============================================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--flip .split__media{order:-1}
.split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body h2{font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.03;letter-spacing:-.015em;
  margin-bottom:clamp(1.4rem,2.4vw,2rem)}
.split__body h2 .accent{color:var(--blue)}
.split__body p{color:var(--ink-80);font-size:1.06rem;line-height:1.75;max-width:56ch}
.split__body p + p{margin-top:1.25em}
.minilist{margin-top:1.9rem;display:grid;gap:.8rem}
.minilist li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500}
.minilist svg{flex:none;width:24px;height:24px;color:var(--blue);margin-top:1px}
@media(max-width:820px){.split{grid-template-columns:1fr}.split--flip .split__media{order:0}}

/* ============================================================================
   SERVICE CARDS (services page)
   ============================================================================ */
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.scard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t)}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#B9D2F0}
/* image with a diagonal cut that echoes the homepage collage */
.scard__img{position:relative;aspect-ratio:16/10;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
.scard__img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.scard:hover .scard__img img{transform:scale(1.06)}
.scard__body{position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:.7rem 1.6rem 1.6rem;flex:1}
.scard h3{font-size:clamp(1.55rem,2.2vw,2.05rem);line-height:1.05;letter-spacing:-.01em}
.scard h3::after{content:"";display:block;width:40px;height:3px;border-radius:2px;
  background:var(--blue);margin-top:.8rem;transition:width var(--t) var(--ease)}
.scard:hover h3::after{width:72px}
.scard p{color:var(--ink-65);font-size:.97rem}
/* quiet editorial scope line (middot-separated; pills are banned, see docs/brand-kit.md) */
.scard__scope{font-size:.88rem;color:var(--ink-65);letter-spacing:.01em}
.scard__more{margin-top:auto;padding-top:1.1rem;color:var(--blue);font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:.45rem}
.scard__more svg{transition:transform var(--t) var(--ease)}
.scard:hover .scard__more svg{transform:translateX(5px)}
/* staggered editorial rhythm (middle column drops) */
@media(min-width:901px){.scard:nth-child(3n-1){margin-top:2.4rem}}
@media(min-width:601px) and (max-width:900px){
  .scards{grid-template-columns:repeat(2,1fr)}
  .scard:nth-child(2n){margin-top:2.4rem}}
@media(max-width:600px){.scards{grid-template-columns:1fr}
  .scard:nth-child(n){margin-top:0}}
@media (prefers-reduced-motion:reduce){
  .scard:hover{transform:none}
  .scard:hover .scard__img img{transform:none}}

/* ============================================================================
   PROJECTS gallery (filter + lightbox)
   ============================================================================ */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.filter{min-height:44px;padding:0 1.1rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:#fff;font-weight:600;font-size:.92rem;cursor:pointer;transition:all var(--t-fast)}
.filter:hover{border-color:var(--blue);color:var(--blue)}
.filter[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;grid-auto-flow:dense}
.gallery .proj{min-height:260px;cursor:pointer}
.gallery .proj.is-hidden{display:none}
.gallery .proj--feature{grid-column:span 2;grid-row:span 2;min-height:540px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .proj--feature{grid-column:span 2;grid-row:span 1;min-height:300px}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}.gallery .proj--feature{grid-column:span 1}}
.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,var(--blue-tint),var(--blue-tint) 14px,#fff 14px,#fff 28px);
  border:2px dashed var(--line-strong);color:var(--ink-65);font-weight:600;padding:1.5rem}
.placeholder::after{content:"";position:absolute;inset:0;background:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;
  justify-content:center;background:rgba(8,14,22,.92);padding:2rem}
.lightbox.open{display:flex}
.lightbox img,.lightbox video{max-width:92vw;max-height:86vh;border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg)}
.lightbox__cap{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:#fff;
  font-weight:600}
.lb-btn{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;width:54px;height:54px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background var(--t)}
.lb-btn[hidden]{display:none}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-close{top:1.2rem;right:1.2rem}.lb-prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lb-btn svg{width:24px;height:24px}
@media(max-width:560px){.lb-prev{left:.4rem}.lb-next{right:.4rem}}

/* ============================================================================
   CONTACT (form + rail)
   ============================================================================ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-sm)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4rem}
.field .req{color:var(--accent-red)}
.field .opt{font-weight:400;color:var(--ink-45)}
/* persistent guidance: unlike a placeholder it survives the first keystroke */
.field .hint{font-size:.84rem;color:var(--ink-65);margin:-.15rem 0 .45rem}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px var(--blue-tint)}
.field[data-error] input,.field[data-error] select,.field[data-error] textarea{border-color:var(--accent-red)}
.field .err{display:none;color:var(--accent-red);font-size:.84rem;margin-top:.35rem;font-weight:500}
.field[data-error] .err{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--ink-65);margin-top:.6rem}
.form-success{display:none;text-align:center;padding:2rem 1rem}
.form-success.show{display:block}
.form-success .tick{width:64px;height:64px;border-radius:50%;background:var(--blue-tint);color:var(--blue);
  display:grid;place-items:center;margin:0 auto 1rem}
.form-success .tick svg{width:34px;height:34px}
.is-sent .form-body{display:none}
.contact-rail{display:grid;gap:1.4rem;align-content:start}
.contact-rail dl{display:grid;gap:1rem;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.contact-rail dt{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-65)}
.contact-rail dd{margin-top:.15rem}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.contact-rail{order:-1}}

/* 404 */
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding-top:6rem}
.notfound .big{font-family:var(--display);font-size:clamp(5rem,18vw,12rem);color:var(--blue-tint);line-height:.8}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}




/* ============================================================================
   HERO WATER SHEEN (subtle light-on-water; sits under the scrim + text)
   ============================================================================ */
.hero__sheen{position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:.55;
  mix-blend-mode:soft-light;
  background:radial-gradient(55% 45% at 28% 22%,rgba(143,211,255,.55),transparent 60%),
             radial-gradient(45% 38% at 78% 82%,rgba(22,104,201,.5),transparent 60%);
  animation:sheen 16s ease-in-out infinite alternate}
@keyframes sheen{to{transform:translate3d(2.5%,-2%,0) scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  .hero__sheen{animation:none!important}
}

/* ============================================================================
   MOBILE SMOOTHING — phones only, desktop untouched
   Three decorative layers animate continuously, two of them through
   mix-blend-mode, which forces the compositor to re-read the backdrop every
   frame. Over a playing hero video that is what makes scrolling stutter on a
   phone. Here the motion and the blending stop; the colour stays, so nothing
   looks flat, and the layout is identical.
   ============================================================================ */
@media (max-width:900px){
  /* hero glow: keep the tint, drop the animation and the blend */
  .hero__sheen{animation:none;mix-blend-mode:normal;opacity:.3}
  /* CTA backdrop glows: static instead of drifting */
  .cta::before{animation:none}
  /* film grain is imperceptible at this size and costs a blended layer */
  .cta::after,.site-footer::after{display:none}
  /* keep hero media on its own compositor layer so scrolling never repaints it */
  .hero__media>picture,.hero__media>.hero__video{transform:translateZ(0);backface-visibility:hidden}
}

/* Trust bar reads better as two figures than a 2 + 1 orphan on a phone. */
@media (max-width:780px){
  .trust-grid .gauge[data-suf="\2605"]{display:none}
}

/* ============================================================================
   CAREERS — intro + application form
   ============================================================================ */
.careers-intro{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.careers-intro h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:.9rem}
.careers-intro .lede+.lede{margin-top:.8rem}
.careers-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(1.6rem,3.4vw,3rem);align-items:start}
@media(max-width:900px){.careers-grid{grid-template-columns:1fr}}
/* chosen-file list */
.filelist{list-style:none;margin:.6rem 0 0;padding:0}
.filelist li{font-size:.88rem;color:var(--ink-65);padding:.4rem .6rem;border-radius:6px;
  background:var(--blue-tint);margin-bottom:.35rem;word-break:break-word}
.filelist li.bad{background:#FDECEA;color:#8A2B22;font-weight:600}
/* the file input itself, styled to sit with the other fields */
.field input[type="file"]{padding:.7rem .8rem;font-size:.92rem;background:#fff;cursor:pointer}
.field input[type="file"]::file-selector-button{font:600 .88rem/1 var(--body);margin-right:.8rem;
  padding:.55rem .9rem;border-radius:6px;border:1px solid var(--blue);background:#fff;
  color:var(--blue);cursor:pointer}
.field input[type="file"]::file-selector-button:hover{background:var(--blue-tint)}

/* ---------- Print ---------- */
@media print{
  .js .reveal{opacity:1!important;transform:none!important}
  .site-header,.mobile-nav{display:none!important}
}

/* ============================================================================
   SERVICE DETAIL PAGES
   ============================================================================ */
.svc-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media(max-width:820px){.svc-cols{grid-template-columns:1fr}}
.svc-body h2{font-size:clamp(1.7rem,2.9vw,2.4rem);margin-bottom:1.4rem}
.svc-body p{color:var(--ink-80);font-size:1.06rem;line-height:1.75;max-width:58ch}
.svc-body p + p{margin-top:1.2em}
.svc-body + .svc-body{margin-top:clamp(3.2rem,6vw,4.8rem)}   /* breathing room between blocks */
/* every section paragraph reads the same size/weight — no first-block lede */
.svc-aside{position:sticky;top:96px;display:grid;gap:1.2rem}
@media(max-width:820px){.svc-aside{position:static}}
.aside-call{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;
  border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow-blue)}
.aside-call p{margin:0}
.aside-call .lbl{font-weight:600;font-size:.9rem;color:#e2edfb;text-transform:uppercase;
  letter-spacing:.12em}
.aside-call a{display:inline-flex;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2vw,1.9rem);margin:.35rem 0 .2rem;letter-spacing:.01em}
.aside-call a:hover{text-decoration:underline}
.aside-call .note{font-size:.85rem;color:#dbe7f7}
.svc-gallery{display:grid;grid-template-columns:1.45fr 1fr;gap:1.2rem;
  margin-top:clamp(2.8rem,6vw,4.5rem)}
.svc-gallery picture{display:block;min-width:0;overflow:hidden;border-radius:var(--r-lg)}  /* real grid items (sources stay boxless); clip parallax overscan */
.svc-gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);
  aspect-ratio:16/9}
@media(max-width:680px){.svc-gallery{grid-template-columns:1fr}}
.scope{position:relative;overflow:hidden;background:var(--surface-soft);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2rem)}
.scope::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--water-bright))}
.scope h2{font-size:1.1rem;letter-spacing:.04em;margin-bottom:1.1rem}
.facts{display:grid;gap:1rem}
.facts dt{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-65)}
.facts dd{margin:.15rem 0 0;font-family:var(--display);font-weight:600;font-size:1.25rem}
.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start}
@media(max-width:860px){.faq-split{grid-template-columns:1fr}}
.faq-intro{position:sticky;top:100px}
@media(max-width:860px){.faq-intro{position:static}}
.faq-intro .lede{margin-top:1rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:.75rem;transition:border-color var(--t),box-shadow var(--t)}
.faq details[open]{border-color:#B9D2F0;box-shadow:var(--shadow-sm)}
.faq summary{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 1.3rem;
  font-weight:600;font-size:1.03rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq__num{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--blue);
  flex:none;letter-spacing:.04em;transform:translateY(-1px)}
.faq__q{flex:1}
.faq summary::after{content:"+";font-family:var(--display);font-weight:700;font-size:1.5rem;
  line-height:1;color:var(--blue);flex:none;align-self:center;transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--blue-deep)}
.faq details>p{color:var(--ink-65);padding:0 3.2rem 1.25rem 3.2rem;max-width:62ch}
@media(max-width:560px){.faq details>p{padding:0 1.3rem 1.2rem 1.3rem}}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
/* tablet band would auto-fit 3 columns and orphan the 4th card; force 2x2 */
@media(min-width:561px) and (max-width:1020px){.related{grid-template-columns:repeat(2,1fr)}}
.related a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:64px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:1rem 1.25rem;font-weight:600;font-size:1rem;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.related a::after{content:"→";font-family:var(--display);color:var(--blue);font-size:1.15rem;
  transition:transform var(--t) var(--ease)}
.related a:hover{border-color:#B9D2F0;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.related a:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.related a:hover{transform:none}}
.scard__more{margin-top:auto;padding-top:.6rem;color:var(--blue);font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:.4rem}

/* ---------- Micro-finish ---------- */
.collage__item img,.proj img,.split__media img,.svc-gallery img,.scard__img img{
  outline:1px solid rgba(14,21,24,.08);outline-offset:-1px}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--water-bright) 40%,transparent 75%)}
.site-footer li a{display:inline-block;transition:color var(--t),transform var(--t)}
.site-footer li a:hover{transform:translateX(3px)}
html{scrollbar-color:#B9C7D6 transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#B9C7D6;border-radius:99px;border:3px solid #fff}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none!important;transform:none!important}
  .js .statement.reveal .statement__lines i{transform:none!important;transition:none!important}
  .site-footer li a:hover{transform:none}
}

/* ============================================================================
   TIER 1 — scroll progress, image fade-in, count-up
   ============================================================================ */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:calc(var(--z-header)+2);
  background:linear-gradient(90deg,var(--blue),var(--water-bright));
  transform:scaleX(var(--sp,0));transform-origin:0 50%;pointer-events:none}
/* image fade-in (blur-up feel); container tint prevents empty flash.
   Only images JS confirms are still decoding get .fx-fade, so already-loaded
   and above-the-fold photos never hide, and a stalled JS run leaves everything visible. */
.scard__img,.split__media,.svc-gallery picture{background:var(--surface-soft)}
.js img.fx-fade{opacity:0;transition:opacity .7s var(--ease)}
.js img.fx-fade.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js img.fx-fade{opacity:1!important;transition:none!important}
  .scroll-progress{transition:none}
}

/* ============================================================================
   TIER 2 — view transitions, parallax, link/button + form micro-UX
   ============================================================================ */

/* --- Cross-page view transitions: one continuous product, not separate files --- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.36s;animation-timing-function:var(--ease)}
/* chrome that should stay put across a navigation rather than crossfade */
.site-header{view-transition-name:site-header}
/* shared-element morph: the hero image flows from page to page */
.hero__media{view-transition-name:hero-media}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* --- Scroll parallax on section photos (JS sets --py; media is overscanned so no gap) --- */
.js .split__media img,.js .svc-gallery img{
  transform:scale(1.09) translate3d(0,var(--py,0),0);will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js .split__media img,.js .svc-gallery img{transform:none}
}

/* --- Inline text-link underline wipe (real paragraph links, not nav/buttons/cards) --- */
p:not(.breadcrumbs):not(.form-note) a:not(.btn):not(.link-arrow){
  text-decoration:none;background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease);padding-bottom:1px}
p:not(.breadcrumbs):not(.form-note) a:not(.btn):not(.link-arrow):hover{background-size:100% 2px}

/* --- Ghost button inset fill + primary arrow travel --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.btn--ghost:hover{color:#fff}
.on-dark .btn--ghost::before,.btn--ghost.on-dark::before{background:#fff}
/* on a white fill the label must go dark — cover both the ancestor .on-dark
   and the self-class .btn--ghost.on-dark (the hero phone button) */
.on-dark .btn--ghost:hover,.btn--ghost.on-dark:hover{color:var(--ink)}
.btn--ghost:hover::before{transform:scaleX(1)}
.btn svg{transition:transform .35s var(--ease)}
.btn--primary:hover svg,.btn--white:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .btn--ghost::before{transition:none}.btn svg{transition:none}
  .prose a,.svc-body a{transition:none}
}

/* --- Form micro-UX: animated labels, live-valid check, drawn success tick --- */
.field{position:relative}
.field label{transition:color var(--t)}
.field:focus-within label{color:var(--blue-deep)}
.field.is-valid input:not([type=submit]),.field.is-valid textarea{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.6rem}
.field.is-valid textarea{background-position:right .9rem .9rem}
.field.is-valid input:not([type=submit]),.field.is-valid textarea{border-color:#8fd3ab}
/* success: circle pops, check draws itself in */
.form-success.show .tick{animation:tickPop .5s var(--ease) both}
.form-success .tick svg path{stroke-dasharray:30;stroke-dashoffset:30}
.form-success.show .tick svg path{animation:tickDraw .55s .2s var(--ease) forwards}
@keyframes tickPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .form-success.show .tick{animation:none}
  .form-success .tick svg path{stroke-dashoffset:0;animation:none}
}

/* ============================================================================
   TIER 3 — film grain, cursor-reactive tiles
   ============================================================================ */

/* --- Film grain: cinematic, non-flat dark on the CTA band + footer --- */
.cta::after,.site-footer::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cta__inner{position:relative;z-index:1}
.site-footer .wrap{position:relative;z-index:1}

/* --- Cursor-reactive project tiles (JS sets --rx/--ry; fine-pointer + motion only) --- */
.proj-grid{perspective:1000px}
.js .proj{transition:transform .35s var(--ease),box-shadow var(--t)}
.js .proj.is-tilt{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(0)}

@media (prefers-reduced-motion:reduce){
  .js .proj.is-tilt{transform:none}
}

/* ============================================================================
   SERVICES — Media Stage (sticky crossfading panel + editorial hairline index)
   ============================================================================ */
/* ── Services · Media Stage ─────────────────────────────── */
.mstage-kicker{font:600 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-deep)}
.mstage{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start}
@media(min-width:900px){.mstage{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.25rem,5vw,4.5rem)}}

/* Sticky photo panel (desktop) — sized up front so there is no CLS */
.mstage__panel{display:none}
@media(min-width:900px){.mstage__panel{display:block;position:sticky;top:clamp(2rem,10vh,6rem);aspect-ratio:3/4;
  border-radius:var(--r-lg);overflow:hidden;background:var(--blue-tint);box-shadow:var(--shadow-lg)}}
.mstage__count{position:absolute;z-index:3;top:1rem;left:1.1rem;font:600 .82rem/1 var(--display);
  letter-spacing:.14em;color:#fff;mix-blend-mode:difference;font-variant-numeric:tabular-nums}
.mstage__count::before{content:"01"}
.mstage:has(.mrow--2:is(:hover,:focus-within)) .mstage__count::before{content:"02"}
.mstage:has(.mrow--3:is(:hover,:focus-within)) .mstage__count::before{content:"03"}
.mstage:has(.mrow--4:is(:hover,:focus-within)) .mstage__count::before{content:"04"}
.mstage:has(.mrow--5:is(:hover,:focus-within)) .mstage__count::before{content:"05"}
.mstage:has(.mrow--6:is(:hover,:focus-within)) .mstage__count::before{content:"06"}
.mstage__fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--t-slow) var(--ease)}
.mstage__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);display:block}
.mstage__cap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:.35rem;
  padding:clamp(1.3rem,3vw,2.1rem);color:#fff;
  background:linear-gradient(to top,rgba(11,20,28,.9),rgba(11,20,28,.34) 52%,transparent)}
.mstage__cap .k{font:600 .72rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--water-bright)}
.mstage__cap .n{font:600 clamp(1.6rem,3vw,2.15rem)/1.03 var(--display);color:#fff;text-wrap:balance;text-shadow:0 1px 14px rgba(11,20,28,.35)}
.mstage__cap .s{font:400 .95rem/1.45 var(--body);color:rgba(255,255,255,.9)}

/* Default = Service 01; :has() crossfades to the active row — no JS */
.mstage__fig--1{opacity:1}
.mstage:has(.mrow:is(:hover,:focus-within)) .mstage__fig{opacity:0}
.mstage:has(.mrow--1:is(:hover,:focus-within)) .mstage__fig--1,
.mstage:has(.mrow--2:is(:hover,:focus-within)) .mstage__fig--2,
.mstage:has(.mrow--3:is(:hover,:focus-within)) .mstage__fig--3,
.mstage:has(.mrow--4:is(:hover,:focus-within)) .mstage__fig--4,
.mstage:has(.mrow--5:is(:hover,:focus-within)) .mstage__fig--5,
.mstage:has(.mrow--6:is(:hover,:focus-within)) .mstage__fig--6{opacity:1}
}

/* Editorial index: name-only rows with a surface that materializes behind the active one */
.mlist{list-style:none;margin:0;padding:0}
.mrow{border-top:1px solid var(--line)}.mrow:last-child{border-bottom:1px solid var(--line)}
.mrow a{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;
  align-items:center;column-gap:1.25rem;padding:clamp(1.35rem,2.8vw,1.9rem) .2rem;
  text-decoration:none;color:inherit;transition:padding var(--t) var(--ease)}
.mrow a::before{content:"";position:absolute;inset:6px -1.25rem;z-index:-1;border-radius:var(--r-md);
  background:linear-gradient(115deg,var(--blue-tint) 0%,rgba(143,211,255,.22) 60%,rgba(234,241,251,.4) 100%);
  box-shadow:var(--shadow-md);opacity:0;transform:scaleX(.985);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.mrow a:is(:hover,:focus-within)::before{opacity:1;transform:none}
.mrow a:is(:hover,:focus-within){padding-left:1.25rem;padding-right:1rem}
.mrow a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.mrow__name{font:600 clamp(1.6rem,2.9vw,2.3rem)/1.05 var(--display);color:var(--ink);
  text-wrap:balance;transition:color var(--t) var(--ease)}
.mrow__arrow{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line-strong);color:var(--ink-45);
  transition:transform var(--t) var(--ease),color var(--t) var(--ease),
    background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
/* Active state: default row 01, then whichever row is hovered/focused */
.mrow--1 .mrow__name{color:var(--blue-deep)}
.mlist:has(.mrow:is(:hover,:focus-within)) .mrow--1 .mrow__name{color:var(--ink)}
/* Dim inactive names for editorial focus */
.mlist:has(.mrow:is(:hover,:focus-within)) .mrow:not(:hover):not(:focus-within) .mrow__name{color:var(--ink-45)}
.mrow a:is(:hover,:focus-within) .mrow__name{color:var(--blue-deep)}
.mrow a:is(:hover,:focus-within) .mrow__arrow{background:var(--blue);border-color:var(--blue);
  color:#fff;transform:translateX(4px)}

/* Inline photo — mobile only (desktop panel does the work) */
.mrow__img{grid-column:1/-1;display:block;margin-top:.7rem;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.mrow__img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
@media(min-width:900px){.mrow__img{display:none}}

/* --- Touch layout (<900px): the sticky panel is gone, so each row becomes a
   real card — photo on top, then name + arrow together on one aligned line.
   (Without this the img's full-width span orphans the arrow onto a 3rd row.) --- */
@media(max-width:899.98px){
  .mrow a{
    grid-template-columns:1fr auto;
    grid-template-areas:"img img" "name arrow";
    column-gap:1rem;row-gap:.9rem;align-items:center;
    padding:clamp(1.1rem,3.6vw,1.6rem) .1rem}
  .mrow a:is(:hover,:focus-within){padding-left:.1rem;padding-right:.1rem}
  .mrow__img{grid-area:img;margin-top:0}
  .mrow__img img{aspect-ratio:16/10}
  .mrow__name{grid-area:name;align-self:center}
  .mrow__arrow{grid-area:arrow;align-self:center}
  /* no "default-active" accent when there is no panel to drive */
  .mrow--1 .mrow__name{color:var(--ink)}
}
/* Tablet: two cards across so photos aren't full-bleed and the section
   isn't a mile long — uses the width the single column was wasting. */
@media(min-width:620px) and (max-width:899.98px){
  .mlist{display:grid;grid-template-columns:repeat(2,1fr);
    column-gap:clamp(1.25rem,3vw,2rem);row-gap:.4rem;align-items:start}
  .mrow,.mrow:last-child{border:0}
  .mrow a{padding:.85rem .1rem 1.4rem}
  .mrow a::before{inset:4px -.7rem}
  .mrow__name{font-size:clamp(1.35rem,2.4vw,1.7rem)}
}

@media(prefers-reduced-motion:reduce){
  .mstage__fig,.mrow a,.mrow a::before,.mrow__name,.mrow__arrow{transition:none}
}