/* ============================================================
   MEIBOT TECHNOLOGIES — Engineering Better Care.

   Built on the official brand kit:
     crimson #CE2027 · espresso #221C1B · ivory #F7F1E9 · clay #E4D3C6
     Gabarito (display) · Figtree (body) · IBM Plex Mono (labels)
     Square-edged by default. Radius only on inputs and image cards.
     Two background colours per page, maximum.
   ============================================================ */

@font-face{font-family:"Gabarito";src:url("../fonts/gabarito.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument";src:url("../fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* Brand */
  --crimson:#CE2027; --crimson-dark:#A9161C; --crimson-bright:#F2565C;
  --espresso:#221C1B; --espresso-soft:#4A403D; --stone:#8A7F79;
  --ivory:#F7F1E9; --clay:#E4D3C6; --rose:#FAF3EC; --line-brand:#E8E0D4; --white:#FFFFFF;

  /* Semantic — light by default, flipped wholesale by .inv */
  --ink:#F7F1E9;        /* page surface   */
  --ink-2:#FAF3EC;      /* raised surface */
  --ink-3:#FFFFFF;      /* cards          */
  --ink-4:#E4D3C6;      /* deepest tint   */
  --fg:#221C1B; --fg-2:#4A403D; --fg-3:#8A7F79;
  --acc:#CE2027; --acc-2:#A9161C; --acc-deep:#A9161C; --acc-on:#FFFFFF;
  --acc-glow:rgba(206,32,39,.16); --acc-soft:rgba(206,32,39,.06); --acc-rule:rgba(206,32,39,.28);
  --rule:#E8E0D4; --rule-2:#D8CCBC;
  --glass:rgba(34,28,27,.03); --glass-2:rgba(34,28,27,.06);
  --wa:#128C4B;

  --sans:  "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp:  "Gabarito", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mono:  "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument", ui-serif, Georgia, serif;

  --pad: clamp(20px, 5vw, 72px);
  --gut: clamp(64px, 9vw, 128px);
  --max: 1240px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-io: cubic-bezier(.7,0,.3,1);

  --sh-1:0 1px 2px rgba(34,28,27,.06), 0 8px 24px rgba(34,28,27,.06);
  --sh-2:0 2px 4px rgba(34,28,27,.08), 0 18px 48px rgba(34,28,27,.10);
}

/* Espresso sections. Same components, inverted surface. */
.inv{
  --ink:#221C1B; --ink-2:#2A2322; --ink-3:#332B29; --ink-4:#3D3331;
  --fg:#F7F1E9; --fg-2:#CFC4BB; --fg-3:#A79C93;
  --acc:#F2565C; --acc-2:#FF7C81; --acc-on:#221C1B;
  --acc-glow:rgba(242,86,92,.22); --acc-soft:rgba(242,86,92,.10); --acc-rule:rgba(242,86,92,.34);
  --rule:rgba(247,241,233,.14); --rule-2:rgba(247,241,233,.26);
  --glass:rgba(247,241,233,.05); --glass-2:rgba(247,241,233,.09);
  background:var(--ink); color:var(--fg);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
html.js body{opacity:0}
html.js.ready body{opacity:1;transition:opacity .5s ease}

body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(.9375rem,.32vw + .86rem,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
::selection{background:var(--acc);color:#0B0818}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}

/* ── The 3D stage sits behind everything ─────────────────── */
#stage{
  position:fixed;inset:0;width:100vw;height:100svh;z-index:3;
  pointer-events:none;opacity:0;
}
/* Content rides above; opaque sections hide the stage, transparent reveal it */
.sec, .foot, .band{position:relative;z-index:2;background:var(--ink)}
.see-through{background:transparent}

/* ── Type ────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.04;color:var(--fg)}
h1{font-size:clamp(2.9rem,8.2vw,7.6rem)}
h2{font-size:clamp(2.1rem,5vw,4.6rem);line-height:1.0}
h3{font-size:clamp(1.15rem,1.5vw,1.5rem);line-height:1.2;letter-spacing:-.015em;font-weight:700}
p{margin:0}
em.i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.012em}
.acc{color:var(--acc-2)}
.glow-t{text-shadow:0 0 46px var(--acc-glow)}

.mono{font-family:var(--mono);letter-spacing:.06em}
.idx{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;color:var(--acc-2);font-variant-numeric:tabular-nums}
.lbl{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-3);display:inline-flex;align-items:center;gap:.7rem;
}
.lbl::before{content:"";width:22px;height:1px;background:var(--acc);flex:none}
.lbl.plain::before{display:none}
.lede{font-size:clamp(1.02rem,.55vw + .92rem,1.3rem);line-height:1.56;color:var(--fg-2);max-width:58ch}
.dim{color:var(--fg-3)}

/* ── Layout ──────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--gut)}
.head{max-width:74ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.head .lbl{margin-bottom:1.5rem}
.head h2{margin-bottom:1.4rem}

[data-r]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:14px 26px;border-radius:0;border:0;
  font-size:1rem;font-weight:600;white-space:nowrap;
  transition:background .28s,color .28s,border-color .28s,transform .28s var(--ease),box-shadow .28s;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--acc);color:var(--acc-on)}
.btn--fill:hover{background:var(--acc-2)}
.btn--glass{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn--glass:hover{background:var(--fg);color:var(--ink)}
.btn--wa{background:var(--wa);color:#04240F;box-shadow:none}
.btn--wa:hover{background:#3ae078;transform:translateY(-2px)}
.btn--lg{padding:17px 32px;font-size:1.0625rem}
.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}

.tlink{display:inline-flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:600;color:var(--acc-2);transition:gap .28s var(--ease)}
.tlink:hover{gap:.9rem}
.tlink svg{width:15px;height:15px}

/* ══════════════════════════════════════════════════════════
   LOADER
   ══════════════════════════════════════════════════════════ */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
#loader::after{content:"";position:absolute;width:60vmin;height:60vmin;border-radius:50%;background:radial-gradient(circle,var(--acc-glow),transparent 68%);filter:blur(40px);opacity:.5}
.load-in{display:grid;justify-items:center;gap:1.9rem;position:relative}
.load-meter{width:min(210px,46vw);display:grid;gap:.6rem}
.load-bar{height:1px;background:var(--rule-2);position:relative;overflow:hidden}
.load-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--acc-deep),var(--acc-2));transform-origin:left;transform:scaleX(0);animation:fill 1.9s var(--ease-io) forwards}
@keyframes fill{to{transform:scaleX(1)}}
.load-read{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}

/* ── The mark ────────────────────────────────────────────── */
.mark{overflow:visible}
.mark .ring,.mark .bar{fill:none;stroke-linecap:round}
.mark .ring{stroke:var(--acc);stroke-width:5}
.mark .bar{stroke:var(--fg);stroke-width:5}
.mark .bar--lead{stroke:var(--acc)}
.mark .dot{fill:var(--acc-2)}
.mark.go .ring{stroke-dasharray:136;stroke-dashoffset:136;animation:dr 1.2s var(--ease-io) .05s forwards}
.mark.go .bar{stroke-dasharray:40;stroke-dashoffset:40;animation:dr .5s var(--ease) forwards}
.mark.go .bar--1{animation-delay:.6s}
.mark.go .bar--2{animation-delay:.73s}
.mark.go .bar--lead{animation-delay:.86s;stroke-dasharray:44;stroke-dashoffset:44}
.mark.go .dot{transform-box:fill-box;transform-origin:center;opacity:0;animation:pop .65s var(--ease) 1.28s forwards}
.mark.go .halo{transform-box:fill-box;transform-origin:center;opacity:0;stroke:var(--acc);animation:halo 2.2s var(--ease-io) 1.6s infinite}
@keyframes dr{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(0) translateY(10px)}60%{opacity:1;transform:scale(1.32)}100%{opacity:1;transform:scale(1)}}
@keyframes halo{0%{opacity:.6;transform:scale(.8)}100%{opacity:0;transform:scale(3)}}


