/* ================= KOLABRATA — deck-grammar design system ================= */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#fdfcf7; --bg-1:#f6f5f0; --bg-2:#eae8e0; --bg-3:#dcdad2;
  --surface:#fff; --line:#eae8e0; --line-2:#dcdad2;
  --ink:#1c1917; --ink-1:#292524; --ink-2:#6e6865; --ink-3:#8c8581; --ink-4:#a8a29e;
  --accent:#ea580c; --accent-2:#c2410c;
  --cold-bg:#e9ecf0; --cold-bg-2:#dfe3e9; --cold-line:#c5ccd6; --cold-ink:#525c68;
  --accent-soft:rgba(234,88,12,.06); --accent-glow:rgba(234,88,12,.15);
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Inter',system-ui,sans-serif;
  --gut:clamp(20px,3vw,48px);
  --maxw:1280px;
  /* shared section-label scale: eyebrow / hero-kick / hero-pillars all use these */
  --label-size:14px; --label-ls:.12em; --label-weight:600;
  --label-rule-w:24px; --label-rule-h:3px; --label-h:22px;
}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11","ss01";letter-spacing:-.011em}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;
  animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---- grain: the ground is not flat ---- */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* ---- deck grammar: bay hairlines + corner ticks ---- */
.bay{position:relative}
.bay::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),var(--line) calc(100%/6 - 1px) calc(100%/6))}
.tick{position:relative}
.tick::before,.tick::after{content:"";position:absolute;width:11px;height:11px;border-color:var(--line-2);border-style:solid}
.tick::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.tick::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
section{padding:clamp(72px,10vw,150px) 0;position:relative}
/* Anchor landing. Sections carry a large top padding, so a hash jump used to
   stop on the section's *border*: the tail of the previous section still on
   screen, and the heading pushed a further padding's-worth down. Pull each
   nav target's landing down by its own top padding, so its first line arrives
   just under the bar. scroll-padding-top above still holds the nav clearance. */
#process,#work{scroll-margin-top:calc(-1 * clamp(72px,10vw,150px))}
#contact{scroll-margin-top:-30px}   /* dark band: start the band at the bar */
.rule{height:1px;background:var(--line);width:100%}

/* ---- scroll-driven reveal (native, JS fallback) ---- */
.rise{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.rise.in{opacity:1;transform:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{opacity:1;transform:none;animation:riseK linear both;animation-timeline:view();animation-range:entry 5% cover 26%}
    @keyframes riseK{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
}

/* ---- NAV ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--gut);background:rgba(253,252,247,0);border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,padding .35s;backdrop-filter:blur(0)}
nav.scrolled{background:rgba(253,252,247,.88);backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line);padding:11px var(--gut)}
.logo{font-weight:600;font-size:16.5px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
/* brand mark — extracted from the master lockup; inlined so the nav still
   costs zero extra requests. Master: /assets/brand/kolabrata-mark.png */
.logo-mark{width:21px;height:22px;flex-shrink:0;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABcCAMAAADd2oIQAAAAXVBMVEXdp5jafFLBooZ9dnbhYzPnfEzhf1TtiFHxvJHcqoHlbDTrm3LUo3zjZzmgn5/fjlGZmZm2sKtQSEdoaWubZj7zlEXnfFL1sHb8oVLiZDPvjj1LTlIzNjs5PEFpTzxwIeJFAAAAFXRSTlMA2Slo+6bmLndk7qLhtTn0pW7f4/x2zO+yAAAAAW9yTlQBz6J3mgAAAnFJREFUWMPt2W1zojAUBeAAQdtuUVcMGgT//8/sCGiCmnvPTaSzH/b2S9/2mTOHJGSnSrnJTBMak4+/UhxP2OSemzfaBkbbG3xqoTE+rBobHgeb8V+O03pfjD+ZPp0lthDsxQrFfUhcLFVFYbUsMQqXS8EraccgvG4Wgj/sQnC2EEyu4hT4k1oTDjZi+Iti7xvkD+Z6MLk7HPwNwu50ox/dvYoKq8JsoF3n4Bx7dmbtjmILJd5AsPfkMi7wBJdIEy4vX8QNrmTupmHdEUaamLksO8FAEyfn0selDwOBvbyq4gueYH53+O6wMzRjDzvvgy7CzF111Lw7wGu2iJk7JR4+6CpK5u5jtjNX5cWX34UOwuvdX3Jmdx/q6ekHWD7ZzdHPrk6BK4fpYOy4xK+qePheXGIW1m+E7a/A76ziLYkDD+wXEv+bMHcIpXT8H17w4XGvPN3EwjStbXZ914hmqkKTLxFtP5XanyVT3xNTcw28O3eC6Qvgzm1tkwvd7nKtoqzKipyhB5HbbcGHLXVXBoOFPXQHg8HSvAeDwRF5ITgmbwvAMS4CR7kAvD93vdzl4Z3QvZjb5JwrGufScIJLwgku2bF0Pfh5KTilB6qKIs0NwqluCN6LVu+zG+o4OW8AzoVu34Kw2ie64eUmkfuteTGhVYGX8doNL7c6zU3fIAGX2NKYHHKpQwiRVyYCBuSwSx/0nEy4zKuJlg8mGiZl0mVf/0Ufek3TLnBhCciMC16xerGLXArrF5lZF7rG1hEudvF+lAEX/K/C/BWIuCA8O/ghF4W9zBfIheF7ZtDF4ekqdwH+XtE+/cGbnqKu6+8jOvkPonAJjux4sQYAAAAASUVORK5CYII=") center/contain no-repeat}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--ink-2);position:relative;padding:3px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right .32s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-cta{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 20px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:8px;transition:background .3s,gap .3s}
.nav-cta:hover{background:var(--accent);gap:12px}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
.mobile-menu{display:none;position:fixed;inset:56px 0 auto 0;z-index:99;background:var(--bg);border-bottom:1px solid var(--line);padding:12px var(--gut) 22px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:13px 0;font-size:17px;font-weight:500;border-bottom:1px solid var(--line)}

/* ---- BUTTONS: lane fill ---- */
/* One CTA language everywhere: ink -> accent on hover, gap opens. Matches .nav-cta. */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,gap .3s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;gap:14px}
.btn span,.btn svg{position:relative}
.btn-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- EYEBROW / HEADS (left-aligned by default) ---- */
.eyebrow,.hero-kick{font-family:var(--sans);font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-ls);text-transform:uppercase;line-height:1;min-height:var(--label-h);
  display:flex;align-items:center;gap:12px}
.eyebrow::before,.hero-kick::before{content:"";width:var(--label-rule-w);height:var(--label-rule-h);
  background:var(--accent);flex-shrink:0;border-radius:2px}
.eyebrow{color:var(--accent);margin-bottom:22px}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line-2);max-width:90px}
.statement .eyebrow::before,.endcta .eyebrow::before{background:var(--accent)}
h2.big{font-size:clamp(30px,4.6vw,60px);line-height:1.06;letter-spacing:-.045em;font-weight:500;max-width:17ch;text-wrap:balance}
/* Monospace was retired: these carry index numbers (01, 02 …) that relied on
   fixed-width glyphs to line up. Tabular figures restore that in Inter. */
