/* ==========================================================================
   Iota Hive — site.css
   Design system: "The Comb". Light wax ground, ink type, honey accent.
   Tokens first; everything else reads from them.
   ========================================================================== */

/* ---------- Fonts (self-hosted: no third-party requests before consent) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/hanken-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/hanken-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-display:swap;font-weight:100 900;
  src:url(../fonts/hanken-latin-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url(../fonts/jetbrains-latin.woff2) format("woff2")}
@font-face{font-family:"Amiri";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/amiri-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Amiri";font-style:normal;font-display:swap;font-weight:700;
  src:url(../fonts/amiri-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

/* ---------- Tokens ---------- */
/* Palette: "Hive Green". Linen ground, forest-green depths, the logo's honey.
   Light is the default; dark follows the visitor's system setting unless they
   pick one with the header switch (stored as data-theme on <html>). */
:root{
  color-scheme:light;
  --bg:#F4F3EE;           /* linen: page ground */
  --surface:#FBFBF8;      /* raised surfaces */
  --surface-2:#E8EBE3;    /* sage band */
  --line:#D5D8CC;
  --line-strong:#BFC4B5;
  --text:#12211C;         /* forest ink */
  --text-2:#3B4A44;
  --muted:#5A6862;        /* 5.3:1 on linen */
  --honey:#EEAB44;        /* the logo's honey */
  --honey-soft:#F5C673;
  --on-honey:#12211C;
  --highlight:#F7E1A8;    /* word highlight */
  --accent-text:#7E4E00;  /* honey as text on light (6.4:1) */
  --deep:#123B33;         /* hive green: bands, footer */
  --deep-2:#1A4A40;
  --on-deep:#EEF2EC;
  --on-deep-2:#B3C6BD;
  --deep-line:rgba(238,242,236,.14);
  --deep-line-strong:rgba(238,242,236,.28);
  --deep-wash:rgba(238,242,236,.06);
  --leaf:#2D6A4F;
  --leaf-line:rgba(45,106,79,.35);
  --header-bg:rgba(244,243,238,.86);
  --chip-bg:rgba(251,251,248,.88);
  --wash:rgba(247,225,168,.5);
  --plate:#F6F5F0;        /* behind client logos, both themes */
  --ok-bg:#E3EDE6; --ok-fg:#21553E; --ok-line:rgba(45,106,79,.3);
  --err-bg:#F6E3DC; --err-fg:#7A2A12; --err-line:rgba(122,42,18,.25);
  --shadow-rgb:18,33,28;
  --field-dot:18,33,28; --field-edge:126,78,0; --field-glow:238,171,68;
  --deep-field-dot:238,242,236; --deep-field-edge:238,171,68; --deep-field-glow:245,198,115;

  /* Type */
  --f-display:"Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-arabic:"Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;

  --t-hero:clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);
  --t-d1:clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  --t-d2:clamp(1.85rem, 1.35rem + 2.2vw, 3.25rem);
  --t-d3:clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --t-lead:clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-micro:.75rem;

  /* Space (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section:clamp(72px, 6vw + 40px, 140px);
  --gutter:clamp(16px, 3vw, 32px);
  --max:1240px;

  /* Shape & depth */
  --r-s:8px; --r:14px; --r-l:22px; --r-pill:999px;
  --shadow:0 1px 0 rgba(var(--shadow-rgb),.04), 0 12px 32px -18px rgba(var(--shadow-rgb),.3);
  --shadow-strong:0 24px 60px -24px rgba(var(--shadow-rgb),.5);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:600ms;
}
/* Dark theme: forest at night */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0D1F1A; --surface:#14302A; --surface-2:#112822; --line:#24443B; --line-strong:#35594E;
    --text:#EEF2EC; --text-2:#C4D1CB; --muted:#93A9A0;
    --highlight:#5B4416; --accent-text:#F2BE63;
    --deep:#10332B; --deep-2:#174238; --on-deep:#EEF2EC; --on-deep-2:#A9BDB4;
    --leaf:#7CC4A0; --leaf-line:rgba(124,196,160,.35);
    --header-bg:rgba(13,31,26,.86); --chip-bg:rgba(13,31,26,.82); --wash:rgba(238,171,68,.12);
    --ok-bg:#163B2F; --ok-fg:#9BDDBB; --ok-line:rgba(124,196,160,.3);
    --err-bg:#3A1F17; --err-fg:#F3B39C; --err-line:rgba(243,179,156,.3);
    --shadow-rgb:0,0,0;
    --field-dot:238,242,236; --field-edge:238,171,68; --field-glow:245,198,115;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D1F1A; --surface:#14302A; --surface-2:#112822; --line:#24443B; --line-strong:#35594E;
  --text:#EEF2EC; --text-2:#C4D1CB; --muted:#93A9A0;
  --highlight:#5B4416; --accent-text:#F2BE63;
  --deep:#10332B; --deep-2:#174238; --on-deep:#EEF2EC; --on-deep-2:#A9BDB4;
  --leaf:#7CC4A0; --leaf-line:rgba(124,196,160,.35);
  --header-bg:rgba(13,31,26,.86); --chip-bg:rgba(13,31,26,.82); --wash:rgba(238,171,68,.12);
  --ok-bg:#163B2F; --ok-fg:#9BDDBB; --ok-line:rgba(124,196,160,.3);
  --err-bg:#3A1F17; --err-fg:#F3B39C; --err-line:rgba(243,179,156,.3);
  --shadow-rgb:0,0,0;
  --field-dot:238,242,236; --field-edge:238,171,68; --field-glow:245,198,115;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-text)}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance}
h1{font-size:var(--t-hero);letter-spacing:-.035em}
h2{font-size:var(--t-d2)}
h3{font-size:var(--t-d3);line-height:1.15;letter-spacing:-.015em}
h4{font-size:1.125rem;line-height:1.3;letter-spacing:-.01em}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--highlight);color:var(--text)}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:-100px;z-index:200;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);text-decoration:none}
.skip:focus{top:var(--s-4)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .6)}
.band-comb{background:var(--surface-2)}
.band-paper{background:var(--surface)}
.band-dark{background:var(--deep);color:var(--on-deep)}
.band-dark a:hover{color:var(--honey-soft)}
.grid{display:grid;gap:var(--s-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.stack>*+*{margin-top:var(--s-4)}

/* ---------- Type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-5)}
.eyebrow .cell{width:9px;height:10px;background:var(--honey);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none}
.band-dark .eyebrow{color:var(--on-deep-2)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-2);max-width:62ch}
.band-dark .lead{color:var(--on-deep-2)}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em}
.hl{background:linear-gradient(transparent 62%, var(--highlight) 62%, var(--highlight) 92%, transparent 92%);padding-inline:.06em}
.band-dark .hl{background:none;color:var(--honey-soft)}
.measure{max-width:64ch}
.section-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.section-head p{margin:0}
@media (max-width:900px){.section-head{grid-template-columns:1fr}}

/* ---------- Buttons & links ---------- */
.btn{--btn-bg:var(--text);--btn-fg:var(--bg);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);font-weight:600;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease)}
.btn:hover{color:var(--btn-fg);transform:translateY(-1px)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--honey{--btn-bg:var(--honey);--btn-fg:var(--on-honey)}
.btn--honey:hover{--btn-bg:var(--honey-soft)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--text)}
.band-dark .btn--ghost{--btn-fg:var(--on-deep);border-color:var(--deep-line-strong)}
.band-dark .btn--ghost:hover{border-color:var(--on-deep)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.link-arrow svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:transform .35s var(--ease), border-color .35s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header.is-hidden{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex:none}
.brand:hover{color:var(--text)}
.brand svg{width:32px;height:32px}
.brand .word{font-family:var(--f-display);font-weight:650;font-size:1.3rem;letter-spacing:-.03em}
.brand .word b{font-weight:650;color:var(--accent-text)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,30px);list-style:none}
.nav-links a{text-decoration:none;font-weight:500;font-size:.96875rem;padding:10px 2px;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--honey);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:var(--s-3)}
.menu-btn{display:none;width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;align-items:center;justify-content:center;cursor:pointer}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--text);position:relative;transition:transform .3s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text);transition:transform .3s var(--ease)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
  .nav-links,.nav-cta .btn{display:none}
  .menu-btn{display:inline-flex}
}
.mobile-menu{display:none}
@media (max-width:980px){
  .mobile-menu{display:block;position:fixed;inset:72px 0 0 0;background:var(--bg);z-index:99;padding:var(--s-6) var(--gutter);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .menu-open .mobile-menu{opacity:1;visibility:visible;transform:none}
  .mobile-menu ul{list-style:none;border-top:1px solid var(--line)}
  .mobile-menu li a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);
    font-family:var(--f-display);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;text-decoration:none}
  .mobile-menu .btn{margin-top:var(--s-6);width:100%}
  .menu-open{overflow:hidden}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,120px) clamp(64px,8vw,128px);isolation:isolate}
