/* Chakra Petch (SIL Open Font License), self-hosted: no request to Google is made. */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/chakra-petch-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/chakra-petch-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* ============================================================
   attackless — labs layout
   Colour + type: BRAND.md (white / black / one orange, Chakra Petch)
   Layout language: blueprint grid, bracket cells, orange mosaic
   ============================================================ */

:root{
  --bg:#fff; --fg:#000;
  --mut:rgba(0,0,0,.62); --dim:rgba(0,0,0,.38); --line:rgba(0,0,0,.16);
  --grid:rgba(0,0,0,.085);
  --o:#ffc400; --o2:#cf8f00; --tint:#fff6dc;
  --soft:#fafafa; --soft2:#f3f3f3;
  --maxw:1320px;
  --pad:max(clamp(16px,3vw,40px),calc((100vw - var(--maxw))/2));
  --hh:80px;
  --loop:4.5s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Chakra Petch',ui-monospace,monospace;
  background:var(--bg); color:var(--fg);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block}
::selection{background:#000;color:#fff}
section{scroll-margin-top:var(--hh)}

/* ---------- blueprint grid behind everything ---------- */
.gridbg{position:fixed;inset:0;z-index:0;pointer-events:none;
  padding:0 var(--pad);display:grid;grid-template-columns:repeat(5,1fr)}
.gridbg i{border-left:1px solid var(--grid)}
.gridbg i:last-child{border-right:1px solid var(--grid)}
@media(max-width:820px){.gridbg{grid-template-columns:repeat(2,1fr)}}

.wrap{position:relative;z-index:1;padding:0 var(--pad)}
main{position:relative;z-index:1}

/* ---------- micro label: orange square + uppercase ---------- */
.ml{display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ml::before{content:"";width:6px;height:6px;background:var(--o);flex:none}
.ml b{color:var(--fg);font-weight:500}
.ml.lg{font-size:13px;letter-spacing:.16em;color:var(--fg);font-weight:600}
.ml.lg::before{width:8px;height:8px}

/* ---------- bracket cell: hairline box with corner ticks ---------- */
.brk{position:relative;background:var(--bg)}
.brk .c{position:absolute;width:9px;height:9px;pointer-events:none;opacity:.55}
.brk .c1{top:6px;left:6px;border-top:1px solid #000;border-left:1px solid #000}
.brk .c2{top:6px;right:6px;border-top:1px solid #000;border-right:1px solid #000}
.brk .c3{bottom:6px;left:6px;border-bottom:1px solid #000;border-left:1px solid #000}
.brk .c4{bottom:6px;right:6px;border-bottom:1px solid #000;border-right:1px solid #000}
.brk:hover .c{opacity:1;border-color:var(--o)}

/* ---------- buttons (brand pixel button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:14px 24px;background:var(--o);color:#000;border:2px solid #000;
  box-shadow:5px 5px 0 #000;transition:transform .12s steps(2),box-shadow .12s steps(2),background .15s}
.btn i{font-style:normal;display:inline-block;transition:transform .2s steps(2)}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.btn:hover i{transform:translateX(4px)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 #000}
.btn.sm{padding:10px 16px;font-size:11px;box-shadow:3px 3px 0 #000}
.btn.sm:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn.ghost{background:transparent;color:#000;box-shadow:4px 4px 0 var(--o2)}
.btn.ghost:hover{background:var(--tint)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hh);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
header.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:100%;padding:0 var(--pad)}
.logo{display:inline-flex;align-items:center;position:relative}
.logo .wm{font-weight:700;font-size:29px;letter-spacing:-.045em;line-height:1;color:#000;
  text-shadow:2px 2px 0 var(--o2)}
/* the mark is the "//" of the wordmark itself: same font, weight and tracking, in the accent */
.wm::before{content:"//";color:var(--o);font-weight:700;letter-spacing:-.14em;
  display:inline-block;margin-right:.16em;text-shadow:none}
@media(max-width:560px){.logo .wm{font-size:24px}}
.nlinks{display:flex;gap:2px;margin-left:auto}
.nlinks a{padding:9px 13px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);position:relative;transition:color .18s}
.nlinks a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--o);
  transform:scaleX(0);transform-origin:left;transition:transform .22s steps(3)}
.nlinks a:hover,.nlinks a.on{color:#000}
.nlinks a:hover::after,.nlinks a.on::after{transform:scaleX(1)}
.nav .btn{margin-left:8px}
.burger{display:none;width:42px;height:42px;border:2px solid #000;position:relative;flex:none}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#000;transition:top .2s,transform .2s,opacity .15s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
.burger.x span:nth-child(1){top:19px;transform:rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){top:19px;transform:rotate(-45deg)}
.mnav{position:fixed;top:var(--hh);left:0;right:0;z-index:49;background:#fff;border-bottom:2px solid #000;
  padding:14px var(--pad) 22px;display:none;flex-direction:column;gap:2px}
.mnav.open{display:flex}
.mnav a{padding:13px 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:16px;width:100%}
@media(max-width:1080px){.nlinks{display:none}.burger{display:block;margin-left:auto}.nav .btn.sm{display:none}}

/* ---------- scroll progress ---------- */
#prog{position:fixed;top:0;left:0;height:3px;background:var(--o);z-index:60;width:0}

/* ---------- side rail ---------- */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;border:1px solid var(--line);border-right:0;background:#fff}
.rail a{width:36px;height:36px;display:grid;place-items:center;font-size:10px;font-weight:600;letter-spacing:.06em;
  color:var(--mut);border-bottom:1px solid var(--line);transition:background .15s,color .15s}
.rail a:last-child{border-bottom:0}
.rail a:hover{background:var(--o);color:#000}
@media(max-width:900px){.rail{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:var(--hh);min-height:min(92vh,860px);display:flex;flex-direction:column;
  border-bottom:1px solid var(--line)}
.hero-stage{position:relative;flex:1;display:grid;grid-template-columns:repeat(5,1fr);
  padding:0 var(--pad);min-height:560px}
.mosaic{position:absolute;inset:0;z-index:0;display:grid;pointer-events:none}
.mosaic i{background:transparent;transition:background .35s steps(2)}
.mosaic i.on{background:var(--o)}
.mosaic i.on.t{background:rgba(255,196,0,.40)}
.hero-copy{position:relative;z-index:2;grid-column:1/4;align-self:center;padding:34px 30px 34px 0}
@media(max-width:820px){
  .hero-stage{grid-template-columns:1fr;min-height:480px;align-items:center}
  /* the copy sits on a sticker tile so the mosaic never fights the headline */
  .hero-copy{grid-column:1/-1;padding:24px 20px 26px;margin:44px 0;
    background:#fff;border:2px solid #000;box-shadow:6px 6px 0 var(--o2)}
}
.hero h1{font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(34px,6.2vw,84px);margin:16px 0 0}
.hero h1 .solid{display:block;text-shadow:4px 4px 0 var(--o2)}
.hero h1 .out{display:block;color:transparent;-webkit-text-stroke:1.5px #000}
.lede{margin-top:20px;max-width:34ch;font-size:clamp(15px,1.4vw,19px);color:var(--mut)}
.hero-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.hero-box{position:relative;z-index:2;grid-column:5/6;align-self:center;justify-self:end;
  width:100%;max-width:200px;aspect-ratio:1;border:2px solid #000;background:#fff;
  display:grid;place-items:center;box-shadow:6px 6px 0 var(--o2)}
.hero-box .mk{font-weight:700;font-size:74px;line-height:1;letter-spacing:-.14em;color:var(--o);
  padding-right:.14em}
.hero-box .lbl{position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
@media(max-width:820px){.hero-box{display:none}}

/* partner strip */
/* Five equal columns, matching the blueprint grid behind the page, so every divider in
   this strip lands exactly on a page grid line. An `auto` first column sized itself to the
   label and pushed all four dividers off the grid. */
.partners{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  margin:0 var(--pad);position:relative;z-index:2;background:#fff}
.partners .ph{display:flex;align-items:center;padding:0 16px;border-right:1px solid var(--line);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.pslide{overflow:hidden;border-right:1px solid var(--line)}
.pslide:last-child{border-right:0}
.pt{display:flex;align-items:center;justify-content:center;gap:10px;height:78px;
  font-size:12px;font-weight:600;letter-spacing:.08em}
/* logo files are recoloured to the brand orange on disk (BRAND.md §9) */
.pt img{width:26px;height:26px}   /* BRAND.md §9: keep partner marks at 26px */
@media(max-width:820px){.partners{grid-template-columns:repeat(2,1fr)}.partners .ph{display:none}
  .pslide{border-bottom:1px solid var(--line)}}

/* ---------- section scaffold ---------- */
.sec{border-bottom:1px solid var(--line);padding:0 var(--pad)}
.sec-in{padding:clamp(52px,7vw,92px) 0}
.sec-head{max-width:760px;margin-bottom:38px}
.sec-head h2{margin-top:14px;font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;
  font-size:clamp(28px,4.4vw,56px);text-shadow:3px 3px 0 var(--o2)}
.sec-head h2 .out{color:transparent;-webkit-text-stroke:1.5px #000;text-shadow:none}
.sec-head p{margin-top:18px;color:var(--mut);max-width:58ch}

/* huge display word (Portfolio / Latest news) */
.display{font-weight:700;text-transform:uppercase;letter-spacing:-.05em;line-height:.82;
  font-size:clamp(46px,9vw,124px);color:transparent;-webkit-text-stroke:2px #000}
.display span{color:#000;-webkit-text-stroke:0;text-shadow:5px 5px 0 var(--o2)}

/* ---------- roadmap (5 steps) ---------- */
.road{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0;border:1px solid var(--line)}
@media(max-width:900px){.road{grid-template-columns:1fr}}
.road-l{padding:30px;border-right:1px solid var(--line)}
@media(max-width:900px){.road-l{border-right:0;border-bottom:1px solid var(--line)}}
.road-l h3{margin:14px 0 22px;font-size:clamp(20px,2.4vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1}
.chk{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.chk button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 12px;
  border-bottom:1px solid var(--line);font-size:14px;font-weight:600;letter-spacing:.04em;transition:background .15s}
.chk button::before{content:"";width:12px;height:12px;border:2px solid #000;flex:none;transition:background .15s}
.chk button.on::before,.chk button:hover::before{background:var(--o)}
.chk button.on{background:var(--tint)}
.chk button .n{margin-left:auto;font-size:10px;letter-spacing:.18em;color:var(--dim)}
.road-l .btn{margin-top:24px}
.road-r{display:grid;grid-template-columns:repeat(2,1fr)}
@media(max-width:520px){.road-r{grid-template-columns:1fr}}
.step{position:relative;padding:26px 22px 24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  min-height:190px;transition:background .2s}
.step:hover{background:var(--soft)}
.step.act{background:var(--tint)}
.step .num{position:absolute;top:14px;right:16px;font-size:10px;letter-spacing:.2em;color:var(--dim)}
.step svg{color:var(--o);margin-bottom:14px}
.step:hover svg{animation:hop .4s steps(2) 2}
@keyframes hop{50%{transform:translateY(-4px)}}
.step h4{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.step p{margin-top:8px;font-size:13.5px;color:var(--mut);line-height:1.45}
.step.more{display:flex;flex-direction:column;justify-content:center;background:var(--soft)}
.step.more:hover{background:var(--tint)}
.step.more strong{font-size:40px;font-weight:700;letter-spacing:-.05em;line-height:1;text-shadow:3px 3px 0 var(--o2)}
.step.more span{margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.step.more em{font-style:normal;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ---------- gap assessment bento ---------- */
.bento{display:grid;gap:0;border:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);grid-template-areas:"map map fw" "map map rank" "plan ev ev"}
@media(max-width:900px){.bento{grid-template-columns:1fr;grid-template-areas:"map" "fw" "rank" "plan" "ev"}}
.bx{position:relative;padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.bx:hover{background:var(--soft)}
.b-map{grid-area:map}.b-fw{grid-area:fw}.b-rank{grid-area:rank}.b-plan{grid-area:plan}.b-ev{grid-area:ev}
.bx .k{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.bx .k::before{content:"";width:6px;height:6px;background:var(--o);flex:none}
.smp{border:1px solid var(--line);padding:2px 6px;font-size:9px;letter-spacing:.14em;color:var(--dim)}
.bx h3{margin:12px 0 8px;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:-.025em}
.bx p{font-size:13.5px;color:var(--mut);max-width:46ch}
.score{display:flex;align-items:baseline;gap:10px;margin:20px 0 14px}
.score strong{font-size:52px;font-weight:700;letter-spacing:-.05em;line-height:1;text-shadow:3px 3px 0 var(--o2)}
.score span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* Met cells are a light grey, not black: at 22x9 a black grid reads as a slab of noise
   and buries the gaps. Same values the live site settled on. */
.pmap{display:grid;gap:4px;margin-top:6px}
.pmap i{aspect-ratio:1;background:#e2e2e2}
.pmap i.p{background:#fff;box-shadow:inset 0 0 0 1.5px #000}
.pmap i.g{background:var(--o)}
.pmap i.g.scan{background:var(--o2);box-shadow:0 0 0 1.5px #000;z-index:1}
.legend{display:flex;gap:18px;margin-top:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend b{width:9px;height:9px;background:#e2e2e2;display:block}
.legend b.p{background:#fff;box-shadow:inset 0 0 0 1.5px #000}
.legend b.g{background:var(--o)}
.fw{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.fw div{display:grid;grid-template-columns:76px 1fr 28px;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em}
.fw .bar{height:9px;background:var(--soft2);display:block}
.fw .bar u{display:block;height:100%;background:var(--o);text-decoration:none;
  transition:width .9s cubic-bezier(.2,.8,.2,1)}
.fw em{font-style:normal;font-weight:700;text-align:right}
.rk{margin-top:18px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.rk div{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.sev{flex:none;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border:1px solid #000}
.sev.c{background:var(--o);}
.sev.h{background:var(--tint)}
.stairs{margin-top:20px;display:flex;align-items:flex-end;gap:8px}
.stairs>div{flex:1;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.stairs span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stairs .blk{display:block;width:100%;background:#000}
.stairs .s1 .blk{height:26px}.stairs .s2 .blk{height:44px}.stairs .s3 .blk{height:66px;background:var(--o)}
.evs{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.evs span{border:2px solid #000;padding:8px 14px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.evs span:first-child{background:#000;color:#fff}
.bento-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px}
.bento-foot .note{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---------- services ---------- */
.filters{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin-bottom:0;width:fit-content;max-width:100%}
.filters button{padding:11px 18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);border-right:1px solid var(--line);transition:background .15s,color .15s}
.filters button:last-child{border-right:0}
.filters button:hover{background:var(--soft2);color:#000}
.filters button.on{background:#000;color:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);margin-top:26px}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;min-height:132px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .18s}
.svc:hover{background:var(--tint)}
.svc .id{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.svc .st{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#000;font-weight:600}
.svc h4{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-top:auto;padding-right:26px}
.svc .arr{position:absolute;right:16px;bottom:16px;transition:transform .2s steps(2);color:var(--dim)}
.svc:hover .arr{transform:translateX(4px);color:#000}

/* ---------- case studies ---------- */
.case-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin-bottom:34px}
@media(max-width:700px){.case-head{grid-template-columns:1fr}}
.counter{border:2px solid #000;padding:14px 20px;min-width:150px;box-shadow:5px 5px 0 var(--o2);background:#fff}
.counter span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.counter strong{display:block;font-size:40px;font-weight:700;letter-spacing:-.05em;line-height:1.05}
.cases{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
@media(max-width:980px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cases{grid-template-columns:1fr}}
.case{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;transition:background .18s}
.case:hover{background:var(--soft)}
.case .ct{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.case .ct .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.case .ct .tag b{color:#000;font-weight:600}
.chip{font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:2px 6px;color:var(--dim)}
.case h4{padding:20px 16px 18px;font-size:16px;font-weight:600;line-height:1.35;min-height:104px}
.case .metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.case .metrics div{padding:12px 16px;border-right:1px solid var(--line)}
.case .metrics div:last-child{border-right:0}
.case .metrics strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.case .metrics span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.4;display:block;margin-top:4px}

/* ---------- industries ---------- */
.inds{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
@media(max-width:900px){.inds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.inds{grid-template-columns:1fr}}
.ind{position:relative;padding:26px 22px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:180px;display:flex;flex-direction:column;transition:background .18s}
.ind:hover{background:var(--tint)}
.ind .num{position:absolute;top:16px;right:18px;font-size:10px;letter-spacing:.2em;color:var(--dim)}
.ind h4{margin-top:22px;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:1.1}
.ind p{margin-top:10px;font-size:13.5px;color:var(--mut)}
.ind .tags{margin-top:auto;padding-top:16px;display:flex;gap:7px}
.ind .tags span{border:1px solid #000;padding:3px 8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- newsroom ---------- */
.news-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin-bottom:34px}
@media(max-width:700px){.news-head{grid-template-columns:1fr}}
.arrows{display:flex;border:1px solid var(--line)}
.arrows button{width:44px;height:44px;display:grid;place-items:center;border-right:1px solid var(--line);transition:background .15s}
.arrows button:last-child{border-right:0}
.arrows button:hover{background:var(--o)}
.arrows button:disabled{opacity:.3;cursor:default;background:none}
.news{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
@media(max-width:1000px){.news{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.news{grid-template-columns:1fr}}
.na{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px 44px;min-height:190px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .18s}
.na:hover{background:var(--soft)}
.na .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.na .i{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.na .cat{font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:2px 7px;color:var(--dim)}
.na h4{font-size:15px;font-weight:600;line-height:1.35}
.na .soon{position:absolute;left:20px;bottom:18px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.na .arr{position:absolute;right:18px;bottom:16px;color:var(--dim);transition:transform .2s steps(2)}
.na:hover .arr{transform:translateX(4px);color:#000}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 4px;
  font-size:15px;font-weight:600;line-height:1.4;transition:background .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--soft)}
.faq summary .i{font-size:10px;letter-spacing:.2em;color:var(--dim);flex:none;width:26px}
.faq summary .pl{margin-left:auto;flex:none;width:34px;height:34px;background:var(--o);border:2px solid #000;
  position:relative;transition:transform .2s steps(2)}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:#000}
.faq summary .pl::before{left:8px;right:8px;top:14px;height:2px}
.faq summary .pl::after{top:8px;bottom:8px;left:14px;width:2px;transition:opacity .15s}
.faq details[open] summary{background:var(--tint)}
.faq details[open] summary .pl::after{opacity:0}
.faq .ans{padding:0 4px 24px 46px;color:var(--mut);font-size:14.5px;max-width:78ch}
.faq-more{padding-top:22px}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:0;border:1px solid var(--line)}
@media(max-width:920px){.book{grid-template-columns:1fr}}
.book-l{padding:32px 28px;border-right:1px solid var(--line)}
@media(max-width:920px){.book-l{border-right:0;border-bottom:1px solid var(--line)}}
.book-l h3{margin:14px 0 14px;font-size:clamp(24px,3.4vw,40px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.95;text-shadow:3px 3px 0 var(--o2)}
.book-l p{color:var(--mut);font-size:14px;max-width:38ch}
.book-l .btn{margin-top:24px}
.book-r{min-height:520px;background:#fff}
.book-r iframe{width:100%;height:100%;min-height:520px;border:0;display:block}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;padding:0 var(--pad)}
.f-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;
  padding:30px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){.f-cta{grid-template-columns:1fr;gap:16px}}
.f-cta .fm{display:inline-flex;align-items:center;font-weight:700;font-size:26px;letter-spacing:-.045em;
  text-shadow:2px 2px 0 var(--o2)}
.f-cta p{font-size:15px;color:var(--mut)}
/* five equal columns, stepping down evenly — no squeezed last column */
.fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:38px 28px;
  padding:46px 0 42px;border-bottom:1px solid var(--line)}
@media(max-width:1000px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
.fgrid h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:500}
.fgrid a,.fgrid span.soon{display:block;padding:6px 0;font-size:14px;color:#1a1a1a;transition:color .15s}
.fgrid a:hover{color:var(--o2)}
.fgrid span.soon{color:var(--dim);cursor:default}

/* footer wordmark: a hairline outline cropped at the baseline, as on the live site.
   The stroke does not scale, so it stays a hairline however wide the page gets. */
.biglogo{margin-top:52px;overflow:hidden;user-select:none}
/* The live site crops the wordmark just above its baseline. A percentage margin resolves
   against the column width, so the crop scales with the type instead of fixing at one size.
   On phones the mark is small enough that cropping it would read as a squashed strip, so it
   is shown whole there. */
.biglogo svg{display:block;width:100%;height:auto;margin-bottom:-3.74%}
@media(max-width:700px){
  .biglogo{margin-top:34px}
  .biglogo svg{margin-bottom:0}
}
.biglogo text{font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;letter-spacing:-.06em;
  fill:none;stroke:rgba(0,0,0,.7);stroke-width:1px;vector-effect:non-scaling-stroke}

.legal{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding:20px 0 28px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
@media(max-width:700px){.legal{justify-content:flex-start;gap:8px}}

.f-dots{display:grid;grid-template-columns:repeat(5,1fr);height:96px;border-top:1px solid var(--line)}
@media(max-width:820px){.f-dots{grid-template-columns:repeat(2,1fr);height:64px}}
.f-dots i{border-right:1px solid var(--grid);position:relative}
.f-dots i:last-child{border-right:0}
.f-dots i:first-child::before,.f-dots i:last-child::after{content:"";position:absolute;width:7px;height:7px;background:var(--o)}
.f-dots i:first-child::before{top:14px;left:14px}
.f-dots i:last-child::after{bottom:14px;right:14px}

/* ---------- page transition: the "//" mark sweeping across ---------- */
/* Sized in vh, so its rendered width depends on the font. translateX(%) alone would be a
   percentage of the element's OWN width and barely move it, so the sweep combines % and vw:
   -100%/-100vw is always fully off-screen left, +100%/+100vw always fully off right. */
.px-wipe{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;
  display:flex;align-items:center}
.px-wipe i{font-style:normal;font-weight:700;letter-spacing:-.14em;color:var(--o);
  font-size:130vh;line-height:1;white-space:nowrap;will-change:transform}
@media(prefers-reduced-motion:reduce){.px-wipe{display:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* EN | ES switch, as the old English pages carried */
.lang{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding-right:14px;
  font-size:11px;font-weight:500;letter-spacing:.14em}
.lang b{font-weight:600;color:#000}
.lang b::after{content:"";display:inline-block;width:1px;height:10px;background:var(--line);
  margin-left:7px;vertical-align:-1px}
.lang a{color:var(--dim);transition:color .15s}
.lang a:hover{color:#000}
.nlinks{margin-left:auto}
.lang + .btn{margin-left:0}
@media(max-width:1080px){.lang{display:none}}