.row .mk,.slab b,.s-n,.svc-l .sn,.case-top .ct,.vs-k em,.st-meta>div{font-variant-numeric:tabular-nums}

/* CONVENTION: serif italic is ALWAYS the accent colour, and only ever marks the
   emphasised phrase. Neutral serif display type stays upright. */
.serif{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.lede{font-size:17px;color:var(--ink-2);line-height:1.7;max-width:56ch;margin-top:20px}

/* ---- HERO: asymmetric, left-set ---- */
.hero{padding:clamp(120px,17vh,190px) 0 clamp(50px,7vw,90px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,60px);align-items:start;margin-top:clamp(30px,4vw,52px)}
.hero-kick{color:var(--ink-2);margin-bottom:30px}
.hero-kick b{color:var(--accent);font-weight:600}
.hero-kick i{width:24px;height:1px;background:var(--line-2);display:block}
h1{font-size:clamp(34px,5.6vw,76px);line-height:1;letter-spacing:-.046em;font-weight:500;text-wrap:balance}
h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
h1 .ln>span{display:block;transform:translateY(105%);animation:lnUp .95s cubic-bezier(.16,1,.3,1) forwards}
@keyframes lnUp{to{transform:none}}
.hero-sub{font-size:clamp(15.5px,1.2vw,18px);color:var(--ink-2);line-height:1.68;max-width:62ch;
  text-wrap:pretty;hyphens:none;opacity:0;animation:fadeIn .9s .75s forwards}
.hero-sub b{white-space:nowrap}
.hero-sub b{color:var(--ink);font-weight:600}
@keyframes fadeIn{to{opacity:1}}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;opacity:0;animation:fadeIn .9s .95s forwards}
.hero-pillars{display:flex;flex-wrap:wrap;gap:0;margin-top:46px;border-top:1px solid var(--line);opacity:0;animation:fadeIn .9s 1.1s forwards}
.hero-pillars span{font-family:var(--sans);font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-ls);text-transform:uppercase;line-height:1;color:var(--ink-3);
  padding:16px 26px 0 0;position:relative}
.hero-pillars span::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--accent);transition:width .5s}
.hero-pillars:hover span::before{width:70%}

/* ---- STAT RAIL (no cards) ---- */
.stat-band{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat-band .rail{border-top:0;border-bottom:0}
.rail{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.rail>div{padding:30px 26px;border-right:1px solid var(--line-2);position:relative;transition:background .4s;
  display:flex;flex-direction:column;gap:12px}
.rail>div:last-child{border-right:0}
.rail>div:hover{background:var(--bg-1)}
.rail .n{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-.05em;line-height:1.04;
  font-variant-numeric:tabular-nums;display:block}
.rail .n em{font-style:normal;color:var(--accent)}
.rail .l{font-size:12.5px;color:var(--ink-2);line-height:1.5;max-width:26ch;margin-top:auto;padding-top:10px}

/* ---- STICKY EDITORIAL SPLIT ---- */
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,6vw,90px);align-items:start}
.split-rail{position:sticky;top:120px}
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);
  align-items:baseline;transition:padding-left .4s,background .4s}
.row:hover{padding-left:14px;background:linear-gradient(90deg,var(--accent-soft),transparent)}
.row .mk{font-family:var(--sans);font-weight:500;font-size:10px;color:var(--ink-4);letter-spacing:.1em;padding-top:5px;transition:color .3s}
.row:hover .mk{color:var(--accent)}
.row h4{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1.32;margin-bottom:8px}
.row p{font-size:14px;color:var(--ink-2);line-height:1.68;max-width:62ch}

/* ---- FULL-BLEED STATEMENT (the one bold moment) ---- */
.statement{background:var(--ink);color:var(--bg);padding:clamp(80px,12vw,150px) 0;position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/8 - 1px),rgba(255,255,255,.05) calc(100%/8 - 1px) calc(100%/8))}
.statement .wrap{position:relative}
.statement .eyebrow{color:var(--accent)}
.statement .eyebrow::after{background:rgba(255,255,255,.18)}
.st-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,80px);align-items:start}
.st-q{font-family:var(--serif);font-size:clamp(28px,4.1vw,58px);line-height:1.1;letter-spacing:-.03em;
  font-style:normal;text-wrap:balance;margin:0}
.st-q b{font-style:italic;font-weight:400;color:var(--accent)}
.st-body{font-size:15.5px;line-height:1.85;color:rgba(255,255,255,.62);border-left:1px solid rgba(255,255,255,.16);padding-left:26px}
.st-meta{margin-top:34px;padding-left:26px;display:grid;gap:20px}
.st-meta>div{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);
  border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.st-meta>div b{display:block;font-size:19px;color:#fff;letter-spacing:-.03em;margin-top:7px;font-family:var(--sans);
  text-transform:none;font-weight:500}

