/* ============================================================
   CAPITAN — Mine. Construct. Evolve.
   Design language: Archivo grotesque · #F55733 accent ·
   alabaster surface · hairline rules · inverted-radius corners
   ============================================================ */

:root{
  /* Capitan brand — sampled from the official logo */
  --bg:#FCFCFC;
  --ink:#2F3A40;          /* slate-tinted ink, harmonises with the mark */
  --ink-2:#5C6B73;
  --line:#D4DBDF;
  --accent:#F8962A;       /* Capitan orange */
  --slate:#808E96;        /* Capitan slate grey */
  --accent-ink:#FFF7EE;
  --dark:#1E2A30;
  --dark-2:#26343B;
  /* Figma token --radius/40: the template's corners are soft, not tight */
  --r-card:40px;
  --r-big:40px;
  --pad:clamp(20px, 5vw, 96px);
  --nav-h:76px;
  --nav-tall:178px;
  --rail-w:82px;
  --fillet:40px;
  --ease:cubic-bezier(.22,.61,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100;
  background:var(--bg);
  color:var(--ink-2);
  font-size:17px;
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
::selection{background:var(--accent);color:#fff}

h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.1}

/* ---------- reveal-on-scroll ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out) var(--d,0s),transform .9s var(--ease-out) var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
html.insta{scroll-behavior:auto}
html.insta .rv{opacity:1;transform:none;transition:none}
html.insta *{animation-play-state:paused !important}

/* ---------- custom cursor ---------- */
.cursor-dot{
  position:fixed;z-index:2000;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:#9a9a9a;pointer-events:none;transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .25s;opacity:0;
}
body.cursor-on .cursor-dot{opacity:.85}
body.cursor-hover .cursor-dot{width:34px;height:34px;opacity:.35}
.cursor-view{
  position:fixed;z-index:2000;top:0;left:0;width:96px;height:96px;border-radius:50%;
  background:rgba(252,252,252,.92);color:var(--ink);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:15px;font-weight:500;letter-spacing:.02em;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:transform .35s var(--ease-out),opacity .3s;
  backdrop-filter:blur(2px);
}
.cursor-view svg{width:22px;height:22px}
body.cursor-viewing .cursor-view{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.cursor-viewing .cursor-dot{opacity:0}
@media (hover:none){.cursor-dot,.cursor-view{display:none}}

/* ---------- inverted-radius fillet (the curved-edge trick) ----------
   A square whose corner is scooped out with a transparent quarter-circle,
   painted in the surface color, so plates appear to "melt" into images. */
.fillet{
  position:absolute;width:var(--fillet);height:var(--fillet);pointer-events:none;
  --c:var(--bg);
}
.fillet.tl{background:radial-gradient(circle at 100% 100%,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}
.fillet.tr{background:radial-gradient(circle at 0 100%,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}
.fillet.bl{background:radial-gradient(circle at 100% 0,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}
.fillet.br{background:radial-gradient(circle at 0 0,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}

/* ---------- layout primitives ---------- */
.container{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,130px);position:relative}
.section-tight{padding-block:clamp(48px,7vw,96px)}

.tag{
  color:#A8551A;font-weight:300;font-size:18px;letter-spacing:.01em;margin-bottom:14px;
}
.tag i{font-style:normal;opacity:.9}
.h2{
  font-size:clamp(26px,3.1vw,44px);font-weight:600;text-transform:uppercase;
  letter-spacing:.005em;line-height:1.04;margin-bottom:clamp(34px,4.5vw,64px);
  max-width:24ch;
}
.h2-wide{max-width:none}
.h2-light{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:#fff;border-radius:99px;padding:14px 26px;
  font-weight:500;font-size:16px;letter-spacing:.01em;
  transition:background .3s,transform .3s var(--ease-out);
  position:relative;overflow:hidden;
}
.btn .btn-dot{display:inline-grid;place-items:center;transition:transform .35s var(--ease-out)}
.btn:hover{background:var(--accent);transform:translateY(-2px)}
.btn:hover .btn-dot{transform:translate(2px,-2px)}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:#e14a28}
.btn-block{width:100%}
.btn-lg{padding:18px 28px;font-size:17px}
.btn-pill{padding:11px 22px;font-size:15px}

.arrow-btn{
  width:60px;height:60px;border:1px solid var(--ink-2);border-radius:50%;
  display:inline-grid;place-items:center;color:var(--ink);
  transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease-out);
}
.arrow-btn svg{width:26px;height:26px}
.arrow-btn-sm{width:42px;height:42px}
.arrow-btn-sm svg{width:18px;height:18px}

.link-underline{
  color:var(--ink);font-weight:500;position:relative;display:inline-block;margin-top:6px;
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;
  background:var(--accent);transform-origin:right;transition:transform .4s var(--ease-out);
}
.link-underline:hover::after{transform:scaleX(0)}

/* ============================================================
   LEFT RAIL + SLIDE-OUT MENU (hero only)
   ============================================================ */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:1200;
  background:#26292E;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:18px 0 26px;
  will-change:transform,opacity;   /* position is driven by hero scroll progress */
}
.rail.away{pointer-events:none}

.rail-btn{
  width:54px;height:54px;border-radius:50%;background:#fff;
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .4s var(--ease-out),background .3s;
}
.rail-btn:hover{transform:scale(1.07)}
.rail-burger{display:flex;flex-direction:column;gap:6px;align-items:center}
.rail-burger i{
  display:block;width:20px;height:2px;background:#26292E;border-radius:2px;
  transition:transform .4s var(--ease),width .3s;
}
.rail-burger i:last-child{width:13px}
body.menu-open .rail-burger i:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .rail-burger i:last-child{width:20px;transform:translateY(-4px) rotate(-45deg)}

.rail-mid{flex:1}
.rail-social{list-style:none;display:grid;gap:20px;justify-items:center}
.rail-social a{
  display:grid;place-items:center;width:22px;height:22px;color:#C6CBD0;
  transition:color .3s,transform .3s var(--ease-out);
}
.rail-social svg{width:100%;height:100%}
.rail-social a:hover{color:var(--accent);transform:translateY(-2px)}

.menu-scrim{
  position:fixed;inset:0;z-index:1150;background:rgba(12,16,18,.62);
  opacity:0;transition:opacity .45s var(--ease);
}
body.menu-open .menu-scrim{opacity:1}

.slide-menu{
  position:fixed;left:var(--rail-w);top:0;bottom:0;z-index:1180;
  width:min(460px,72vw);background:#fff;display:flex;flex-direction:column;
  /* shift by its own width PLUS the rail offset, or its right edge peeks out */
  transform:translateX(calc(-100% - var(--rail-w)));
  visibility:hidden;
  transition:transform .55s var(--ease),visibility .55s;
  overflow-y:auto;
}
body.menu-open .slide-menu{transform:none;visibility:visible}

.menu-item{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:26px 34px;border-bottom:1px solid #E7E9EA;
  color:var(--ink);font-size:clamp(19px,1.6vw,23px);font-weight:500;
  overflow:hidden;isolation:isolate;
}
.menu-item::before{                      /* orange wipe sweeps in from the left */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.menu-item:hover::before{transform:scaleX(1)}
.menu-item:hover{color:#fff}
.m-label{transition:transform .4s var(--ease-out)}
.menu-item:hover .m-label{transform:translateX(4px)}
.m-dot{
  width:9px;height:9px;border-radius:50%;background:#A8320F;
  opacity:0;transition:opacity .3s .05s;
}
.menu-item:hover .m-dot{opacity:1}
.m-arrow{
  margin-left:auto;width:24px;height:24px;display:grid;place-items:center;
  opacity:0;transform:translate(-8px,8px);
  transition:opacity .35s,transform .45s var(--ease-out);
}
.m-arrow svg{width:100%;height:100%}
.menu-item:hover .m-arrow{opacity:1;transform:none}
.menu-gap{flex:1;min-height:56px;border-bottom:1px solid #E7E9EA}
.menu-contact{border-bottom:0}
.m-live{
  width:9px;height:9px;border-radius:50%;background:#28B463;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(40,180,99,.6);animation:live 2.2s infinite;
}
@keyframes live{70%{box-shadow:0 0 0 9px rgba(40,180,99,0)}100%{box-shadow:0 0 0 0 rgba(40,180,99,0)}}
.menu-contact:hover .m-live{background:#fff;animation:none}
/* the home menu's own app bar — phones only. Inner pages already show the
   fixed subnav above their menu, so this exists on the homepage alone. */
.menu-brand{
  display:none;align-items:center;justify-content:space-between;gap:12px;
  background:var(--dark);
  padding:calc(14px + env(safe-area-inset-top, 0px)) 20px 14px 22px;
}
.mb-lockup{display:flex;align-items:center;gap:12px}
.menu-brand .mark{height:30px;width:auto}
.menu-brand .word{height:13px;width:auto;filter:brightness(0) invert(1)}
.menu-x{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
}
.menu-x svg{width:18px;height:18px}
@media (max-width:760px){
  .menu-brand{display:flex}
  /* full-bleed from the very top: the page's transparent bar (and the hero
     lockup behind it) must not peek above the open menu */
  .slide-menu{left:0;width:100%;transform:translateX(-100%)}
}
.menu-social{display:none;list-style:none;justify-content:center;gap:16px;padding:30px 0 34px}
.menu-social a{
  width:44px;height:44px;border-radius:50%;background:#26292E;color:#fff;
  display:grid;place-items:center;transition:background .3s,transform .3s var(--ease-out);
}
.menu-social svg{width:20px;height:20px}
.menu-social a:hover{background:var(--accent);transform:translateY(-3px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-tall);
  transition:transform .45s var(--ease),background .35s,border-color .35s,height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{height:var(--nav-h)}
.nav.scrolled{background:rgba(252,252,252,.82);backdrop-filter:blur(14px);border-color:var(--line)}
.nav.hidden{transform:translateY(-100%)}
/* mid-hero the bar is pushed out by the advancing video edge (driven inline) */
.nav.in-hero{pointer-events:none}
.nav-inner{
  max-width:1440px;margin:0 auto;height:100%;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:padding .5s var(--ease),max-width .5s var(--ease);
}
/* clear the left rail while it is on screen */
@media (min-width:761px){
  .nav-inner{padding-left:calc(var(--pad) + var(--rail-w) - 20px)}
  .nav.scrolled .nav-inner{padding-left:var(--pad)}
  /* At rest the bar belongs to the hero, and the hero is full-bleed. Capping
     it at the 1440 content column leaves a huge centring gutter on a wide
     monitor and the lockup drifts away from the headline — so mirror the
     hero's own inline padding until the page scrolls, then snap back. */
  .nav:not(.scrolled) .nav-inner{
    max-width:none;
    padding-right:clamp(24px,8vw,150px);
    padding-left:max(clamp(24px,8vw,150px), calc(var(--pad) + var(--rail-w) - 20px));
  }
  /* At rest the bar belongs to the hero, which is full-bleed. Capping it at
     1440 leaves a big centring gutter on wide monitors and the lockup drifts
     away from the headline — so mirror the hero's own inline padding until
     the page scrolls, then snap back to the 1440 content column. */
  .nav:not(.scrolled) .nav-inner{
    max-width:none;
    padding-right:clamp(24px,8vw,150px);
    padding-left:max(clamp(24px,8vw,150px), calc(var(--pad) + var(--rail-w) - 20px));
  }
  .hero-logo{display:none !important}   /* phone-only element */
}
/* Official artwork: full stacked lockup (with tagline) while the page is at
   rest; collapses to a compact horizontal mark + wordmark once scrolled. */
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
/* at rest: the full stacked lockup incl. the "Pursuit of Excellence" tagline */
.brand-full{height:172px;width:auto;transition:opacity .3s}
.brand-logo,.brand-word-img{display:none;width:auto}
.brand-logo{height:38px;transition:transform .5s var(--ease-out)}
.brand-word-img{height:17px;transition:opacity .3s}
/* once scrolled: compact horizontal mark + wordmark */
.nav.scrolled .brand-full{display:none}
.nav.scrolled .brand-logo,
.nav.scrolled .brand-word-img{display:block}
.brand:hover .brand-logo{transform:scale(1.06)}
.brand:hover .brand-full,.brand:hover .brand-word-img{opacity:.82}
.nav-links{
  display:flex;gap:34px;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
/* over the hero the rail menu handles navigation — links and the CTA fade
   back in only once the hero is behind us */
@media (min-width:761px){
  .nav:not(.scrolled) .nav-links,
  .nav:not(.scrolled) .nav-cta .btn-pill{
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  }
}
.nav-cta .btn-pill{transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background .3s}
.nav-links a{
  font-size:15.5px;font-weight:500;color:var(--ink-2);position:relative;padding-block:6px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:46px;height:46px;padding:0;background:#fff;border-radius:50%;
  transition:transform .35s var(--ease-out);
}
.nav-burger:hover{transform:scale(1.06)}
.nav-burger span{
  display:block;width:20px;height:2px;background:#26292E;border-radius:2px;
  transition:transform .35s var(--ease),width .3s;
}
.nav-burger span:last-child{width:13px}
body.menu-open .nav-burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav-burger span:last-child{width:20px;transform:translateY(-4px) rotate(-45deg)}

/* ============================================================
   HERO — pinned section, video slides up & expands (built-to-last)
   ============================================================ */
.hero{height:300vh;position:relative;z-index:0}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
/* Parallax reveal: the video stays pinned while the next section slides up
   over it, rather than the whole hero scrolling away. */
#divisions{position:relative;z-index:2;background:var(--bg);margin-top:-100vh}
/* every flow section over the hero's scroll range must paint its own ground —
   a transparent one lets the pinned video show (and play) through it */
.section{position:relative;z-index:2;background:var(--bg)}

.hero-content{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  padding-inline:clamp(24px,8vw,150px);gap:30px;
  will-change:transform;pointer-events:none;
}
.hero-content a{pointer-events:auto}
.hero-left{max-width:1050px}
.hero-kicker{
  display:flex;align-items:center;gap:12px;color:var(--ink);
  font-size:clamp(20px,2.4vw,34px);font-weight:500;margin-bottom:6px;
}
.hero-kicker .star{color:var(--accent);font-size:1.15em;animation:starSpin 9s linear infinite}
@keyframes starSpin{to{transform:rotate(360deg)}}
.hero-title{
  font-size:clamp(64px,15.5vw,238px);font-weight:800;letter-spacing:-.015em;
  line-height:.88;text-transform:uppercase;color:var(--ink);
  font-variation-settings:"wdth" 104;
}
.hero-sub{max-width:520px;font-size:18px;margin-top:26px}
.hero-logo{display:none}   /* phone only — see the max-width:760px block */

/* rotating badge straddles the seam between text and video */
.hero-right{position:absolute;left:calc(var(--seam) - 75px);top:52%;z-index:3;will-change:transform}

/* rotating badge */
.badge-spin{position:relative;width:150px;height:150px;display:block}
.badge-text{width:100%;height:100%;animation:spin 14s linear infinite}
.badge-text text{
  font-size:12.5px;font-weight:600;letter-spacing:.2em;fill:var(--ink);text-transform:uppercase;
}
@keyframes spin{to{transform:rotate(360deg)}}
.badge-core{
  position:absolute;inset:35px;background:var(--accent);border-radius:50%;
  display:grid;place-items:center;color:#fff;transition:transform .4s var(--ease-out);
}
.badge-core svg{width:30px;height:30px}
.badge-spin:hover .badge-core{transform:scale(1.12)}
/* no backing disc — its soft shadow read as a stray arc behind the badge */
.badge-spin-sm{width:118px;height:118px}
.badge-spin-sm .badge-core{inset:28px;font-size:26px}
/* Capitan triangle sits in the badge centre — white disc so the mark reads */
.badge-core-mark{background:none;box-shadow:none;padding:0}
.badge-core-mark img{
  width:58px;height:auto;min-height:0;max-width:none;
  object-fit:contain;display:block;
}

/* hero media — occupies the right side from the start; the frame is a
   full-bleed clipping window shifted right by the seam, and the video is
   counter-shifted so the reveal is pure GPU transform (curtain effect) */
.hero{--seam:50%}
.hero-media{position:absolute;inset:0;pointer-events:none;z-index:2}
/* These insets must match what renderHero() writes on its first frame. When
   they differed, the frame jumped once JS ran and cost 0.36 CLS. */
.hero-media-frame{
  position:absolute;top:0;left:0;right:0;bottom:28px;
  overflow:hidden;background:#d8d4cf;
  transform:translateX(var(--seam));border-radius:0 0 40px 60px;
  will-change:transform,border-radius;
}
.hero-media-frame video{
  width:100%;height:100%;object-fit:cover;
  transform:translateX(calc(-1 * var(--seam)));will-change:transform;
}
.hero-media-shade{
  position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);
}

/* curved white panel on the bottom strip, carved into the video (Figma: 400x104 @1920) */
/* Mirrors the video frame's box exactly (JS keeps them in sync) and clips its
   contents, so the caption is cut off by the card edge on its way out. */
.hero-panel-clip{
  position:absolute;top:0;left:0;right:0;bottom:28px;
  z-index:4;overflow:hidden;pointer-events:none;
  /* deliberately square: if the clip rounds this corner too it shaves the
     caption and leaves a visible arc. The caption carries the radius itself. */
  border-radius:0;
  transform:translateX(var(--seam));
}
.hero-panel{
  position:absolute;right:0;bottom:0;
  background:var(--bg);padding:20px 24px 12px 38px;
  border-top-left-radius:40px;will-change:transform;
}
.hero-panel h2{
  font-size:clamp(19px,2.19vw,42px);font-weight:600;text-transform:uppercase;
  text-align:right;line-height:1.02;letter-spacing:0;
}
/* curtain reveal: the caption wipes up from behind its own edge as the video
   opens out, instead of the whole plate sliding away */
.hero-panel .panel-clip{display:block;overflow:hidden}
.hero-panel .panel-clip h2{will-change:transform}
.hero-panel .fillet{--c:var(--bg)}
/* Positioned exactly on the corner, like .plate does — the old +1px nudge
   pushed each quarter-disc off tangent, and the join showed as a small spike
   where the concave curve met the plate corner instead of flowing into it. */
.f-tl-of-panel{left:calc(-1 * var(--fillet));bottom:0;background:radial-gradient(circle at 0 0,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}
.f-above-panel{right:0;top:calc(-1 * var(--fillet));background:radial-gradient(circle at 0 0,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}

/* ============================================================
   DIVISIONS — numbered rows, accordion, cursor-follow preview
   ============================================================ */
.svc-list{border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line)}
.svc-top{
  width:100%;display:flex;align-items:center;gap:22px;
  padding-block:clamp(26px,3.4vw,42px);text-align:left;
}
.svc-no{color:var(--accent);font-weight:300;font-size:18px;align-self:flex-start;min-width:28px}
.svc-name{
  flex:1;font-size:clamp(38px,5.6vw,84px);font-weight:800;text-transform:uppercase;
  color:var(--ink);line-height:.92;letter-spacing:-.005em;
  font-variation-settings:"wdth" 103;
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  transition:transform .45s var(--ease-out),color .3s;
}
.svc-name small{
  font-size:17px;font-weight:300;color:var(--ink-2);letter-spacing:0;
  text-transform:none;font-variation-settings:"wdth" 100;padding-bottom:6px;
}
/* .hot mirrors :hover — CSS :hover doesn't re-evaluate while scrolling,
   so JS hit-testing drives the same highlight as the image reel */
.svc-top:hover .svc-name,
.svc.hot .svc-name{transform:translateX(16px);color:var(--accent)}
.svc-toggle{
  width:48px;height:48px;border:1px solid var(--ink-2);border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;color:var(--ink);
  transition:background .3s,color .3s,transform .5s var(--ease-out),border-color .3s;
}
.svc-toggle svg{width:20px;height:20px}
.svc.open .svc-toggle{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(135deg)}
.svc-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);
}
.svc-body>.svc-grid{overflow:hidden}
.svc.open .svc-body{grid-template-rows:1fr}
.svc-grid{
  display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:clamp(22px,3vw,48px);
  align-items:start;
}
.svc-grid p{padding-bottom:clamp(26px,3vw,42px);max-width:46ch}
.chip-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.chip-row li{
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;
  font-size:14.5px;color:var(--ink);white-space:nowrap;background:#fff;
}
.svc-grid img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card);
  margin-bottom:clamp(26px,3vw,42px);
}
/* floating preview that chases the cursor; two imgs crossfade inside */
.svc-preview{
  position:fixed;z-index:60;width:min(420px,24vw);aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;pointer-events:none;
  opacity:0;transform:scale(.8) rotate(2deg);
  transition:opacity .35s,transform .5s var(--ease-out);
  box-shadow:0 26px 60px rgba(0,0,0,.2);
}
.svc-preview.on{opacity:1;transform:scale(1) rotate(5deg)}
/* vertical strip of all division images — rolls like a slot reel */
.svc-preview-track{
  position:absolute;inset:0;
  transition:transform .65s var(--ease);will-change:transform;
}
.svc-preview-track img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(24px,3vw,40px);
  align-items:stretch;margin-bottom:clamp(48px,6vw,84px);
}
/* no clip here — the image carries its own radius, so the notch below is
   drawn with a single edge instead of blending against the clipped photo */
.about-media{position:relative}
/* direct child only — otherwise this also hits the badge's logo image */
.about-media > img{
  width:100%;height:100%;min-height:420px;object-fit:cover;display:block;
  border-radius:var(--r-big);
}

/* white notch scooped out of the image's bottom-left, holding the badge */
.about-badge-notch{
  position:absolute;left:0;bottom:0;background:var(--bg);
  padding:22px 22px 0 0;
  border-top-right-radius:var(--fillet);
  border-bottom-left-radius:calc(var(--r-big) - 5px);   /* see .plate note */
}
.about-badge-notch .fillet{--c:var(--bg)}
.f-notch-t{left:0;top:calc(-1 * var(--fillet));
  background:radial-gradient(circle at 100% 0,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}
.f-notch-r{right:calc(-1 * var(--fillet));bottom:0;
  background:radial-gradient(circle at 100% 0,transparent calc(var(--fillet) - .5px),var(--c) var(--fillet))}

/* right column: folder-tab "Our story" card, then a second image */
.about-col{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.story-wrap{position:relative;padding-top:62px}
.story-tab{
  position:absolute;left:0;top:0;height:62px;display:flex;align-items:center;
  padding:0 30px;background:#F1F4F5;border-radius:26px 26px 0 0;
  font-size:clamp(19px,1.5vw,24px);font-weight:600;color:var(--ink);white-space:nowrap;
}
.story-tab::after{                 /* concave fillet joining tab to card */
  content:"";position:absolute;left:100%;bottom:0;width:26px;height:26px;
  background:radial-gradient(circle at 100% 0,transparent 25.5px,#F1F4F5 26px);
}
.story-card{
  background:#F1F4F5;border-radius:0 26px 26px 26px;
  padding:clamp(24px,2.2vw,32px);
}
.story-card p{font-size:16.5px;margin-bottom:16px}
.about-media-2{flex:1;border-radius:var(--r-big);overflow:hidden;min-height:190px}
.about-media-2 img{
  width:100%;height:100%;min-height:190px;object-fit:cover;display:block;
  transition:transform .9s var(--ease-out);
}
.about-media-2:hover img{transform:scale(1.05)}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);
  border-top:1px solid var(--line);padding-top:clamp(36px,4vw,60px);
}
.stat-num{
  font-size:clamp(56px,7vw,110px);font-weight:400;color:var(--ink);line-height:1;
  display:inline-block;
}
.stat-num::after{
  content:attr(data-suffix);color:var(--accent);font-size:.42em;font-weight:500;
  vertical-align:top;margin-left:2px;
}
.stat-label{display:block;margin-top:10px;font-size:16.5px}

/* marquee ribbon */
.ribbon{overflow:hidden;margin-top:clamp(56px,7vw,100px);border-block:1px solid var(--line);padding-block:18px}
.ribbon-track{display:flex;width:max-content;animation:ribbon 30s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-track span{
  font-size:clamp(28px,3.4vw,52px);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px var(--ink-2);
}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* ============================================================
   PROJECTS — sticky stacked cards + View cursor
   ============================================================ */
.proj-stack{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.proj{
  position:sticky;top:calc(var(--nav-h) + 14px + var(--i) * 12px);
  display:block;height:min(82vh,760px);border-radius:var(--r-big);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  isolation:isolate;
}
.proj img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.proj:hover img{transform:scale(1.05)}
/* Gradient screen. The pill and title sit in the top-left, so the scrim is
   weighted there rather than spread evenly — a light diagonal alone left
   white type unreadable over bright subjects like glass facades. */
.proj::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(11,15,19,.74) 0%,
      rgba(11,15,19,.46) 24%,
      rgba(11,15,19,.10) 52%,
      rgba(11,15,19,.34) 100%),
    linear-gradient(105deg,
      rgba(11,15,19,.44) 0%,
      rgba(11,15,19,.06) 48%,
      rgba(11,15,19,0) 70%);
}
.proj .pill{
  position:absolute;z-index:2;top:34px;left:38px;
  background:var(--accent);color:#fff;border-radius:99px;padding:10px 20px;
  font-size:15.5px;font-weight:500;
}
.proj h3{
  position:absolute;z-index:2;top:86px;left:38px;color:#fff;
  font-size:clamp(34px,4.6vw,66px);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;line-height:1;max-width:12ch;
}
.proj-meta{
  position:absolute;z-index:2;left:38px;bottom:30px;color:rgba(255,255,255,.85);
  font-size:15.5px;font-weight:300;letter-spacing:.02em;
}

/* ============================================================
   APPROACH — sticky left, progress line right
   ============================================================ */
.approach-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,90px)}
.approach-sticky{position:sticky;top:calc(var(--nav-h) + 30px)}
.approach-media{position:relative;margin-top:34px}
/* Figma 6:905 — image is 564x350 landscape, notch block 160x100 (28.4%/28.6%) */
.approach-media{max-width:564px}
.approach-media img{
  display:block;width:100%;aspect-ratio:564/350;object-fit:cover;
  border-radius:var(--r-big);
}
/* Notch cut out of one corner (Figma 6:907 / 6:1923). Three curves, not one:
   a convex inner corner plus a concave fillet on each side where the notch
   meets the photo edge — that pair is what makes the join read as smooth. */
.media-notch{position:absolute;background:var(--bg);pointer-events:none}
.media-notch::before,.media-notch::after{
  content:"";position:absolute;width:var(--fillet);height:var(--fillet);
}

.notch-br{
  right:0;bottom:0;width:28.4%;height:28.6%;
  border-top-left-radius:var(--fillet);
  border-bottom-right-radius:calc(var(--r-big) - 5px);
}
.notch-br::before{           /* above the notch, hugging the right edge */
  right:0;bottom:100%;
  background:radial-gradient(circle at 0 0,
    transparent calc(var(--fillet) - .5px), var(--bg) var(--fillet));
}
.notch-br::after{            /* left of the notch, along the bottom edge */
  left:calc(-1 * var(--fillet));bottom:0;
  background:radial-gradient(circle at 0 0,
    transparent calc(var(--fillet) - .5px), var(--bg) var(--fillet));
}

.notch-tl{
  left:0;top:0;width:28.4%;height:28.6%;
  border-bottom-right-radius:var(--fillet);
  border-top-left-radius:calc(var(--r-big) - 5px);
}
.notch-tl::before{           /* below the notch, hugging the left edge */
  left:0;top:100%;
  background:radial-gradient(circle at 100% 100%,
    transparent calc(var(--fillet) - .5px), var(--bg) var(--fillet));
}
.notch-tl::after{            /* right of the notch, along the top edge */
  right:calc(-1 * var(--fillet));top:0;
  background:radial-gradient(circle at 100% 100%,
    transparent calc(var(--fillet) - .5px), var(--bg) var(--fillet));
}

.approach-right{position:relative;padding-left:clamp(44px,5vw,80px)}
.approach-line{
  position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:var(--line);
  border-radius:2px;overflow:hidden;
}
.approach-line span{
  display:block;width:100%;height:0%;background:var(--accent);transition:height .1s linear;
}
.step{position:relative;display:flex;gap:22px;padding-block:clamp(34px,4.5vw,60px)}
.step + .step{border-top:1px solid #E4E4E2}
.step-dot{
  position:absolute;left:calc(-1 * clamp(44px,5vw,80px) + 4px);top:calc(clamp(34px,4.5vw,60px) + 8px);
  width:18px;height:18px;border-radius:50%;border:1px solid var(--ink-2);background:var(--bg);
  display:grid;place-items:center;
}
.step-dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-2);transition:background .3s}
.step.active .step-dot::after{background:var(--accent)}
.step-no{
  color:var(--accent);font-weight:800;font-size:clamp(56px,6vw,96px);line-height:.8;
  font-variation-settings:"wdth" 104;
}
.step-body h3{font-size:clamp(24px,2.4vw,36px);font-weight:700;margin-bottom:12px}
.step-body p{max-width:44ch}

/* ============================================================
   PRODUCTS — image cards with curved name plates
   ============================================================ */
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);
}
/* The clip lives on .prod-media, not the card. If the card clipped the plate
   too, the plate's antialiased edge blended with the photo underneath and
   left a faint arc — the template keeps the label outside the image clip. */
.prod{position:relative;isolation:isolate}
.prod-media{
  display:block;border-radius:var(--r-card);overflow:hidden;
}
.prod img{
  display:block;width:100%;aspect-ratio:3/3.4;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.prod:hover img{transform:scale(1.06)}
/* packshot on transparent bg — show it whole rather than cropping it */
/* backdrop goes on the clipped media, not the square card — otherwise it
   spills past the rounded corners. Plate stays white so the notch reads
   exactly like the photo cards. */
.prod-pack .prod-media{background:#EDF1F2}
.prod-pack img{object-fit:contain;padding:34px 30px 86px}
.plate{
  /* Sits above the clipped media, so its own corners are the only edges
     drawn — bottom-left matches the card radius, top-right is the notch. */
  /* --plate-bg lets a card with its own backdrop (the packshot) tint the
     plate and its fillets to match, instead of stamping page-white on it */
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--plate-bg,var(--bg));
  padding:18px 24px 16px 2px;
  border-top-right-radius:var(--fillet);
  /* a touch tighter than the image's corner, so the plate fully covers it and
     its own antialiased edge lands on the white page, not on the photo */
  border-bottom-left-radius:calc(var(--r-card) - 5px);
  max-width:82%;
}
/* the two concave fillets that turn the plate's corner into a flowing S —
   same idiom as .media-notch: transparent quarter-disc on the corner
   diagonally opposite the block, page colour filling the rest */
.plate::before,.plate::after{
  content:"";position:absolute;
  width:var(--fillet);height:var(--fillet);pointer-events:none;
  background:radial-gradient(circle at 100% 0,
    transparent calc(var(--fillet) - .5px),
    var(--plate-bg,var(--bg)) var(--fillet));
}
.plate::before{left:0;bottom:100%}                      /* up the left edge */
.plate::after{right:calc(-1 * var(--fillet));bottom:0}  /* along the bottom */

.plate b{display:block;color:var(--ink);font-size:18.5px;font-weight:600;line-height:1.2}
.plate small{color:var(--ink-2);font-size:14px;font-weight:300}


/* ============================================================
   SUPPLY PROGRAMS — pricing cards
   ============================================================ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.price{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,2.6vw,36px);
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.price:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(0,0,0,.09)}
.price-hot{border-color:var(--accent);box-shadow:0 18px 50px rgba(245,87,51,.12)}
.price h3{font-size:21px;font-weight:600;margin-bottom:18px}
.price-amt{color:var(--accent);font-size:clamp(28px,2.6vw,38px);font-weight:700;line-height:1}
.price-amt span{color:var(--ink-2);font-size:15px;font-weight:300;margin-left:8px}
.price-for{margin:14px 0 22px;font-size:15.5px}
.feat{list-style:none;margin-top:26px;display:grid;gap:14px}
.feat li{position:relative;padding-left:30px;font-size:15.5px}
.feat li::before{
  position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.feat .y::before{content:"✓";background:#E8F5EC;color:#1F8A4C}
.feat .n{opacity:.42}
.feat .n::before{content:"✕";background:#FDEBE6;color:#D64C2A}

/* ============================================================
   TESTIMONIALS — dual marquee rows
   ============================================================ */
/* rows fade out at both edges instead of colliding with the next section */
.tst-rows{
  display:grid;gap:22px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
/* position is driven in JS so hovering can ease the speed down rather than
   hard-stopping the animation */
.tst-track{display:flex;width:max-content;gap:22px;will-change:transform}
.tst-set{display:flex;gap:22px}
.tst{
  width:min(380px,84vw);background:#fff;border:1px solid #E6E6E4;border-radius:20px;
  padding:26px 26px 22px;flex-shrink:0;
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.tst:hover{
  transform:translateY(-8px) scale(1.035);
  box-shadow:0 26px 60px rgba(0,0,0,.13);
  border-color:#D9DDDF;
}
.tst header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.tst-avatar{
  width:46px;height:46px;border-radius:50%;background:var(--a,#333);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:15px;flex-shrink:0;
}
.tst header b{color:var(--ink);font-size:16.5px;display:block}
.tst header small{font-size:13.5px;color:var(--ink-2)}
.tst p{font-size:15.5px}
.tst-stars{margin-top:16px;color:var(--accent);letter-spacing:4px;font-size:15px}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(30px,5vw,90px)}
.faq-sticky{position:sticky;top:calc(var(--nav-h) + 30px)}
.faq-media{position:relative;margin-top:34px;max-width:564px}
.faq-media img{
  display:block;width:100%;aspect-ratio:564/350;object-fit:cover;
  border-radius:var(--r-big);
}

.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:clamp(22px,2.6vw,32px);cursor:pointer;
  color:var(--ink);font-size:clamp(19px,2vw,26px);font-weight:500;line-height:1.3;
  transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa-toggle{
  position:relative;width:44px;height:44px;border:1px solid var(--ink-2);border-radius:50%;
  flex-shrink:0;transition:transform .45s var(--ease-out),background .3s,border-color .3s;
}
.qa-toggle::before,.qa-toggle::after{
  content:"";position:absolute;inset:0;margin:auto;background:currentColor;transition:background .3s;
}
.qa-toggle::before{width:16px;height:1.6px}
.qa-toggle::after{width:1.6px;height:16px}
.qa[open] .qa-toggle{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:#fff}
.qa p{padding:0 64px clamp(22px,2.6vw,32px) 0;max-width:62ch}

/* ============================================================
   INSIGHTS
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.blog figure{border-radius:var(--r-card);overflow:hidden}
.blog img{
  width:100%;aspect-ratio:4/3.4;object-fit:cover;transition:transform .9s var(--ease-out);
}
.blog:hover img{transform:scale(1.06)}
.blog-meta{
  display:flex;align-items:center;gap:8px;margin:18px 0 8px;
  font-size:14.5px;color:var(--ink-2);
}
.blog-meta svg{width:16px;height:16px}
.blog-meta em{font-style:normal;opacity:.5}
.blog h3{
  font-size:clamp(19px,1.8vw,24px);font-weight:600;line-height:1.25;max-width:26ch;
  transition:color .3s;
}
.blog:hover h3{color:var(--accent)}

/* ============================================================
   CTA / CONTACT — dark
   ============================================================ */
/* Figma 6:2185 — site photo under a flat Cod Gray 80% overlay */
.section-dark{
  position:relative;isolation:isolate;overflow:hidden;color:#C9D2D8;
  background:#1C1C1C;
}
/* The parallax plate. Taller than the section so it can travel without
   exposing an edge, and moved with translate3d only — `fixed` attachment
   repaints the whole layer every frame and is the classic mobile jank
   source, which is why the effect was dropped the first time. */
.sd-par{
  position:absolute;left:0;right:0;top:0;height:100vh;z-index:-2;
  background:#1C1C1C url("https://images.pexels.com/photos/4513940/pexels-photo-4513940.jpeg?auto=compress&cs=tinysrgb&w=1400")
    center/cover no-repeat;
  will-change:transform;transform:translate3d(0,0,0);
  pointer-events:none;
}
@media (max-width:760px){
  .sd-par{
    background-image:url("https://images.pexels.com/photos/4513940/pexels-photo-4513940.jpeg?auto=compress&cs=tinysrgb&w=800");
  }
}
@media (prefers-reduced-motion:reduce){
  /* no motion: fall back to a plain cover of the band itself */
  .sd-par{height:100%;transform:none !important}
}
@media (min-width:761px){
  /* the original effect: viewport-anchored background, compositor-driven.
     JS emulation lags a frame behind the scroller and reads as shake —
     desktop gets the real thing, the JS pin is for phones only. */
  .sd-par{display:none}
  .section-dark{
    background:#1C1C1C url("https://images.pexels.com/photos/4513940/pexels-photo-4513940.jpeg?auto=compress&cs=tinysrgb&w=1400")
      center/cover no-repeat fixed;
  }
}
@media (max-width:760px){
  /* phones only ever see ~430 CSS px of it */
  .section-dark{background-image:none}
}
.section-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(28,28,28,.8);
}
.section-dark .tag{color:var(--accent)}
.cta-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(34px,5vw,90px);align-items:start}
.cta-person{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.cta-face{
  width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top center;
  flex-shrink:0;background:#2A3238;
}
.cta-person b{color:#fff;display:block;font-size:17px}
.cta-person small{font-size:14px}
.cta-left p{font-size:16.5px;max-width:40ch}

.cta-form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cta-form label{display:grid;gap:9px;font-size:15px;color:#E3E9ED;font-weight:500}
.cta-form input,.cta-form select,.cta-form textarea{
  font:inherit;color:#fff;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:15px 17px;
  transition:border-color .3s,background .3s;width:100%;
}
.cta-form textarea{resize:vertical;min-height:120px}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:#C2CBD2}
.cta-form input:focus,.cta-form select:focus,.cta-form textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.1);
}
.cta-form select option{background:var(--dark-2);color:#fff}
.form-note{font-size:13.5px;color:#7C8794;text-align:center}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,84px)}
.footer-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);
  padding-bottom:clamp(40px,5vw,70px);
}
/* footer uses the full lockup; override the nav's show/hide swap */
.brand-lg .brand-logo{display:block;height:clamp(120px,14vw,190px)}
.brand-lg .brand-word,.brand-lg .brand-word-img{display:none}
.footer-tel{margin-top:14px;font-size:19px}
.footer-tel:first-of-type{margin-top:26px}
.footer-tel a{color:var(--ink);transition:color .3s}
.footer-tel a:hover{color:var(--accent)}
.footer-nav-label{
  margin:38px 0 14px;color:var(--ink);font-weight:600;font-size:16px;
}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-nav a{font-size:16px;position:relative}
.footer-nav a:hover{color:var(--accent)}
.footer-address .footer-nav-label{margin-top:0}
.footer-address p{font-size:16.5px;max-width:46ch}
.map-frame{
  margin-top:22px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:#EDF0F1;
}
/* Google anchors its info card top-left while the pin stays at the map
   centre, and in this footer column the embed is only ~470px wide, so the
   address wraps and the card runs ~250px tall. Below about 500px the centre
   — and therefore the pin — sits behind the card. The 460px floor is that
   limit, not a preference: shrink it and the marker vanishes. Only the cap
   and the growth rate came down. */
.map-embed{display:block;width:100%;height:clamp(460px,36vw,540px);border:0}
.map-link{
  margin-top:14px;display:flex;align-items:center;gap:16px;
  border:1px solid var(--line);border-radius:18px;padding:16px 20px;background:#fff;
  transition:transform .4s var(--ease-out),box-shadow .4s;max-width:420px;
}
.map-link:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.08)}
.map-link:hover .arrow-btn{background:var(--accent);border-color:var(--accent);color:#fff}
.map-pin{font-size:22px}
.map-link b{display:block;color:var(--ink);font-size:16px}
.map-link small{color:var(--ink-2);font-size:13.5px}
.map-link .arrow-btn{margin-left:auto}
.footer-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:26px;font-size:14.5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-grid img{grid-column:1/-1}
  .about-grid{grid-template-columns:1fr}
  .about-media > img{min-height:320px}   /* direct child — not the badge logo */
  .about-media-2{min-height:240px}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .approach-grid,.faq-grid{grid-template-columns:1fr}
  .approach-sticky,.faq-sticky{position:static}
  .approach-media img,.faq-media{max-width:100%}
  .approach-media img{aspect-ratio:16/9}
  .faq-media{display:none}
  .cta-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--fillet:20px;--nav-h:64px}
  /* rail is desktop-only; the phone gets a dark app bar + full-width menu */
  .rail,.menu-scrim{display:none}
  /* over the hero there is NO bar — just a floating burger on the white page.
     The dark app bar only appears once the hero is behind us. */
  .nav,.nav.scrolled{
    border-color:transparent;transform:none;opacity:1;pointer-events:auto;
  }
  /* video is stretched — get the burger out of the way */
  .nav.in-hero{opacity:0;transform:translateY(-130%);pointer-events:none}
  .nav:not(.scrolled){background:transparent;height:auto;padding-top:12px}
  .nav:not(.scrolled) .nav-inner{height:auto;padding-inline:14px;justify-content:flex-end}
  .nav:not(.scrolled) .brand{display:none}
  .nav:not(.scrolled) .nav-burger{background:#26292E;box-shadow:0 6px 18px rgba(0,0,0,.16)}
  .nav:not(.scrolled) .nav-burger span{background:#fff}
  .nav.scrolled{background:#26292E;height:var(--nav-h);padding-top:0}
  .nav.scrolled .nav-inner{padding-inline:20px}
  .nav .brand-full{display:none}
  .nav.scrolled .brand-logo,.nav.scrolled .brand-word-img{display:block}
  .nav.scrolled .brand-logo{height:32px}
  .nav.scrolled .brand-word-img{filter:brightness(0) invert(1);height:15px}

  /* full-width dropdown menu, template style */
  .slide-menu{
    /* the page's own app bar stays put — the tabs slide in beneath it and
       the burger in the bar morphs into the cross. The top edge tucks a
       couple of px behind the bar so sub-pixel rounding can't open a seam. */
    left:0;right:0;width:100%;top:calc(var(--nav-h) - 2px);bottom:0;max-height:none;
    transform:none;
    clip-path:inset(0 0 100% 0);
    will-change:clip-path;backface-visibility:hidden;
    /* a 50px blur across a full-screen panel is repainted every frame on a
       phone — the lighter shadow is what keeps the slide smooth */
    box-shadow:0 14px 30px rgba(0,0,0,.13);
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    /* visibility steps at the end of the close rather than being eased */
    transition:clip-path .46s var(--ease),visibility 0s linear .46s;
  }
  body.menu-open .slide-menu{
    clip-path:inset(0 0 0 0);visibility:visible;
    transition:clip-path .46s var(--ease),visibility 0s;
  }
  /* the rows ride down a little behind the clip so it reads as a drawer
     opening rather than a curtain being wiped */
  .slide-menu .menu-item,
  .slide-menu .menu-social{
    transform:translateY(-14px);
    transition:transform .46s var(--ease);
  }
  body.menu-open .slide-menu .menu-item,
  body.menu-open .slide-menu .menu-social{transform:translateY(0)}
  .menu-item{padding:22px 24px;font-size:19px}
  .menu-gap{display:none}
  .menu-contact{border-bottom:1px solid #E7E9EA}
  .menu-social{display:flex}
  .nav-cta .btn-pill{display:none}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .hero{height:250vh}
  #divisions{margin-top:-80vh}
  /* stacked mobile hero: logo + text on top, inset video card below */
  /* svh throughout: with vh, the sticky layer runs under the collapsing
     URL bar and a bar-height strip of it shows at the divisions seam */
  .hero-sticky{background:#fff;height:100svh}
  .hero{height:300svh}
  #divisions{margin-top:-100svh}
  .hero-content{align-items:flex-start;padding-top:34px}
  .hero-logo{display:block;height:112px;width:auto;margin-bottom:20px}
  .hero-kicker{margin-bottom:4px}
  .hero-sub{margin-top:16px;line-height:1.55}
  /* card is flush left, so square off that side */
  /* must match renderHero()'s first mobile frame, or it jumps once JS runs.
     The caption clip mirrors the frame, so it needs the same starting box. */
  .hero-media-frame,
  .hero-panel-clip{
    top:48%;left:0;right:14px;bottom:14px;
    border-radius:0 46px 46px 0;transform:none;
  }
  /* Fixed to the viewport, pinned to the frame's foot: the frame's top edge
     rises over a video that never moves or scales — the desktop curtain,
     turned vertical. Sizing it to the frame instead is what forced the old
     counter-scale and made it read as a zoom. */
  .hero-media-frame video{
    position:absolute;left:0;bottom:0;
    width:100vw;height:100svh;max-width:none;
    object-fit:cover;transform:none !important;
  }
  .hero-panel-clip{border-radius:0}   /* caption draws its own corner */
  /* the clip already insets to the card, so 0 is the card's own corner */
  /* The hero carries a bigger curve than the cards do — closer to the
     desktop hero's 40px — so scope --fillet to it rather than raising the
     global value the product plates depend on. */
  /* fillet + top-left radius must fit inside the plate's height or the two
     arcs overlap and the video spikes through between them. JS clamps this to
     the measured height as well — see fitCaptionFillet(). */
  .hero-panel,.hero-panel .fillet{--fillet:38px}
  /* .hero-sticky is pure white on phones, not var(--bg). The plate has to be
     the same white or every place it meets the page — the card's bottom-right
     curve, the left fillet's tapered end — draws itself as a faint arc. */
  .hero-panel{background:#fff}
  .hero-panel .fillet{--c:#fff}
  /* same rule as .plate: the convex corner matches the concave fillets
     beside it, or the curve breaks where they meet */
  .hero-panel{right:0;bottom:0;border-top-left-radius:var(--fillet)}
  /* without these the plate meets the video at a hard right angle */
  .f-tl-of-panel,.f-above-panel{display:block}
  /* pointer-driven affordances never apply on a phone */
  .cursor-dot,.cursor-view,.svc-preview{display:none !important}
  /* during the hero the bar is just the burger; the lockup is in the hero
     itself. Once the hero is done the bar takes the logo back. */
  .nav:not(.scrolled) .brand{opacity:0;visibility:hidden}
  .brand{transition:opacity .35s var(--ease),visibility .35s}
  .hero-right{display:none}
  .hero-left{width:100%;min-width:0}
  .hero-title{font-size:clamp(32px,13.5vw,238px)}
  .hero-kicker{font-size:clamp(17px,4.6vw,34px)}
  .hero-sub{font-size:16px;max-width:100%}
  /* width:max-content — shrink-to-fit was collapsing the plate to its
     longest word and the clip cut the rest */
  /* the shrink-to-fit here resolves to the longest word and the caption
     overflows — pin an explicit floor sized to the two-line lockup */
  /* taller than the text needs: the plate has to be at least fillet + radius
     tall to seat both curves on its left edge */
  .hero-panel{padding:26px 18px 16px 26px;width:auto;min-width:min(248px,74vw);max-width:94%}
  .hero-panel h2{font-size:17px}
  .hero-panel h2{font-size:clamp(17px,4.9vw,48px)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .svc-name{font-size:clamp(20px,7.3vw - 7px,84px)}
  .svc-name small{font-size:14px;padding-bottom:3px}
  .svc-top{gap:14px}
  .svc-toggle{width:40px;height:40px}
  .svc-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .proj{height:64vh}
  .proj .pill{top:22px;left:22px}
  .proj h3{top:66px;left:22px}
  .proj-meta{left:22px;bottom:20px}
  .step{gap:16px}
  .qa p{padding-right:0}
}


/* ============================================================
   SUBPAGES (blogs / blog / careers) — shared chrome
   ============================================================ */
.subnav{
  position:sticky;top:0;z-index:900;height:76px;
  background:rgba(252,252,252,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.subnav-inner{
  max-width:1440px;margin:0 auto;height:100%;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.subnav .brand-logo{display:block;height:38px;width:auto}
.subnav .brand-word-img{display:block;height:16px;width:auto}
.subnav-links{display:flex;gap:30px}
.subnav-links a{font-size:15.5px;font-weight:500;color:var(--ink-2)}
.subnav-links a:hover,.subnav-links a[aria-current]{color:var(--ink)}
.subnav-burger{display:none}
@media (max-width:860px){
  .subnav{background:#26292E;border-color:transparent}
  .subnav .brand-word-img{filter:brightness(0) invert(1)}
  .subnav-links{
    display:none;position:absolute;inset:76px 0 auto 0;flex-direction:column;
    background:#26292E;padding:18px var(--pad) 26px;gap:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .subnav-links a{color:#E9EAEC}
  .subnav.open .subnav-links{display:flex}
  .subnav-burger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:44px;height:44px;background:#fff;border-radius:50%;
  }
  .subnav-burger span{
    width:18px;height:2px;background:#26292E;border-radius:2px;
    transition:transform .35s var(--ease);
  }
  body.menu-open .subnav-burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  body.menu-open .subnav-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .subnav .btn-pill{display:none}
}

.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(20px,3vw,36px)}
.page-hero .h2{margin-bottom:10px}
.page-hero p.lede{max-width:60ch;font-size:17.5px}

/* ---------- blog cards / listing ---------- */
.cat-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px}
.cat-pill{
  border:1px solid var(--line);border-radius:99px;padding:9px 18px;background:#fff;
  font-size:14.5px;color:var(--ink);cursor:pointer;transition:all .25s;
}
.cat-pill:hover{border-color:var(--ink-2)}
.cat-pill.on{background:var(--ink);border-color:var(--ink);color:#fff}

.feature-card{
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,40px);
  background:#fff;border:1px solid #E7E9EA;border-radius:var(--r-card);
  overflow:hidden;margin:26px 0 8px;
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.09)}
.feature-card figure{overflow:hidden}
.feature-card img{width:100%;height:100%;min-height:320px;object-fit:cover;transition:transform .9s var(--ease-out)}
.feature-card:hover img{transform:scale(1.04)}
.feature-body{padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.feature-body h2{font-size:clamp(24px,2.6vw,40px);font-weight:700;line-height:1.12}
.feature-body p{font-size:16.5px}
@media (max-width:860px){.feature-card{grid-template-columns:1fr}.feature-card img{min-height:220px}}

.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);padding:26px 0 10px}
@media (max-width:1080px){.blog-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.blog-list{grid-template-columns:1fr}}

.skeleton{position:relative;overflow:hidden;background:#EEF0F1;border-radius:var(--r-card)}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.empty-note{padding:40px 0;color:var(--ink-2)}

/* ---------- blog article ---------- */
.article{max-width:820px;margin:0 auto}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink-2);font-size:15px}
.article-meta .pill{position:static;background:var(--accent);color:#fff;border-radius:99px;padding:7px 16px;font-size:13.5px;font-weight:500}
.article h1{font-size:clamp(30px,4.4vw,56px);font-weight:700;line-height:1.08;margin:16px 0 18px}
.article-cover{border-radius:var(--r-card);overflow:hidden;margin:26px 0 10px}
.article-cover img{width:100%;max-height:480px;object-fit:cover;display:block}
.article-body{padding:18px 0 40px;font-size:17.5px;line-height:1.75;color:#3C4A52}
.article-body h2,.article-body h3{margin:34px 0 12px;color:var(--ink);font-weight:700;line-height:1.2}
.article-body h2{font-size:clamp(22px,2.4vw,30px)}
.article-body h3{font-size:clamp(19px,2vw,24px)}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:24px}
.article-body li{margin-bottom:8px}
.article-body blockquote{
  border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:22px 0;
  color:var(--ink);font-size:1.06em;
}
.article-body img{border-radius:16px;margin:10px 0}
.article-body code{background:#EEF0F1;border-radius:6px;padding:2px 7px;font-size:.92em}
.article-body hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.more-row{border-top:1px solid var(--line);padding-top:clamp(30px,4vw,50px);margin-top:20px}

/* ---------- careers ---------- */
.job{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:16px;overflow:hidden;
  transition:border-color .35s,box-shadow .45s,transform .45s var(--ease-out);
}
.job:hover{border-color:#D6DDE1;box-shadow:0 18px 44px rgba(16,22,28,.08);transform:translateY(-2px)}
.job.open{border-color:#D6DDE1;box-shadow:0 20px 50px rgba(16,22,28,.09)}

/* title left, Apply pill right, meta and teaser beneath */
.job-top{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:10px clamp(16px,2vw,28px);align-items:start;
  padding:clamp(22px,2.5vw,34px) clamp(22px,2.6vw,36px);cursor:pointer;
}
.job h3{
  grid-column:1;font-size:clamp(20px,2vw,27px);font-weight:600;color:var(--ink);
  line-height:1.2;letter-spacing:-.005em;
}
.job:hover h3{color:var(--accent)}
/* the right-hand cluster: department, location, type — then Apply last, so
   the button is always the right-most thing on the row */
.job-side{
  grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(14px,1.7vw,26px);flex-wrap:wrap;
}
.job-apply{
  order:2;align-self:center;
  background:var(--accent);color:#fff;border-radius:99px;
  padding:11px 26px;font-size:15px;font-weight:600;white-space:nowrap;
  transition:background .3s,transform .35s var(--ease-out),box-shadow .35s;
}
.job-apply:hover{background:var(--accent-deep,#E07F0F);transform:translateY(-2px);box-shadow:0 10px 24px rgba(248,150,42,.32)}
.job-meta-row{
  order:1;display:flex;flex-wrap:wrap;gap:8px 22px;
  color:var(--slate);font-size:14.5px;margin:0;
}
.job-meta-row span{display:inline-flex;align-items:center;gap:7px}
.job-meta-row svg{width:15px;height:15px;flex-shrink:0;opacity:.9}
.job-teaser{
  grid-column:1/-1;margin-top:8px;font-size:16px;line-height:1.6;
  color:var(--ink-2);max-width:70ch;
}
.job-more{
  grid-column:1/-1;justify-self:start;
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:14px;font-weight:600;color:var(--slate);
}
.job-more svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.job.open .job-more svg{transform:rotate(180deg)}
.job.open .job-more{color:var(--accent)}

.job-fold{height:0;overflow:hidden;transition:height .45s var(--ease)}
.job-body{padding:0 clamp(22px,2.6vw,36px) clamp(24px,2.6vw,34px)}
.job-body > p:first-child{padding-top:6px;border-top:1px solid var(--line)}
.job-body h4{
  margin:20px 0 8px;font-size:13px;color:var(--slate);
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;
}
.job-body p,.job-body li{font-size:16px;line-height:1.7;color:var(--ink-2)}
.job-body ul{padding-left:20px;margin:6px 0 10px;display:grid;gap:6px}
.job-actions{display:flex;gap:12px;margin-top:22px}

@media (max-width:640px){
  .job-top{grid-template-columns:1fr}
  .job-side{grid-column:1;grid-row:auto;justify-content:flex-start;gap:12px 18px}
  .job-apply{order:2;margin-top:2px}
}

/* ============ APPLY DRAWER ============ */
.ap-scrim{
  position:fixed;inset:0;background:rgba(16,22,28,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:1400;
}
.ap-scrim.on{opacity:1;pointer-events:auto}
.ap-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);z-index:1500;
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .48s var(--ease);
  box-shadow:-30px 0 70px rgba(16,22,28,.18);
}
.ap-drawer.on{transform:none}
.ap-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:clamp(24px,3vw,34px) clamp(22px,3vw,34px) 18px;
  border-bottom:1px solid var(--line);
}
.ap-kicker{
  color:var(--accent);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.ap-head h3{font-size:clamp(22px,2.2vw,28px);font-weight:700;color:var(--ink);margin-top:6px}
.ap-role{margin-top:6px;font-size:15px;color:var(--ink-2)}
.ap-close{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);flex-shrink:0;
  transition:background .3s,color .3s,border-color .3s;
}
.ap-close svg{width:17px;height:17px}
.ap-close:hover{background:var(--dark);border-color:var(--dark);color:#fff}

.ap-form{
  flex:1;overflow-y:auto;display:grid;gap:16px;align-content:start;
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px) 0;
}
.ap-group{
  font-size:12.5px;font-weight:700;color:var(--slate);
  text-transform:uppercase;letter-spacing:.1em;
  margin-top:8px;padding-bottom:2px;
}
.ap-group:first-of-type{margin-top:0}
.ap-field{display:grid;gap:7px;font-size:14px;font-weight:500;color:var(--ink)}
.ap-field > span{display:block}
.ap-field i{font-style:normal;color:var(--accent)}
.ap-field input,.ap-field select,.ap-field textarea{
  font:inherit;font-weight:400;color:var(--ink);background:#FBFCFC;
  border:1px solid #DCE2E5;border-radius:12px;padding:13px 15px;width:100%;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.ap-field textarea{resize:vertical;line-height:1.6}
.ap-field input:focus,.ap-field select:focus,.ap-field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(248,150,42,.15);
}
.ap-field small{font-size:12.5px;color:var(--slate);font-weight:400}
.ap-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:460px){.ap-two{grid-template-columns:1fr}}

.ap-foot{
  position:sticky;bottom:0;background:#fff;margin-top:6px;
  padding:16px 0 clamp(18px,2.4vw,26px);border-top:1px solid var(--line);
}
.ap-note{font-size:13px;color:var(--slate);margin-bottom:12px}
.ap-actions{display:flex;gap:10px;justify-content:flex-end}
.ap-actions .btn{flex:0 0 auto}


@media (max-width:820px){
  .job-top{grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .job-meta{grid-column:1/-1;justify-content:flex-start}
  .job-teaser{display:none}
}

/* ---------- shared form / modal / toast ---------- */
.modal-scrim{
  position:fixed;inset:0;z-index:1300;background:rgba(15,20,23,.55);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-scrim.on{display:flex}
.modal{
  width:min(560px,100%);background:#fff;border-radius:22px;
  padding:clamp(22px,3vw,34px);max-height:90vh;overflow:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.25);
}
.modal h3{font-size:22px;margin-bottom:4px}
.modal .sub{color:var(--ink-2);font-size:15px;margin-bottom:18px}
.form-grid{display:grid;gap:14px}
.form-grid label{display:grid;gap:7px;font-size:14px;color:var(--ink-2);font-weight:500}
.form-grid input,.form-grid select,.form-grid textarea{
  font:inherit;color:var(--ink);background:#FAFBFB;border:1px solid #DFE3E5;
  border-radius:12px;padding:13px 15px;width:100%;
  transition:border-color .25s,background .25s;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
.hp-field{position:absolute;left:-5000px;opacity:0;pointer-events:none}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#F1F3F4;transform:none}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:#1E2A30;color:#fff;border-radius:14px;padding:14px 22px;
  font-size:15px;z-index:1500;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .35s var(--ease-out);
  max-width:min(480px,90vw);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:#1F8A4C}
.toast.err{background:#C0392B}

.site-footer-simple{
  border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);
  padding:26px 0;font-size:14.5px;color:var(--ink-2);
}
.site-footer-simple .subnav-inner{height:auto}






/* ============================================================
   BLOGS page — pinned reveal hero + Highlights listing
   ============================================================ */
/* 320vh = 220vh of pinned scrolling. The reveal finishes inside the first
   ~40% of that; the remaining travel is the curtain (see .after-hero). */
.bhero{height:320vh;position:relative;z-index:0;background:var(--bg)}
.bhero-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);
  display:grid;place-items:center;
  /* Explicit column. With an auto column the giant word's max-content width
     (wider than the viewport at mid-range sizes) stretched the track, and the
     centred frame was pushed right by half the excess — a white strip down
     the left of the revealed image. */
  grid-template-columns:minmax(0,1fr);
}
/* Lockup on the white board, the way the homepage hero carries it. It sits
   under the reveal frame (z-index 0 vs 2) so the growing image passes over
   it, and JS slides it out to the left as the reveal runs.
   Phones don't get it — the pinned app bar already shows the logo. */
.bhero-logo{
  position:absolute;z-index:0;
  top:clamp(26px,4.2vh,52px);
  left:calc(var(--rail-w) + clamp(22px,3vw,52px));
  height:clamp(70px,7.6vw,124px);width:auto;
  will-change:transform,opacity;
}
@media (max-width:760px){.bhero-logo{display:none}}
.bhero-word{
  grid-area:1/1;z-index:1;
  display:grid;place-items:center;
  font-size:clamp(70px,16vw,250px);font-weight:800;letter-spacing:-.01em;
  color:var(--ink);text-transform:uppercase;line-height:1;
  font-variation-settings:"wdth" 104;user-select:none;
}
/* Two superimposed copies, each clipped to one half. The growing image
   pushes them apart: left half rides the frame's left edge, right half the
   right edge, so the picture appears to split the word open. */
.bw-h{grid-area:1/1;white-space:nowrap;will-change:transform}
.bw-l{clip-path:inset(0 50% 0 0)}
.bw-r{clip-path:inset(0 0 0 50%)}
.bw-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* growing window: centered frame clips a fixed viewport-sized image, so the
   strip reveals the photo without stretching it */
.bhero-frame{
  grid-area:1/1;z-index:2;position:relative;
  width:0;height:100vh;overflow:hidden;justify-self:center;
  will-change:width;
}
/* --vw is the documentElement's clientWidth, set by JS. Plain `vw` units
   INCLUDE the scrollbar, so on any scrollbar'd viewport a 100vw image is
   wider than the visible area and lands off-centre — that produced a white
   strip down one side of the revealed hero. translateX(-50%) then re-centres
   against the image's own width instead of a vw guess. */
.bhero-frame img{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--vw,100vw);height:100vh;object-fit:cover;max-width:none;
}
.bhero-shade{position:absolute;inset:0;background:#10151A;opacity:0}
.bhero-tag{
  grid-area:1/1;z-index:3;
  color:#fff;font-size:clamp(30px,4.4vw,62px);font-weight:600;text-align:center;
  line-height:1.14;letter-spacing:-.015em;
  /* ch scales with the font, so this wraps to 2–3 lines at every size */
  max-width:15ch;margin-inline:auto;
  padding-inline:24px;opacity:0;will-change:transform,opacity;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}

/* rail belongs to the hero — same as home: present over it, gone after */
.bpage .rail{opacity:0;transform:translateX(-30%);pointer-events:none;
  transition:opacity .45s var(--ease),transform .5s var(--ease)}
.bpage .rail.rail-live{opacity:1;transform:none;pointer-events:auto}
/* Only the WORD clears the rail — the frame must stay full-viewport so the
   growing image can run edge to edge. Padding the sticky box instead would
   pin the image away from the left edge and push it off the right. */
/* Symmetric padding, not left-only: it keeps the word's centre on the
   viewport centre so the split seam lines up with the image's centre, while
   still holding the text off the rail column. */
.bpage .bhero-word{padding-inline:calc(var(--rail-w) + clamp(18px,2.2vw,44px))}
@media (max-width:760px){.bpage .bhero-word{padding-inline:0}}

/* The curtain: pulling the content block up by a full viewport makes it rise
   OVER the still-pinned hero instead of waiting below it. It also means the
   hero is fully covered by the time it unpins, which hides the jump you get
   when a sticky element releases. */
.after-hero{position:relative;z-index:2;background:var(--bg);margin-top:-100vh}
/* On reveal-hero pages the nav is not part of the page flow: it stays off
   screen until the hero is fully behind you AND you scroll back up. */
.bpage .subnav{
  position:fixed;top:0;left:0;right:0;z-index:950;
  transform:translateY(-105%);transition:transform .42s var(--ease);
  will-change:transform;
}
.bpage .subnav.show{transform:none}

/* ---------- Highlights featured card ---------- */
.feat2{display:block;margin:26px 0 8px}
.feat2-media{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:21/9;background:#EEF0F1;
}
@media (max-width:760px){.feat2-media{aspect-ratio:4/3}}
.feat2-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.feat2:hover .feat2-media img{transform:scale(1.04)}
.pill-hl{
  position:absolute;top:24px;left:24px;display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:#fff;border-radius:99px;padding:11px 22px;
  font-size:15.5px;font-weight:600;
}
.feat2-meta{
  display:flex;align-items:center;gap:8px;margin:20px 0 8px;
  font-size:14.5px;color:var(--ink-2);
}
.feat2-meta svg{width:16px;height:16px}
.feat2-meta em{font-style:normal;opacity:.5}
.feat2 h2{
  font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.22;max-width:34ch;
  transition:color .3s;
}
.feat2:hover h2{color:var(--accent)}

/* ---------- blogs footer (compact site footer) ---------- */
.bfooter{border-top:1px solid var(--line);margin-top:clamp(44px,6vw,84px)}
.bfooter-grid{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  padding:clamp(26px,4vw,44px) 0;
}
.bfooter .brand-logo{display:block;height:44px;width:auto}
.bfooter-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.bfooter-nav a{font-size:15px;color:var(--ink-2)}
.bfooter-nav a:hover{color:var(--accent)}
.bfooter-bottom{
  border-top:1px solid var(--line);padding:20px 0;font-size:14px;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
}



/* ---------- blog detail: immersive cover hero ---------- */
.dhero{padding:14px}
.dhero-inner{
  position:relative;border-radius:26px;overflow:hidden;
  min-height:min(86vh,760px);display:flex;align-items:flex-end;
  background:#1A2025;
}
.dhero-inner img.cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.dhero-inner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,21,26,.25) 0%,rgba(16,21,26,.65) 100%);
}
.dhero-content{
  position:relative;z-index:2;width:100%;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px;
  padding:clamp(22px,4vw,52px);color:#fff;
}
.dhero-left{flex:1.6;min-width:min(560px,100%)}
.dhero-badges{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.dhero-cat{
  border:1px solid rgba(255,255,255,.7);border-radius:99px;padding:8px 18px;
  font-size:14px;font-weight:500;
}
.dhero-date{display:flex;align-items:center;gap:8px;font-size:14.5px;opacity:.92}
.dhero-date svg{width:16px;height:16px}
.dhero-left h1{
  color:#fff;font-size:clamp(30px,4.6vw,62px);font-weight:700;line-height:1.08;
  max-width:18ch;
}
.dhero-right{
  flex:1;min-width:260px;max-width:460px;margin-left:auto;
  font-size:15.5px;line-height:1.6;text-align:right;opacity:.94;
}
@media (max-width:860px){
  .dhero{padding:10px}
  .dhero-inner{min-height:70vh}
  .dhero-right{text-align:left;margin-left:0}
}

/* ---------- article + sticky subscribe rail ---------- */
.article-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(28px,4vw,64px);align-items:start;
  padding-top:clamp(28px,4vw,56px);
}
@media (max-width:1000px){.article-grid{grid-template-columns:1fr}}
.article-grid .article-body{padding-top:0}
.article-body h2,.article-body h3{
  text-transform:uppercase;letter-spacing:.01em;
}
.article-body h2{font-size:clamp(26px,3vw,42px)}
.article-body h3{font-size:clamp(22px,2.4vw,32px)}

.subscribe-card{
  position:sticky;top:96px;
  border:1.5px solid var(--accent);border-radius:22px;
  padding:clamp(22px,2.4vw,30px);text-align:center;background:#fff;
}
.subscribe-card .bell{
  display:inline-flex;align-items:center;gap:9px;color:var(--accent);
  font-size:clamp(20px,1.8vw,25px);font-weight:600;
}
.subscribe-card .bell svg{width:22px;height:22px}
.subscribe-card p{font-size:15.5px;margin:12px 0 18px;color:var(--ink-2)}
.subscribe-card input{
  font:inherit;width:100%;border:1px solid #DFE3E5;background:#FAFBFB;
  border-radius:12px;padding:13px 15px;color:var(--ink);margin-bottom:10px;
  transition:border-color .25s;
}
.subscribe-card input:focus{outline:none;border-color:var(--accent)}
.subscribe-card .btn{width:100%}
.subscribe-note{font-size:12.5px;color:#9AA6AD;margin-top:10px}
@media (max-width:1000px){.subscribe-card{position:static;max-width:460px}}



/* ============================================================
   Inner pages — alternating rows, values,
   projects grid, project detail fact rail
   ============================================================ */

@media (max-width:760px){
}

/* ---------- alternating feature rows (divisions) ---------- */
.alt-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);
  align-items:center;padding:clamp(30px,4.5vw,70px) 0;
}
.alt-row:nth-child(even) .alt-media{order:-1}
.alt-media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:1/0.92}
.alt-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.alt-row:hover .alt-media img{transform:scale(1.04)}
.alt-copy h2{font-size:clamp(26px,3vw,42px);font-weight:700;margin-bottom:14px}
.alt-copy p{font-size:16.5px;margin-bottom:16px;max-width:52ch}
.alt-copy .chip-row{margin-bottom:20px}
@media (max-width:860px){
  .alt-row{grid-template-columns:1fr;gap:20px}
  .alt-row:nth-child(even) .alt-media{order:0}
}

/* ---------- about page ---------- */
.statement{
  font-size:clamp(24px,3.2vw,44px);font-weight:600;line-height:1.25;color:var(--ink);
  max-width:26ch;padding:clamp(34px,5vw,80px) 0 clamp(20px,3vw,40px);
}
.statement em{font-style:normal;color:var(--accent)}
.values-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2vw,26px);padding:8px 0 30px;
}
.value-card{
  background:#fff;border:1px solid #E7E9EA;border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,32px);
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.value-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.08)}
.value-card .vnum{color:var(--accent);font-weight:300;font-size:17px}
.value-card h3{font-size:20px;font-weight:700;margin:10px 0 8px}
.value-card p{font-size:15px}
.quote-band{
  background:#F1F4F5;border-radius:var(--r-card);
  padding:clamp(28px,4vw,54px);margin:clamp(20px,3vw,44px) 0;
  display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
}
.quote-band img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top center}
.quote-band blockquote{flex:1;min-width:min(480px,100%)}
.quote-band blockquote p{font-size:clamp(17px,1.8vw,22px);color:var(--ink);line-height:1.5}
.quote-band cite{display:block;margin-top:14px;font-style:normal;font-size:14.5px;color:var(--ink-2)}
.quote-band cite b{color:var(--ink)}

/* ---------- projects listing grid ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);padding:10px 0 30px}
@media (max-width:860px){.pgrid{grid-template-columns:1fr}}
.pcard{display:block}
.pcard-media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/10;background:#EEF0F1}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.pcard-media .pill{position:absolute;top:20px;left:20px}
.pcard h3{font-size:clamp(21px,2.2vw,28px);font-weight:700;margin-top:16px;transition:color .3s}
.pcard:hover h3{color:var(--accent)}
.pcard .muted{color:var(--ink-2);font-size:14.5px;margin-top:4px}

/* ============================================================
   Inner pages on phones — BrightEdge mobile behaviour:
   dark app bar pinned over the hero from the top, and a giant
   word scaled to the viewport instead of overflowing it.
   ============================================================ */
@media (max-width:760px){
  /* phones keep the app bar pinned over the hero from the very top */
  .bpage .subnav{height:var(--nav-h);transform:none}
  .bpage .subnav-links{inset:64px 0 auto 0}
  .bpage .subnav .brand-logo{height:32px}
  .bpage .subnav .brand-word-img{height:15px}
  .bpage .subnav-burger{width:40px;height:40px}
  /* the bar left the flow — give its height back to the content */
  /* sections carry their own spacing — white padding here showed as a
     band above dark first-sections (contact) */
  .bpage .after-hero{padding-top:0}

  /* fit the word to the viewport: --chars is set per page */
  .bhero-word{font-size:min(calc(140vw / var(--chars,7)),92px)}
  .bhero-tag{font-size:32px;line-height:1.18;padding-inline:22px;max-width:14ch}
}


/* Rail branding — inner pages only; the homepage rail stays bare by request.
   Real wordmark + mark assets, both rotated a quarter turn so they read up
   the column together. A rotated element keeps its unrotated layout box, so
   the wordmark sits in a wrapper sized to its POST-rotation footprint —
   without it the 120px-wide image would blow out the 82px rail. */
.bpage .rail-mid{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;
}
.rail-wordwrap{position:relative;display:block;width:22px;height:132px}
/* absolute + translate(-50%,-50%): grid/flex centring can't centre a child
   wider than its cell, which threw the rotated wordmark outside the rail */
.rail-word-img{
  position:absolute;top:50%;left:50%;
  height:15px;width:auto;max-width:none;
  transform:translate(-50%,-50%) rotate(-90deg);
  filter:brightness(0) invert(1);opacity:.96;
}
.rail-mark{width:30px;height:auto;transform:rotate(-90deg)}
@media (max-width:760px){.rail-wordwrap,.rail-mark{display:none}}


/* the phone app bar inverts the wordmark to white — the ® follows it */



/* ============================================================
   PROJECT DETAIL — full-screen pinned cover, content rises as a
   sheet over it (the rail leaves as the sheet arrives).
   ============================================================ */
.pdhero{height:300vh;position:relative;z-index:0;background:var(--dark)}
.pdhero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--dark)}
.pdhero-media{position:absolute;inset:0}
.pdhero-media img{width:100%;height:100%;object-fit:cover;display:block}
.pdhero-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,18,22,.86) 0%,rgba(14,18,22,.45) 38%,rgba(14,18,22,.18) 70%);
}
/* The veil: a translucent screen over the cover that retracts upward as you
   scroll, uncovering the clean image beneath. Logo rides its top edge, the
   title block rides its bottom edge, so both travel up together. */