.hero canvas.hive-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .wrap{position:relative}
.hero h1{max-width:13ch}
.hero .lead{margin-top:var(--s-6);max-width:54ch}
.hero .btn-row{margin-top:var(--s-7)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);max-width:760px}
.hero-meta div{font-size:var(--t-small);color:var(--text-2)}
.hero-meta strong{display:block;font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:2px}
.page-hero{padding-block:clamp(56px,7vw,112px) clamp(48px,5vw,80px);position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.page-hero canvas.hive-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.page-hero h1{font-size:var(--t-d1);max-width:16ch}
.page-hero .lead{margin-top:var(--s-5)}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;background:var(--bg)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:56px;font-family:var(--f-display);font-size:1.375rem;font-weight:550;letter-spacing:-.02em;color:var(--text-2);white-space:nowrap}
.marquee-item::after{content:"";width:8px;height:9px;background:var(--honey);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:16px}}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,32px);position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.card h3{font-size:1.375rem;margin-bottom:var(--s-3)}
.card p{color:var(--text-2);margin:0}
.card .num{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--muted);letter-spacing:.08em;display:block;margin-bottom:var(--s-6)}
.card--flat:hover{transform:none;box-shadow:none}
.band-dark .card{background:var(--deep-2);border-color:var(--deep-line)}
.band-dark .card p{color:var(--on-deep-2)}
.band-dark .card .num{color:var(--on-deep-2)}

/* problem list */
.signals{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.signals li{padding:28px 28px 28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:var(--s-3)}
.signals li:nth-child(odd){border-right:1px solid var(--line)}
.signals li:nth-child(even){padding-left:28px}
.signals .dot{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--accent-text);padding-top:5px}
.signals h3{font-size:1.25rem;margin-bottom:6px}
.signals p{margin:0;color:var(--text-2)}
@media (max-width:760px){.signals{grid-template-columns:1fr}.signals li:nth-child(odd){border-right:0}.signals li:nth-child(even){padding-left:0}}

/* Hive triad */
.triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.triad > div{padding:clamp(24px,3vw,40px);border-right:1px solid var(--line)}
.triad > div:last-child{border-right:0}
.triad .glyph{height:72px;margin-bottom:var(--s-6)}
.triad .glyph svg{height:72px;width:auto}
.triad h3{margin-bottom:var(--s-2)}
.triad .kicker{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s-3);display:block}
.triad p{color:var(--text-2);margin:0}
@media (max-width:860px){.triad{grid-template-columns:1fr}.triad>div{border-right:0;border-bottom:1px solid var(--line)}.triad>div:last-child{border-bottom:0}}

/* Human in the loop */
.loop-split{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.loop-col{border:1px solid var(--deep-line);border-radius:var(--r-l);padding:clamp(24px,3vw,40px)}
.loop-col h3{font-size:1.5rem;margin-bottom:var(--s-2)}
.loop-col .tag{margin-bottom:var(--s-5)}
.loop-col ul{list-style:none}
.loop-col li{padding:12px 0;border-top:1px solid var(--deep-line);color:var(--on-deep-2);display:flex;gap:12px}
.loop-col li::before{content:"";flex:none;margin-top:9px;width:7px;height:8px;background:var(--on-deep-2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.loop-col--human{background:var(--honey);color:var(--on-honey);border-color:var(--honey)}
.loop-col--human li{color:var(--on-honey);border-top-color:rgba(18,33,28,.18)}
.loop-col--human li::before{background:var(--on-honey)}
.loop-col--human .tag{background:rgba(18,33,28,.1);color:var(--on-honey);border-color:transparent}
.loop-join{display:flex;align-items:center;justify-content:center}
.loop-join svg{width:56px;height:56px}
@media (max-width:860px){.loop-split{grid-template-columns:1fr}.loop-join{transform:rotate(90deg)}}
.pledge{margin-top:var(--s-7);font-family:var(--f-display);font-size:var(--t-d3);line-height:1.2;letter-spacing:-.02em;max-width:30ch}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--text-2);background:transparent;line-height:1.3}
.band-dark .tag{border-color:var(--deep-line-strong);color:var(--on-deep-2)}
.tag--honey{background:var(--highlight);border-color:transparent;color:var(--text)}
.tag--leaf{color:var(--leaf);border-color:var(--leaf-line)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* Capabilities */
.cap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.cap:last-child{border-bottom:1px solid var(--line)}
.cap-title .num{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--muted);letter-spacing:.08em}
.cap-title h3{margin:var(--s-3) 0 var(--s-2)}
.cap-title .alias{font-family:var(--f-display);font-style:normal;color:var(--accent-text);font-size:1.0625rem}
.cap-body p{color:var(--text-2);max-width:60ch}
.cap-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5);list-style:none}
.cap-list li{border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:8px 14px;font-size:var(--t-small);background:var(--surface)}
@media (max-width:820px){.cap{grid-template-columns:1fr}}