/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .4s,border-color .4s,transform .45s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,6,11,.72);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom-color:var(--rule)}
.nav.hide{transform:translateY(-102%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;height:78px}

.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand svg{width:32px;height:32px}
.brand-t{display:grid;line-height:1}
.brand-n{font-size:1rem;font-weight:700;letter-spacing:.005em}
.brand-s{font-family:var(--mono);font-size:.4688rem;letter-spacing:.28em;color:var(--acc-2);margin-top:3px}

.nav-links{display:flex;align-items:center;gap:.15rem}
.nav-links a{padding:.55rem .9rem;font-size:.8438rem;font-weight:500;color:var(--fg-2);border-radius:100px;transition:color .22s,background .22s}
.nav-links a:hover{color:var(--fg);background:var(--glass)}
.nav-links a[aria-current="page"]{color:var(--acc-2)}

.nav-cta{display:flex;align-items:center;gap:.55rem;flex:none}
.burger{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--rule-2);border-radius:100px;background:var(--glass)}
.burger span{display:block;width:16px;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:880;background:rgba(6,6,11,.96);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:grid;align-content:center;padding:5.5rem var(--pad) 3rem;overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease)}
.mnav.open{clip-path:inset(0 0 0 0)}
.mnav > a{display:grid;grid-template-columns:46px 1fr;align-items:baseline;gap:1rem;font-size:clamp(1.6rem,7vw,2.3rem);font-weight:600;letter-spacing:-.04em;padding:.55rem 0;border-bottom:1px solid var(--rule);opacity:0;transform:translateY(18px)}
.mnav.open > a{animation:mi .55s var(--ease) forwards}
.mnav > a span{font-family:var(--mono);font-size:.625rem;color:var(--acc-2);letter-spacing:.1em;font-weight:500}
@keyframes mi{to{opacity:1;transform:none}}


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;
  padding-block:8rem 5rem;background:transparent;overflow:hidden;
}
/* Light bloom behind the 3D model, and a floor fade into the next section */
.hero::before{
  content:"";position:absolute;z-index:-1;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(1100px,130vw);height:min(1100px,130vw);border-radius:50%;
  background:radial-gradient(circle,rgba(206,32,39,.10),transparent 62%);filter:blur(30px);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,11,.86) 0%,rgba(6,6,11,.12) 22%,rgba(6,6,11,.1) 62%,rgba(6,6,11,.9) 92%,var(--ink) 100%);
}
.hero-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);position:relative}
.hero h1{max-width:13ch;margin-bottom:1.7rem}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:block;transform:translateY(105%);animation:up 1.05s var(--ease) forwards}
.hero h1 .l:nth-child(1)>span{animation-delay:.12s}
.hero h1 .l:nth-child(2)>span{animation-delay:.24s}
.hero h1 .l:nth-child(3)>span{animation-delay:.36s}
@keyframes up{to{transform:translateY(0)}}
.hero .lbl{opacity:0;animation:fu .9s var(--ease) .1s forwards;margin-bottom:1.9rem}
.hero-lede{max-width:48ch;opacity:0;animation:fu .9s var(--ease) .62s forwards}
.hero-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem;opacity:0;animation:fu .9s var(--ease) .76s forwards}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:.7rem;z-index:3;opacity:0;animation:fu .9s var(--ease) 1.4s forwards}
.cue i{width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--acc));position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--acc-2);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.cue span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3)}

/* ── Credibility band ────────────────────────────────────── */
.band{border-block:1px solid var(--rule);background:var(--ink-2)}
.band-in{display:grid;grid-template-columns:repeat(4,1fr)}
.band-in div{padding:2rem 1.6rem;border-left:1px solid var(--rule)}
.band-in div:first-child{border-left:0;padding-left:0}
.band-in b{display:block;font-size:clamp(1.3rem,2.1vw,1.9rem);font-weight:600;letter-spacing:-.035em;margin-bottom:.4rem}
.band-in span{font-family:var(--mono);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* ══════════════════════════════════════════════════════════
   SHOWCASE — the scroll-driven 3D sequence
   ══════════════════════════════════════════════════════════ */
.showcase{position:relative;z-index:2;background:transparent}
.showcase-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.showcase-sticky::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 60% at 72% 50%, rgba(242,86,92,.12), transparent 66%),
    linear-gradient(90deg, var(--ink) 0%, rgba(6,6,11,.72) 34%, transparent 62%);
}
.showcase-copy{position:relative;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.shot{position:absolute;inset-inline:var(--pad);max-width:34rem;opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.shot.on{opacity:1;transform:none;pointer-events:auto;position:relative;inset-inline:auto}
.shot .idx{display:block;margin-bottom:1rem}
.shot h3{font-size:clamp(1.75rem,3.4vw,3rem);letter-spacing:-.038em;margin-bottom:1rem}
.shot p{color:var(--fg-2);font-size:clamp(.95rem,.4vw + .86rem,1.1rem);margin-bottom:1.4rem}
.shot .tag{
  display:inline-block;font-family:var(--mono);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:100px;border:1px solid var(--acc-rule);color:var(--acc-2);
  background:var(--acc-soft);margin-bottom:1.4rem;
}
.showcase-rail{
  position:absolute;left:var(--pad);bottom:clamp(2rem,5vw,3.5rem);display:flex;gap:.5rem;z-index:4;
}
.showcase-rail i{width:38px;height:2px;background:var(--rule-2);position:relative;overflow:hidden;border-radius:2px}
.showcase-rail i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.showcase-rail i.on::after{transform:scaleX(1)}
.showcase-spacer{height:400svh}

/* ══════════════════════════════════════════════════════════
   RANGE — big glass cards
   ══════════════════════════════════════════════════════════ */
.range{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.rcard{
  position:relative;border:1px solid var(--rule);border-radius:0;overflow:hidden;
  background:var(--ink-3);
  padding:1.9rem 1.7rem 1.75rem;display:flex;flex-direction:column;gap:1rem;min-height:320px;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;
}
.rcard::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px 300px at var(--mx,50%) var(--my,0%), rgba(206,32,39,.07), transparent 68%);
}
.rcard:hover{transform:translateY(-4px);border-color:var(--rule-2);box-shadow:var(--sh-1)}
.rcard:hover::before{opacity:1}
/* A glowing arc in the corner — echo of the mark, not an icon tile */
.rcard::after{
  content:"";position:absolute;right:-52px;top:-52px;width:150px;height:150px;border-radius:50%;
  border:1px solid var(--acc-rule);opacity:.42;transition:transform .6s var(--ease),opacity .5s;
}
.rcard:hover::after{transform:scale(1.16);opacity:.85}
.rcard .idx{position:relative}
.rcard h3{position:relative;font-size:1.25rem}
.rcard p{position:relative;font-size:.9rem;color:var(--fg-3);flex:1}
.rcard .rtag{
  position:relative;align-self:flex-start;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:100px;border:1px solid var(--rule-2);color:var(--fg-3);
}
.rcard .rtag.made{border-color:var(--acc-rule);color:var(--acc-2);background:var(--acc-soft)}
.rcard .tlink{position:relative;margin-top:auto}

/* ══════════════════════════════════════════════════════════
   CATALOGUE
   ══════════════════════════════════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.chip{
  padding:.62rem 1.1rem;border-radius:0;border:1px solid var(--rule-2);
  font-size:.875rem;font-weight:500;color:var(--fg-2);
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-on);font-weight:600}
.chip .n{font-family:var(--mono);font-size:.6875rem;opacity:.62;margin-left:.45rem}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.pcard{
  display:flex;flex-direction:column;text-align:left;
  border:1px solid var(--rule);border-radius:0;overflow:hidden;background:var(--ink-3);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;
}
.pcard:hover{transform:translateY(-4px);border-color:var(--rule-2);box-shadow:var(--sh-1)}
.pcard-shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:0;
  background:var(--rose);
}
.pcard-shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard-shot img{transform:scale(1.045)}
.pcard-code{
  position:absolute;left:.85rem;top:.85rem;font-family:var(--mono);font-size:.5938rem;
  letter-spacing:.14em;text-transform:uppercase;color:#3C3B4A;
  background:rgba(255,255,255,.82);border:1px solid rgba(21,20,26,.12);
  padding:.28rem .55rem;border-radius:100px;backdrop-filter:blur(6px);
}
.pcard-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.62rem;flex:1}
.pcard-tag{font-family:var(--mono);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-2)}
.pcard h3{font-size:1.12rem;letter-spacing:-.028em}
.pcard p{font-size:.875rem;color:var(--fg-3);flex:1;line-height:1.55}
.pcard .tlink{margin-top:.3rem}
.cat-empty{padding:3rem 0;color:var(--fg-3);font-size:.9375rem}

/* ── Product detail drawer ── */
.pscrim{
  position:fixed;inset:0;z-index:940;background:rgba(4,4,8,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.pscrim.open{opacity:1;visibility:visible}
.pdrawer{
  position:fixed;top:0;right:0;bottom:0;z-index:950;width:min(620px,100%);
  background:var(--ink-2);border-left:1px solid var(--rule-2);
  transform:translateX(101%);transition:transform .55s var(--ease);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.pdrawer.open{transform:none}
.pdrawer-shot{position:relative;aspect-ratio:16/11;background:var(--rose)}
.pdrawer-shot img{width:100%;height:100%;object-fit:cover}
.pdrawer-x{
  position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(12,12,20,.72);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);transition:transform .3s var(--ease),background .3s;
}
.pdrawer-x:hover{transform:rotate(90deg);background:var(--acc)}
.pdrawer-x svg{width:14px;height:14px;stroke:#fff;stroke-width:2;stroke-linecap:round}
.pdrawer-body{padding:clamp(1.5rem,3.5vw,2.4rem)}
.pdrawer-body>.pcard-tag{display:block;margin-bottom:.7rem}
.pdrawer-body h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.55rem}
.pdrawer-code{font-family:var(--mono);font-size:.75rem;color:var(--fg-3);margin-bottom:1.2rem;display:block}
.pdrawer-body>p.lede{font-size:1.02rem;margin-bottom:1.9rem}

.pblock{margin-top:1.9rem}
.pblock>h4{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc-2);margin-bottom:1rem;font-weight:500;
}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.plist li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;font-size:.9rem;color:var(--fg-2);line-height:1.55}
.plist li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);margin-top:.55rem}
.ptable{display:grid;border-top:1px solid var(--rule)}
.ptable div{
  display:grid;grid-template-columns:minmax(110px,.42fr) 1fr;gap:1rem;
  padding:.78rem 0;border-bottom:1px solid var(--rule);font-size:.875rem;
}
.ptable dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--fg-3);margin:0}
.ptable dd{margin:0;color:var(--fg-2);line-height:1.55}
.pdrawer-act{display:grid;gap:.6rem;margin-top:2.2rem}
.pnote{
  margin-top:1.6rem;padding:.9rem 1rem;border:1px solid var(--rule);border-radius:12px;
  font-size:.75rem;color:var(--fg-3);line-height:1.55;
}

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