.pdhero-veil{
  position:absolute;left:0;right:0;top:0;height:100%;
  background:linear-gradient(180deg,rgba(14,18,22,.74) 0%,rgba(14,18,22,.58) 55%,rgba(14,18,22,.66) 100%);
  will-change:height;overflow:hidden;
}
.pdhero-brand{
  position:absolute;z-index:2;
  top:clamp(22px,3.4vh,42px);
  left:calc(var(--rail-w) + clamp(22px,3vw,52px));
  gap:12px;will-change:transform,opacity;
}
.pdhero-brand .brand-logo{display:block;height:clamp(34px,3.4vw,46px);width:auto}
.pdhero-brand .brand-word-img{
  display:block;height:clamp(14px,1.35vw,18px);width:auto;
  filter:brightness(0) invert(1);
}
@media (max-width:860px){.pdhero-brand{left:20px;top:16px}}
.pdhero-content{
  position:absolute;left:0;right:0;bottom:clamp(36px,6vh,84px);
  padding-inline:calc(var(--rail-w) + clamp(24px,4vw,72px)) clamp(24px,4vw,72px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.pdhero-left .pill{position:static;display:inline-block;margin-bottom:18px}
.pdhero-content h1{
  color:#fff;font-size:clamp(40px,6.4vw,104px);font-weight:800;line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;
}
.pdhero-desc{color:#E6EAED;font-size:clamp(16px,1.35vw,20px);max-width:46ch;text-align:right}
@media (max-width:860px){
  .pdhero-content{padding-inline:22px;bottom:34px;display:block}
  .pdhero-desc{text-align:left;margin-top:16px;font-size:16px}
  .pdhero{height:260vh}
}

/* the sheet */
.pd-sheet{
  position:relative;z-index:2;margin-top:-100vh;background:var(--bg);
  border-radius:var(--r-big) var(--r-big) 0 0;
  padding-top:clamp(44px,6vw,86px);
  box-shadow:0 -30px 60px rgba(16,22,28,.18);
}
.pd-sheet .container{max-width:1440px}

/* left fact column + right body */
.pd-grid{
  display:grid;grid-template-columns:270px minmax(0,1fr);
  gap:clamp(30px,5vw,86px);align-items:start;
}
.fact-rail{position:sticky;top:96px;display:grid}
.fact{padding:20px 0;border-bottom:1px solid var(--line)}
.fact:first-child{padding-top:0}
.fact small{display:block;color:var(--slate);font-size:14.5px;margin-bottom:6px}
.fact b{font-size:19px;font-weight:600;color:var(--ink);line-height:1.3}
.fact-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  background:var(--dark);color:#fff;border-radius:99px;padding:14px 22px;
  font-weight:600;font-size:15.5px;transition:transform .3s var(--ease),filter .3s;
}
.fact-cta:hover{transform:translateY(-2px);filter:brightness(1.15)}
.fact-cta .live-dot{
  width:9px;height:9px;border-radius:50%;background:#37C46A;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(55,196,106,.22);
}
.fact-cta svg{width:15px;height:15px}

.pd-h{font-size:clamp(26px,2.6vw,38px);font-weight:700;color:var(--ink);margin-bottom:16px}
.pd-lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.65;color:#3C4A52;max-width:64ch}
/* Section rows read heading-left / copy-right, with any imagery spanning
   the full width beneath them — the reference's rhythm. */
.pd-section{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(20px,3.5vw,56px);align-items:start;
  margin-top:clamp(40px,5.5vw,78px);
}
/* a section whose only child is prose runs full width — the two-column
   rhythm is for heading-left / copy-right pairs, and applying it here left an
   empty column with every article heading pushed to the right of it */
.pd-section--full{grid-template-columns:minmax(0,1fr)}
.pd-section .pd-h{margin:0}
.pd-section p{font-size:16.8px;line-height:1.72;color:var(--ink-2)}
.pd-figure,.pd-duo{grid-column:1/-1;margin:clamp(22px,3vw,40px) 0 0}
/* cap the wide figure: without a ratio a tall source rendered at full
   natural height and swamped the section */
.pd-figure img,.pd-duo img{
  width:100%;border-radius:var(--r-card);display:block;
  aspect-ratio:16/9;object-fit:cover;background:#E8ECEE;
}
/* pack shots: show the whole bag, don't crop it to a letterbox and don't
   let it run the full column width */
.pd-figure.is-pack{display:flex;justify-content:center}
.pd-figure.is-pack img{
  width:100%;max-width:none;height:auto;
  aspect-ratio:auto;object-fit:contain;background:transparent;
  border-radius:var(--r-card);
}
@media (max-width:760px){.pd-figure.is-pack img{max-width:100%}}

.pd-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.pd-duo figure{margin:0}
.pd-duo img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){
  .pd-section{grid-template-columns:1fr;gap:12px}
  .pd-duo{grid-template-columns:1fr}
}

/* LATEST PROJECTS — heading with a rule running off to the right */
.latest{margin-top:clamp(56px,8vw,110px)}
.latest-head{display:flex;align-items:center;gap:26px;margin-bottom:clamp(24px,3vw,42px)}
.latest-head h2{
  font-size:clamp(24px,3vw,44px);font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.latest-head::after{content:"";flex:1;height:1px;background:var(--line)}
.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px)}
@media (max-width:900px){.latest-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.latest-grid{grid-template-columns:1fr}}
.lcard-media{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:1/1;background:#E8ECEE;
}
.lcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.lcard:hover .lcard-media img{transform:scale(1.05)}
.lcard-meta{
  display:flex;align-items:center;gap:9px;margin:16px 0 8px;
  color:var(--ink-2);font-size:15px;
}
.lcard-meta svg{width:16px;height:16px;flex-shrink:0}
.lcard-meta i{font-style:normal;color:var(--line)}
.lcard h3{font-size:clamp(19px,1.7vw,25px);font-weight:600;color:var(--ink)}
.lcard:hover h3{color:var(--accent)}