/* ---- MESH: even rows, aligned rules, one deliberate emphasis ---- */
.mesh{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);background:var(--bg)}
.cellx{padding:clamp(24px,2.6vw,36px);position:relative;transition:background .45s;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  display:flex;flex-direction:column}
.cellx:nth-child(3n){border-right:0}
.mesh>.cellx:nth-last-child(-n+3){border-bottom:0}
.cellx:hover{background:var(--bg-1)}
.cellx .kx{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.cellx h4{font-size:clamp(17px,1.45vw,20px);font-weight:500;letter-spacing:-.03em;line-height:1.3;margin-bottom:11px;text-wrap:balance}
.cellx p{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.cellx.dark{background:var(--ink);color:var(--bg);border-right-color:rgba(255,255,255,.12)}
.cellx.dark h4{color:#fff}.cellx.dark p{color:rgba(255,255,255,.62)}.cellx.dark:hover{background:#231f1d}
.cellx .tagrow{margin-top:auto;padding-top:18px}

/* ---- HORIZONTAL CAPABILITY RAIL ---- */
.hrail{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hcard{background:var(--bg);padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;gap:18px;transition:background .4s}

.hcard:hover{background:var(--surface)}
.hcard .hn{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.hcard h4{font-size:22px;font-weight:500;letter-spacing:-.03em}
.hcard p{font-size:13.5px;color:var(--ink-2);line-height:1.7;flex:1}
.hcard .art{height:150px;background:var(--bg-1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hcard .art svg{width:100%;height:100%}
.hint{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  margin-top:16px;display:flex;align-items:center;gap:9px}

/* ---- PROCESS: painted floor numbers (sequence is real) ---- */
.floors{border-top:1px solid var(--ink)}
.floor{display:grid;grid-template-columns:clamp(80px,11vw,168px) 1fr;gap:clamp(22px,4vw,60px);
  padding:clamp(30px,4vw,54px) 0;border-bottom:1px solid var(--line);align-items:start;position:relative}
.floor .fn{font-size:clamp(46px,8vw,124px);font-weight:500;line-height:.8;letter-spacing:-.06em;color:var(--bg-3);
  font-variant-numeric:tabular-nums;transition:color .5s}
.floor:hover .fn{color:var(--accent)}
.floor h4{font-size:clamp(20px,2.2vw,29px);font-weight:500;letter-spacing:-.035em;margin-bottom:12px}
.floor p{font-size:14.5px;color:var(--ink-2);line-height:1.75;max-width:60ch}

/* ---- CASE: overlapping panels ---- */
.case-wrap{position:relative}
.case-top{background:var(--ink);color:var(--bg);padding:clamp(34px,4.4vw,60px);position:relative;z-index:2;
  isolation:isolate;overflow:hidden}
/* photographic texture behind the case-study header — decorative only, so it
   lives in CSS rather than as an <img>. Kept dim enough that the ink block
   still reads as a flat field and white type holds AA contrast. */
.case-top::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("/assets/img/city-scene-1366.webp") center/cover no-repeat;
  opacity:.27;filter:grayscale(.28) contrast(1.05)}
.case-top::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--ink) 12%,rgba(28,25,23,.72) 55%,rgba(28,25,23,.5) 100%)}
@media (max-width:640px){.case-top::before{opacity:.18}
  .band-cap{font-size:12px;letter-spacing:.1em}}
.case-top .ct{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.case-top h3{font-size:clamp(24px,3.1vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.1;max-width:20ch}
.case-art{margin:0 clamp(14px,3vw,54px);background:var(--bg-1);border:1px solid var(--line);border-top:0;padding:26px 20px}
.case-art svg{width:100%;height:auto;display:block}
.case-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
.case-col{background:var(--bg);padding:clamp(24px,2.6vw,36px)}
.case-col h5{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.case-col p{font-size:13.5px;color:var(--ink-2);line-height:1.75}
.case-col p+p{margin-top:13px}
/* the build list reads as work done, not as a paragraph of features */
.case-col ul{display:grid;gap:8px;margin-top:13px}
.case-col li{font-size:13px;color:var(--ink-2);line-height:1.6;padding-left:18px;position:relative}
.case-col li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:1px;background:var(--accent)}
.pull{border-left:2px solid var(--accent);padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px);background:var(--bg-1);margin-top:1px}
.pull q{font-family:var(--serif);font-style:normal;font-size:clamp(20px,2.6vw,32px);line-height:1.35;quotes:none;display:block;max-width:30ch}
.pull cite{display:block;margin-top:20px;font-family:var(--sans);font-weight:500;font-size:10.5px;font-style:normal;color:var(--ink-3);letter-spacing:.08em}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tg{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);padding:5px 10px}

/* ---- AUDIENCE: plain list, no cards ---- */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,70px)}
.aud>div{padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.aud .d{width:7px;height:7px;background:var(--accent);margin-top:8px}
.aud b{display:block;font-size:16px;font-weight:600;letter-spacing:-.025em;margin-bottom:6px}
.aud span{font-size:13.5px;color:var(--ink-2);line-height:1.65}

/* ---- MARQUEE: big serif type ---- */
.bigmq{overflow:hidden;padding:clamp(26px,3.4vw,50px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-1)}
.bigmq-t{display:flex;gap:38px;width:max-content;animation:slide 46s linear infinite;align-items:center}
.bigmq:hover .bigmq-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.bigmq span{font-family:var(--serif);font-size:clamp(24px,3.3vw,46px);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.bigmq i{width:7px;height:7px;background:var(--accent);flex-shrink:0;display:block}

/* ---- CTA ---- */
.endcta{background:var(--ink);color:var(--bg);padding:clamp(80px,12vw,170px) 0;position:relative;overflow:hidden}
.endcta::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),rgba(255,255,255,.05) calc(100%/6 - 1px) calc(100%/6))}
.endcta h2{font-size:clamp(32px,6vw,86px);line-height:1;letter-spacing:-.05em;font-weight:500;max-width:14ch;text-wrap:balance}
.endcta p{font-size:16.5px;color:rgba(255,255,255,.62);line-height:1.75;max-width:50ch;margin-top:28px}
.endcta .btn{border-color:rgba(255,255,255,.35);color:#fff;margin-top:38px}
.endcta .btn:hover{color:#fff;border-color:var(--accent)}
.endcta .fine{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:24px}

/* ---- PAGE HERO (sub-pages) ---- */
/* ---- SPLIT HERO: supplied banner artwork, with the headline kept as live text ----
   The plate is the artwork's photographic half re-canvassed to its original 1.78
   ratio: the baked headline was cut away at x=730, and the fade that used to sit
   underneath it was rebuilt from the photo's own edge pixels. The annotation chips
   are part of the artwork. Keeping the headline as DOM is what lets it reflow and
   stay indexable, which a flattened banner could not do. */
.hero-split{position:relative;overflow:hidden;display:flex;flex-direction:column}
/* narrow: the plate sits under the copy as its own band, so the chips stay legible
   instead of ghosting behind the headline */
.hero-media{position:relative;order:2;z-index:0}
.hero-media picture{display:block}
.hero-media img{display:block;width:100%;height:clamp(220px,52vw,320px);
  object-fit:cover;object-position:50% 50%}
.hero-split>.wrap{order:1;position:relative;z-index:3}

@media (min-width:1200px){
  /* the plate's own ratio drives the hero height, so it is never cropped
     horizontally — that crop was what kept sliding the photo edge under the copy */
  .hero-split{flex-direction:row;align-items:center;min-height:max(640px,46vw);
    padding:clamp(96px,11vh,124px) 0 clamp(40px,4vw,60px)}
  .hero-media{position:absolute;inset:0;order:0}
  .hero-media picture{height:100%}
  .hero-media img{height:100%;object-position:100% 50%}
  /* NB: no max-width override here — the copy uses the same centred .wrap as every
     other section, so the hero starts on the site's own left edge */
  .hero-split>.wrap{width:100%}
  .hero-split h1{font-size:clamp(34px,3.2vw,52px)}
  .hero-copy{max-width:min(40vw,660px)}
  .hero-copy .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-copy .hero-sub{max-width:46ch}
}
/* 1200-1500: the box is still taller than the plate's ratio, so cover crops enough to
   bring the photo under the copy. Top the wash up here only. */
@media (min-width:1200px) and (max-width:1500px){
  .hero-media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(253,252,247,.97) 0%,rgba(253,252,247,.9) 30%,
      rgba(253,252,247,.4) 46%,rgba(253,252,247,0) 60%)}
  .hero-copy{max-width:min(36vw,560px)}
}