/* Work cards */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:1020px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.work-grid{grid-template-columns:1fr}}
.work{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.work:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.work-art{aspect-ratio:16/9;background:var(--surface-2);position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.work-art svg{position:absolute;inset:0;width:100%;height:100%}
.work-art .where{position:absolute;left:16px;top:14px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);background:var(--chip-bg);padding:4px 8px;border-radius:6px}
.work-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.work h3{font-size:1.375rem}
.work .iota{font-size:var(--t-small);color:var(--text-2);margin:0}
.work .iota b{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);font-weight:500;display:block;margin-bottom:2px}
.work .desc{font-size:var(--t-small);color:var(--muted);margin:0}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.metrics div{font-size:.75rem;line-height:1.3;color:var(--muted)}
.metrics strong{display:block;font-family:var(--f-display);font-size:1.375rem;letter-spacing:-.02em;color:var(--text);font-weight:600;line-height:1.1;margin-bottom:2px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-6)}
.filter{min-height:44px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;cursor:pointer;font-weight:500;font-size:.9375rem;transition:background .2s, color .2s, border-color .2s}
.filter:hover{border-color:var(--text)}
.filter[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.work[hidden]{display:none}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stat{padding:28px 24px 8px 0}
.stat + .stat{padding-left:24px;border-left:1px solid var(--line)}
.stat .n{font-family:var(--f-display);font-size:clamp(2.75rem,2rem + 3vw,4.75rem);font-weight:600;letter-spacing:-.04em;line-height:1;display:block}
.stat .l{display:block;margin-top:12px;color:var(--text-2);font-size:var(--t-small);max-width:22ch}
.stat .who{display:block;margin-top:6px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.band-dark .stats{border-top-color:var(--deep-line)}
.band-dark .stat + .stat{border-left-color:var(--deep-line)}
.band-dark .stat .l{color:var(--on-deep-2)}
.band-dark .stat .who{color:var(--on-deep-2)}
.band-dark .stat .n{color:var(--on-deep)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3){padding-left:0;border-left:0}.stat{padding-bottom:24px}}
@media (max-width:420px){.stats{grid-template-columns:1fr}.stat+.stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* Compare table */
.compare{width:100%;border-collapse:collapse;font-size:1rem}
.compare th,.compare td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line-strong)}
.compare td:first-child{color:var(--muted);width:50%}
.compare td:last-child{color:var(--text);font-weight:500;background:linear-gradient(90deg, var(--wash), transparent)}
.compare thead th:last-child{color:var(--accent-text)}
@media (max-width:640px){.compare th,.compare td{padding:14px 10px;font-size:.9375rem}}

/* Process */
.process{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:step;position:relative}
.process li{padding:0 20px 0 0;position:relative}
.process .step-n{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-5)}
.process .step-n .hexn{width:44px;height:50px;display:grid;place-items:center;background:var(--surface);border:0;position:relative;font-family:var(--f-mono);font-size:.8125rem;font-weight:600}
.process .step-n .hexn::before{content:"";position:absolute;inset:0;background:var(--line-strong);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.process .step-n .hexn::after{content:"";position:absolute;inset:1.5px;background:var(--surface);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.process .step-n .hexn span{position:relative;z-index:1}
.process li.is-loop .hexn::after{background:var(--honey)}
.process .step-n .rail{flex:1;height:1px;background:var(--line-strong)}
.process li:last-child .rail{background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}
.process h3{font-size:1.25rem;margin-bottom:var(--s-2)}
.process p{color:var(--text-2);font-size:var(--t-small);margin:0}
.process .when{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2)}
@media (max-width:980px){.process{grid-template-columns:1fr;gap:var(--s-6)}.process li{padding:0;display:grid;grid-template-columns:56px 1fr;gap:var(--s-4)}.process .step-n{margin:0;flex-direction:column}.process .step-n .rail{display:none}}
.band-dark .process .step-n .hexn::after{background:var(--deep-2)}
.band-dark .process .step-n .hexn::before{background:var(--deep-line-strong)}
.band-dark .process li.is-loop .hexn::after{background:var(--honey)}
.process li.is-loop .hexn span{color:var(--on-honey)}
.band-dark .process p{color:var(--on-deep-2)}
.band-dark .process .when{color:var(--on-deep-2)}
.band-dark .process .rail{background:var(--deep-line-strong)}

/* Quote */
.quote{border-left:0;margin:0;padding:clamp(28px,4vw,56px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);position:relative}
.quote .ar{font-family:var(--f-arabic);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);line-height:1.7;direction:rtl;text-align:right;color:var(--text);margin-bottom:var(--s-5)}
.quote blockquote{margin:0;font-family:var(--f-display);font-size:var(--t-d3);line-height:1.25;letter-spacing:-.02em;font-weight:500}
.quote figcaption{margin-top:var(--s-5);font-size:var(--t-small);color:var(--muted)}
.band-dark .quote{background:var(--deep-2);border-color:var(--deep-line)}
.band-dark .quote .ar{color:var(--on-deep)}
.band-dark .quote figcaption{color:var(--on-deep-2)}

/* Principles */
.principle{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(20px,3vw,48px);padding-block:clamp(28px,3.5vw,48px);border-top:1px solid var(--line);align-items:start}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle .ar{font-family:var(--f-arabic);font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);line-height:1.1;color:var(--accent-text);direction:rtl;display:block}
.principle .tr{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-top:10px}
.principle h3{margin-bottom:var(--s-3)}
.principle p{color:var(--text-2);margin:0}
.principle ul{list-style:none}
.principle li{padding:8px 0;border-top:1px dashed var(--line-strong);font-size:var(--t-small);display:flex;gap:10px}
.principle li:first-child{border-top:0;padding-top:0}
.principle li::before{content:"";flex:none;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--leaf);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (max-width:900px){.principle{grid-template-columns:1fr}}
.avoid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.avoid .card .ar{font-family:var(--f-arabic);font-size:1.75rem;color:var(--on-deep-2);direction:rtl;display:block;line-height:1.2;margin-bottom:var(--s-2)}
@media (max-width:960px){.avoid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.avoid{grid-template-columns:1fr}}
.checklist{list-style:none;counter-reset:q}
.checklist li{counter-increment:q;display:grid;grid-template-columns:48px 1fr;gap:var(--s-3);padding:18px 0;border-top:1px solid var(--line);font-size:1.0625rem}
.checklist li::before{content:counter(q, decimal-leading-zero);font-family:var(--f-mono);font-size:.8125rem;color:var(--accent-text);padding-top:4px}
.checklist li:last-child{border-bottom:1px solid var(--line)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);padding:22px 0;font-family:var(--f-display);font-size:1.25rem;font-weight:550;letter-spacing:-.015em;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);position:relative;transition:transform .3s var(--ease), background .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--text);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq details[open] summary .pm{background:var(--honey);border-color:var(--honey)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{padding:0 0 24px;color:var(--text-2);max-width:70ch}
.faq .a p:last-child{margin:0}

/* CTA */
.cta{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-l);background:var(--deep);color:var(--on-deep);padding:clamp(40px,6vw,96px)}
.cta canvas.hive-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cta h2{font-size:var(--t-d1);max-width:14ch}
.cta .lead{color:var(--on-deep-2);margin-top:var(--s-5)}
.cta .btn-row{margin-top:var(--s-7)}
.cta .btn--ghost{--btn-fg:var(--on-deep);border-color:var(--deep-line-strong)}

/* Forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form .full{grid-column:1/-1}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.field label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:8px}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-s);font-size:1rem;transition:border-color .2s, box-shadow .2s;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1712' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:40px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(238,171,68,.35)}
.field .hint{font-size:.8125rem;color:var(--muted);margin-top:6px}
.field input:user-invalid,.field select:user-invalid{border-color:#A23B1F}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent-line{font-size:.875rem;color:var(--muted)}
.form-status{grid-column:1/-1;padding:16px 18px;border-radius:var(--r-s);display:none;font-weight:500}
.form-status.is-ok{display:block;background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-line)}
.form-status.is-err{display:block;background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-line)}

/* Footer */
.site-footer{background:var(--deep);color:var(--on-deep);padding-top:clamp(64px,7vw,112px);margin-top:0}
.site-footer a{text-decoration:none;color:var(--on-deep-2)}
.site-footer a:hover{color:var(--honey-soft)}
.foot-top{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:var(--s-6);padding-bottom:var(--s-8);border-bottom:1px solid var(--deep-line)}
.foot-top .brand{color:var(--on-deep)}
.foot-top .brand .word b{color:var(--honey-soft)}
.foot-top .tagline{font-family:var(--f-display);font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;margin:var(--s-5) 0 var(--s-3);max-width:16ch}
.foot-top p{color:var(--on-deep-2);max-width:40ch;font-size:var(--t-small)}
.foot-col h4{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep-2);margin-bottom:var(--s-4)}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:10px}
.foot-col li a,.foot-col li button{font-size:var(--t-small);padding:4px 0;display:inline-block}
.foot-col button{background:none;border:0;color:var(--on-deep-2);cursor:pointer;padding:0;text-align:left}
.foot-col button:hover{color:var(--honey-soft)}
@media (max-width:900px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-top>div:first-child{grid-column:1/-1}}
.ask-ai{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6);align-items:center;padding-block:var(--s-7);border-bottom:1px solid var(--deep-line)}
.ask-ai h4{font-family:var(--f-display);font-size:1.375rem;letter-spacing:-.015em;font-weight:600}
.ask-ai p{margin:6px 0 0;color:var(--on-deep-2);font-size:var(--t-small)}
.ai-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ai-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--deep-line-strong);color:var(--on-deep)!important;font-weight:500;font-size:.9375rem;transition:background .25s,border-color .25s}
.ai-link:hover{background:var(--deep-wash);border-color:var(--honey)}
.ai-link svg{width:16px;height:16px}
@media (max-width:860px){.ask-ai{grid-template-columns:1fr}.ai-links{justify-content:flex-start}}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-6);font-size:.8125rem;color:var(--on-deep-2)}
.foot-bottom .markets{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}

/* Cookie consent */
.cookie{position:fixed;left:var(--s-4);bottom:var(--s-4);z-index:300;width:min(440px, calc(100vw - 32px));background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-l);
  box-shadow:var(--shadow-strong);padding:22px;opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.cookie.is-open{opacity:1;transform:none;visibility:visible}