@media (max-width:860px){
  .pd-grid{grid-template-columns:1fr;gap:32px}
  .fact-rail{position:static}
  .pd-sheet{border-radius:26px 26px 0 0}
}


/* Base pill. Only `.proj .pill` was ever styled, so the project-card and
   detail-hero pills were rendering as bare low-contrast text. */
.pill{
  display:inline-block;background:var(--accent);color:#fff;border-radius:99px;
  padding:9px 18px;font-size:14.5px;font-weight:500;line-height:1;white-space:nowrap;
}
.pcard-media .pill{z-index:2}

/* keep the detail hero on one row: title left, description bottom-right */
.pdhero-content{flex-wrap:nowrap}
.pdhero-left{min-width:0;flex:1 1 auto}
.pdhero-content h1{font-size:clamp(38px,5vw,76px)}
.pdhero-desc{flex:0 1 auto}
@media (max-width:860px){
  .pdhero-content{flex-wrap:wrap}
  .pdhero-content h1{font-size:clamp(32px,8vw,52px)}
}


/* Latest-projects row: titles wrap to two lines on longer names, which left
   the row bottoms ragged. Reserve the second line so every card matches. */
.lcard{display:flex;flex-direction:column}
.lcard h3{line-height:1.24;min-height:2.48em}
.latest-grid{align-items:start}