/* The supplied hero is a finished art direction, not a background photograph: it
   includes the headline, labels and the precise white-to-city transition.
   Rendering the complete source at its natural aspect ratio keeps every one of
   those relationships intact at any desktop width. The logo was lifted off the
   plate so the real nav can sit over it as it does everywhere else — a soft
   scrim keeps the links legible where the plate turns into photograph.

   The copy on the plate is pixels, not text. It was re-set once; if it has to
   change again, these are the measurements it was set to (source 1672x941):
     headline  Archivo Narrow 500, 63.38px, tracking -.046em,
               baselines y 313 / 386 / 459 / 532
     "End-to-End"  Instrument Serif Italic, same size, --accent
     eyebrow   Inter 600/700, 15.6px, tracking .12em, baseline y 212.8
     lede      Inter 400, 17.9px, leading 26, first baseline y 583.5, justified
     column    x 74 on the left; nothing may pass x ~594 — right of that the
               wash is too dark under the lowest line for --ink to hold.
   The alternative, and the better one: the live-text hero this plate replaced
   is in git history, and the CSS for it (.hero-grid, h1 .ln, .hero-sub,
   .hero-cta, .hero-pillars) is still below. */
.home-page>nav::before{content:"";position:absolute;inset:0 0 -74px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,252,247,.95),rgba(253,252,247,.5) 46%,rgba(253,252,247,0));
  transition:opacity .35s}
.home-page>nav.scrolled::before{opacity:0}
.hero-reference{padding:0;display:block;line-height:0;background:var(--bg)}
.hero-reference>picture{display:block}
.hero-reference img{display:block;width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-hotspot{position:absolute;z-index:2;top:79.6%;height:5.25%;border-radius:0;line-height:normal}
.hero-hotspot-contact{left:4.35%;width:13.75%}
.hero-hotspot-process{left:18.8%;width:11.8%}
.hero-hotspot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- full-bleed illustrative band ---- */
.band{position:relative;width:100%;margin:0;overflow:hidden;background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band img{display:block;width:100%;height:clamp(190px,30vw,380px);object-fit:cover;object-position:center 58%}
/* hero variant: taller and more cinematic, sits directly under the hero type */
.band-hero{border-top:0;margin-top:clamp(18px,3vw,38px)}
.band-hero img{height:clamp(230px,34vw,460px);object-position:center 62%}
/* warm wash ties the cool render into the cream palette */
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,252,247,.34) 0%,rgba(253,252,247,0) 28%,rgba(253,252,247,0) 72%,rgba(253,252,247,.4) 100%)}
.band-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,2vw,22px) var(--gut);
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-ls);
  text-transform:uppercase;color:var(--ink);
  background:linear-gradient(180deg,rgba(253,252,247,0),rgba(253,252,247,.9) 62%)}

.phero{padding:clamp(120px,16vh,180px) 0 clamp(40px,5vw,70px);border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(34px,5.6vw,74px);line-height:1.02;letter-spacing:-.048em;max-width:19ch}
.prose{max-width:62ch}
.prose p{font-size:17px;color:var(--ink-2);line-height:1.85;margin-bottom:26px}
.prose p.first{font-size:21px;color:var(--ink);line-height:1.6;letter-spacing:-.02em}
.prose p.first::first-letter{font-family:var(--serif);font-size:3.1em;float:left;line-height:.82;padding:6px 12px 0 0;color:var(--accent)}
.prose a{color:var(--accent);border-bottom:1px solid rgba(234,88,12,.35)}