.cookie h2{font-size:1.25rem;letter-spacing:-.015em;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cookie h2 svg{width:22px;height:22px}
.cookie p{font-size:.9375rem;color:var(--text-2);margin:0 0 14px}
.cookie .btn-row{gap:8px}
.cookie .btn{min-height:44px;padding:10px 16px;font-size:.9375rem}
.cookie-prefs{display:none;margin:4px 0 14px;border-top:1px solid var(--line)}
.cookie.show-prefs .cookie-prefs{display:block}
.pref{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.pref strong{display:block;font-size:.9375rem}
.pref span{font-size:.8125rem;color:var(--muted)}
.switch{position:relative;flex:none;width:46px;height:28px}
.switch input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--line-strong);transition:background .2s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.switch input:checked + i{background:var(--text)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:disabled + i{background:var(--leaf);opacity:.7}
.switch input:focus-visible + i{outline:2px solid var(--honey);outline-offset:2px}

/* Reveal (only when JS is on) */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* Misc */
.divider-cells{display:flex;gap:6px;align-items:center;justify-content:center;margin-block:var(--s-7)}
.divider-cells i{width:9px;height:10px;background:var(--line-strong);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.divider-cells i:nth-child(2){background:var(--honey)}
.prose{max-width:70ch}
.prose h2{font-size:var(--t-d3);margin:2em 0 .6em}
.prose h3{font-size:1.25rem;margin:1.6em 0 .5em}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose p,.prose li{color:var(--text-2)}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:760px){.kv{grid-template-columns:1fr}}
.kv div{border-top:1px solid var(--line);padding-top:var(--s-4)}
.kv dt{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kv dd{margin:0;font-weight:500}
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center}
.notfound h1{font-size:var(--t-d1);margin:0 auto var(--s-4);max-width:14ch}

/* Linked cards & variants */
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover{color:inherit}
a.card h3::after{content:" →";opacity:0;transition:opacity .25s var(--ease)}
a.card:hover h3::after{opacity:1}
.card--honey{background:var(--honey);border-color:var(--honey)}
.card--honey,.card--honey p,.card--honey .num,.card--honey h3{color:var(--on-honey)}
.card--honey:hover{border-color:var(--on-honey)}
.cookie-save{display:none!important;margin-top:8px}
.cookie.show-prefs .cookie-save{display:flex!important}

/* Fixes */
.band-dark .loop-col--human .tag{background:rgba(18,33,28,.1);color:var(--on-honey);border-color:transparent}
.band-dark .loop-col--human h3{color:var(--on-honey)}
.process .step-n .hexn{background:transparent}
.card .num{text-transform:uppercase}
.foot-top p.tagline{color:var(--on-deep)}
.principle .ar,.avoid .card .ar{text-align:left}

/* IOTA logo */
.brand svg{width:auto;height:30px;display:block}
.site-header .brand{color:var(--text)}
.foot-top .brand{color:var(--on-deep)}
.foot-top .brand svg{height:34px}
.eyebrow .cell{width:16px;height:6px;border-radius:3px;clip-path:none}
.marquee-item::after{width:14px;height:6px;border-radius:3px;clip-path:none}

/* ---------- Theme ---------- */
body{transition:background-color .35s var(--ease), color .35s var(--ease)}
.hive-field{--fd:var(--field-dot);--fe:var(--field-edge);--fg2:var(--field-glow)}
.hive-field[data-tone="dark"],.band-dark .hive-field{--fd:var(--deep-field-dot);--fe:var(--deep-field-edge);--fg2:var(--deep-field-glow)}
.theme-btn{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s var(--ease), transform .25s var(--ease)}
.theme-btn:hover{border-color:var(--text)}
.theme-btn svg{width:18px;height:18px}
.theme-btn svg:nth-child(2){display:none}
:root[data-theme="dark"] .theme-btn svg:nth-child(1){display:none}
:root[data-theme="dark"] .theme-btn svg:nth-child(2){display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn svg:nth-child(1){display:none}
  :root:not([data-theme="light"]) .theme-btn svg:nth-child(2){display:block}
}
.triad .glyph,.work-art,.demo-art{color:var(--text)}
.loop-join{color:var(--on-deep-2)}
.cookie h2 svg{color:var(--text)}
.switch input:checked + i{background:var(--leaf)}
.field select{background-image:var(--select-arrow)}
:root{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2312211C' stroke-width='1.5'/%3E%3C/svg%3E")}
:root[data-theme="dark"]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EEF2EC' stroke-width='1.5'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EEF2EC' stroke-width='1.5'/%3E%3C/svg%3E")}}
.field select option{background:var(--surface);color:var(--text)}
@media (max-width:980px){.nav-cta{gap:8px}}

/* Project images */
.work-art img{position:absolute;inset:0;width:100%;height:100%;display:block}
.work-art--photo img{object-fit:cover}
.work-art--logo{background:#FFFFFF}
.work-art--logo .where{background:rgba(255,255,255,.9);color:#3B4A44}

/* Archive */
.archive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:960px){.archive{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.archive{grid-template-columns:1fr}}
.archive-tile{margin:0;display:flex;flex-direction:column;gap:14px}
.archive-img{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.archive-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.archive-tile:hover .archive-img img{transform:scale(1.03)}
.archive-tile figcaption{display:flex;flex-direction:column;gap:4px;font-size:var(--t-small);color:var(--text-2)}
.archive-tile figcaption strong{font-family:var(--f-display);font-size:1.25rem;font-weight:600;letter-spacing:-.015em;color:var(--text)}
@media (prefers-reduced-motion:reduce){.archive-tile:hover .archive-img img{transform:none}}
.work-art--logo img{object-fit:contain;padding:9% 18%;box-sizing:border-box}

/* ---------- Audit modal (opens from every "Book an audit" button) ---------- */
.has-modal{overflow:hidden}
.audit-modal{padding:0;border:0;background:transparent;color:var(--text);width:100%;max-width:min(1040px,calc(100vw - 32px));max-height:none;overflow:visible;margin:auto}
.audit-modal::backdrop{background:rgba(6,16,13,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.am-panel{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-l);overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
.am-side{position:relative;overflow:hidden;isolation:isolate;background:var(--deep);color:var(--on-deep);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;gap:18px}
.am-side .eyebrow{color:var(--on-deep-2);margin:0}
.am-side h2{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);max-width:11ch;outline:none}
.am-steps{list-style:none;counter-reset:am;margin-top:4px}
.am-steps li{counter-increment:am;display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:12px 0;border-top:1px solid var(--deep-line);color:var(--on-deep-2);font-size:.9375rem;line-height:1.5}
.am-steps li::before{content:counter(am,decimal-leading-zero);font-family:var(--f-mono);font-size:.75rem;color:var(--honey-soft);padding-top:3px}
.am-steps b{color:var(--on-deep);font-weight:600}
.am-mail{margin:0;font-size:.875rem;color:var(--on-deep-2)}
.am-mail a{color:var(--on-deep)}
.am-side .skep-bars{order:9;margin-top:auto;width:46px;height:auto}
.am-side .am-mail{order:10}
.skep-bars .b{fill:var(--honey)}
.am-main{padding:clamp(24px,3vw,40px);padding-top:clamp(56px,4vw,64px);max-height:calc(100dvh - 34px);overflow-y:auto;overscroll-behavior:contain}
.am-main .form{gap:14px 16px}
.am-main .field label{margin-bottom:6px}
.am-main .field input,.am-main .field select{min-height:46px;padding-block:10px}
.am-main .field textarea{min-height:104px}
.am-close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease),border-color .25s var(--ease)}
.am-close:hover{border-color:var(--text);transform:rotate(90deg)}
.am-close svg{width:16px;height:16px}
.am-done{min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;outline:none}
.am-done[hidden]{display:none}
.am-done .skep-bars{width:56px;height:auto;margin-bottom:6px}
.am-done h3{font-size:var(--t-d2)}
.am-done p{color:var(--text-2);max-width:42ch;margin:0}
.am-done .btn-row{margin-top:10px}
.audit-modal[open] .am-panel{animation:am-in .5s var(--ease) both}
.audit-modal[open]::backdrop{animation:am-fade .35s ease both}
.audit-modal.is-closing .am-panel{animation:am-out .22s ease both}
.audit-modal.is-closing::backdrop{animation:am-fade-out .22s ease both}
.audit-modal[open] .skep-bars .b,.audit-modal.is-done .am-done .skep-bars .b{transform-box:fill-box;transform-origin:center;animation:bar-in .7s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes am-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes am-out{to{opacity:0;transform:translateY(12px) scale(.99)}}
@keyframes am-fade{from{opacity:0}}
@keyframes am-fade-out{to{opacity:0}}
@keyframes bar-in{from{transform:scaleX(.15);opacity:0}to{transform:none;opacity:1}}
.form.is-sending{opacity:.7;pointer-events:none;transition:opacity .2s}
@media (max-width:820px){
  .audit-modal{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;margin:0}
  .am-panel{display:block;border-radius:0;border:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .am-side{padding:22px 76px 22px var(--gutter);gap:10px}
  .am-side h2{font-size:1.75rem;max-width:none}
  .am-steps,.am-mail{display:none}
  .am-side .skep-bars{display:none}
  .am-main{padding:22px var(--gutter) 32px;max-height:none;overflow:visible}
  .am-close{top:14px;right:var(--gutter);background:var(--deep-2);color:var(--on-deep);border-color:var(--deep-line-strong)}
  .am-done{min-height:50vh}
}
@media (prefers-reduced-motion:reduce){
  .audit-modal[open] .am-panel,.audit-modal[open]::backdrop,.audit-modal .skep-bars .b{animation:none!important}
}

/* ==========================================================================
   v3 · "The comb, offset"
   Honeycomb rows never line up square: every other row shifts half a cell.
   The layouts below borrow that: staggered columns, overlaps, cascades and
   off-grid numerals, so pages read as a living comb rather than a spreadsheet.
   ========================================================================== */

/* ---------- Off-grid section numerals ---------- */
.sec{position:relative;isolation:isolate;overflow-x:clip}
.sec-num{position:absolute;top:clamp(20px,4vw,48px);right:-.03em;z-index:-1;font-family:var(--f-display);font-weight:700;
  font-size:clamp(6.5rem,3.5rem + 14vw,17rem);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.2px var(--line-strong);
  opacity:.55;pointer-events:none;user-select:none;translate:0 var(--py,0px)}
.sec-num--l{right:auto;left:-.03em}
.band-dark .sec-num{-webkit-text-stroke-color:var(--deep-line-strong)}
@media (max-width:640px){.sec-num{display:none}}

/* ---------- Hero: copy left, results float right ---------- */
.hero--v3{padding-block:clamp(44px,6vw,96px) clamp(48px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.hero-title{grid-column:1 / -1;grid-row:1}
.hero-copy{grid-column:1;grid-row:2;padding-top:clamp(24px,3vw,40px)}
.hero--v3 .hero-copy .lead{margin-top:0}
.hero--v3 .hero-copy .btn-row{margin-top:var(--s-6)}
.hero--v3 h1{max-width:none;font-size:clamp(2.75rem,1.2rem + 6vw,7rem);line-height:.98}
.lines .ln{display:block}
.ln--in{padding-left:clamp(0px,9vw,1.6em)}
.hero-float{grid-column:2;grid-row:2;position:relative;list-style:none;min-height:400px;margin-top:clamp(12px,2vw,28px)}
.hero--v3 .hero-meta{grid-column:1 / -1;grid-row:3;max-width:none;margin-top:clamp(32px,4vw,56px);justify-content:flex-start;gap:var(--s-3) clamp(24px,5vw,72px)}
.hero--v3 .hero-meta div:nth-child(2){margin-left:auto}
.fc{position:absolute;width:min(260px,82%);translate:0 var(--py,0px)}
.fc-in{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px 16px;
  box-shadow:0 30px 60px -30px rgba(var(--shadow-rgb),.45);rotate:var(--rot,0deg)}
.fc--1{top:0;left:12%;--rot:-4deg}
.fc--2{top:30%;right:-1%;--rot:3deg}
.fc--3{top:62%;left:0;--rot:-1.5deg}
.fc--2 .fc-in{background:var(--honey);border-color:var(--honey);color:var(--on-honey)}
.fc-n{font-family:var(--f-display);font-weight:600;font-size:clamp(2.2rem,1.6rem + 1.4vw,3rem);letter-spacing:-.045em;line-height:1}
.fc-l{font-size:.9375rem;color:var(--text-2);margin-top:4px}
.fc-who{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.fc--2 .fc-l,.fc--2 .fc-who{color:var(--on-honey)}
.fc--1 .fc-in::before{content:"";position:absolute;top:16px;right:16px;width:16px;height:6px;border-radius:3px;background:var(--honey)}
.fc-in{position:relative}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-float{grid-column:1;grid-row:3;min-height:0;display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
  .hero--v3 .hero-meta{grid-row:4}
  .fc{position:static;width:auto;flex:1 1 150px;translate:none}
  .fc--1{--rot:-1.5deg}.fc--2{--rot:1.5deg}.fc--3{--rot:-1deg}
  .fc-in{padding:14px 16px}
  .hero--v3 .hero-meta div:nth-child(2){margin-left:0}
}

/* ---------- Brand ribbon: the marquee, tilted ---------- */
.ribbon{overflow:hidden;padding-block:clamp(16px,3vw,40px)}
.ribbon .marquee{rotate:-2deg;margin-inline:-6vw;background:var(--deep);border:1px solid var(--deep-line);padding-block:20px;box-shadow:0 24px 48px -28px rgba(var(--shadow-rgb),.55)}
.ribbon .marquee-item{color:var(--on-deep)}
@media (max-width:640px){.ribbon .marquee{rotate:-3deg;padding-block:14px}.ribbon .marquee-item{font-size:1.125rem}}

/* ---------- 01 · The leak: a cascade beside a sticky heading ---------- */
.leak-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.leak-head{position:sticky;top:112px}
.leak-head .lead{margin-top:var(--s-5)}
.leak{list-style:none;padding-top:clamp(0px,7vw,112px)}
.leak li{position:relative;max-width:520px;margin-left:calc(var(--i) * 9%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 24px 64px;box-shadow:var(--shadow)}
.leak li + li{margin-top:26px}
.leak .dot{position:absolute;left:24px;top:28px;font-family:var(--f-mono);font-size:var(--t-micro);color:var(--accent-text)}
.leak h3{font-size:1.25rem;margin-bottom:6px}
.leak p{margin:0;color:var(--text-2)}
.leak li:not(:last-child)::after{content:"";position:absolute;right:30%;bottom:-20px;width:9px;height:10px;background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:0}
.leak li.is-in:not(:last-child)::after{animation:cell-fall 3.2s var(--ease) .6s 3}
@keyframes cell-fall{0%{opacity:0;transform:translateY(-8px) scale(.6)}25%{opacity:1;transform:none}75%{opacity:1;transform:translateY(4px)}100%{opacity:0;transform:translateY(10px) scale(.8)}}
@media (max-width:900px){
  .leak-wrap{grid-template-columns:1fr}
  .leak-head{position:static}
  .leak{padding-top:0}
  .leak li{margin-left:calc(var(--i) * 4%)}
}

/* ---------- 02 · Why a hive: three cells, the middle one offset ---------- */
.comb3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);padding-bottom:88px}
.comb-cell{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(24px,3vw,40px)}
.comb-cell:nth-child(2){translate:0 88px}
.comb-cell .glyph{height:72px;margin-bottom:var(--s-6);color:var(--text)}
.comb-cell .glyph svg{height:72px;width:auto}
.comb-cell .kicker{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s-3);display:block}
.comb-cell h3{margin-bottom:var(--s-2)}
.comb-cell p{color:var(--text-2);margin:0}
@media (max-width:860px){
  .comb3{grid-template-columns:1fr;padding-bottom:0}
  .comb-cell:nth-child(2){translate:none;margin-left:8%}
  .comb-cell:nth-child(odd){margin-right:8%}
}

/* ---------- 03 · AI and people: two cards that overlap ---------- */
.loop-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);align-items:start}
.loop-stage .loop-col--ai{grid-column:1/8;grid-row:1;background:var(--deep-2)}
.loop-stage .loop-col--ai ul{padding-right:calc((100% + 24px) / 7 + 12px)}
.loop-stage .loop-col--human{grid-column:7/13;grid-row:1;margin-top:clamp(80px,9vw,136px);position:relative;z-index:2;box-shadow:0 44px 90px -40px rgba(0,0,0,.7)}
.loop-stage .loop-col--human .loop-join{position:absolute;top:-30px;left:-30px;width:60px;height:60px;border-radius:50%;background:var(--deep);border:1px solid var(--deep-line-strong);
  display:grid;place-items:center;color:var(--on-deep-2);transform:none}
.loop-stage .loop-col--human .loop-join svg{width:42px;height:42px}
.loop-stage .pledge{grid-column:1/8;grid-row:2;margin-top:var(--s-7)}
@media (max-width:860px){
  .loop-stage{display:flex;flex-direction:column}
  .loop-stage .loop-col--ai{margin-right:6%}
  .loop-stage .loop-col--ai ul{padding-right:0}
  .loop-stage .loop-col--human{margin:-18px 0 0 6%}
  .loop-stage .loop-col--human .loop-join{top:-26px;left:auto;right:20px;width:52px;height:52px}
}

/* ---------- 04 · Capabilities: a bento comb ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.bento .card{--pad:clamp(22px,2.4vw,32px);padding:var(--pad);display:flex;flex-direction:column}
.b-growth{grid-column:1/6;grid-row:1/3;overflow:hidden}
.b-content{grid-column:6/10;grid-row:1}
.b-build{grid-column:10/13;grid-row:1/3}
.b-brand{grid-column:6/10;grid-row:2}
.b-revops{grid-column:1/8;grid-row:3}
.b-cta{grid-column:8/13;grid-row:3}
.b-growth h3{font-size:var(--t-d3)}
.b-growth p{max-width:40ch}
.b-art{position:relative;height:220px;margin:auto calc(-1 * var(--pad)) calc(-1 * var(--pad));color:var(--text)}
.b-art svg{position:absolute;inset:0;width:100%;height:100%}
.b-glyph{margin-top:auto;padding-top:32px;color:var(--text)}
.b-glyph svg{width:120px;height:auto}
.b-revops p{max-width:56ch}
@media (max-width:1020px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-growth{grid-column:1;grid-row:1/3}.b-content{grid-column:2;grid-row:1}.b-brand{grid-column:2;grid-row:2}
  .b-build{grid-column:1;grid-row:3}.b-revops{grid-column:2;grid-row:3}.b-cta{grid-column:1/-1;grid-row:4}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bento .card{grid-column:1!important;grid-row:auto!important}
  .b-art{height:150px}
  .b-glyph{display:none}
}

/* ---------- 05 · Featured work: wide and single cards zig-zag ---------- */
/* Each row pairs a wide (horizontal) card with a single (vertical) one. Rows stretch,
   so the pair always shares one height and no gap opens between pairs. */
.work-feature{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);align-items:stretch;grid-auto-flow:row dense}
.work{position:relative;isolation:isolate}
.work--wide{grid-column:span 2;flex-direction:row}
.work--wide .work-art{flex:0 0 54%;aspect-ratio:auto;min-height:320px;border-bottom:0;border-right:1px solid var(--line)}
.work--rev{flex-direction:row-reverse}
.work--rev .work-art{border-right:0;border-left:1px solid var(--line)}
.work--wide h3{font-size:var(--t-d3)}
.work--wide .work-body{justify-content:center;padding:clamp(24px,2.6vw,36px)}
.work-feature-more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
@media (max-width:1020px){
  .work-feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work--wide,.work--rev{grid-column:auto;flex-direction:column}
  .work--wide .work-art{flex:none;aspect-ratio:16/9;min-height:0;border:0;border-bottom:1px solid var(--line)}
  .work--wide h3{font-size:1.375rem}
  .work--wide .work-body{justify-content:flex-start;padding:22px 22px 24px}
}
@media (max-width:700px){.work-feature{grid-template-columns:1fr}}
/* ---------- 06 · Proof: numbers rise ---------- */
.stats--rise{align-items:end;border-top:0;border-bottom:1px solid var(--line-strong)}
.stats--rise .stat{position:relative;padding-bottom:calc(var(--h) * 38px + 32px)}
.stats--rise .stat::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:calc(var(--h) * 38px + 10px);border-radius:10px 10px 0 0;
  background:linear-gradient(to bottom,var(--honey) 0 5px,var(--wash) 5px);transform-origin:bottom;transition:transform 1s var(--ease);transition-delay:calc(var(--d,0ms) + 250ms)}
.stats--rise .stat:first-child::after{left:0}
.js .stats--rise .stat:not(.is-in)::after{transform:scaleY(0)}
@media (max-width:860px){.stats--rise .stat{padding-bottom:calc(var(--h) * 16px + 28px)}.stats--rise .stat::after{height:calc(var(--h) * 16px + 8px)}.stats--rise .stat:nth-child(3)::after{left:0}}
@media (max-width:420px){.stats--rise .stat::after{left:0}}

/* ---------- 07 · Boutique: them and us, overlapping ---------- */
.versus{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);align-items:start;padding-bottom:16px}
.vs{border-radius:var(--r-l);padding:clamp(24px,3vw,44px)}
.vs ul{list-style:none}
.vs li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.vs-title{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin-bottom:var(--s-4);line-height:1.4}
.vs--them{grid-column:1/8;grid-row:1;background:var(--surface);border:1px solid var(--line);rotate:-1.5deg;padding-right:calc((100% + 24px) / 7 * 2 + 20px)}
.vs--them .vs-title{color:var(--muted)}
.vs--them li{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong);text-decoration-thickness:1px}
.vs--them li::before{content:"";flex:none;width:10px;height:1.5px;margin-top:12px;background:var(--line-strong)}
.vs--us{grid-column:6/13;grid-row:1;margin-top:clamp(56px,7vw,104px);position:relative;z-index:2;background:var(--deep);color:var(--on-deep);border:1px solid var(--deep-line);
  rotate:1deg;box-shadow:0 44px 90px -40px rgba(var(--shadow-rgb),.7)}
.vs--us .vs-title{color:var(--honey-soft)}
.vs--us li{border-top-color:var(--deep-line);font-weight:500;font-size:1.0625rem}
.vs--us li::before{content:"";flex:none;margin-top:10px;width:14px;height:6px;border-radius:3px;background:var(--honey)}
@media (max-width:860px){
  .versus{display:block}
  .vs--them{rotate:-1deg;margin-right:5%;padding-right:clamp(24px,3vw,44px)}
  .vs--us{margin:-22px 0 0 5%;rotate:.8deg}
}

/* ---------- 08 · Principles: the quote rests on a honey cell ---------- */
@media (min-width:901px){
  .split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split--rev > :first-child{order:2}
}
.quote-stack{position:relative;padding:0 26px 26px 0}
.quote-stack::before{content:"";position:absolute;inset:30px 0 0 30px;background:var(--honey);border-radius:var(--r-l);rotate:2.5deg}
.quote-stack .quote{position:relative;box-shadow:var(--shadow-strong)}

/* ---------- Sticky headings beside long lists ---------- */
.sticky-head{position:sticky;top:112px}
@media (max-width:900px){.sticky-head{position:static}}

/* ---------- 09 · Process: a zig-zag path, steps 4 and 5 looping ---------- */
@media (min-width:981px){
  .process--zig li:nth-child(even){padding-top:120px}
  .process--zig li:not(:last-child) .rail{display:none}
  /* odd step (high) → right, then down to the next hex; even step (low) → up, then right. Both stay in the band above the low steps. */
  .process--zig li:not(:last-child)::before{content:"";position:absolute;top:25px;height:87px;border:0 solid var(--line-strong);
    transition:clip-path 1s var(--ease);transition-delay:calc(var(--d,0ms) + 300ms)}
  .process--zig li:nth-child(odd):not(:last-child)::before{left:52px;width:calc(100% - 30px);border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:16px}
  .process--zig li:nth-child(even)::before{left:22px;width:calc(100% - 30px);border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:16px}
  .js .process--zig li:nth-child(even):not(.is-in)::before{clip-path:inset(100% 0 0 0)}
  .process--zig li.is-loop:not(:last-child)::before{border-color:var(--honey);border-style:dashed}
  .js .process--zig li:not(.is-in)::before{clip-path:inset(0 100% 0 0)}
  .band-dark .process--zig li::before{border-color:var(--deep-line-strong)}
  .band-dark .process--zig li.is-loop::before{border-color:var(--honey)}
}
@media (max-width:980px){.process--zig li:nth-child(even){margin-left:clamp(12px,5vw,40px)}}

/* ---------- CTA: the skep fills itself ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center}
.cta-skep{width:clamp(120px,15vw,220px);height:auto;margin-right:clamp(0px,3vw,48px)}
.cta-skep .b{transform-box:fill-box;transform-origin:center}
.js .cta:not(.is-in) .cta-skep .b{transform:scaleX(0)}
.cta-skep .b{transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 90ms + 250ms)}
.cta.is-in .cta-skep .b{animation:bar-breathe 6s ease-in-out infinite;animation-delay:calc(var(--i) * .4s + 1.8s)}
@keyframes bar-breathe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.84)}}
@media (max-width:760px){
  .cta{grid-template-columns:1fr}
  .cta-skep{position:absolute;top:28px;right:24px;width:56px;margin:0}
  .cta h2{padding-right:56px}
}

/* ---------- Inner pages ---------- */
@media (min-width:900px){
  .page-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px)}
  .page-hero .wrap > *{grid-column:1 / -1}
  .page-hero .wrap > h1{grid-column:1}
  .page-hero .wrap > .lead{grid-column:2;grid-row:3;margin-top:var(--s-5)}
}
@media (min-width:961px){
  .g-3.comb{padding-bottom:56px}
  .g-3.comb > :nth-child(3n+2){translate:0 56px}
  .archive{padding-bottom:48px}
  .archive > :nth-child(3n+2){translate:0 48px}
}
@media (min-width:821px){
  .cap:nth-child(even){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .cap:nth-child(even) .cap-title{order:2}
}
.cap-title .num{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(3.5rem,2.4rem + 3vw,6rem);line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px var(--accent-text)}
@media (min-width:901px){
  .principle:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}
  .principle:nth-child(even) > :first-child{order:3;text-align:right}
  .principle:nth-child(even) .ar{text-align:right}
}
.work-grid.is-comb{padding-bottom:56px}
.work-grid.is-comb > .work.is-mid{translate:0 56px}