/* the sheet ended flush against the footer rule */
.pd-sheet{padding-bottom:clamp(64px,9vw,130px)}


/* Detail hero title sits closer to the reference scale — smaller, wrapping
   inside a narrow column rather than spanning the viewport. */
.pdhero-content h1{font-size:clamp(30px,3.6vw,58px);max-width:13ch}
@media (max-width:860px){.pdhero-content h1{font-size:clamp(28px,7vw,44px);max-width:none}}

/* sheet meets the hero with a straight full-width edge */
.pd-sheet{border-radius:0;box-shadow:none}


/* The sheet was inheriting the site container (1440 max, 96px gutters), so
   its inner width froze at ~1248px on every screen and the three cards were
   stuck at 283px — leaving titles like "Residential Development" only ~9px
   of slack, which is why they broke to a second line despite looking roomy.
   Give the sheet its own wider measure and a tighter fact column. */
.pd-sheet .container{max-width:1560px;padding-inline:clamp(20px,4vw,72px)}
.pd-grid{grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,3.6vw,64px)}
.lcard h3{text-wrap:balance}
@media (max-width:860px){.pd-grid{grid-template-columns:1fr}}


/* ============================================================
   ABOUT — milestone timeline. Sticky date on the left, a rule
   down the middle that fills with brand colour as you pass each
   marker, content on the right.
   ============================================================ */