/* ---- SERVICES ---- */
.svc{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(22px,4vw,64px);padding:clamp(34px,4.4vw,64px) 0;border-bottom:1px solid var(--line)}
.svc:first-of-type{border-top:1px solid var(--ink)}
.svc-l{position:relative}
.svc-l .sn{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--ink-4);margin-bottom:14px}
.svc-l h2{font-size:clamp(22px,2.7vw,34px);font-weight:500;letter-spacing:-.04em;line-height:1.12}
.svc-r p{font-size:15px;color:var(--ink-2);line-height:1.8;margin-bottom:16px}
.svc-r ul{display:grid;gap:9px;margin-top:6px}
.svc-r li{font-size:14px;color:var(--ink-2);line-height:1.6;padding-left:20px;position:relative}
.svc-r li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--accent)}
.xref{margin-top:56px;padding:30px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2);line-height:1.8}
.xref a{color:var(--accent);border-bottom:1px solid rgba(234,88,12,.35)}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--ink);padding:clamp(50px,7vw,84px) 0 30px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,60px);margin-bottom:56px}
.fgrid p{font-size:13.5px;color:var(--ink-2);line-height:1.75;margin-top:18px;max-width:38ch}
.fgrid h5{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.fgrid a{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:11px;transition:color .25s,padding-left .25s}
.fgrid a:hover{color:var(--accent);padding-left:5px}
.fbot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.08em;color:var(--ink-4);text-transform:uppercase}

/* ---- progress ---- */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:200}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .prog{width:100%;transform-origin:0 50%;animation:progK linear;animation-timeline:scroll(root)}
    @keyframes progK{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---- RESPONSIVE ---- */
@media(max-width:1080px){
  .hero-grid,.split{grid-template-columns:1fr;gap:36px}
  .split-rail{position:static}
  .rail{grid-template-columns:repeat(2,1fr)}
  .rail>div:nth-child(2n){border-right:0}
  .rail>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .rail>div:last-child{border-right:0}
  .mesh{grid-template-columns:repeat(2,1fr)}
  .cellx:nth-child(3n){border-right:1px solid var(--line-2)}
  .cellx:nth-child(2n){border-right:0}
  .mesh>.cellx:nth-last-child(-n+3){border-bottom:1px solid var(--line-2)}
  .mesh>.cellx:nth-last-child(-n+2){border-bottom:0}
  .st-grid{grid-template-columns:1fr;gap:34px}
  .st-body,.st-meta{padding-left:0;border-left:0}
  .case-cols{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:1fr;gap:18px}
}
@media(max-width:880px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-cta{display:none}
}
@media(max-width:640px){
  .rail{grid-template-columns:1fr}
  .rail>div{border-right:0;border-bottom:1px solid var(--line)}
  .mesh{grid-template-columns:1fr}
  .cellx{border-right:0!important;border-bottom:1px solid var(--line-2)!important}
  .mesh>.cellx:last-child{border-bottom:0!important}
  .aud{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .floor{grid-template-columns:1fr;gap:10px}
  .floor .fn{font-size:54px}
  .fgrid{grid-template-columns:1fr}
  .st-meta{gap:26px}
}

/* ================= CONTACT MODAL + CALENDLY ================= */
.cm-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(20,17,15,.62);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.cm-overlay.open{display:flex;animation:cmFade .28s ease-out}
body.cm-lock{overflow:hidden}
@keyframes cmFade{from{opacity:0}to{opacity:1}}
@keyframes cmRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.cm{position:relative;width:min(1080px,100%);max-height:min(94vh,920px);display:grid;
  grid-template-columns:minmax(0,350px) minmax(0,1fr);
  /* the row must be allowed to shrink to the modal's max-height, or its grid
     items keep their content height (min-height:auto) and the form is clipped
     instead of scrolling — which put the submit button out of reach */
  grid-template-rows:minmax(0,1fr);background:var(--surface);
  border:1px solid rgba(255,255,255,.6);border-radius:22px;overflow:hidden;
  box-shadow:0 2px 6px rgba(28,25,23,.04),0 18px 40px rgba(28,25,23,.14),0 48px 90px rgba(28,25,23,.2);
  animation:cmRise .42s cubic-bezier(.16,1,.3,1)}

/* ---- brand panel ---- */
.cm-brand{position:relative;isolation:isolate;min-height:0;overflow:hidden;background:var(--ink);color:var(--bg);
  padding:44px 38px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;overflow:hidden}
.cm-brand::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;left:-160px;bottom:-190px;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.32;filter:blur(12px)}
.cm-brand::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(253,252,247,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(253,252,247,.14) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 78% 12%,#000,transparent 72%)}
.cm-brand .cm-logo{font-weight:700;font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.cm-brand .cm-logo::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 0 4px rgba(234,88,12,.22)}
.cm-brand h3{font-size:clamp(27px,2.5vw,35px);line-height:1.12;letter-spacing:-.032em;font-weight:700;margin-top:26px}
.cm-brand h3 em{font-family:var(--serif);font-style:italic;color:var(--accent);font-weight:400}
.cm-brand p{color:rgba(253,252,247,.6);font-size:14.5px;line-height:1.62;margin-top:16px}
.cm-list{display:flex;flex-direction:column;gap:13px;font-size:13.5px;color:rgba(253,252,247,.82)}
.cm-list span{display:flex;align-items:center;gap:11px}
.cm-list i{width:19px;height:19px;border-radius:50%;flex-shrink:0;background:rgba(234,88,12,.16);
  border:1px solid rgba(234,88,12,.42);position:relative}
.cm-list i::after{content:"";position:absolute;left:5.5px;top:4.5px;width:5px;height:8px;
  border:solid var(--accent);border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}

/* ---- close ---- */
.cm-close{position:absolute;top:16px;right:16px;z-index:6;width:38px;height:38px;border:1px solid var(--line-2);
  border-radius:50%;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);color:var(--ink-2);font-size:20px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .34s cubic-bezier(.16,1,.3,1),background .22s,color .22s,border-color .22s}
.cm-close:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(90deg) scale(1.06)}

/* ---- body ---- */
.cm-body{--cm-pad-b:42px;padding:42px 40px var(--cm-pad-b);overflow-y:auto;min-width:0;min-height:0}
/* Calendly renders its own Schedule button at the foot of its form and scrolls
   internally, so the only way to keep that button in view is to hand the embed
   as much height as the dialog has. On this step the body's own padding is
   trimmed back to buy the widget ~90px. */
.cm-body:has(.cm-cal.show){padding-top:24px;--cm-pad-b:24px}
.cm-body::-webkit-scrollbar{width:9px}
.cm-body::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:9px;border:3px solid var(--surface)}
.cm-steps{display:flex;gap:7px;justify-content:center;margin-bottom:26px}
.cm-steps b{width:34px;height:5px;border-radius:99px;background:var(--bg-3);transition:background .35s,width .35s}
.cm-steps b.on{background:var(--accent);width:48px}
.cm-body h4{font-size:26px;letter-spacing:-.028em;font-weight:700;line-height:1.15}
.cm-body .cm-sub{color:var(--ink-2);font-size:14.5px;margin:8px 0 26px;line-height:1.55}