/* ══════════════════════════════════════════════════════════
   FEATURE — full-bleed split with glow
   ══════════════════════════════════════════════════════════ */
.feat{position:relative;z-index:2;overflow:hidden;background:var(--ink-2);border-block:1px solid var(--rule)}
.feat::before{content:"";position:absolute;width:60vmax;height:60vmax;right:-18vmax;top:-22vmax;border-radius:50%;background:radial-gradient(circle,rgba(206,32,39,.07),transparent 64%);filter:blur(20px);pointer-events:none}
.feat-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.feat-list{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.5rem}
.feat-list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.feat-list b{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--acc-2);padding-top:.3rem}
.feat-list strong{display:block;font-size:1.05rem;font-weight:600;margin-bottom:.25rem;letter-spacing:-.02em}
.feat-list p{font-size:.9375rem;color:var(--fg-3)}

/* A glass panel used where a product photo will later go */
.plate{
  position:relative;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--rule);
  background:linear-gradient(150deg,var(--ink-4),var(--ink-2));overflow:hidden;
  display:grid;place-items:center;
}
.plate::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 32% 26%, rgba(206,32,39,.10), transparent 68%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px);
}
.plate-mark{position:relative;width:38%;opacity:.9;filter:drop-shadow(0 0 40px var(--acc-glow))}

/* ══════════════════════════════════════════════════════════
   EDITORIAL
   ══════════════════════════════════════════════════════════ */
.pull{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.9rem,4.2vw,3.6rem);line-height:1.14;letter-spacing:-.024em;max-width:19ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.prose p+p{margin-top:1.1rem}

.scale{list-style:none;margin:0;padding:0}
/* Each row used to size its own label column (auto 1fr per li), so no two
   rows lined up and the longest label shunted its text into a narrow ragged
   strip. Stacked on phones, and one shared column width above that. */
.scale li{display:grid;grid-template-columns:1fr;gap:.45rem;padding:1.15rem 0;border-top:1px solid var(--rule)}
@media (min-width:620px){
  .scale li{grid-template-columns:12rem 1fr;gap:1.4rem;align-items:start}
}
.scale li:last-child{border-bottom:1px solid var(--rule)}
.scale b{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-2);padding-top:.18rem}
.scale span{font-size:.9375rem;color:var(--fg-2);line-height:1.55}

.people{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.person{border:1px solid var(--rule);background:var(--ink-3);padding:2rem;transition:box-shadow .3s var(--ease),border-color .3s}
.person:hover{border-color:var(--rule-2);box-shadow:var(--sh-1)}
.person .av{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:linear-gradient(150deg,var(--acc),var(--acc-deep));color:#fff;font-weight:700;font-size:1rem;letter-spacing:-.02em;
  box-shadow:0 8px 26px var(--acc-glow);
}
.person h3{font-size:1.05rem;margin-bottom:.2rem}
.person .role{font-family:var(--mono);font-size:.5938rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-2);margin-bottom:.75rem}
.person .qual{font-family:var(--mono);font-size:.6875rem;color:var(--fg-3);margin-bottom:.75rem}
.person p{font-size:.8125rem;color:var(--fg-3);line-height:1.55}

/* ── Ledger ── */
.ledger{border-top:1px solid var(--rule)}
.ledger-row{display:grid;grid-template-columns:70px minmax(0,.85fr) minmax(0,1.15fr);gap:0 clamp(1rem,2.5vw,2.5rem);padding-block:1.7rem;border-bottom:1px solid var(--rule);transition:background .4s,padding-left .4s var(--ease)}
.ledger-row:hover{background:var(--acc-soft);padding-left:.7rem}
.ledger-row p{font-size:.9375rem;color:var(--fg-3)}

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
.faq-group+.faq-group{margin-top:clamp(2.4rem,5vw,3.6rem)}
.faq-group>.lbl{margin-bottom:1rem}
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:grid;grid-template-columns:56px 1fr 22px;gap:0 clamp(.9rem,2vw,2rem);align-items:start;padding:1.35rem 0;cursor:pointer;list-style:none;transition:color .22s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--acc-2)}
.faq summary h3{font-size:clamp(1rem,1.15vw,1.18rem);font-weight:500;letter-spacing:-.02em;color:inherit}
.faq summary .idx{padding-top:.24rem}
.faq .pm{position:relative;width:14px;height:14px;margin-top:.45rem;justify-self:end}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--fg-3);transition:transform .3s var(--ease),background .22s}
.faq .pm::before{left:0;right:0;top:6.5px;height:1px}
.faq .pm::after{top:0;bottom:0;left:6.5px;width:1px}
.faq summary:hover .pm::before,.faq summary:hover .pm::after{background:var(--acc-2)}
.faq details[open] .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--acc-2)}
.faq .ans{display:grid;grid-template-columns:56px 1fr 22px;gap:0 clamp(.9rem,2vw,2rem);padding-bottom:1.6rem}
.faq .ans>div{grid-column:2;max-width:70ch}
.faq .ans p{font-size:.9375rem;color:var(--fg-2);line-height:1.65}
.faq .ans p+p{margin-top:.75rem}
.faq .ans strong{color:var(--fg)}
.faq .ans a{color:var(--acc-2);border-bottom:1px solid var(--acc-rule)}
.faq details[open] .ans{animation:ansIn .35s var(--ease) both}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════
   CTA / CONTACT
   ══════════════════════════════════════════════════════════ */
.reach{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.reach a{
  display:grid;gap:.35rem;padding:1.5rem 1.6rem;border:1px solid var(--rule);
  background:var(--ink-3);transition:border-color .3s,box-shadow .3s;
}
.reach a:hover{border-color:var(--rule-2);box-shadow:var(--sh-1)}
.reach span{font-family:var(--mono);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.reach b{font-size:1.05rem;font-weight:600;letter-spacing:-.018em}
.reach small{font-size:.8125rem;color:var(--fg-3);line-height:1.5}

/* ── Footer ── */
.foot{border-top:1px solid var(--rule);padding-block:4rem 2rem;background:var(--ink-2)}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2.2rem;padding-bottom:3rem}
.foot-brand p{font-size:.8125rem;color:var(--fg-3);max-width:40ch;margin-top:1.1rem}
.foot h4{margin-bottom:1.1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.58rem}
.foot ul a{font-size:.8125rem;color:var(--fg-3);transition:color .22s}
.foot ul a:hover{color:var(--acc-2)}
.foot-bot{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;padding-top:1.7rem;border-top:1px solid var(--rule)}
.foot-bot p,.foot-bot span{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--fg-3)}