/* ==========================================================================
   Motion. Small, purposeful, and off when a visitor asks for reduced motion.
   ========================================================================== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:var(--honey);transform-origin:left center;transform:scaleX(var(--p,0))}

/* Reveal variants */
.js [data-reveal="left"]{transform:translateX(-32px)}
.js [data-reveal="right"]{transform:translateX(32px)}
.js [data-reveal="scale"]{transform:scale(.94)}

/* Hero headline: lines rise, then the rest follows */
.js .lines .ln{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.js .lines .ln > span{display:inline-block;transform:translateY(110%);animation:ln-up 1s var(--ease) forwards}
.js .lines .ln + .ln > span{animation-delay:.12s}
.js .hero--v3 .hero-title .eyebrow,.js .hero--v3 .hero-copy > *,.js .hero--v3 .hero-meta{animation:rise .9s var(--ease) both;animation-delay:.35s}
.js .hero--v3 .hero-title .eyebrow{animation-delay:0s}
.js .hero--v3 .hero-copy > .btn-row{animation-delay:.48s}
.js .hero--v3 .hero-meta{animation-delay:.6s}
.js .hero-float .fc{animation:fc-in 1s var(--ease) both}
.js .hero-float .fc--1{animation-delay:.55s}.js .hero-float .fc--2{animation-delay:.7s}.js .hero-float .fc--3{animation-delay:.85s}
.fc-in{animation:fc-float 8s ease-in-out infinite}
.fc--2 .fc-in{animation-delay:-2.6s}.fc--3 .fc-in{animation-delay:-5.2s}
@keyframes ln-up{to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fc-in{from{opacity:0;scale:.9}}
@keyframes fc-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Header settles into a slimmer bar once you scroll */
.nav{transition:min-height .35s var(--ease)}
.site-header.is-scrolled .nav{min-height:62px}
@media (max-width:980px){.site-header.is-scrolled ~ .mobile-menu{inset:62px 0 0 0}}

/* Buttons: magnetic pull, a honey sweep on ghost buttons, a sheen on honey, a press */
.btn{position:relative;isolation:isolate;overflow:hidden;translate:var(--tx,0px) var(--ty,0px);
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), translate .35s var(--ease), scale .15s var(--ease)}
.btn.is-magnet{transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), translate .08s linear, scale .15s var(--ease)}
.btn:active{scale:.97}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--honey);transform:scaleX(0);transform-origin:right center;transition:transform .45s var(--ease)}
.btn--ghost:hover::before{transform:scaleX(1);transform-origin:left center}
.btn--ghost:hover,.band-dark .btn--ghost:hover,.cta .btn--ghost:hover{--btn-fg:var(--on-honey);border-color:var(--honey)}
.btn--honey::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-120%)}
.btn--honey:hover::before{transform:translateX(120%);transition:transform .8s var(--ease)}
.theme-btn,.filter{transition:border-color .25s var(--ease), background .25s, color .25s, scale .15s var(--ease)}
.theme-btn:active,.filter:active{scale:.94}
.theme-btn svg{transition:rotate .5s var(--ease)}
.theme-btn:hover svg{rotate:25deg}

