/* ============ TOKENS ============ */
:root{
  --red:#E81A23;
  --red-dk:#C8151D;
  --teal:#008668;
  --teal-dk:#00705A;
  --pink:#E1294D;
  --pink-dk:#DE1B41;
  --graphite:#4A4A4A;
  --ink:#2E2E2E;
  --ink-dp:#232323;
  --lime:#8CE04B;
  --blue:#1E9CF0;
  --white:#FFFFFF;
  --disc:#1A1A1A;
  --paper:#FFFFFF;
  --body-txt:#3D3D3D;
  --rule:rgba(255,255,255,.28);

  --orange:#F5871F;
  --crimson:#C81432;
  --forest:#2E6B1E;
  --royal:#1C7FD6;
  --violet:#5B1E8C;
  --magenta:#F5127A;

  --inset:1440px;
  /* clear space held at each edge for the fixed .contact-tab (52px + air) */
  --tab-w:56px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--body-txt);
  font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,ul{margin:0;padding:0;}
ul{list-style:none;}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;}

.wrap{width:100%;max-width:min(var(--inset),calc(100% - var(--tab-w)*2));margin:0 auto;padding:0 24px;}
.d{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;}
.o{font-family:"Oswald","Arial Narrow",Arial,sans-serif;text-transform:uppercase;}