.tl-wrap{padding-block:clamp(60px,8vw,110px)}
.tl{margin-top:clamp(30px,4vw,58px)}
.tl-row{
  display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.15fr);
  align-items:start;
}
.tl-date{
  position:sticky;top:38vh;text-align:right;padding-right:clamp(10px,2vw,30px);
  padding-bottom:60px;
}
.tl-date span{
  display:block;font-size:clamp(30px,4.2vw,62px);font-weight:700;
  color:var(--ink);line-height:1;letter-spacing:-.02em;
}
.tl-date small{
  display:block;margin-top:10px;font-size:14.5px;color:var(--slate);
  letter-spacing:.02em;
}
.tl-mid{position:relative;justify-self:center;width:72px;align-self:stretch}
.tl-mid::before{                       /* the rule itself */
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--line);transform:translateX(-50%);
}
.tl-fill{                              /* accent progress, driven by scroll */
  position:absolute;left:50%;top:0;width:2px;height:0;
  background:var(--accent);transform:translateX(-50%);
}
.tl-dot{
  position:absolute;left:50%;top:6px;transform:translate(-50%,0);
  width:13px;height:13px;border-radius:50%;background:#CBD3D8;z-index:2;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.tl-row.on .tl-dot{
  background:var(--ink);
  box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--ink);
}
.tl-body{padding-bottom:clamp(56px,8vw,110px)}
.tl-body h3{
  font-size:clamp(20px,2vw,29px);font-weight:600;color:var(--ink);
  line-height:1.22;max-width:22ch;
}
.tl-body p{
  margin-top:12px;font-size:16.5px;line-height:1.7;color:var(--ink-2);
  max-width:52ch;
}
.tl-body img{
  width:100%;margin-top:clamp(20px,2.4vw,32px);
  border-radius:var(--r-card);display:block;aspect-ratio:16/10;object-fit:cover;
}
@media (max-width:860px){
  .tl-row{grid-template-columns:52px minmax(0,1fr)}
  .tl-date{
    grid-column:2;position:static;text-align:left;padding:0 0 10px;
  }
  .tl-date span{font-size:30px}
  .tl-mid{grid-row:1/3;grid-column:1;width:52px}
  .tl-body{grid-column:2;padding-bottom:52px}
}