/* ---- fields ---- */
.cm-field{margin-bottom:17px}
.cm-field label{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.cm-field input,.cm-field select,.cm-field textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line-2);
  border-radius:12px;background:var(--bg-1);color:var(--ink);font-family:var(--sans);font-size:15px;
  transition:border-color .2s,background .2s,box-shadow .2s}
.cm-field input::placeholder,.cm-field textarea::placeholder{color:var(--ink-4)}
.cm-field textarea{min-height:104px;resize:vertical;line-height:1.55}
.cm-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6865' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.cm-field input:hover,.cm-field select:hover,.cm-field textarea:hover{border-color:var(--ink-4)}
.cm-field input:focus,.cm-field select:focus,.cm-field textarea:focus{outline:none;border-color:var(--accent);
  background:var(--surface);box-shadow:0 0 0 4px var(--accent-glow)}
.cm-field input[aria-invalid="true"],.cm-field select[aria-invalid="true"]{border-color:#dc2626;background:#fef4f2}
.cm-field input[aria-invalid="true"]:focus,.cm-field select[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.cm-fe{display:none;color:#dc2626;font-size:12.5px;margin-top:7px;align-items:center;gap:6px}
.cm-fe.on{display:flex;animation:cmFade .2s ease-out}
.cm-fe::before{content:"!";flex-shrink:0;width:15px;height:15px;border-radius:50%;background:#dc2626;color:#fff;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

.cm-submit{width:100%;justify-content:center;margin-top:10px;border-radius:12px;padding:16px 28px;
  box-shadow:0 6px 18px rgba(28,25,23,.16)}
.cm-submit:hover{box-shadow:0 10px 26px rgba(234,88,12,.3)}
.cm-submit:active{transform:translateY(0)}
.cm-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cm-note{color:var(--ink-3);font-size:12.5px;margin-top:16px;text-align:center}
/* The form is taller than the dialog on most laptop screens, so the primary
   action has to stay put rather than sit below the fold — it sticks to the
   bottom of the scrolling body, with a fade so fields pass under it cleanly. */
.cm-actions{position:sticky;bottom:calc(-1 * var(--cm-pad-b));z-index:3;
  margin:0 -40px calc(-1 * var(--cm-pad-b));padding:14px 40px var(--cm-pad-b);
  background:var(--surface)}
.cm-actions::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px;pointer-events:none;
  background:linear-gradient(to top,var(--surface),rgba(253,252,247,0))}
.cm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---- calendar step ---- */
.cm-cal{display:none}
.cm-cal.show{display:block;animation:cmFade .34s ease-out}
.cm-cal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;
  padding-bottom:15px;border-bottom:1px solid var(--line)}
.cm-cal-head p{font-size:13.5px;color:var(--ink-2)}
.cm-back{background:none;border:1px solid var(--line-2);border-radius:99px;padding:7px 15px;color:var(--ink-2);
  font-family:var(--sans);font-weight:500;font-size:11.5px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.cm-back:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* The embed scrolls internally, so it has to fit the space the modal actually
   has — a fixed height pushes Calendly's own "Schedule Event" button past the
   bottom of the dialog. Cap it to the modal height less the step dots, the
   "Pick a time" header and the body padding around them. */
#cm-widget{min-width:280px;height:min(760px,calc(min(94vh,920px) - 140px));min-height:360px;
  border-radius:14px;overflow:hidden;background:var(--bg-1)}
.cm-fallback{padding:34px 22px;border:1px dashed var(--line-2);border-radius:14px;text-align:center;
  font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* Calendly's floating badge never belongs inside the modal */
.calendly-badge-widget,.calendly-badge,.calendly-overlay,[data-testid="calendly-badge"]{display:none!important}

@media (max-width:880px){
  .cm-overlay{padding:0}
  .cm{grid-template-columns:1fr;max-height:100vh;height:100%;border-radius:0;border:none}
  .cm-brand{display:none}
  .cm-body{--cm-pad-b:30px;padding:60px 22px var(--cm-pad-b)}
  .cm-actions{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .cm-body h4{font-size:23px}
  #cm-widget{height:min(680px,calc(100dvh - 150px));min-height:340px;border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .cm-overlay.open,.cm,.cm-cal.show,.cm-fe.on{animation:none}
  .cm-submit:hover,.cm-close:hover{transform:none}
}

.flegal{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding:22px 0 0;margin-top:26px;
  border-top:1px solid var(--line);font-family:var(--sans);font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:.01em}
.flegal a{color:var(--ink-2)}
.flegal a:hover{color:var(--accent)}

/* ---- custom select ---- */
.cm-select-wrap{position:relative}
.cm-native-hidden{position:absolute!important;opacity:0;pointer-events:none;width:1px;height:1px;padding:0;border:0}
.cm-select{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--bg-1);
  color:var(--ink);font-family:var(--sans);font-size:15px;text-align:left;cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s}
.cm-select:hover{border-color:var(--ink-4)}
.cm-select:focus-visible,.cm-select.open{outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 4px var(--accent-glow)}
.cm-select[aria-invalid="true"]{border-color:#dc2626;background:#fef4f2}
.cm-select .cm-ph{color:var(--ink-4)}
.cm-select-chev{flex-shrink:0;color:var(--ink-2);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.cm-select.open .cm-select-chev{transform:rotate(180deg);color:var(--accent)}

.cm-select-menu{position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;display:none;
  padding:7px;background:var(--surface);border:1px solid var(--line-2);border-radius:15px;
  box-shadow:0 4px 10px rgba(28,25,23,.06),0 16px 38px rgba(28,25,23,.16);
  max-height:284px;overflow-y:auto;overscroll-behavior:contain}
.cm-select-menu.open{display:block;animation:cmPop .2s cubic-bezier(.16,1,.3,1)}
@keyframes cmPop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.cm-select-menu::-webkit-scrollbar{width:8px}
.cm-select-menu::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:8px;border:2px solid var(--surface)}

.cm-opt{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;cursor:pointer;
  font-size:14.5px;color:var(--ink-1);transition:background .15s,color .15s}
.cm-opt .cm-dot{width:7px;height:7px;border-radius:50%;background:var(--bg-3);flex-shrink:0;transition:background .15s,transform .15s}
.cm-opt:hover,.cm-opt.active{background:var(--accent-soft);color:var(--accent-2)}
.cm-opt:hover .cm-dot,.cm-opt.active .cm-dot{background:var(--accent);transform:scale(1.3)}
.cm-opt[aria-selected="true"]{background:var(--ink);color:var(--bg);font-weight:500}
.cm-opt[aria-selected="true"] .cm-dot{background:var(--accent);transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){
  .cm-select-menu.open{animation:none}
  .cm-select-chev,.cm-opt,.cm-opt .cm-dot{transition:none}
}
.cm-select-menu.up{top:auto;bottom:calc(100% + 8px)}
@keyframes cmPopUp{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.cm-select-menu.up.open{animation:cmPopUp .2s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.cm-select-menu.up.open{animation:none}}

/* ---- layer grid: card link + wide feature card ---- */
.hlink{margin-top:auto;padding-top:4px;font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;
  transition:color .25s,gap .25s;align-self:flex-start}
.hcard:hover .hlink{color:var(--accent);gap:13px}
.hlink svg{transition:transform .3s}
.hcard:hover .hlink svg{transform:translateX(3px)}

@media(max-width:1100px){ .hrail{grid-template-columns:repeat(2,1fr)} }
@media(max-width:700px){ .hrail{grid-template-columns:1fr} }

/* ---- services page: sticky heading, jump index, denser bullets ---- */
/* must undo the global fixed `nav{}` rule that also matches this element */
.svc-nav{position:static;z-index:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:8px;margin-top:34px;padding:0;background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.svc-nav a{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:9px 15px;border:1px solid var(--line-2);border-radius:99px;
  transition:border-color .22s,color .22s,background .22s}
.svc-nav a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.svc{scroll-margin-top:96px}
@media(min-width:1081px){
  .svc-l{position:sticky;top:96px;align-self:start}
}
@media(min-width:1000px){
  .svc-r ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 34px}
}
.svc-r li::before{top:8px;width:9px;height:2px;border-radius:2px;opacity:.85}

/* ---- mobile refinements ---- */
@media(max-width:640px){
  /* step the shared label scale down once, so every label shrinks together */
  :root{--label-size:12px; --label-ls:.1em; --label-rule-w:20px; --label-h:18px}
  .hero-pillars span{padding-right:20px}
  .rail>div{padding:26px 2px}
  .hero-kick{flex-wrap:wrap;gap:7px 10px;line-height:1.5}
  .hero-kick b{white-space:nowrap}
  .hero-kick i{display:none}
}

/* ---- staggered reveal for grid children ---- */
.stg>*{opacity:0;transform:translateY(26px);
  transition:opacity .66s cubic-bezier(.16,1,.3,1),transform .66s cubic-bezier(.16,1,.3,1)}
.stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(1){transition-delay:0ms}    .stg.in>*:nth-child(2){transition-delay:70ms}
.stg.in>*:nth-child(3){transition-delay:140ms}  .stg.in>*:nth-child(4){transition-delay:210ms}
.stg.in>*:nth-child(5){transition-delay:280ms}  .stg.in>*:nth-child(6){transition-delay:350ms}
.stg.in>*:nth-child(7){transition-delay:420ms}  .stg.in>*:nth-child(8){transition-delay:470ms}
.stg.in>*:nth-child(9){transition-delay:520ms}  .stg.in>*:nth-child(10){transition-delay:570ms}
.stg.in>*:nth-child(11){transition-delay:620ms} .stg.in>*:nth-child(12){transition-delay:670ms}

/* ---- hover life ---- */
@media (prefers-reduced-motion:reduce){
  .stg>*{opacity:1;transform:none;transition:none}
  .hcard::after,.cellx::after,.hcard .art svg{transition:none}
}

/* ================= SYSTEM STACK (what we do) ================= */
.sysgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,78px);margin-top:46px;align-items:start}

.sysviz{position:sticky;top:104px}
.sysviz-in{display:flex;gap:14px;align-items:stretch}
.slabs{position:relative;display:flex;flex-direction:column-reverse;gap:8px;flex:1;padding-left:20px}
.slabs::after{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:1px;background:var(--line-2)}
.slab{position:relative;border:1px solid var(--line-2);border-radius:11px;padding:13px 15px;background:var(--bg-1);
  opacity:.4;transform:translateX(-9px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),
             background .4s,border-color .4s,box-shadow .4s}
.slab::before{content:"";position:absolute;left:-21px;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--bg-3);transform:translateY(-50%);transition:background .4s,box-shadow .4s}
.slab b{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.17em;color:var(--ink-4);font-weight:500}
.slab span{display:block;font-size:14px;margin-top:3px;letter-spacing:-.022em;line-height:1.3}
.slab.on{opacity:1;transform:none;background:var(--surface)}
.slab.on::before{background:var(--ink-3)}
.slab.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 8px 24px rgba(234,88,12,.13)}
.slab.active b{color:var(--accent)}
.slab.active::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}