/* Card spotlight follows the cursor */
.spot{isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(238,171,68,.18),transparent 60%)}
.spot:hover::before{opacity:1}
.card--honey.spot::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 60%)}
.band-dark .spot::before,.vs--us.spot::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(238,171,68,.14),transparent 60%)}
.comb-cell,.leak li{transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), opacity var(--dur) var(--ease)}
.comb-cell:hover,.leak li:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.work-art img{transition:transform .8s var(--ease)}
.work:hover .work-art img{transform:scale(1.035)}

@media (prefers-reduced-motion:reduce){
  .js .lines .ln > span,.js .hero--v3 .hero-copy > *,.js .hero--v3 .hero-title .eyebrow,.js .hero--v3 .hero-meta,.js .hero-float .fc,.fc-in,.leak li::after,.cta.is-in .cta-skep .b{animation:none!important;transform:none!important;opacity:1}
  .js [data-reveal="left"],.js [data-reveal="right"],.js [data-reveal="scale"]{transform:none}
  .stats--rise .stat::after,.cta-skep .b,.process--zig li::before{transition:none!important;transform:none!important;clip-path:none!important}
  .btn,.btn::before{transition:none!important}
  .btn--honey::before{display:none}
  .work:hover .work-art img{transform:none}
  .sec-num,.fc{translate:none!important}
}
/* keep hero copy legible where the hive field gathers behind it */
.page-hero .lead,.hero--v3 .lead{text-shadow:0 0 14px var(--bg),0 0 4px var(--bg)}