/* Story imagery and the chairman's quote take the homepage card treatment:
   big radius with a notch cut from one corner. The timeline photos stay
   plain-rounded — the notch competes with the rule running beside them. */
.alt-media{position:relative;overflow:visible}
.alt-media img{border-radius:var(--r-big);display:block;width:100%}
.quote-band{position:relative;overflow:visible;border-radius:var(--r-big)}
.quote-band .media-notch{background:var(--bg)}


/* ============================================================
   ABOUT — Director's Message. Portrait uses the same card
   treatment as the homepage components: big radius with a notch
   cut from the bottom-left, the name sitting in the cut.
   ============================================================ */
.dir-msg{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(40px,6vw,86px);
}
.dir-photo{position:relative;margin:0}
.dir-photo img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-big);background:#E8ECEE;
}
.dir-photo figcaption{
  position:absolute;left:0;bottom:0;z-index:3;
  width:44%;padding:12px 16px 2px 2px;
}
.dir-photo figcaption b{
  display:block;font-size:clamp(15px,1.2vw,17.5px);font-weight:600;color:var(--ink);
  line-height:1.25;white-space:nowrap;
}
.dir-photo figcaption small{
  display:block;margin-top:4px;font-size:13.5px;color:var(--ink-2);line-height:1.3;
}
/* notch cut from the bottom-left, mirroring .notch-br */
.notch-bl{
  left:0;bottom:0;width:44%;height:25%;
  border-top-right-radius:var(--fillet);
  border-bottom-left-radius:calc(var(--r-big) - 5px);
}
.notch-bl::before{           /* above the notch, hugging the left edge */
  left:0;bottom:100%;
  background:radial-gradient(circle at 100% 0,
    transparent calc(var(--fillet) - .5px), var(--bg) var(--fillet));
}
.notch-bl::after{            /* right of the notch, along the bottom edge */
  right:calc(-1 * var(--fillet));bottom:0;
  background:radial-gradient(circle at 100% 0,
    transparent calc(var(--fillet) - .5px), var(--bg) var(--fillet));
}
/* .dir-copy p is later and more specific than .tag, so it would grey the
   kicker out — restate the accent here */