.spine{writing-mode:vertical-rl;text-orientation:mixed;border-left:1px dashed var(--line-2);padding-left:11px;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);
  transition:color .45s,border-left-color .45s}
.spine.active{color:var(--accent);border-left-color:var(--accent);border-left-style:solid}

.syssteps{display:flex;flex-direction:column;gap:clamp(38px,5.5vw,84px)}
.step{position:relative;padding-left:24px;scroll-margin-top:110px}
.step::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:var(--line-2);transition:background .5s}
.step.active::before{background:var(--accent)}
.s-h{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.s-n{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4)}
.s-h h4{font-size:clamp(21px,2.3vw,29px);font-weight:500;letter-spacing:-.035em}
.step .art{height:clamp(170px,19vw,215px);background:var(--bg-1);border:1px solid var(--line);border-radius:13px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:17px}
.step .art svg{width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.step:hover .art svg{transform:scale(1.035)}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.75;margin-bottom:13px}

@media(max-width:1000px){
  .sysgrid{grid-template-columns:1fr;gap:26px}
  .sysviz{position:static}
  .sysviz-in{flex-direction:column;gap:10px}
  .slabs{flex-direction:row;flex-wrap:wrap;gap:6px;padding-left:0}
  .slabs::after{display:none}
  .slab{opacity:1;transform:none;padding:8px 13px;border-radius:99px}
  .slab::before{display:none}
  .slab b{display:none}
  .slab span{font-size:12px;margin:0}
  .spine{writing-mode:horizontal-tb;border-left:0;border-top:1px dashed var(--line-2);
    padding:9px 0 0;justify-content:flex-start}
  .spine.active{border-top-color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .slab{opacity:1;transform:none;transition:background .2s,border-color .2s}
  .step .art svg{transition:none}
}

/* ================= CONTRAST TABLE (why us) ================= */
.vs{margin-top:38px}
.vs-head,.vs-row{display:grid;grid-template-columns:minmax(96px,.42fr) 1fr 34px 1fr;
  gap:clamp(10px,1.6vw,22px);align-items:stretch}

.vs-head{position:sticky;top:64px;z-index:5;padding:13px 0;margin-bottom:10px;
  background:linear-gradient(var(--bg) 74%,transparent);align-items:center}
.vs-head span{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cold-ink);padding-left:19px}
.vs-head .b{color:var(--accent)}