/* ══════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════ */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f{display:grid;gap:.5rem}
.f.full{grid-column:1/-1}
.f label{font-family:var(--mono);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.f label em{font-style:normal;color:var(--acc-2)}
.f input,.f select,.f textarea{
  width:100%;padding:.9rem 1.05rem;border-radius:4px;background:var(--white);
  border:1px solid var(--rule-2);color:var(--fg);font-family:var(--sans);font-size:1rem;
  transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none;
}
.f textarea{resize:vertical;min-height:90px;line-height:1.55}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F79' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem}
.f select option{background:var(--ink-3);color:var(--fg)}
.f input::placeholder,.f textarea::placeholder{color:var(--fg-3);opacity:.7}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:#E2626F}

.drop{grid-column:1/-1;position:relative;border:1.5px dashed var(--rule-2);border-radius:4px;background:var(--white);padding:1.7rem 1.2rem;text-align:center;cursor:pointer;transition:border-color .25s,background .25s}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--acc-soft)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.drop b{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.3rem}
.drop small{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--fg-3)}
.drop.filled{border-style:solid;border-color:var(--acc)}
.drop.filled b{color:var(--acc-2)}
.drop.bad{border-color:#E2626F}

.fmsg{display:none;margin-top:1.2rem;padding:.95rem 1.15rem;border-radius:4px;font-size:.9375rem;border:1px solid}
.fmsg.show{display:block}
.fmsg.ok{border-color:var(--acc-rule);background:var(--acc-soft);color:var(--acc-2)}
.fmsg.err{border-color:rgba(226,98,111,.4);background:rgba(226,98,111,.1);color:#F0A3AB}
.fnote{font-size:.75rem;color:var(--fg-3);line-height:1.5}

/* ══════════════════════════════════════════════════════════
   FLOATING STACK
   ══════════════════════════════════════════════════════════ */
.fab{position:fixed;right:clamp(.9rem,2.4vw,1.7rem);bottom:clamp(.9rem,2.4vw,1.7rem);z-index:850;display:grid;gap:.6rem;justify-items:end}
.fab-b{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;border:1px solid transparent;position:relative;transition:transform .3s var(--ease),border-color .3s,background .3s}
.fab-b:hover{transform:scale(1.08)}
.fab-b svg{width:23px;height:23px}
.fab-b--call{background:var(--glass-2);border-color:var(--rule-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fab-b--call svg{stroke:var(--acc-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fab-b--call:hover{border-color:var(--acc)}
.fab-b--wa{background:var(--wa);box-shadow:var(--sh-1)}
.fab-b--wa svg{fill:#04240F;width:25px;height:25px}
.fab-b--mei{width:58px;height:58px;background:linear-gradient(150deg,var(--acc),var(--acc-deep));box-shadow:0 10px 32px var(--acc-glow)}
.fab-b--mei svg{width:28px;height:28px}
.fab-b--mei::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--acc);animation:ping 3s var(--ease-io) infinite}
.fab-b--mei.quiet::after{animation:none;opacity:0}
@keyframes ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}

.fab-tip{position:absolute;right:calc(100% + 13px);top:50%;transform:translateY(-50%) translateX(6px);background:var(--ink-4);border:1px solid var(--rule-2);color:var(--fg);padding:.45rem .8rem;border-radius:100px;font-family:var(--mono);font-size:.6875rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.fab-b:hover .fab-tip,.fab-b:focus-visible .fab-tip{opacity:1;transform:translateY(-50%) translateX(0)}
.fab-nudge{position:absolute;right:calc(100% + 13px);top:50%;transform:translateY(-50%) translateX(12px);transform-origin:right center;background:var(--fg);color:var(--ink);padding:.6rem .95rem;border-radius:100px;font-size:.8125rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fab-nudge.show{opacity:1;transform:translateY(-50%) translateX(0)}
.fab-dot{position:absolute;top:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--acc-2);border:2px solid var(--ink)}

/* ══════════════════════════════════════════════════════════
   MEI
   ══════════════════════════════════════════════════════════ */
.mei{
  position:fixed;right:clamp(.9rem,2.4vw,1.7rem);bottom:clamp(.9rem,2.4vw,1.7rem);z-index:930;
  width:min(390px,calc(100vw - 1.8rem));height:min(610px,calc(100svh - 1.8rem));
  background:rgba(10,10,17,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--rule-2);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom right;
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  box-shadow:0 34px 90px rgba(0,0,0,.65);
}
.mei.open{opacity:1;visibility:visible;transform:none}
.mei-head{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border-bottom:1px solid var(--rule);flex:none}
.mei-av{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;border:1px solid var(--acc-rule);background:var(--acc-soft);position:relative}
.mei-av svg{width:20px;height:20px}
.mei-live{position:absolute;bottom:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--acc-2);border:2px solid var(--ink-2)}
.mei-id{flex:1;min-width:0}
.mei-id b{display:block;font-size:.9375rem;font-weight:600}
.mei-id span{font-family:var(--mono);font-size:.5313rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-2)}
.mei-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule-2);flex:none;transition:border-color .25s,transform .3s}
.mei-x:hover{border-color:var(--acc);transform:rotate(90deg)}
.mei-x svg{width:12px;height:12px;stroke:var(--fg);stroke-width:1.9;stroke-linecap:round}

.mei-body{flex:1;overflow-y:auto;padding:1.15rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;scrollbar-width:thin}
.mei-body::-webkit-scrollbar{width:4px}
.mei-body::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:4px}

.msg{max-width:88%;font-size:.875rem;line-height:1.56;animation:mm .38s var(--ease) both}
@keyframes mm{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg--mei{align-self:flex-start;background:var(--ink-3);border:1px solid var(--rule);color:var(--fg-2);padding:.75rem .95rem;border-radius:14px 14px 14px 4px}
.msg--mei strong{color:var(--fg);font-weight:600}
.msg--mei a{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}
.msg--you{align-self:flex-end;background:var(--acc);color:var(--acc-on);font-weight:600;padding:.68rem .95rem;border-radius:14px 14px 4px 14px}
.msg--sys{align-self:center;max-width:100%;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);padding:.3rem 0}
.typing{align-self:flex-start;background:var(--ink-3);border:1px solid var(--rule);padding:.82rem .95rem;border-radius:14px 14px 14px 4px;display:flex;gap:5px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.35;animation:td 1.25s var(--ease-io) infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,100%{opacity:.28;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}

.mei-opts{display:flex;flex-wrap:wrap;gap:.4rem;animation:mm .38s var(--ease) both}
.mei-opt{padding:.52rem .85rem;border-radius:100px;border:1px solid var(--acc-rule);color:var(--acc-2);background:var(--acc-soft);font-size:.8125rem;font-weight:500;transition:background .22s,color .22s,transform .22s var(--ease)}
.mei-opt:hover{background:var(--acc);color:var(--acc-on);transform:translateY(-2px)}
.mei-opt--alt{border-color:var(--rule-2);background:transparent;color:var(--fg-3)}
.mei-opt--alt:hover{background:var(--glass-2);color:var(--fg)}

.mei-foot{flex:none;border-top:1px solid var(--rule);padding:.8rem 1.1rem .9rem}
.mei-input{display:flex;gap:.5rem;align-items:flex-end;background:var(--ink-3);border:1px solid var(--rule-2);border-radius:14px;padding:.32rem .32rem .32rem .9rem;transition:border-color .25s,box-shadow .25s}
.mei-input:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.mei-input textarea{flex:1;background:none;border:0;color:var(--fg);font-family:var(--sans);font-size:.875rem;resize:none;max-height:92px;line-height:1.5;padding:.45rem 0;outline:none}
.mei-input textarea::placeholder{color:var(--fg-3)}
.mei-send{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--acc);transition:opacity .25s,transform .25s var(--ease)}
.mei-send:hover{transform:scale(1.06)}
.mei-send:disabled{opacity:.3;cursor:not-allowed;transform:none}
.mei-send svg{width:15px;height:15px;stroke:var(--acc-on);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mei-legal{margin-top:.6rem;text-align:center;font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;color:var(--fg-3)}
.mei-legal a{color:var(--fg-2);text-decoration:underline;text-underline-offset:2px}

/* ── Running requirement list, pinned above the input so people can
      see what they've built without scrolling back ── */
.mei-cart{
  display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;margin-bottom:.55rem;
  border:1px solid var(--acc-rule);background:var(--acc-soft);border-radius:10px;
  font-size:.75rem;color:var(--acc-2);animation:mm .3s var(--ease) both;
}
.mei-cart b{font-family:var(--mono);font-size:.6875rem}
.mei-cart span{flex:1;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mei-cart button{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);border-bottom:1px solid var(--rule-2);flex:none;
}
.mei-cart button:hover{color:var(--acc-2);border-bottom-color:var(--acc-rule)}

/* ── Quotation summary ── */
.mei-sum .ref{
  display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  color:var(--fg-3);margin-bottom:.75rem;
}
.mei-lines{display:grid;gap:0;margin:0 0 .85rem;border-top:1px solid var(--acc-rule)}
.mei-lines div{
  display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.8125rem;
}
.mei-lines .n{font-family:var(--mono);font-size:.625rem;color:var(--fg-3);font-variant-numeric:tabular-nums}
.mei-lines .q{font-family:var(--mono);font-size:.6875rem;color:var(--acc-2);white-space:nowrap}
.mei-lines em{display:block;font-style:normal;font-size:.6875rem;color:var(--fg-3);margin-top:.15rem}

.mei-sum{align-self:stretch;max-width:100%;border:1px solid var(--acc-rule);background:var(--acc-soft);border-radius:14px;padding:1rem;animation:mm .38s var(--ease) both}
.mei-sum h4{font-family:var(--mono);font-size:.5313rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-2);margin:0 0 .7rem;font-weight:500}
.mei-sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;font-size:.8125rem}
.mei-sum dt{color:var(--fg-3);white-space:nowrap;font-family:var(--mono);font-size:.6875rem}
.mei-sum dd{margin:0;color:var(--fg);word-break:break-word}
.mei-sum .btn{width:100%;margin-top:.9rem}

.prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--acc-deep),var(--acc-2));z-index:960;width:0}

/* ══════════════════════════════════════════════════════════
   CAREERS PAGE
   ══════════════════════════════════════════════════════════ */
.page-hero{position:relative;z-index:2;padding-block:clamp(8rem,13vw,12rem) clamp(3rem,6vw,4.5rem);background:var(--ink);overflow:hidden}
.page-hero::before{content:"";position:absolute;width:70vmax;height:70vmax;left:-20vmax;top:-28vmax;border-radius:50%;background:radial-gradient(circle,rgba(206,32,39,.07),transparent 64%);filter:blur(24px);pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2.6rem,6.6vw,5.8rem);max-width:14ch;margin-bottom:1.5rem}