.dir-copy .tag{margin-bottom:8px;color:#A8551A}
.dir-copy p{font-size:16.8px;line-height:1.75;color:var(--ink-2);margin-top:16px;max-width:60ch}
.dir-copy .h2{margin-bottom:4px}
.dir-sign{margin-top:26px !important}
.dir-sign b{display:block;color:var(--ink);font-weight:600;font-size:17px}
.dir-sign em{display:block;font-style:italic;font-size:15px;color:var(--ink-2);margin-top:2px}
@media (max-width:860px){
  .dir-msg{grid-template-columns:1fr;gap:26px}
  .dir-photo{max-width:440px}
}


/* ============================================================
   WHY CHOOSE US — card pinned centre, copy alternating left and
   right, images swapped with the slot-roll used on the homepage
   division reel (outgoing exits up, incoming enters from below).
   ============================================================ */
.why{padding-top:clamp(50px,7vw,96px)}
.why-stage{position:relative}
.why-sticky{
  position:sticky;top:0;height:100vh;
  display:grid;place-items:center;overflow:hidden;
}
.why-card{
  position:relative;z-index:2;
  width:min(440px,26vw);aspect-ratio:5/7;
  border-radius:var(--r-big);overflow:hidden;background:#E8ECEE;
}
/* One column of frames sliding as a unit. No CSS transition: the scroll
   position drives the transform directly, so you see the incoming frame
   physically pushing the previous one out mid-gesture. */
.why-track{
  position:absolute;inset:0;display:flex;flex-direction:column;
  will-change:transform;
}
.why-img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block}