.vs-row:nth-child(2){--i:0}
.vs-row:nth-child(3){--i:1}
.vs-row:nth-child(4){--i:2}
.vs-row:nth-child(5){--i:3}
.vs-row:nth-child(6){--i:4}
.vs-row:nth-child(7){--i:5}
.vs-row:nth-child(8){--i:6}
.vs-row:nth-child(9){--i:7}
.vs-row:nth-child(10){--i:8}
.vs-row:nth-child(11){--i:9}
.vs-row:nth-child(12){--i:10}
.vs-row:nth-child(13){--i:11}
.vs-row:nth-child(14){--i:12}
.vs-row{margin-bottom:9px;opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0)*52ms)}
.vs.in .vs-row{opacity:1;transform:none}

.vs-k{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:4px 2px;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-1);transition:color .3s}
.vs-k em{font-style:normal;font-size:23px;font-weight:600;letter-spacing:-.04em;color:var(--cold-ink);
  line-height:1;opacity:.75;transition:color .35s,opacity .35s}
.vs-row:hover .vs-k{color:var(--ink-1)}
.vs-row:hover .vs-k em{color:var(--accent);opacity:1}

/* the "before" side: recessed, cool, hatched */
.vs-a{position:relative;padding:17px 19px 17px 42px;border-radius:13px;
  background:var(--cold-bg);border:1px dashed var(--cold-line);
  opacity:0;transform:translateX(-18px);
  transition:opacity .58s cubic-bezier(.16,1,.3,1),transform .58s cubic-bezier(.16,1,.3,1),
             background .35s,border-color .35s;
  transition-delay:calc(var(--i,0)*52ms + 80ms)}
.vs.in .vs-a{opacity:1;transform:none}
.vs-a::after{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(82,92,104,.05) 7px 8px)}
.vs-a p{font-size:14px;color:var(--cold-ink);line-height:1.62;position:relative;z-index:1}
.vs-a::before{content:"";position:absolute;left:17px;top:21px;width:13px;height:13px;border-radius:50%;
  border:1.5px solid var(--cold-ink);opacity:.55}

/* the "after" side: raised, warm, accented */
.vs-b{position:relative;padding:17px 19px 17px 46px;border-radius:13px;
  background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--accent);
  box-shadow:0 1px 2px rgba(28,25,23,.04);
  opacity:0;transform:translateX(18px);
  transition:opacity .58s cubic-bezier(.16,1,.3,1),transform .58s cubic-bezier(.16,1,.3,1),
             box-shadow .35s,border-color .35s;
  transition-delay:calc(var(--i,0)*52ms + 130ms)}
.vs.in .vs-b{opacity:1;transform:none}
.vs-b p{font-size:14.5px;color:var(--ink);line-height:1.6;font-weight:500}
.vs-b::before{content:"";position:absolute;left:21px;top:22px;width:6px;height:11px;
  border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}

.vs-arrow{display:flex;align-items:center;justify-content:center;color:var(--ink-4);
  opacity:0;transition:opacity .5s,color .35s,transform .4s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0)*52ms + 190ms)}
.vs.in .vs-arrow{opacity:1}
.vs-arrow svg{width:17px;height:17px}

.vs-row:hover .vs-a{background:var(--cold-bg-2);border-color:var(--cold-ink)}
.vs-row:hover .vs-b{box-shadow:0 10px 26px rgba(234,88,12,.15);border-color:var(--accent)}
.vs-row:hover .vs-arrow{color:var(--accent);transform:translateX(4px)}
.vs-a i,.vs-b i{display:none}

@media(max-width:900px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;gap:9px;margin-bottom:22px}
  .vs-k{flex-direction:row;align-items:baseline;gap:10px;padding:0 0 2px}
  .vs-arrow{transform:rotate(90deg);height:22px}
  .vs-row:hover .vs-arrow{transform:rotate(90deg) translateX(3px)}
  .vs-a,.vs-b{transform:translateY(14px)}
  .vs.in .vs-a,.vs.in .vs-b{transform:none}
  .vs-a i,.vs-b i{display:block;font-family:var(--sans);font-weight:500;font-style:normal;font-size:8.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
  .vs-b i{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .vs-row,.vs-a,.vs-b,.vs-arrow{opacity:1!important;transform:none!important;transition:none}
}

/* ---- phone: country code + national number ---- */
.cm-tel{display:grid;grid-template-columns:minmax(0,152px) minmax(0,1fr);gap:9px}
.cm-tel select{padding-right:34px;background-position:right 12px center;
  text-overflow:ellipsis;font-size:14px}
@media(max-width:520px){
  .cm-tel{grid-template-columns:minmax(0,124px) minmax(0,1fr);gap:7px}
  .cm-tel select{font-size:13px;padding-left:12px}
}