.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.role-c{border:1px solid var(--rule);background:var(--ink-3);padding:2rem;transition:box-shadow .3s var(--ease),border-color .3s}
.role-c:hover{border-color:var(--rule-2);box-shadow:var(--sh-1)}
.role-c .idx{display:block;margin-bottom:1.1rem}
.role-c h3{margin-bottom:.6rem;font-size:1.1rem}
.role-c p{font-size:.875rem;color:var(--fg-3)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .range,.roles{grid-template-columns:repeat(2,1fr)}
  .feat-in,.two{grid-template-columns:1fr}
  .people{grid-template-columns:1fr 1fr}
  .band-in{grid-template-columns:1fr 1fr}
  .band-in div:nth-child(3),.band-in div:nth-child(4){border-top:1px solid var(--rule)}
  .band-in div:nth-child(odd){border-left:0;padding-left:0}
  .foot-top{grid-template-columns:1fr 1fr}
  .ledger-row{grid-template-columns:56px 1fr;gap:.7rem 1rem}
  .ledger-row p{grid-column:2}
  .plate{order:-1}
}
/* Below the two-column breakpoint the model takes the top of the frame and
   the copy sits underneath it, so neither has to fight for the middle. */
@media (max-width:1039px){
  .showcase-sticky{align-items:flex-end}
  .showcase-copy{padding-bottom:clamp(3.5rem,11vh,7rem)}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-cta .btn--glass{display:none}
  .nav{background:rgba(6,6,11,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--rule)}
  .showcase-spacer{height:340svh}
}
@media (max-width:640px){
  .range,.roles,.people,.reach,.fgrid{grid-template-columns:1fr}
  .band-in{grid-template-columns:1fr}
  .band-in div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .band-in div:first-child{border-top:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem}
  .ledger-row{grid-template-columns:1fr;gap:.5rem}
  .ledger-row p{grid-column:1}
  .faq summary,.faq .ans{grid-template-columns:1fr 22px;gap:0 1rem}
  .faq summary .idx{display:none}
  .faq .ans>div{grid-column:1}
  .hero{min-height:92svh}
  .mei{width:calc(100vw - 1.2rem);height:calc(100svh - 5rem);right:.6rem;bottom:.6rem}
  .fab-nudge{display:none}
  .foot{padding-bottom:calc(2rem + 70px)}
  .shot{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  [data-r]{opacity:1;transform:none}
  .hero h1 .l>span{transform:none}
  .hero .lbl,.hero-lede,.hero-act,.cue{opacity:1}
  #stage{display:none}
  .showcase-spacer{height:0}
  .showcase-sticky{position:relative;height:auto;padding-block:var(--gut)}
  .shot{position:relative;opacity:1;transform:none;pointer-events:auto;margin-bottom:2.5rem;inset-inline:auto}
}
@media print{
  .nav,.fab,.mei,#loader,#stage,.prog,.mnav{display:none !important}
  body{background:#fff;color:#000}
}

/* ══════════════════════════════════════════════════════════
   BRAND CORRECTIONS — things authored for a dark page
   ══════════════════════════════════════════════════════════ */

/* The step device: four ascending crimson rules. Recovery in steps.
   Doubles as the small mark wherever the wordmark won't fit. */
.steps{display:flex;align-items:flex-end;gap:8px}
.steps>i{display:block;width:46px;height:5px;background:var(--acc)}
.steps>i:nth-child(2){margin-bottom:8px}
.steps>i:nth-child(3){margin-bottom:16px}
.steps>i:nth-child(4){margin-bottom:24px}
.steps--sm>i{width:22px;height:2.5px}
.steps--sm>i:nth-child(2){margin-bottom:4px}
.steps--sm>i:nth-child(3){margin-bottom:8px}
.steps--sm>i:nth-child(4){margin-bottom:12px}
.steps--xs>i{width:13px;height:2px;background:#fff}
.steps--xs>i:nth-child(2){margin-bottom:3px}
.steps--xs>i:nth-child(3){margin-bottom:6px}
.steps--xs>i:nth-child(4){margin-bottom:9px}

/* Logo lockup */
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand img{width:132px;height:auto;display:block}
.nav-in .brand img{width:120px}
.foot .brand img{width:132px}
@media (max-width:520px){ .nav-in .brand img{width:100px} }

/* Nav on ivory */
.nav.solid{background:rgba(247,241,233,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--rule)}
.nav-links a{border-radius:0;font-weight:500;font-size:.9375rem;color:var(--fg-2)}
.nav-links a:hover{color:var(--acc);background:transparent}
.nav-links a[aria-current="page"]{color:var(--acc)}
.burger{border-radius:0;border-color:var(--rule-2);background:transparent}
.burger span{background:var(--fg)}


/* Hero is the page's one dark section: espresso, cinematic, holds the 3D */
.hero{background:transparent;color:var(--ivory)}
.hero h1,.hero .lede{color:inherit}
.hero .lbl{color:#A79C93}
.hero .lbl::before{background:var(--crimson-bright)}
.hero .acc{color:var(--crimson-bright)}
.hero::before{background:radial-gradient(circle,rgba(242,86,92,.16),transparent 62%)}
.hero::after{background:linear-gradient(180deg,rgba(34,28,27,.82) 0%,rgba(34,28,27,.10) 22%,rgba(34,28,27,.08) 62%,rgba(34,28,27,.88) 92%,var(--espresso) 100%)}
.hero .btn--glass{color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--ivory)}
.hero .btn--glass:hover{background:var(--ivory);color:var(--espresso)}
.hero .btn--fill{background:var(--crimson);color:#fff}
.hero .btn--fill:hover{background:var(--crimson-bright)}
.cue i{background:linear-gradient(180deg,transparent,var(--crimson-bright))}
.cue i::after{background:var(--crimson-bright)}
.cue span{color:#A79C93}
.showcase-sticky::before{
  background:radial-gradient(58% 60% at 72% 50%, rgba(242,86,92,.12), transparent 66%),
             linear-gradient(90deg, var(--espresso) 0%, rgba(34,28,27,.74) 34%, transparent 62%);
}
.showcase{background:transparent;color:var(--ivory)}
.showcase .shot h3{color:var(--ivory)}
.showcase .shot p{color:#CFC4BB}
.showcase .idx{color:var(--crimson-bright)}
.showcase .tag{border-color:rgba(242,86,92,.4);color:var(--crimson-bright);background:rgba(242,86,92,.10);border-radius:0}
.showcase .tlink{color:var(--crimson-bright)}
.showcase-rail i{background:rgba(247,241,233,.24)}
.showcase-rail i::after{background:var(--crimson-bright)}

/* Loader on ivory */
#loader{background:var(--ivory)}
#loader::after{display:none}
.load-bar{background:var(--rule)}
.load-bar i{background:var(--crimson)}
.load-read{color:var(--stone)}

/* Band + feature blocks */
.band{background:var(--rose);border-color:var(--rule)}
.band-in div{border-color:var(--rule)}
.feat{background:var(--rose);border-color:var(--rule)}
.feat::before{background:radial-gradient(circle,rgba(206,32,39,.07),transparent 64%)}
.ledger-row:hover{background:var(--rose)}

/* Floating stack */
.fab-b{border-radius:0;box-shadow:var(--sh-1)}
.fab-b--mei{background:var(--crimson)}
.fab-b--mei::after{border-color:var(--crimson);border-radius:0}
.fab-b--call{background:var(--white);border-color:var(--rule-2)}
.fab-b--call svg{stroke:var(--crimson)}
.fab-b--call:hover{border-color:var(--crimson)}
.fab-b--wa{background:#128C4B}
.fab-b--wa svg{fill:#fff}
.fab-tip{background:var(--espresso);border-color:var(--espresso);color:var(--ivory);border-radius:0}
.fab-nudge{background:var(--espresso);color:var(--ivory);border-radius:0}
.fab-dot{background:var(--crimson);border-color:var(--ivory);border-radius:0}

/* Mei panel on ivory */
.mei{background:var(--white);border-color:var(--rule-2);border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--sh-2)}
.mei-head{background:var(--rose);border-color:var(--rule)}
.mei-av{border-radius:0;border-color:var(--rule-2);background:var(--crimson);display:grid;place-items:center}
.mei-live{background:var(--crimson);border-color:var(--white)}
.mei-id span{color:var(--acc)}
.mei-x{border-radius:0;border-color:var(--rule-2)}
.mei-x svg{stroke:var(--fg)}
.msg--mei{background:var(--rose);border-color:var(--rule);color:var(--fg-2);border-radius:0}
.msg--you{background:var(--crimson);color:#fff;border-radius:0}
.typing{background:var(--rose);border-color:var(--rule);border-radius:0}
.typing i{background:var(--crimson)}
.mei-opt{border-radius:0;border-color:var(--acc-rule);color:var(--acc);background:var(--white)}
.mei-opt:hover{background:var(--crimson);color:#fff;border-color:var(--crimson);transform:none}
.mei-opt--alt{border-color:var(--rule-2);color:var(--fg-3);background:transparent}
.mei-opt--alt:hover{background:var(--espresso);color:var(--ivory);border-color:var(--espresso)}
.mei-input{background:var(--white);border-color:var(--rule-2);border-radius:4px}
.mei-input:focus-within{border-color:var(--crimson);box-shadow:0 0 0 3px var(--acc-soft)}
.mei-send{background:var(--crimson);border-radius:0}
.mei-send svg{stroke:#fff}
.mei-sum{border-radius:0;border-color:var(--acc-rule);background:var(--rose)}
.mei-cart{border-radius:0;background:var(--rose);border-color:var(--acc-rule);color:var(--acc)}
.mei-legal a{color:var(--fg-2)}
.mei-body::-webkit-scrollbar-thumb{background:var(--rule-2)}

/* Product drawer */
.pdrawer{background:var(--ink);border-left-color:var(--rule)}
.pscrim{background:rgba(34,28,27,.5)}
.pdrawer-x{background:var(--espresso);border-color:var(--espresso);border-radius:0}
.pdrawer-x:hover{background:var(--crimson);border-color:var(--crimson)}
.pcard-code{background:rgba(255,255,255,.9);border-color:var(--rule);color:var(--espresso-soft);border-radius:0}
.pnote{border-radius:0;border-color:var(--rule);background:var(--rose)}

/* Page hero (products / careers) */
.page-hero{background:var(--rose)}
.page-hero::before{background:radial-gradient(circle,rgba(206,32,39,.07),transparent 64%)}

/* Footer is espresso — the second background colour on every page */
.foot{background:var(--espresso);color:var(--ivory);border-top:0}
.foot h4{color:#A79C93}
.foot h4::before{background:var(--crimson-bright)}
.foot-brand p{color:#A79C93}
.foot ul a{color:#CFC4BB}
.foot ul a:hover{color:var(--crimson-bright)}
.foot-bot{border-top-color:rgba(247,241,233,.14)}
.foot-bot p,.foot-bot span{color:#A79C93}

/* Glow text has no place on ivory */
.glow-t{text-shadow:none}
.hero .glow-t{text-shadow:0 0 40px rgba(242,86,92,.35)}

/* Progress bar */
.prog{background:var(--crimson)}
::selection{background:var(--crimson);color:#fff}

/* ── Nav lockup swaps as the bar goes from espresso hero to ivory ── */
.nav .brand{display:block}
/* Swapped rather than cross-faded: an absolutely-positioned overlay stretched
   the artwork, and there is no state where both should be visible. */
.nav .lock{width:120px;height:auto;display:block}
.nav .lock--light{display:none}
.nav.solid .lock--dark{display:none}
.nav.solid .lock--light{display:block}
@media (max-width:520px){ .nav .lock{width:100px} }

/* ── Step device inside the small round-ish buttons ── */
.fab-b--mei{display:grid;place-items:center}
.fab-b--mei .steps--xs{gap:4px;align-items:flex-end;height:22px}
.steps--xs>i{width:4px;height:8px;background:#fff;margin-bottom:0 !important}
.steps--xs>i:nth-child(2){height:13px}
.steps--xs>i:nth-child(3){height:18px}
.steps--xs>i:nth-child(4){height:23px}
.mei-av{width:36px;height:36px;display:grid;place-items:center;background:var(--crimson)}
.mei-av .steps--xs{height:18px;gap:3px}
.mei-av .steps--xs>i{width:3px;height:6px}
.mei-av .steps--xs>i:nth-child(2){height:10px}
.mei-av .steps--xs>i:nth-child(3){height:14px}
.mei-av .steps--xs>i:nth-child(4){height:18px}

/* Loader lockup + steps */
.load-in{gap:1.4rem}
.load-in .steps--sm{margin-top:.2rem}

/* The robotics plate holds the wordmark, not an icon */
.plate-mark{width:52%;height:auto;filter:none;opacity:.92}

/* Inline WhatsApp CTAs take the brand crimson — the glyph already says
   WhatsApp, and a neon green button fights the palette on every page.
   The floating WhatsApp button stays green: that is the one place people
   genuinely scan for the colour. */
.btn--wa{background:var(--acc);color:var(--acc-on);box-shadow:none}
.btn--wa:hover{background:var(--acc-2)}
.inv .btn--wa{background:var(--crimson-bright);color:var(--espresso)}

/* ══════════════════════════════════════════════════════════
   STAGE BACKDROP
   The espresso has to sit BEHIND the 3D canvas, not on the
   sections in front of it — otherwise the models render into
   a layer nobody can see.
   ══════════════════════════════════════════════════════════ */
#stagebg{
  position:fixed;inset:0;z-index:-1;background:var(--espresso);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
#stagebg.on{opacity:1}
html{background:var(--espresso)}   /* no ivory flash before the backdrop fades in */
body{background:transparent}
.sec,.foot,.band,.page-hero{background:var(--ink)}
.sec.feat{background:var(--rose)}
/* The blanket rule above is for the stage backdrop, but it was overriding the
   footer's espresso while leaving its light-on-dark text colours in place —
   #CFC4BB links on ivory read at about 1.3:1. The footer keeps its own dark. */
.foot{background:var(--espresso)}

/* ── Hero framing: below the two-column breakpoint the model takes the top
      band and the copy sits under it, so neither is squeezed. ── */
@media (max-width:1039px){
  .hero{align-items:flex-end}
  .hero-in{padding-bottom:clamp(2rem,5vh,3.5rem)}
}
/* The top veil existed to keep the nav readable. The nav has its own
   background now, and the veil was washing out the model underneath it. */
.hero::after{
  background:linear-gradient(180deg,rgba(34,28,27,.34) 0%,rgba(34,28,27,.04) 16%,rgba(34,28,27,.06) 58%,rgba(34,28,27,.86) 90%,var(--espresso) 100%);
}
.nav{background:linear-gradient(180deg,rgba(34,28,27,.92),rgba(34,28,27,0))}
.nav.solid{background:rgba(247,241,233,.94)}

/* Over the espresso hero the nav has to borrow the inverted tokens, or the
   burger outline and links stay dark-on-dark. */
.nav:not(.solid){--fg:#F7F1E9;--fg-2:#CFC4BB;--rule-2:rgba(247,241,233,.34);--rule:rgba(247,241,233,.16)}
.nav:not(.solid) .burger{border-color:rgba(247,241,233,.34)}
.nav:not(.solid) .burger span{background:#F7F1E9}
.nav:not(.solid) .nav-links a{color:#CFC4BB}
.nav:not(.solid) .nav-links a:hover{color:#fff}
/* Keep the eyebrow clear of the model */
@media (max-width:1039px){ .hero .lbl{margin-bottom:1.2rem} }

/* ── Photo-led cards on the homepage ── */
.pcard{color:inherit}
.pcard .rtag{
  align-self:flex-start;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.3rem .6rem;border:1px solid var(--rule-2);color:var(--fg-3);
}
.pcard .rtag.made{border-color:var(--acc-rule);color:var(--acc);background:var(--acc-soft)}
.pcard--cta{background:var(--espresso);color:var(--ivory);border-color:var(--espresso);justify-content:center}
.pcard--cta .pcard-body{padding:2.2rem}
.pcard--cta h3{color:var(--ivory)}
.pcard--cta p{color:#CFC4BB}
.pcard--cta .pcard-tag{color:var(--crimson-bright)}
.pcard--cta .tlink{color:var(--crimson-bright)}
.pcard--cta:hover{border-color:var(--crimson)}

/* ══════════════════════════════════════════════════════════
   FLOATING ACTIONS — round, lifted, alive
   The brand is square-edged, but a floating action button is UI
   chrome rather than a brand surface, and people read circles
   here. Squares made the stack look switched off.
   ══════════════════════════════════════════════════════════ */
.fab{gap:.8rem}
.fab-b{
  width:54px;height:54px;border-radius:50%;border:0;
  display:grid;place-items:center;position:relative;
  box-shadow:0 6px 18px rgba(34,28,27,.20), 0 2px 6px rgba(34,28,27,.12);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .25s var(--ease);
  animation:fabIn .55s var(--ease) backwards;
}
.fab-b:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 16px 34px rgba(34,28,27,.28)}
.fab-b:active{transform:translateY(-1px) scale(1.02)}
.fab-b:nth-child(1){animation-delay:2.15s}
.fab-b:nth-child(2){animation-delay:2.25s}
.fab-b:nth-child(3){animation-delay:2.35s}
@keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.8)}to{opacity:1;transform:none}}

.fab-b--call{background:#fff;box-shadow:0 6px 18px rgba(34,28,27,.16), inset 0 0 0 1px rgba(34,28,27,.08)}
.fab-b--call svg{stroke:var(--crimson);fill:none;stroke-width:1.85;width:22px;height:22px}
.fab-b--call:hover{background:#fff;box-shadow:0 16px 34px rgba(34,28,27,.24), inset 0 0 0 1px rgba(206,32,39,.35)}

/* WhatsApp keeps its own green — it is the one colour people scan for */
.fab-b--wa{background:linear-gradient(160deg,#3BE07C,#20BA5A 62%,#17A34C)}
.fab-b--wa svg{fill:#fff;width:26px;height:26px}
.fab-b--wa:hover{box-shadow:0 16px 34px rgba(32,186,90,.38)}

.fab-b--mei{
  width:62px;height:62px;
  background:radial-gradient(circle at 34% 28%, #E9484F, var(--crimson) 58%, var(--crimson-dark));
  box-shadow:0 10px 26px rgba(206,32,39,.42), 0 2px 8px rgba(34,28,27,.22);
}
.fab-b--mei svg{width:27px;height:27px}
.fab-b--mei:hover{box-shadow:0 18px 40px rgba(206,32,39,.52)}
/* Breathing ring, so it reads as something you can talk to */
.fab-b--mei::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--crimson);opacity:0;
  animation:fabPing 3.2s var(--ease-io) infinite 3s;
}
.fab-b--mei.quiet::after{animation:none}
@keyframes fabPing{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.55)}}

.fab-dot{
  position:absolute;top:1px;right:1px;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2px solid var(--crimson);
}
.fab-tip,.fab-nudge{border-radius:100px}
.fab-tip{background:var(--espresso);border:0;color:var(--ivory);box-shadow:0 6px 16px rgba(34,28,27,.24)}
.fab-nudge{background:var(--espresso);color:var(--ivory);box-shadow:0 8px 22px rgba(34,28,27,.3)}

/* The chat panel should feel connected to the round button that opened it */
.mei{border-radius:18px}
.mei-av{border-radius:50%}
.mei-x{border-radius:50%}
.mei-send{border-radius:50%;width:36px;height:36px}
.mei-opt{border-radius:100px}
.msg--mei{border-radius:14px 14px 14px 4px}
.msg--you{border-radius:14px 14px 4px 14px}
.typing{border-radius:14px 14px 14px 4px}
.mei-input{border-radius:100px;padding-left:1.1rem}
.mei-cart{border-radius:100px}
.mei-sum{border-radius:14px}

@media (prefers-reduced-motion:reduce){
  .fab-b{animation:none}
  .fab-b--mei::after{animation:none}
}

/* ══════════════════════════════════════════════════════════
   CHAT PANEL vs THE MOBILE KEYBOARD
   svh ignores the on-screen keyboard, so the moment Mei asked
   for a name the panel was pushed behind it and looked like it
   had vanished. dvh tracks the visible area; the JS below also
   pins it to visualViewport on browsers that report one.
   ══════════════════════════════════════════════════════════ */
.mei{height:min(600px, calc(100dvh - 1.8rem))}
@media (max-width:640px){
  .mei{width:calc(100vw - 1.2rem);height:calc(100dvh - 4.6rem);right:.6rem;bottom:.6rem}
}
.mei.kb{bottom:var(--kb-bottom,.6rem);height:var(--kb-height,auto)}

/* ── Espresso sections need the inverted card + rule treatment ── */
.sec.inv .person,.sec.inv .role-c{background:var(--ink-2);border-color:var(--rule)}
.sec.inv .person:hover,.sec.inv .role-c:hover{border-color:var(--acc-rule);box-shadow:none}
.sec.inv .reach a{background:var(--ink-2);border-color:var(--rule)}
.sec.inv .reach a:hover{border-color:var(--acc-rule);box-shadow:none}
.sec.inv .scale li{border-color:var(--rule)}
.sec.inv .ledger,.sec.inv .ledger-row{border-color:var(--rule)}
.sec.inv .ledger-row:hover{background:var(--acc-soft)}
.sec.inv .btn--glass{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.sec.inv .btn--glass:hover{background:var(--fg);color:var(--espresso)}
.sec.inv .av{background:linear-gradient(150deg,var(--crimson-bright),var(--crimson))}
.band.inv{background:var(--espresso);border-color:rgba(247,241,233,.14)}
.band.inv div{border-color:rgba(247,241,233,.14)}

/* ── Made vs supplied: the two product blocks should not look alike ── */
#build{border-bottom:1px solid rgba(247,241,233,.14)}
#equipment{border-top:0}

/* ══════════════════════════════════════════════════════════
   FAQ PAGE
   ══════════════════════════════════════════════════════════ */
.faq-jump{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2.5rem,5vw,4rem);
  padding-bottom:1.6rem;border-bottom:1px solid var(--rule);
}
.faq-jump .chip{display:inline-flex;align-items:center;text-decoration:none}
.faq-jump .chip:hover{border-color:var(--acc);color:var(--acc)}
.faq-group{scroll-margin-top:88px}
.faq-foot{
  margin-top:clamp(3rem,6vw,4.5rem);padding:clamp(1.8rem,4vw,2.8rem);
  background:var(--espresso);color:var(--ivory);
}
.faq-foot h3{color:var(--ivory);margin-bottom:.6rem}
.faq-foot p{color:#CFC4BB;max-width:52ch}
.faq-foot .btn--glass{color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--ivory)}
.faq-foot .btn--glass:hover{background:var(--ivory);color:var(--espresso)}

/* ══════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════ */

/* Without the 3D engine the showcase has nothing to pin to, so it
   becomes ordinary stacked sections instead of 4 viewports of
   sticky scrolling that resolve to an empty stage. */
.no-3d .showcase-spacer{display:none}
.no-3d .showcase-sticky{position:relative;height:auto;padding-block:var(--gut) 0;display:block}
.no-3d .showcase-sticky::before{display:none}
.no-3d .showcase-rail{display:none}
.no-3d .shot{
  position:relative;opacity:1;transform:none;pointer-events:auto;
  inset-inline:auto;max-width:100%;
  padding-bottom:2.4rem;margin-bottom:2.4rem;border-bottom:1px solid rgba(247,241,233,.14);
}
.no-3d .shot:last-child{border-bottom:0;margin-bottom:0}
.no-3d .showcase{background:var(--espresso);padding-bottom:var(--gut)}
.no-3d .hero{background:var(--espresso)}
.no-3d .hero::before{opacity:.7}

/* Touch targets. 27 links and buttons were under 44px — the tap
   floor on a phone. Padding is added rather than font size so the
   layout doesn't shift. */
@media (max-width:860px){
  .tlink{min-height:44px;align-items:center}
  .foot ul a,.nav-links a{display:inline-flex;align-items:center;min-height:44px}
  .foot ul{gap:.1rem}
  .mnav > a{min-height:56px;align-items:center}
  .faq summary{padding-block:1.05rem;min-height:56px;align-items:center}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .reach a{min-height:64px}
  .mei-opt{min-height:40px;display:inline-flex;align-items:center}
}

/* Nothing readable should sit below 11px on a phone */
@media (max-width:640px){
  .lbl{font-size:.6875rem}
  .idx,.pcard-tag,.person .role,.shot .tag{font-size:.6875rem}
  .load-read,.foot-bot p,.foot-bot span,.mei-legal{font-size:.6875rem}
  .brand-s{font-size:.5625rem}
  .hero-read span,.band-in span{font-size:.6875rem}
}

/* The floating stack must never sit on top of the last thing on a page */
@media (max-width:860px){
  .foot{padding-bottom:calc(2rem + 84px)}
  .fab{gap:.65rem}
  .fab-b{width:50px;height:50px}
  .fab-b--mei{width:58px;height:58px}
}


/* ══════════════════════════════════════════════════════════
   THE STAGE, GIVEN A BOX
   Every .slot is an empty, reserved rectangle in the layout. The WebGL
   renderer is scissored to whichever slot is most on screen, so the 3D
   is physically unable to paint across a headline. Copy and model share
   the page without either one dodging the other.
   ══════════════════════════════════════════════════════════ */
.slot{position:relative;pointer-events:none}

/* ── Hero: copy left, machine right ── */
.hero-in{display:grid;gap:2rem;align-items:center}
.hero-txt{min-width:0}
.slot--hero{width:100%;aspect-ratio:1/1;max-height:52svh}

@media (min-width:1040px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:3rem}
  .hero-txt{max-width:38rem}
  .slot--hero{aspect-ratio:auto;height:min(72svh,660px);max-height:none}
}
@media (max-width:1039px){
  .hero{padding-block:6.5rem 3rem;align-items:flex-start}
  .hero-in{grid-template-rows:auto auto}
  .slot--hero{height:34svh;aspect-ratio:auto;max-height:none;margin-top:.5rem}
  .cue{display:none}
}

/* ── Showcase: the model column beside the rotating copy ── */
.slot--show{position:absolute;pointer-events:none}
@media (min-width:1040px){
  .slot--show{right:max(var(--pad),calc(50vw - var(--max)/2));top:50%;
    transform:translateY(-50%);width:min(46vw,620px);height:min(78svh,700px)}
  .shot{max-width:min(30rem,36vw)}
}
@media (max-width:1039px){
  .showcase-sticky{align-items:flex-start}
  .showcase-copy{padding-top:calc(34svh + 5.5rem)}
  .slot--show{left:0;right:0;top:4.5rem;height:32svh;width:auto;transform:none}
  .shot{max-width:none}
}

/* ── Strips: the machine keeps turning further down the page ── */
.slot--strip{width:100%;height:min(46svh,420px);margin:1.5rem 0 .5rem}
@media (max-width:1039px){.slot--strip{height:30svh;margin:1rem 0 0}}

/* Mobile hero type has to earn its room now that the model has its own. */
@media (max-width:1039px){
  .hero h1{font-size:clamp(2.3rem,9.5vw,3.2rem)}
  .hero-lede{font-size:.98rem;max-width:34ch}
  .hero-act{margin-top:1.4rem}
}

/* On a phone the floating stack sits right on top of the paragraph you are
   reading. It steps out of the way while you scroll down and comes back the
   moment you stop or scroll up — the buttons are there when you want them
   and gone when you are reading. */
.fab{transition:opacity .3s var(--ease),transform .35s var(--ease)}
@media (max-width:900px){
  .fab.away{opacity:0;transform:translateY(90px);pointer-events:none}
  .fab-b{width:46px;height:46px}
  .fab-b--mei{width:54px;height:54px}
}

/* The hero headline now shares the row with the machine, so it has to be
   sized against its own column rather than the whole viewport — 8vw in a
   546px column set it at 118px and broke "measured." onto its own line. */
@media (min-width:1040px){
  .hero{min-height:100svh;padding-block:7.5rem 4rem}
  .hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .hero-txt{max-width:none}
  .hero h1{font-size:clamp(3rem,4.4vw,4.4rem);max-width:12ch;margin-bottom:1.4rem}
  .hero-lede{font-size:1.0625rem;max-width:44ch}
  .slot--hero{height:min(66svh,600px)}
}
@media (min-width:1240px){
  .hero h1{font-size:clamp(3.4rem,4.6vw,5rem)}
}

/* Nav items were wrapping onto two lines, which made the bar look ragged. */
.nav a,.nav-links a,.nav-links>*{white-space:nowrap}

/* Inner-page heroes carry the stage too, so the 3D runs the length of the
   site rather than stopping at the homepage. Same contract: the machine gets
   a box, the copy gets the rest. */
.page-hero-in{display:grid;gap:2rem;align-items:center}
.page-hero-txt{min-width:0}
.slot--page{width:100%;height:34svh}
@media (min-width:1040px){
  .page-hero-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:3rem}
  .page-hero h1{font-size:clamp(2.6rem,4vw,4rem);max-width:13ch}
  .page-hero .lede{max-width:46ch}
  .slot--page{height:min(52svh,470px)}
}
@media (max-width:1039px){
  .page-hero{padding-block:7rem 2.5rem}
  .page-hero h1{font-size:clamp(2.2rem,8.5vw,3rem)}
  .slot--page{height:30svh;margin-top:.5rem}
}

/* No stage, no reserved space — otherwise reduced-motion and print readers
   get a run of empty boxes where the machines would have been. */
@media (prefers-reduced-motion:reduce){
  .slot{display:none}
  .showcase-copy{padding-top:0}
}
@media print{ .slot{display:none} }

/* ══════════════════════════════════════════════════════════
   FOOTER — organised rather than sprawling
   One column stacked seventeen links at 44px each into a
   quarter-mile of near-empty list. Two columns, a tighter
   rhythm, and the contact block laid out as a row instead.
   ══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .foot{padding-top:3rem}
  .foot-top{padding-bottom:2rem}
  .foot-brand{grid-column:1 / -1}
  .foot .brand img{width:118px}
  .foot-brand p{font-size:.8125rem;line-height:1.6;margin-top:.9rem;max-width:none}

  /* Each link group is a bordered block, so the eye can see where one
     list ends and the next begins instead of reading one long ribbon. */
  .foot-top > div:not(.foot-brand){
    border-top:1px solid rgba(247,241,233,.14);padding-top:1.1rem;min-width:0;
  }
  .foot h4{margin-bottom:.55rem;font-size:.5938rem}
  .foot ul{gap:0}
  .foot ul a{min-height:38px;font-size:.8125rem;line-height:1.3}

  /* Reach us runs full width as a wrapped row — five short items read
     far better side by side than stacked down a narrow column. */
  .foot-top > div:last-child{grid-column:1 / -1}
  .foot-top > div:last-child ul{
    display:flex;flex-wrap:wrap;gap:.35rem .5rem;
  }
  .foot-top > div:last-child ul a{
    min-height:36px;padding:0 .7rem;border:1px solid rgba(247,241,233,.16);
    border-radius:100px;color:var(--ivory);
  }
  .foot-top > div:last-child ul a:hover{border-color:var(--crimson-bright)}

  .foot-bot{gap:.45rem 1.1rem;padding-top:1.2rem}
  .foot-bot p{flex:1 0 100%}
}

/* ══════════════════════════════════════════════════════════
   MOBILE PANEL
   Espresso rather than ivory — the panel now reads as part of
   the brand instead of a blank sheet, and it carries the step
   device and a real contact block rather than two squeezed
   buttons. Sized so all seven items and the contact block fit
   one screen without scrolling.
   ══════════════════════════════════════════════════════════ */
.mnav{
  background:var(--espresso);color:var(--ivory);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;flex-direction:column;justify-content:center;
  align-content:normal;gap:0;
  padding:calc(env(safe-area-inset-top) + 5rem) var(--pad) calc(env(safe-area-inset-bottom) + 1.6rem);
}

.mnav-head{display:flex;align-items:center;gap:.85rem;padding-bottom:1.1rem;flex:none}
.mnav-head .steps>i{background:var(--crimson-bright)}
.mnav-kick{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:#A79C93;font-weight:500;
}

/* Items: number, label, chevron — one shared grid so every label and every
   chevron lines up, whatever the word length. */
.mnav > a{
  grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.9rem;
  font-size:clamp(1.25rem,5.4vw,1.7rem);letter-spacing:-.03em;
  padding:.72rem 0;border-bottom:1px solid rgba(247,241,233,.12);
  color:var(--ivory);
}
.mnav > a:first-of-type{border-top:1px solid rgba(247,241,233,.12)}
.mnav > a span{color:var(--crimson-bright);font-size:.5938rem;letter-spacing:.14em}
.mnav > a .ch{width:19px;height:19px;color:#8A7F79;transition:transform .28s var(--ease),color .28s}
.mnav > a:hover,.mnav > a:focus-visible{color:var(--crimson-bright)}
.mnav > a:hover .ch{transform:translateX(4px);color:var(--crimson-bright)}

/* Contact block */
.mnav-foot{margin-top:1.5rem;display:grid;gap:.5rem;flex:none}
.mnav-line{
  display:flex;align-items:center;gap:.7rem;min-height:42px;
  font-size:.9375rem;color:#CFC4BB;letter-spacing:-.01em;
}
.mnav-line svg{width:17px;height:17px;color:var(--crimson-bright);flex:none}
.mnav-line:hover{color:var(--ivory)}
.mnav-act{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.7rem}
.mnav-act .btn{width:100%;justify-content:center;font-size:.9375rem;white-space:nowrap;padding-inline:.6rem}

/* Very short screens: give the list the room and let the panel scroll. */
@media (max-height:660px){
  .mnav{justify-content:flex-start;overflow-y:auto}
  .mnav > a{font-size:1.15rem;padding:.55rem 0}
  .mnav-line{min-height:38px}
}

/* The close X relied on translating two bars by a hard-coded 6.5px to meet in
   the middle; the real spacing is ~9px, so they crossed as a broken chevron.
   Centre both absolutely and rotate in place — correct at any bar height. */
.burger{position:relative}
.burger span{position:absolute;left:50%;top:50%;margin:0 !important;width:17px}
.burger span:nth-child(1){transform:translate(-50%,calc(-50% - 5px))}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 5px))}
.burger.open span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* Two identical crimson blocks side by side gave the panel no primary action.
   Quote leads; WhatsApp is the quieter second option. */
.mnav-act .btn--wa{
  background:transparent;color:var(--ivory);
  border:1px solid rgba(247,241,233,.32);
}
.mnav-act .btn--wa:hover{border-color:var(--crimson-bright);color:var(--crimson-bright)}

/* With the panel open the bar and the panel are one surface. On the light
   pages the solid ivory nav was sitting across the top of a dark panel as a
   disconnected strip. */
body.locked .nav{background:transparent !important;border-color:transparent !important}
body.locked .nav .lock--dark{display:block}
body.locked .nav .lock--light{display:none}
body.locked .burger{border-color:rgba(247,241,233,.34)}
body.locked .burger span{background:#F7F1E9}
body.locked .nav-cta .btn--fill{background:var(--crimson)}

/* Short screens: the 56px touch floor is right for a normal phone but turns a
   620px-tall screen into a scroll. Compact the rows and keep the whole panel
   on one screen for as long as that is honest; below that it scrolls. */
@media (max-height:700px){
  .mnav{padding-top:calc(env(safe-area-inset-top) + 5.6rem);justify-content:flex-start;overflow-y:auto}
  .mnav > a{min-height:0;font-size:1.1rem;padding:.42rem 0}
  .mnav-head{padding-bottom:.7rem}
  .mnav-foot{margin-top:1rem;gap:.2rem}
  .mnav-line{min-height:34px;font-size:.875rem}
  .mnav-act{margin-top:.55rem}
}