/* ============ NAV ============ */
.nav{background:#232323;}
.nav-in{max-width:min(var(--inset),calc(100% - var(--tab-w)*2));margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;}
.nav-logo{display:flex;align-items:center;padding:0 20px 0 24px;}
.nav-logo img{height:22px;width:auto;display:block;}
.nav a{
  font-family:"Oswald","Arial Narrow",Arial,sans-serif;
  font-weight:500;font-size:15px;letter-spacing:.045em;text-transform:uppercase;
  color:#fff;padding:13px 24px;line-height:1.15;
  border-right:1px solid rgba(0,0,0,.22);
  border-left:1px solid rgba(255,255,255,.16);
  transition:background .12s linear;
}
.nav a:first-child{border-left:0;}
.nav a:hover{background:#000000;}

/* ============ HERO ============ */
.hero{background:var(--graphite);position:relative;}
.hero-in{
  max-width:min(var(--inset),calc(100% - var(--tab-w)*2));margin:0 auto;padding:34px 24px 30px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;min-height:208px;
}
.hero-id .eyebrow{
  font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.34em;color:var(--lime);
  text-transform:uppercase;font-weight:600;margin-bottom:8px;
}
.hero-id .name{font-size:clamp(2.4rem,5vw,3.75rem);line-height:.9;color:#fff;}
.hero-id .role{
  font-family:"Oswald",sans-serif;font-weight:500;font-size:17px;letter-spacing:.14em;
  color:#fff;text-transform:uppercase;margin-top:10px;
}
.hero-id .stack{
  font-size:15px;color:rgba(255,255,255,.72);margin-top:9px;letter-spacing:.05em;text-transform:uppercase;
}
.hero-stmt{text-align:right;}
.hero-stmt .line{font-size:clamp(1.9rem,4.5vw,2.75rem);line-height:.93;color:#fff;}
.hero-stmt .line em{font-style:normal;color:var(--lime);}
.hero-stmt .sub{
  font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-top:12px;font-weight:400;
}
.contact-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  border:3px solid #fff;color:#fff;background:transparent;
  font-family:"Oswald",sans-serif;font-size:20px;letter-spacing:.1em;
  padding:20px 8px;writing-mode:vertical-rl;text-orientation:mixed;
  z-index:999;mix-blend-mode:difference;cursor:pointer;
  transition:transform 0.15s ease;
}

/* meta strip */
.metastrip{background:var(--ink-dp);border-top:1px solid rgba(255,255,255,.1);}
.metastrip .wrap{display:flex;flex-wrap:wrap;gap:34px;padding-top:11px;padding-bottom:11px;}
.metastrip span{
  font-family:"Oswald",sans-serif;font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.86);display:flex;align-items:center;gap:9px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none;}
.dot.pulse{animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dot.pulse{animation:none}}

/* ============ BAND (3-col service blocks) ============ */
.band{padding:44px 0 48px;}
.band.red{background:var(--red);}
.band.teal{background:var(--teal);}
.band.pink{background:var(--pink);}

.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.band-head h2{font-size:clamp(2rem,5vw,3.25rem);line-height:.88;color:#fff;}
.band-head .kick{
  font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;max-width:420px;line-height:1.6;font-weight:400;
}
.hr{height:2px;background:rgba(255,255,255,.28);margin-bottom:26px;}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}

.blk{display:flex;flex-direction:column;}
.blk .top{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;}
.disc{
  width:62px;height:62px;border-radius:50%;background:var(--disc);
  display:flex;align-items:center;justify-content:center;flex:none;color:#fff;
}
.disc svg{width:32px;height:32px;}
.disc.lime{color:var(--lime);}
.disc.blu{color:var(--blue);}
.blk h3{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:.84;color:#fff;}
.blk .lede{
  font-size:16px;line-height:1.45;color:#fff;margin-bottom:12px;
}
.caps .caps-lede{
  max-width:62ch;margin:18px auto 0;text-align:center;
  font-size:clamp(15px,1.5vw,17px);line-height:1.5;color:#5C5C5C;
}
.blk ul{margin-bottom:16px;}
.blk li{
  font-family:"Oswald",sans-serif;font-weight:400;font-size:14.5px;letter-spacing:.045em;
  text-transform:uppercase;color:#fff;line-height:1.32;padding:5px 0;
  display:flex;gap:8px;align-items:flex-start;
}
.blk li::before{content:"\2714";flex:none;font-size:13px;line-height:1.38;}
.blk .spacer{flex:1;}

.btn{
  display:block;text-align:center;font-family:"Oswald",sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:#111;
  padding:6px 10px;max-width:192px;border:0;cursor:pointer;
  transition:transform .1s linear,filter .12s linear;
}

.btn.lime{background:var(--lime);}
.btn.blu{background:var(--blue);color:#0A2233;}

/* mirror the reference's per-column alignment quirk:
   icon disc stays left in every column; only the text block shifts */
.col-c{text-align:center;}
.col-c li{justify-content:center;}
.col-c .btn{margin:0 auto;}
.col-r{text-align:right;}
.col-r li{justify-content:flex-end;}
.col-r .btn{margin-left:auto;}
.col-c .top{align-items:center;justify-content:center;}
.col-r .top{align-items:center;justify-content:flex-end;}

/* status chips */
.chip{
  display:inline-block;font-family:"Oswald",sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;margin-bottom:10px;
  background:#111;color:var(--lime);
}
.chip.res{color:#FFD447;}
.chip.live{color:#fff;background:#111;}

/* ============ LAB grid (6 dense blocks) ============ */
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(0,0,0,.16);}
.lab-cell{background:var(--pink);padding:24px 22px 22px;display:flex;flex-direction:column;}
.lab-cell .top{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.lab-cell h3{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:.9;color:#fff;}
.lab-cell .disc{width:52px;height:52px;}
.lab-cell .disc svg{width:26px;height:26px;}
.lab-cell li{font-size:13.5px;padding:4px 0;color:#fff;}
.lab-cell .btn{max-width:150px;font-size:13.5px;padding:7px 8px;}

/* ============ DARK SYSTEMS BAND ============ */
.systems{background:var(--ink);position:relative;overflow:hidden;padding:52px 0 44px;}
.mapdots{position:absolute;inset:0;pointer-events:none;}
.mapdots .base{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.09) 1.6px,transparent 1.7px);
  background-size:13px 13px;
}
.mapdots .land{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.42) 1.9px,transparent 2px);
  background-size:13px 13px;
  -webkit-mask-image:
    radial-gradient(ellipse 13% 24% at 21% 34%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 21% at 30% 73%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 13% at 49% 27%, #000 55%, transparent 100%),
    radial-gradient(ellipse 9% 24% at 53% 60%, #000 55%, transparent 100%),
    radial-gradient(ellipse 16% 20% at 69% 31%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 11% at 72% 53%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 11% at 83% 74%, #000 55%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 13% 24% at 21% 34%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 21% at 30% 73%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 13% at 49% 27%, #000 55%, transparent 100%),
    radial-gradient(ellipse 9% 24% at 53% 60%, #000 55%, transparent 100%),
    radial-gradient(ellipse 16% 20% at 69% 31%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 11% at 72% 53%, #000 55%, transparent 100%),
    radial-gradient(ellipse 7% 11% at 83% 74%, #000 55%, transparent 100%);
}
.systems .wrap{position:relative;z-index:2;}
.sysrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.sysrow.bottom{margin-top:14px;}
.sysicon{display:flex;flex-direction:column;align-items:center;gap:9px;color:#fff;}
.sysicon svg{width:62px;height:62px;stroke-width:1.6;}
.sysicon span{
  font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.78);text-align:center;
}
.sysmid{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  margin:22px 0 20px;
  /* keep the headlines clear of the chevrons parked in the side gutters */
  padding:0 48px;
}
.sysmid h2{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:.9;color:#fff;}
.sysmid h2.r{text-align:right;}
.sysmid .core{width:96px;height:96px;color:#fff;}
.sys-headline{text-align:center;font-size:clamp(2rem,5vw,3.5rem);line-height:.9;color:#fff;margin-top:38px;}

/* ---- slide deck: panels stack in one grid cell, so the deck is as tall as
   the tallest panel and nothing needs absolute positioning ---- */
.sysdeck{display:grid;}
.sysslide{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transform:translateX(var(--in,28px));
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}
.sysslide.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease,transform .45s ease;
}

.chev{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  color:rgba(255,255,255,.34);width:34px;height:64px;
  padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s linear;
}
.chev svg{width:24px;height:40px;display:block;}
.chev:hover{color:#fff;}
.chev.l{left:14px;}
.chev.r{right:calc(14px + var(--tab-w));}

.pager{display:flex;gap:0;justify-content:center;margin-top:30px;position:relative;z-index:2;}
.pager button{
  width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pager button::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
  transition:background .2s linear,border-color .2s linear,transform .2s ease;
}
.pager button:hover::before{border-color:#fff;}
.pager button.on::before{background:#fff;border-color:#fff;transform:scale(1.15);}

@media (prefers-reduced-motion:reduce){
  .sysslide{transition:opacity .01ms linear,visibility 0s linear .01ms;transform:none;}
  .sysslide.is-on{transition:opacity .01ms linear;transform:none;}
}

/* ============ CAPABILITIES (white) ============ */
.caps{background:#fff;padding:56px 0 60px;}
.caps h2{font-size:clamp(2rem,4.4vw,3.25rem);text-align:center;color:#1A1A1A;line-height:.95;}
.caps .kick{
  text-align:center;font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:#767676;margin-top:8px;margin-bottom:40px;
}
.capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px;}
/* flex-start, not center: centering makes each icon sit at a different offset
   inside its cell depending on how wide that card's text happens to be */
.cap{display:flex;gap:20px;align-items:flex-start;justify-content:flex-start;}
.cap .circ{
  width:114px;height:114px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.cap .circ svg{width:56px;height:56px;stroke-width:1.7;}
.cap h3{
  font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;
  font-size:15.5px;color:#2E2E2E;line-height:1.62;
}
.cap li{font-size:15.5px;line-height:1.62;color:#5C5C5C;}
.c-orange{background:var(--orange);} .c-crimson{background:var(--crimson);}
.c-forest{background:var(--forest);} .c-royal{background:var(--royal);}
.c-violet{background:var(--violet);} .c-magenta{background:var(--magenta);}

/* ============ IMPACT ============ */
.impact{background:var(--lime);padding:40px 0 34px;}
.impact .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;}
.impact .n{font-size:clamp(3.25rem,7vw,5.75rem);line-height:.82;color:#12240A;font-variant-numeric:tabular-nums;}
.impact .l{
  font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;letter-spacing:.24em;
  text-transform:uppercase;color:#1E3A10;margin-top:8px;
}
.impact .s{font-size:14.5px;color:#2C4A1C;margin-top:4px;}
.impact .note{
  text-align:center;margin-top:22px;font-family:"Oswald",sans-serif;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#33581F;
}

/* ============ EVOLUTION ============ */
.evo{background:var(--ink-dp);padding:50px 0 54px;}
.evo h2{font-size:clamp(2rem,4.4vw,3.25rem);color:#fff;line-height:.9;}
.evo .kick{
  font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin:8px 0 30px;
}
.chain{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:rgba(255,255,255,.12);}
.node{background:var(--ink);padding:18px 16px 16px;position:relative;border-top:4px solid var(--stripe,#666);}
.node .idx{
  font-family:"Oswald",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;
  color:rgba(255,255,255,.7);margin-bottom:6px;
}
.node h4{font-size:clamp(1.3rem,2vw,1.5rem);line-height:.94;color:#fff;margin-bottom:6px;}
.node p{font-size:13.5px;line-height:1.42;color:rgba(255,255,255,.62);}
.node .arrow{
  position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:4;
  color:rgba(255,255,255,.7);width:16px;height:16px;
}
.node:nth-child(6n) .arrow{display:none;}
.node:last-child .arrow{display:none;}

/* the row-end arrow must follow the column count at each breakpoint */
@media (max-width:1200px){
  .node:nth-child(6n) .arrow{display:block;}
  .node:nth-child(4n) .arrow{display:none;}
}
@media (max-width:1024px){
  .node:nth-child(4n) .arrow{display:block;}
  .node:nth-child(3n) .arrow{display:none;}
}
@media (max-width:767px){
  .node:nth-child(3n) .arrow{display:block;}
  .node:nth-child(2n) .arrow{display:none;}
}
@media (max-width:600px){
  /* :nth-child(n) matches the specificity of the rules above so it can win */
  .node:nth-child(n) .arrow{display:none;}   /* single column: nothing to point at */
}

/* ============ ADVISORY ============ */
.adv{background:#fff;padding:54px 0 58px;}
.adv h2{font-size:clamp(2rem,4.4vw,3.25rem);color:#1A1A1A;line-height:.92;margin-bottom:6px;}
.adv .kick{
  font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:#767676;margin-bottom:30px;
}
.advgrid{display:grid;grid-template-columns:repeat(3,1fr);}
.advcol{padding:0 30px;border-left:2px solid #E4E4E4;}
.advcol:first-child{padding-left:0;border-left:0;}
.advcol:last-child{padding-right:0;}
.advcol .disc{background:var(--red);width:56px;height:56px;margin-bottom:14px;}
.advcol:nth-child(2) .disc{background:var(--teal);}
.advcol:nth-child(3) .disc{background:var(--pink);}
.advcol .disc svg{width:28px;height:28px;}
.advcol h3{font-size:clamp(1.6rem,2.8vw,2rem);color:#1A1A1A;line-height:.9;margin-bottom:10px;}
.advcol li{
  font-family:"Oswald",sans-serif;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#4A4A4A;padding:6px 0;border-bottom:1px solid #EDEDED;
}
.advcol .meta{font-size:14.5px;color:#767676;margin-top:12px;line-height:1.5;}

/* ============ FINAL CTA ============ */
.final{background:var(--teal);padding:56px 0 60px;text-align:center;}
.final h2{font-size:clamp(2.25rem,6vw,4.125rem);line-height:.88;color:#fff;}
.final p{
  font-size:18px;line-height:1.5;color:#fff;max-width:640px;
  margin:16px auto 26px;
}
.final .btn{margin:0 auto;max-width:290px;font-size:17px;padding:13px 14px;}

/* ============ FOOTER ============ */
.foot{background:var(--graphite);padding:42px 0 20px;color:#fff;}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.foot .foot-logo{height:28px;width:auto;display:block;margin-bottom:6px;}
.foot .role{
  font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);margin-top:8px;
}
.foot h4{
  font-family:"Oswald",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin-bottom:12px;
}
.foot li{padding:4px 0;}
.foot li a{font-size:15px;color:rgba(255,255,255,.76);}
.foot li a:hover{color:var(--lime);}
.footbar{
  margin-top:34px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footbar span{
  font-family:"Oswald",sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);display:flex;align-items:center;gap:9px;
}
.footbar a { color:inherit; text-decoration:none; transition:color 0.2s; }
.footbar a:hover { color:var(--lime); }

/* ============ LANG TOGGLE ============ */
.lang-toggle{
  margin-left:auto;
  font-family:"Oswald","Arial Narrow",Arial,sans-serif;
  font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.4);
  padding:6px 14px;cursor:pointer;transition:background .12s linear,border-color .12s linear;
  display:flex;align-items:center;gap:6px;
}
.lang-toggle:hover{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.7);}
.lang-toggle svg{width:16px;height:16px;stroke-width:2;}

/* ============ MOTION ============ */
/* Hidden state applies only under html.js, so a JS failure or a
   no-JS client still renders every section at full opacity. */
.js .reveal{
  opacity:0;transform:translateY(2rem);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--stagger,0) * 60ms),
             transform .7s cubic-bezier(.16,1,.3,1) calc(var(--stagger,0) * 60ms);
}
.js .reveal.is-visible{opacity:1;transform:none;}

/* hover feedback on the card surfaces */
.lab-cell,.cap{transition:transform .18s ease,box-shadow .18s ease;}



.lab-cell .disc,.cap .circ{transition:transform .18s ease;}


@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  .lab-cell,.cap,.lab-cell .disc,.cap .circ{transition:none;}
  .lab-cell:hover,.cap:hover,
  .lab-cell:hover .disc,.cap:hover .circ{transform:none;}
}

/* ============ RESPONSIVE & BREAKPOINTS ============ */
/* ============ RESPONSIVE ============ */
/* Type is fluid via clamp(), so it scales continuously instead of snapping
   at 480 and 1440. The media blocks below carry layout only. */

@media (min-width:1440px){
  .hero-in { padding: 54px 44px 50px; gap: 40px; }
  .cols3   { gap: 64px; }
  .wrap    { padding: 0 44px; }
}

/* ---- iPad landscape / small desktop ---- */
@media (max-width:1200px){
  .chain { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width:1099px){
  .hero-in { grid-template-columns: 1fr; text-align: left; gap: 24px; }
  .hero-stmt { text-align: left; }
  .lab-grid, .capgrid { grid-template-columns: repeat(2, 1fr); }
  .impact .grid { grid-template-columns: repeat(3, 1fr); }
  .sysrow { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .chain  { grid-template-columns: repeat(3, 1fr); }
  .advcol { padding: 0 20px; }
}

/* ---- iPad portrait: its own tier, no longer inheriting desktop ---- */
@media (max-width:1099px){
  .cols3, .advgrid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .footgrid { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
}

@media (max-width:767px){
  /* below tablet a 3-up is genuinely too tight — go to 1, never a 2+1 orphan */
  .cols3, .advgrid { grid-template-columns: 1fr; gap: 28px; }
  .sysrow { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .chain  { grid-template-columns: repeat(2, 1fr); }
  .impact .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width:767px){
  .sysmid { grid-template-columns: 1fr; text-align: center; padding: 0 48px; }
  .sysmid h2.r { text-align: center; }
  .sysmid .core { margin: 0 auto; }
  .advcol { border-left: 0; padding: 0 0 32px; }
  .col-r, .col-c { text-align: left; }
  .col-r .top { flex-direction: row; }
  .col-c .top, .col-r .top, .col-r li, .col-c li { justify-content: flex-start; }
  .col-r li { flex-direction: row; }
  .col-c .btn, .col-r .btn { margin: 0; }
  .lab-grid, .capgrid { grid-template-columns: 1fr; }
}

@media (max-width:600px){
  .impact .grid { grid-template-columns: 1fr; gap: 26px; }
  .chain { grid-template-columns: 1fr; }
  .sysrow { grid-template-columns: repeat(2, 1fr); }
  .footgrid { grid-template-columns: 1fr; gap: 26px; }
  .footbar { flex-direction: column; align-items: center; text-align: center; }
  .sysmid { padding: 0 44px; }
  .wrap { padding: 0 18px; }
}

/* ============ LEGAL PAGES ============ */
.legal-content {
  padding: 10rem 24px 6rem;
  max-width: 800px;
  margin: 0 auto;
}
.legal-content h1 {
  font-family: "Oswald", sans-serif;
  font-size: 3rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3rem;
  text-transform: uppercase;
}
.legal-content h2 {
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--teal-dk);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.legal-content p, .legal-content li {
  font-size: 1.1rem;
  color: var(--graphite);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.legal-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.legal-content strong {
  color: var(--ink);
}
.legal-content a {
  color: var(--royal);
  text-decoration: underline;
}

/* ============ DOBLE CHECK (page-specific) ============ */
.dc-h1{font-size:clamp(2.1rem,5.5vw,3.5rem);line-height:.92;color:#fff;margin:6px 0 14px;}
.dc-sub{font-size:17px;line-height:1.5;color:rgba(255,255,255,.82);max-width:46ch;margin-bottom:22px;}
.dc-cta{max-width:none;display:inline-block;font-size:16px;padding:12px 22px;}
.dc-micro{
  font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:10px;
}
.dc-box{display:flex;justify-content:flex-end;}
.dc-box img{max-width:100%;height:auto;display:block;}
.hero .dc-box picture{display:block;}

@media (max-width:1024px){
  .dc-box{justify-content:flex-start;}
}
@media (max-width:480px){
  .dc-h1{font-size:34px;}
  .dc-sub{font-size:15.5px;}
  .dc-cta{font-size:14px;padding:11px 16px;}
}

/* ============ AGENCIAS (page-specific) ============ */
.ag-h1{font-size:clamp(2.1rem,5.5vw,3.25rem);line-height:.94;color:#fff;margin:6px 0 14px;}
.ag-sub{font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.82);max-width:52ch;margin-bottom:22px;}
.ag-actions{display:flex;gap:12px;flex-wrap:wrap;}
.ag-actions .btn{max-width:none;padding:11px 20px;}
.ag-note{
  font-size:16px;line-height:1.5;color:#fff;
  max-width:78ch;margin-top:26px;border-top:2px solid rgba(255,255,255,.28);padding-top:20px;
}
.ag-stat{font-size:clamp(1.9rem,3.6vw,2.75rem)!important;}

/* terminal */
.ag-terminal{background:#141414;border:1px solid rgba(255,255,255,.14);font-family:"Roboto Condensed",monospace;}
.ag-terminal__bar{
  display:flex;align-items:center;gap:7px;padding:9px 12px;background:#1E1E1E;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ag-terminal__bar i{width:10px;height:10px;border-radius:50%;background:#4A4A4A;flex:none;}
.ag-terminal__bar i:first-child{background:#ED1B24;}
.ag-terminal__bar i:nth-child(2){background:#FFD447;}
.ag-terminal__bar i:nth-child(3){background:#8CE04B;}
.ag-terminal__bar span{
  margin-left:8px;font-family:"Oswald",sans-serif;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.ag-terminal__body{padding:16px 14px;}
.ag-terminal__line{font-size:14px;line-height:1.85;color:rgba(255,255,255,.72);letter-spacing:.02em;}
.ag-terminal__line.cmd{color:#fff;}
.ag-terminal__line.ok{color:var(--lime);}
.ag-terminal__line.res{color:var(--blue);}

/* tiers */
.ag-tier .chip{align-self:flex-start;}
.ag-tier--featured{outline:3px solid var(--lime);outline-offset:10px;}
.ag-price{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;}
.ag-price__n{font-family:"Anton",sans-serif;font-size:clamp(1.55rem,2.6vw,1.9rem);color:#fff;letter-spacing:.01em;}
.ag-price__note{
  font-family:"Oswald",sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.ag-micro{font-size:13px;line-height:1.45;color:#fff;margin-top:10px;}
.col-c .ag-price,.col-r .ag-price{align-items:center;}
.col-r .ag-price{align-items:flex-end;}

/* comparison table */
.ag-table-wrap{overflow-x:auto;margin-top:34px;}
.ag-table{width:100%;border-collapse:collapse;min-width:680px;}
.ag-table th,.ag-table td{padding:13px 16px;text-align:left;border-bottom:1px solid #E4E4E4;}
.ag-table thead th{
  font-family:"Oswald",sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#4A4A4A;font-weight:600;vertical-align:bottom;
}
.ag-table tbody th{
  font-family:"Oswald",sans-serif;font-weight:500;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:#2E2E2E;
}
.ag-table td{font-size:15.5px;color:#5C5C5C;}
.ag-table .is-us{background:rgba(0,177,137,.09);color:#1A1A1A;font-weight:700;}
.ag-table thead .is-us{color:var(--teal-dk);}
.ag-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;}
.ag-dot.red{background:var(--red);} .ag-dot.amber{background:#F5871F;} .ag-dot.teal{background:var(--teal);}
.ag-table tfoot th{vertical-align:top;}
.ag-table tfoot small{display:block;font-family:"Roboto Condensed",sans-serif;font-size:12.5px;
  letter-spacing:0;text-transform:none;color:#767676;font-weight:400;margin-top:4px;}
.ag-table tfoot td{vertical-align:middle;}
.ag-bars{display:inline-flex;gap:3px;align-items:flex-end;height:26px;margin-right:10px;vertical-align:middle;}
.ag-bars i{width:6px;height:100%;display:block;border-radius:1px;}
.ag-bars.red i{background:var(--red);} .ag-bars.amber i{background:#F5871F;} .ag-bars.teal i{background:var(--teal);}
.ag-table tfoot b{font-family:"Anton",sans-serif;font-size:19px;color:#1A1A1A;}

/* FAQ accordion */
.faq{border-top:2px solid rgba(255,255,255,.28);}
.faq-item{border-bottom:1px solid rgba(255,255,255,.28);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;text-align:left;padding:17px 0;color:#fff;
  font-family:"Oswald",sans-serif;font-weight:500;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.3;
}
.faq-q i{
  flex:none;width:16px;height:16px;position:relative;transition:transform .22s ease;
}
.faq-q i::before,.faq-q i::after{
  content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%);
}
.faq-q i::before{width:16px;height:2px;}
.faq-q i::after{width:2px;height:16px;transition:opacity .22s ease;}
.faq-q[aria-expanded="true"] i{transform:rotate(180deg);}
.faq-q[aria-expanded="true"] i::after{opacity:0;}
/* collapsed only when JS is running — without it every answer stays readable */
.js .faq-a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.faq-a p{font-size:16px;line-height:1.55;color:#fff;padding:0 0 18px;max-width:82ch;}

@media (prefers-reduced-motion:reduce){
  .faq-q i,.faq-q i::after,.faq-a{transition:none;}
}

@media (max-width:1024px){
  .ag-fy .blk{text-align:left;}
}
@media (max-width:480px){
  .ag-h1{font-size:33px;}
  .ag-sub{font-size:15.5px;}
  .ag-stat{font-size:32px!important;}
  .ag-actions .btn{width:100%;max-width:none;}
  .ag-price__n{font-size:25px;}
}

/* ============ POINTER-AWARE ============ */
/* Movement-on-hover only where a real pointer exists. On touch these leave the
   element stuck in its hovered state after a tap. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .lab-cell:hover,.cap:hover{transform:translateY(-4px);}
  .lab-cell:hover{position:relative;z-index:2;box-shadow:0 12px 28px rgba(0,0,0,.28);}
  .cap:hover{box-shadow:0 12px 28px rgba(0,0,0,.13);}
  .lab-cell:hover .disc,.cap:hover .circ{transform:scale(1.06);}
  .contact-tab:hover{transform:translateY(-50%) scale(1.05);}
}

/* The tab is always present. Below 1100px it moves to the LEFT edge and shrinks;
   the symmetric --tab-w gutter is dropped there in favour of an explicit left inset. */
@media (max-width:1099px){
  :root{ --tab-w: 0px; }
}

/* touch ergonomics */
a,button,.btn,.faq-q,.nav a,.pager button,.chev{
  -webkit-tap-highlight-color:rgba(140,224,75,.25);
  touch-action:manipulation;
}

/* ============ NAV: DESKTOP BAR / MOBILE DRAWER ============ */
.nav-links{display:flex;flex-wrap:wrap;align-items:center;flex:1;}
.nav-links .lang-toggle{margin-left:auto;}

.nav-burger{
  display:none;margin-left:auto;width:48px;height:48px;padding:0;border:0;
  background:none;cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;
}
.nav-burger span{
  display:block;width:22px;height:2px;background:#fff;
  transition:transform .22s ease,opacity .18s ease;
}
.nav.is-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.is-open .nav-burger span:nth-child(2){opacity:0;}
.nav.is-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1099px){
  .nav-in{flex-wrap:nowrap;min-height:56px;padding:0 8px 0 4px;}

  /* mobile / iPad header is: [burger] ............ [CONTACT] */
  .nav-logo{display:none;}
  .nav-burger{display:flex;order:1;margin-left:auto;}

  /* the wordmark moves into the drawer so the home link is not lost */
  .nav-links .drawer-logo{
    display:flex;padding:0 24px 22px;border-bottom:1px solid rgba(255,255,255,.1);
    margin-bottom:6px;
  }
  .nav-links .drawer-logo img{height:24px;width:auto;display:block;}

  .nav-links{
    position:fixed;top:0;right:0;z-index:1000;
    width:min(330px,86vw);height:100vh;height:100dvh;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    background:var(--ink-dp);padding:76px 0 24px;
    transform:translateX(100%);transition:transform .28s ease;
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-14px 0 40px rgba(0,0,0,.4);
  }
  .nav.is-open .nav-links{transform:none;}

  .nav-links a{
    min-height:56px;display:flex;align-items:center;
    padding:0 24px;font-size:16px;border:0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav-links .lang-toggle{
    margin:20px 24px 0;min-height:48px;justify-content:center;font-size:14px;
  }

  /* backdrop */
  .nav::after{
    content:"";position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  .nav.is-open::after{opacity:1;pointer-events:auto;}
}

body.nav-open{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .nav-links,.nav::after,.nav-burger span{transition:none;}
}

/* ---- 48px minimum touch targets ---- */
@media (max-width:1099px){
  .pager button{width:48px;height:48px;}
  .chev{width:48px;height:64px;}
  .btn{padding:13px 18px;}
  .lab-cell .btn{padding:13px 12px;max-width:none;font-size:14px;}
  .faq-q{padding:19px 0;}
}

/* ---- comparison table: fits more, and shows that it scrolls ---- */
.ag-table{min-width:600px;}
.ag-table-wrap{position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.ag-table-wrap::after{
  content:"";position:absolute;top:0;right:0;width:34px;height:100%;
  pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));
}
@media (min-width:1100px){ .ag-table-wrap::after{display:none;} }

/* ============ CONTACT TAB — MOBILE / iPAD (right edge, fixed) ============ */
/* Same side as desktop; only the scale changes. */
@media (max-width:1099px){
  .contact-tab{
    border-width:2px;
    font-size:14px;letter-spacing:.09em;
    padding:18px 12px;   /* >=44px wide: it is a touch target */
  }
  .contact-tab:hover{transform:translateY(-50%);}

  /* reserve the rail so the tab never sits on top of content */
  body:has(.contact-tab) .wrap,
  body:has(.contact-tab) .hero-in{padding-right:56px;}
  .chev.r{right:56px;}
  .sysmid{padding-left:8px;padding-right:8px;}
}

@media (max-width:600px){
  .contact-tab{font-size:12.5px;padding:15px 12px;}
  body:has(.contact-tab) .wrap,
  body:has(.contact-tab) .hero-in{padding-right:53px;}
  .chev.r{right:53px;}
}

/* ---- comparison table: stacked cards on phones ----
   A 4-column table needs ~600px; a 375px phone gives ~304px. Below 700px each
   row becomes a card with the column name shown inline beside its value. */
.ag-lbl{display:none;}

@media (max-width:700px){
  .ag-table-wrap{overflow:visible;}
  .ag-table-wrap::after{display:none;}
  .ag-table{min-width:0;width:100%;display:block;}
  .ag-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .ag-table tbody,.ag-table tfoot,.ag-table tr,.ag-table th,.ag-table td{display:block;width:auto;}

  .ag-table tbody tr,.ag-table tfoot tr{
    border:1px solid #E4E4E4;margin-bottom:14px;padding:0;background:#fff;
  }
  .ag-table tbody th,.ag-table tfoot th{
    background:#F4F4F4;border-bottom:1px solid #E4E4E4;padding:11px 14px;
    font-size:13px;letter-spacing:.12em;
  }
  .ag-table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:10px 14px;border-bottom:1px solid #EFEFEF;text-align:right;
  }
  .ag-table tr td:last-child{border-bottom:0;}
  .ag-lbl{
    display:block;flex:none;text-align:left;
    font-family:"Oswald",sans-serif;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:#767676;
  }
  .ag-table td.is-us{background:rgba(0,134,104,.09);}
  .ag-table td.is-us .ag-lbl{color:var(--teal-dk);}
  .ag-table tfoot small{text-transform:none;letter-spacing:0;}
  .ag-bars{height:20px;}
}

/* ---- .chain--steps: a short 4-node chain (AI/bs.html roadmap).
   The shared .chain is tuned for index's 12 nodes at 6 columns; four nodes there
   leave two empty cells showing the strip background. Doubled class for specificity
   so these beat the .chain breakpoint rules above regardless of source order. ---- */
.chain.chain--steps{grid-template-columns:repeat(4,1fr);}
.chain.chain--steps .node:nth-child(n) .arrow{display:block;}
.chain.chain--steps .node:nth-child(4n) .arrow{display:none;}
.chain.chain--steps .node:last-child .arrow{display:none;}

@media (max-width:1024px){
  .chain.chain--steps{grid-template-columns:repeat(2,1fr);}
  .chain.chain--steps .node:nth-child(n) .arrow{display:block;}
  .chain.chain--steps .node:nth-child(2n) .arrow{display:none;}
  .chain.chain--steps .node:last-child .arrow{display:none;}
}
@media (max-width:600px){
  .chain.chain--steps{grid-template-columns:1fr;}
  .chain.chain--steps .node:nth-child(n) .arrow{display:none;}
}