/* copy is also scrubbed — rises in, holds, leaves upward */
.why-copy{
  position:absolute;top:50%;width:min(340px,23vw);
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
.why-copy.on{pointer-events:auto}
.why-left{left:clamp(24px,6vw,130px)}
.why-right{right:clamp(24px,6vw,130px)}
.why-copy h3{
  font-size:clamp(24px,2.5vw,36px);font-weight:700;color:var(--ink);
  line-height:1.14;letter-spacing:-.01em;
}
.why-copy p{margin-top:12px;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.why-m-img{display:none}

@media (max-width:900px){
  /* Phones get the BrightEdge treatment: no pinning, no overlay — each item
     is just a rounded picture with its heading and copy beneath, stacked in
     normal flow. The reel JS bails out at this width, so nothing here has to
     fight an inline transform. */
  .why-stage{height:auto !important}
  .why-sticky{
    position:static;height:auto;display:flex;flex-direction:column;
    gap:clamp(30px,7vw,48px);overflow:visible;place-items:stretch;
    padding-inline:clamp(18px,5vw,30px);
  }
  .why-card{display:none}
  .why-copy{
    position:static;width:auto;opacity:1 !important;transform:none !important;
    text-align:left;pointer-events:auto;
  }
  .why-m-img{
    display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
    border-radius:var(--r-card);margin-bottom:clamp(12px,3vw,18px);background:#E8ECEE;
  }
  .why-copy h3{font-size:clamp(22px,6vw,30px)}
  .why-copy p{font-size:15.5px;line-height:1.68}
}


/* ============================================================
   Article imagery — a lone image runs full width, two on one
   line sit side by side. Authors just write markdown; the
   :has() test does the layout.
   ============================================================ */
.article-body p:has(> img){
  display:grid;gap:clamp(12px,1.4vw,20px);
  margin:clamp(26px,3.4vw,46px) 0;
}
.article-body p:has(> img + img){grid-template-columns:1fr 1fr}
@media (max-width:700px){.article-body p:has(> img + img){grid-template-columns:1fr}}
.article-body img{
  width:100%;display:block;border-radius:var(--r-card);
  aspect-ratio:16/10;object-fit:cover;background:#E8ECEE;
}
.article-body p:has(> img + img) img{aspect-ratio:4/3}

/* blog hero: category pill + date row, matching the reference rhythm */
.post-badges{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.post-date{
  display:inline-flex;align-items:center;gap:8px;
  color:#E4E9EC;font-size:15px;
}
.post-date svg{width:16px;height:16px;opacity:.9}


/* blog titles run longer than project names — give them a wider measure
   so they break over two or three lines, not five */
#postTitle{font-size:clamp(27px,3.1vw,50px);max-width:21ch}
@media (max-width:860px){#postTitle{max-width:none}}

/* registered entity sits above the street address in the footer block */
.footer-entity{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}


/* product detail — applications list */
.use-list{list-style:none;display:grid;gap:10px;margin:0}
.use-list li{
  position:relative;padding-left:26px;font-size:16.5px;line-height:1.6;color:var(--ink-2);
}
.use-list li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);
}
.lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.7;color:var(--ink-2);max-width:62ch;margin-top:14px}


/* Breathing room before the footer. Listing pages ended flush against the
   footer rule because the section carried no bottom padding of its own. */
.footer{margin-top:clamp(28px,4vw,64px)}
.products-lede{margin-bottom:clamp(26px,3.4vw,48px)}
#prodGrid{margin-top:clamp(20px,2.6vw,38px)}

/* Footer brand column had a large dead area under the nav — push the nav
   down off the phone numbers and close the column with a social row. */
.footer-nav-label{margin-top:clamp(46px,5.6vw,80px)}
.footer-social-label{margin-top:clamp(34px,4.2vw,54px)}
.footer-social{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.footer-social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-2);background:#fff;
  transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease-out);
}
.footer-social svg{width:18px;height:18px}
.footer-social a:hover{
  background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px);
}

/* Résumé: upload from the machine, with a link as the fallback */
.ap-upload{
  display:grid;place-items:center;gap:4px;text-align:center;
  border:1.5px dashed #CBD5DA;border-radius:14px;background:#FBFCFC;
  padding:22px 18px;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.ap-upload:hover,.ap-upload.drag{border-color:var(--accent);background:rgba(248,150,42,.05)}
.ap-upload svg{width:24px;height:24px;color:var(--slate);margin-bottom:2px}
.ap-upload b{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-all}
.ap-upload small{font-size:12.5px;color:var(--slate);font-weight:400}
.ap-upload.has-file{border-style:solid;border-color:var(--accent);background:rgba(248,150,42,.06)}
.ap-upload.has-file svg{color:var(--accent)}
.ap-or{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em;
  margin:2px 0;
}
.ap-or::before,.ap-or::after{content:"";flex:1;height:1px;background:var(--line)}


/* email sits with the phone numbers but reads a touch smaller */
.footer-mail{font-size:17px}
.footer-mail a{word-break:break-all}

/* mobile: vertical reveal */
@media (max-width:760px){
  .bhero-frame{width:100vw;height:0}                /* JS drives height here */
  .bhero-frame img{
    top:50%;left:0;transform:translateY(-50%);
    width:var(--vw,100vw);height:100vh;
  }
  .bw-l{clip-path:inset(0 0 50% 0)}                 /* upper half rides up   */
  .bw-r{clip-path:inset(50% 0 0 0)}                 /* lower half rides down */
}

/* burger -> X while the shared menu is open */
.subnav-burger span{transition:transform .35s var(--ease)}
body.menu-open .subnav-burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .subnav-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* the menu must clear the fixed inner-page app bar */
body.menu-open .subnav{z-index:1100}


/* Touch parity: pressing a menu item fires the same treatment as the
   desktop hover — orange wipe, white text, dot and arrow — so a tap
   flashes the effect while the page navigates. */
.menu-item:active::before{transform:scaleX(1);transition-duration:.18s}
.menu-item:active{color:#fff}
.menu-item:active .m-label{transform:translateX(4px)}
.menu-item:active .m-dot{opacity:1;transition-delay:0s}
.menu-item:active .m-arrow{opacity:1;transform:none;transition-duration:.18s}

/* Director's portrait uses the shared .plate geometry, so the corner fillet
   and caption type match the product cards exactly. */
.dir-media{
  display:block;overflow:hidden;border-radius:var(--r-card);background:#E8ECEE;
}
.dir-media img{width:100%;height:auto;display:block}

.pd-body h2{font-size:clamp(24px,2.6vw,36px);font-weight:700;margin:0 0 14px}
.pd-body .lede-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);margin-bottom:22px}
@media (max-width:700px){.pd-body .lede-row{grid-template-columns:1fr}}
.pd-body .article-body{padding:0}

/* ============================================================
   hero lockup / kicker clearance — the bar is 178px tall and the
   hero copy is vertically centred, so on a short laptop screen the
   lockup's tagline lands on top of the kicker. Shrink the lockup
   and give the copy the bar's height as clearance.
   ============================================================ */
@media (min-width:761px) and (max-height:1000px){
  /* clearance alone fixes the collision — the lockup keeps its size */
  .hero-content{padding-top:var(--nav-h)}
}
@media (min-width:761px) and (max-height:820px){
  .nav:not(.scrolled) .brand-full{height:126px}
  .hero-content{padding-top:var(--nav-tall)}
}

/* ============================================================
   iPhone seams: every pinned hero and its overlay pull must use
   the same viewport unit. svh everywhere on phones.
   ============================================================ */
@media (max-width:760px){
  .bhero{height:320svh}
  .bhero-sticky{height:100svh}
  .after-hero{margin-top:-100svh}
  .pdhero{height:260svh}
  .pdhero-sticky{height:100svh}
  .pd-sheet{margin-top:-100svh}
  /* detail-hero title block: keep it above the browser chrome */
  .pdhero-content{bottom:max(34px, env(safe-area-inset-bottom, 0px) + 30px)}

  /* the slide menu must scroll on short screens instead of cutting the
     social row, and the icons clear the home-indicator */
  .slide-menu{overflow-y:auto;overscroll-behavior:contain}
  .menu-social{padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px))}
  .menu-social a{width:40px;height:40px}
  .menu-social svg{width:18px;height:18px}
}

@media (max-width:760px){
  body.menu-open .nav{
    background:#26292E;height:var(--nav-h);transform:none;pointer-events:auto;
  }
  body.menu-open .nav .nav-inner{height:100%;padding-block:0;justify-content:space-between}
  body.menu-open .nav .brand{display:flex;opacity:1;visibility:visible}
  body.menu-open .nav .brand-full{display:none}
  body.menu-open .nav .brand-logo{display:block;height:32px;width:auto}
  body.menu-open .nav .brand-word-img{
    display:block;height:15px;width:auto;filter:brightness(0) invert(1);
  }
  body.menu-open .nav-burger{
    background:#fff;border-radius:50%;width:44px;height:44px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  }
}

/* ============================================================
   Client belt — the marquee carries real client logos. Sources are
   flat JPEG/WebP on white, so multiply blends their ground into the
   page instead of showing six pale rectangles.
   ============================================================ */
.clients-label{
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-align:center;
  margin:clamp(48px,6vw,88px) 0 clamp(16px,2vw,24px);
}
.ribbon-logos .ribbon-track{animation-duration:98s}
.ribbon-logos{margin-top:0;padding-block:clamp(32px,3.7vw,54px)}
.ribbon-logos .belt{
  list-style:none;display:flex;align-items:center;
  gap:clamp(58px,7.2vw,124px);padding-right:clamp(58px,7.2vw,124px);
}
.ribbon-logos .belt li{display:flex;align-items:center}
.ribbon-logos img{
  width:auto;display:block;
  /* No blend and no filter, deliberately. Both are known to composite to
     nothing inside a clipped, animated track on mobile WebKit and Blink, and
     the belt came out blank on real phones while measuring fine everywhere I
     could test. The sources are flat art on white and the page is #FCFCFC, so
     they cost nothing to drop. Opacity alone carries the resting state. */
  opacity:.72;
  transition:opacity .3s;
  /* per-logo heights: these marks have very different proportions, so one
     height makes the wide-short ones shout and the square ones vanish */
  height:clamp(36px,3.6vw,52px);
}
.ribbon-logos img[src*="l-t"]{height:clamp(44px,4.4vw,64px)}
.ribbon-logos img[src*="apco"]{height:clamp(42px,4.2vw,62px)}
.ribbon-logos img[src*="swastik"]{height:clamp(48px,4.8vw,70px)}
.ribbon-logos img[src*="godrej"]{height:clamp(39px,3.9vw,57px)}
.ribbon-logos li:hover img{opacity:1}
/* The note above is about phones: filter is what blanked the belt on mobile
   Blink and WebKit. Hover is a pointer-device affordance, so scope the
   greyscale to the same devices — phones keep the plain, safe path. */
@media (hover:hover) and (pointer:fine){
  .ribbon-logos img{filter:grayscale(1);transition:opacity .3s,filter .3s}
  .ribbon-logos li:hover img{filter:grayscale(0)}
}
@media (prefers-reduced-motion:reduce){
  .ribbon-logos .ribbon-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .ribbon-logos .belt:last-child{display:none}
}

.clientele .lede{
  font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--ink-2);
  max-width:70ch;margin-bottom:clamp(28px,3.4vw,48px);
}
.cl-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(26px,4vw,64px);
}
.cl-col h3,.cl-strength h3{
  font-size:clamp(17px,1.5vw,21px);font-weight:700;color:var(--ink);margin-bottom:14px;
}
.cl-note{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-bottom:12px}
.cl-list{list-style:none;display:grid;gap:10px}
.cl-list li{
  position:relative;padding-left:22px;font-size:16px;line-height:1.6;color:var(--ink-2);
}
.cl-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.cl-strength{
  margin-top:clamp(28px,3.6vw,52px);padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--line);
}
.cl-strength p{font-size:16.5px;line-height:1.75;color:var(--ink-2);max-width:80ch}

@media (max-width:760px){
  .ribbon-logos img{opacity:1}

  /* The sheet drops out from behind the app bar: the bar has to outrank it,
     or the white panel travels across the bar and the burger's cross
     animation is hidden behind it on the way down. */
  /* beat body.menu-open .subnav (line ~2290) and .bpage .subnav on
     specificity, or the bar drops back under the sheet */
  body.menu-open .nav, body.menu-open .subnav, .bpage .subnav{z-index:1300}
  .slide-menu{z-index:1200}
  .menu-scrim{z-index:1150}
}

@media (max-width:760px){
  /* The homepage bar when scrolled is the reference for every app bar on a
     phone — 32px mark, 15px wordmark, --nav-h tall. Anything that sets its
     own size drifts out of step the moment one of them changes. */
  .nav.scrolled .brand-logo,
  .bpage .subnav .brand-logo,
  body.menu-open .nav .brand-logo{height:32px}
  .nav.scrolled .brand-word-img,
  .bpage .subnav .brand-word-img,
  body.menu-open .nav .brand-word-img{height:15px}
}

/* section heading with a trailing link on the same baseline — the link
   used to sit under the heading on the left, adrift of both. */
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:30px}
.sec-head-row .h2{margin-bottom:0}
.sec-head-row .sec-head-link{margin:0;padding-bottom:6px}
@media (max-width:760px){
  .sec-head-row{display:block}
  .sec-head-row .sec-head-link{margin-top:14px}
}

/* "Proposed" marker on product cards.

   The company profile lists its products under one heading — "ongoing AND
   proposed" — so a buyer reading the grid cannot tell what is available now
   from what is planned. Anything carrying this flag is not yet in production.
   Sits top-right, clear of the plate in the bottom-left of the card. */
.prod-flag{
  position:absolute;top:14px;right:14px;z-index:3;
  background:var(--ink);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:99px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  pointer-events:none;
}
.pill-proposed{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:760px){
  .prod-flag{top:10px;right:10px;font-size:10.5px;padding:5px 10px}
}