/* ==========================================================================
   v4 · Eyebrow: a hairline runs into one honey bar, label at the right edge
   (matches the social templates in the design system)
   ========================================================================== */
.eyebrow{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:0;margin:0 0 var(--s-5)}
.eyebrow::before{content:"";flex:1 1 32px;min-width:32px;height:1px;background:var(--line-strong)}
.eyebrow .cell{flex:none;width:16px;height:6px;border-radius:3px;clip-path:none;background:var(--honey);margin-right:10px}
.eyebrow .eb-t{flex:0 1 auto;min-width:0;text-align:right}
.band-dark .eyebrow::before,.cta .eyebrow::before,.am-side .eyebrow::before,.site-footer .eyebrow::before{background:var(--deep-line-strong)}

/* ==========================================================================
   v4 · Principles: the hive at work (home, section 08)
   Small honey iotas visit four principles, fly home to the skep and fill the comb.
   ========================================================================== */
.bee-wrap{position:relative;padding:0 26px 26px 0}
.bee-wrap::before{content:"";position:absolute;inset:30px 0 0 30px;background:var(--honey);border-radius:var(--r-l);rotate:2.5deg}
.bee-stage{position:relative;aspect-ratio:5 / 4;min-height:380px;border-radius:var(--r-l);background:var(--deep);border:1px solid var(--deep-line);overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-strong);color:var(--on-deep)}
.bee-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 68% 55%,rgba(238,171,68,.10),transparent 70%)}
.bee-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.bee-skep{position:absolute;left:68%;top:50%;height:36%;width:auto;translate:-50% -50%;z-index:1;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25));transition:scale .35s var(--ease)}
.bee-skep.is-pulse{scale:1.04}
.bee-skep .b{fill:var(--honey)}
.bee-comb{position:absolute;left:5%;bottom:6%;width:40%;height:auto;z-index:1;overflow:visible}
.bee-comb .cc{fill:transparent;stroke:var(--deep-line-strong);stroke-width:1.5;transition:fill .9s var(--ease),stroke .9s var(--ease)}
.bee-comb .cc.is-full{fill:var(--honey);stroke:var(--honey)}
.bee-comb .cc.is-new{animation:cell-glow 1.2s var(--ease)}
@keyframes cell-glow{0%{filter:drop-shadow(0 0 0 rgba(245,198,115,0))}35%{filter:drop-shadow(0 0 10px rgba(245,198,115,.9))}100%{filter:drop-shadow(0 0 0 rgba(245,198,115,0))}}
.bee-flower{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep-2);
  padding:8px 12px;border-radius:999px;border:1px solid var(--deep-line-strong);background:rgba(16,51,43,.55);transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.bee-flower i{width:8px;height:9px;background:var(--on-deep-2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .4s var(--ease)}
.bee-flower.is-lit{color:var(--on-deep);border-color:var(--honey);background:rgba(238,171,68,.12)}
.bee-flower.is-lit i{background:var(--honey)}
.bf-1{left:5%;top:7%}
.bf-2{right:5%;top:15%}
.bf-3{left:5%;top:34%}
.bf-4{right:5%;bottom:7%}
@media (max-width:900px){.bee-wrap{margin-top:var(--s-6)}}
@media (max-width:560px){
  .bee-stage{aspect-ratio:auto;height:420px;min-height:0}
  .bee-skep{left:70%;top:56%;height:28%}
  .bee-comb{width:52%;bottom:5%}
  .bf-2{top:17%}
  .bf-3{top:30%}
  .bee-flower{font-size:.625rem;padding:7px 10px}
}

/* Footer social links */
.socials{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.socials a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--deep-line-strong);
  color:var(--on-deep)!important;font-size:.9375rem;font-weight:500;transition:background .25s var(--ease),border-color .25s var(--ease)}
.socials a:hover{background:var(--deep-wash);border-color:var(--honey)}
.socials svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.socials a:hover svg{transform:translate(2px,-2px)}