/* Self-hosted: the Google stylesheet was render-blocking and cost two DNS
   lookups plus two TLS handshakes before a glyph could render. Inter is the
   variable font, so one file covers 400-900. Latin subsets only - unicode-range
   means latin-ext is fetched only if a glyph actually needs it. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(sosai-fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(sosai-fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(sosai-fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(sosai-fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(sosai-fonts/inter-400-900-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:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(sosai-fonts/inter-400-900-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}

:root{
  --gold:#E2B92F;
  --gold-soft:#F0CB4A;   /* brand gold, lifted - hover/active on dark */
  --gold-ink:#7A6310;    /* brand gold, darkened for LIGHT grounds. #E2B92F is
                            1.87:1 on white, so a darker companion is required.
                            The previous value #9A7D14 was eyeballed and landed
                            at 3.95 - short of AA. This clears 4.5 on white,
                            paper, and both gold-tinted badge backgrounds. */
  --dark:#000000;
  --ink:#151515;
  --white:#FFFFFF;
  --paper:#F6F4EF;
  --grey:#8A8A8A;
  --panel:#232323;
  --line-d:#333030;
  --line-l:#DCD7CC;
  --pos:#2E7D4F;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{width:100%;overflow-x:hidden;scroll-padding-top:88px}
body{width:100%;overflow-x:clip}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--dark);color:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.band{padding:104px 0}
.band-dark{background:var(--dark);color:var(--white)}
.band-light{background:var(--paper);color:var(--ink)}
.band-gold{background:var(--gold);color:var(--ink)}
h1,h2,h3{line-height:1.14;font-weight:900;letter-spacing:-.022em}
a{color:inherit;text-decoration:none}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.band-dark .eyebrow{color:var(--gold)}
.band-light .eyebrow{color:var(--gold-ink)}
h2.sec{font-size:clamp(1.9rem,4.2vw,2.75rem);max-width:24ch}
.lead{font-size:1.1rem;max-width:62ch;margin-top:22px}
.band-dark .lead{color:#CFCBC4}
.band-light .lead{color:#4A4640}

.btn{display:inline-block;padding:16px 32px;border-radius:2px;font-weight:800;font-size:.94rem;background:var(--gold);color:var(--ink);transition:background .15s ease,transform .15s ease}
.btn:hover{background:var(--gold-soft);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:2px solid currentColor}
.hero .btn-ghost{color:var(--white)}
.btn-dark{background:var(--ink);color:var(--gold)}
.btn-dark:hover{background:#000;color:var(--gold)}
.btn-ghost:hover{background:transparent;transform:translateY(-2px)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-d)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;max-width:var(--maxw);margin:0 auto}
.logo{font-weight:900;font-size:1.45rem;letter-spacing:-.04em}
.logo .ring{color:var(--gold)}
.logo sup{font-size:.58rem;color:var(--gold);font-weight:800}
.nav ul{display:flex;gap:28px;list-style:none}
.nav ul a{font-size:.88rem;font-weight:600;color:#CFCBC4}
.nav ul a:hover{color:var(--gold)}
.nav .btn{padding:11px 20px;font-size:.83rem}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-d);border-radius:2px;
  padding:9px 10px;color:var(--white);cursor:pointer;
}
.nav-toggle svg{width:20px;height:20px;display:block}
.nav-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.nav-drop{position:relative}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--dark);border:1px solid var(--line-d);border-radius:2px;
  padding:8px;display:none;flex-direction:column;min-width:150px;margin-top:10px;
  box-shadow:0 12px 26px rgba(0,0,0,.4);
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:flex}
.nav-drop-menu a{padding:9px 12px;font-size:.85rem;border-radius:2px}
.nav-drop-menu a:hover{background:var(--panel);color:var(--gold)}

/* hero */
.hero{padding:92px 0 84px;background:var(--dark)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.9rem);color:var(--white);max-width:14ch;letter-spacing:-.035em}
.h1-accent{color:var(--gold)}
.hero .q{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;margin-top:28px;max-width:32ch;line-height:1.35}
.hero .support{font-size:1.05rem;color:#CFCBC4;margin-top:20px;max-width:46ch}
.hero .actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

.feed{position:relative;height:540px;overflow:hidden;border-left:1px solid var(--line-d);padding-left:26px}
.feed::before,.feed::after{content:'';position:absolute;left:0;right:0;height:110px;z-index:3;pointer-events:none}
.feed::before{top:0;background:linear-gradient(180deg,var(--dark) 12%,rgba(26,26,26,0))}
.feed::after{bottom:0;background:linear-gradient(0deg,var(--dark) 12%,rgba(26,26,26,0))}
.feed-label{position:absolute;top:0;left:26px;right:0;z-index:4;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fl-sep{color:var(--line-d);letter-spacing:0}
.fl-sub{color:#8A857D;letter-spacing:.14em;font-size:.64rem}
.feed-label .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.track{display:flex;flex-direction:column;animation:roll 54s linear infinite}
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.feed:hover .track{animation-play-state:paused}
.ticket{background:var(--panel);border:1px solid var(--line-d);border-left:3px solid var(--gold);border-radius:2px;padding:14px 18px;margin-bottom:12px}
.ticket .meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}
.ticket .time{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--gold);letter-spacing:.06em}
.ticket .src{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--grey);letter-spacing:.14em;text-transform:uppercase}
.ticket p{font-size:.94rem;font-weight:600;line-height:1.4;color:#EDEAE4}

/* MEET THE AGENTS: header centering + padding fix */
.agents-section .wrap{text-align:center}
.agents-title{max-width:22ch;margin:0 auto}
.agents-lead{max-width:52ch;margin:14px auto 0}

/* existing card system,unchanged */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.agent-card{
  background:var(--white);border-radius:12px;padding:26px 24px 24px;
  box-shadow:0 4px 6px rgba(0,0,0,.15), 0 20px 40px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.agent-card:hover{transform:translateY(-4px)}
.agent-label{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px;
}
.agent-line{font-size:1.05rem;font-weight:900;color:var(--ink);line-height:1.35;margin-bottom:20px}

.agent-visual{background:var(--paper);border-radius:8px;padding:14px 16px}

.agent-visual-ticket{display:flex;align-items:flex-start;gap:10px}
.agent-flag{font-size:.9rem;line-height:1.4}
.agent-ticket-text{font-size:.84rem;color:#3B3733;font-weight:600;line-height:1.4}

.agent-visual-chat{display:flex;flex-direction:column;gap:8px}
.agent-chat-q{font-size:.82rem;color:#7A746B;line-height:1.4;margin:0}
.agent-chat-a{font-size:.86rem;color:#3B3733;font-weight:600;line-height:1.4;margin:0}

.agent-visual-table{display:flex;flex-direction:column;gap:6px}
.agent-table-row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#3B3733}
.agent-table-row.agent-table-head{color:#8A857D;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-l);padding-bottom:6px}

@media (max-width:900px){.agent-grid{grid-template-columns:1fr}}

/* REAL strip */
.strip{background:var(--gold);color:var(--ink);padding:22px 0}
.strip-book-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.strip-book-txt{font-size:clamp(.94rem,1.7vw,1.1rem);font-weight:800;letter-spacing:-.005em}
@media (max-width:640px){.strip-book-row{justify-content:center;text-align:center}}

/* Jobs CTA — reads as a continuation of .world-tie,not a boxed banner */
.jobs-cta{margin:24px 0 0;padding:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;font-size:1rem;line-height:1.5;color:#4A4640;font-weight:800; max-width:66ch;
}

/* CTA descriptor - provides more info underneath a CTA button */
.cta-descriptor{margin:12px 0 0; padding:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;font-size:.7rem;line-height:1.5;color:#4A4640;font-weight:600;font-style: italic; max-width:66ch;}

/* key person / before-after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.frame{border:1px solid var(--line-l);background:var(--white);border-radius:2px;overflow:hidden}
.shot{position:relative;aspect-ratio:4/3;background:#E7E2D8;display:flex;align-items:center;justify-content:center;padding:28px;text-align:center;border-bottom:1px solid var(--line-l)}
/* The direction note is centred in the box and the stat overlay is pinned to
   the bottom of that same box,so on a narrow screen both grow until they sit
   on top of each other. In a shot that carries an overlay the note lives in
   the top half instead. */
.shot:has(.overlay){align-items:flex-start}
.shot img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
.shot span.dir{font-size:.86rem;color:#7A746B;max-width:34ch;line-height:1.5}
/* Equal columns sharing three rows (subgrid),so figures line up with figures,labels with labels and source tags with source tags - instead of each stat
   stacking to its own ragged height. */
.overlay{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(21,21,21,.94),rgba(21,21,21,.72) 62%,rgba(21,21,21,0));
  padding:26px 22px 18px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;
  gap:0 18px;align-items:start;
}
.stat{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;text-align:center;min-width:0}
.stat .n{font-family:'IBM Plex Mono',monospace;font-size:1.35rem;font-weight:600;color:var(--gold);line-height:1.1;white-space:nowrap}
.stat .l{font-size:.68rem;color:#CFCBC4;margin-top:5px;line-height:1.3;max-width:15ch;margin-left:auto;margin-right:auto}
.frame .cap{padding:20px 24px}
.frame .cap .tagline{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.frame .cap h3{font-size:1.08rem;margin-top:8px;color:var(--ink)}
.frame .cap p{font-size:.9rem;color:#5A554E;margin-top:6px}
.quote{border-left:4px solid var(--gold);padding:20px 0 20px 26px;margin-top:44px;font-size:clamp(1.15rem,2.3vw,1.5rem);font-weight:800;line-height:1.35;max-width:36ch}

/* how it works */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:46px}
.step{border-radius:2px;padding:26px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.step-measure{background:var(--gold);color:var(--ink)}
.step-build{background:transparent;border:1px solid var(--line-d);color:var(--white)}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.18em;opacity:.72}
.step p{font-weight:800;font-size:1.02rem;line-height:1.25}
.chain-key{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap}
.chain-key span{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:9px}
.swatch{width:12px;height:12px;border-radius:2px;display:inline-block}
.sw-gold{background:var(--gold)}
.sw-out{border:1px solid var(--grey)}
.callout{margin-top:34px;padding:22px 26px;background:rgba(226,185,47,.09);border:1px solid rgba(226,185,47,.34);border-radius:2px;font-weight:700;font-size:1.04rem}
.band-light .callout{background:rgba(226,185,47,.16);border-color:rgba(154,125,20,.4);color:var(--ink)}

/* what it's worth — P&L */
.worth-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;margin-top:44px}
.pl{background:var(--white);border:1px solid var(--line-l);border-radius:2px;padding:30px 30px 24px;box-shadow:0 14px 34px rgba(0,0,0,.09)}
.pl-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.pl-head h3{font-size:.94rem;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.pl-head .yrs{display:flex;gap:26px;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#8A857D}
.pl-head .yrs span{min-width:78px;text-align:right}
.plrow{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid #EDE9E1;font-size:.9rem;color:#4A4640}
.plrow .nums{display:flex;gap:26px;font-family:'IBM Plex Mono',monospace;font-size:.86rem;color:#4A4640}
.plrow .nums span{min-width:78px;text-align:right}
.plrow.sub{font-weight:700;color:var(--ink)}
.pl-ebitda{
  position:relative;margin:22px 0 6px;padding:20px 18px;
  border:2.5px solid var(--gold);border-radius:44px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:rgba(226,185,47,.10);transform:scale(1.035);
}
.pl-ebitda .k{font-weight:900;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.pl-ebitda .nums{display:flex;gap:26px;align-items:baseline;font-family:'IBM Plex Mono',monospace}
.pl-ebitda .old{font-size:.9rem;color:#8A857D;min-width:78px;text-align:right}
.pl-ebitda .new{font-size:1.5rem;font-weight:600;color:var(--pos);min-width:78px;text-align:right}
.pl-delta{display:flex;justify-content:flex-end;gap:8px;align-items:center;margin-top:12px}
.pl-delta .chip{font-family:'IBM Plex Mono',monospace;font-size:.76rem;font-weight:600;color:var(--pos);background:rgba(46,125,79,.12);border:1px solid rgba(46,125,79,.32);border-radius:2px;padding:5px 10px}
.pl-foot{margin-top:16px;padding-top:14px;border-top:1px solid #EDE9E1;font-size:.7rem;color:#8A857D;font-style:italic;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pl-foot .stamp{font-family:'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.srctag{
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8F897F;margin-top:8px;display:block;
}
.leak .dept{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}

/* proof */
.proofrow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:52px}
.proofrow.flip .pimg{order:2}
.pimg{position:relative;overflow:hidden;aspect-ratio:4/3;background:#E7E2D8;border:1px solid var(--line-l);border-radius:2px;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center}
.pimg img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
.pimg span{font-size:.86rem;color:#7A746B;max-width:36ch;line-height:1.55}
.tag2{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 11px;border-radius:2px;margin-bottom:18px}
.tag-live{background:var(--gold);color:var(--ink)}
.pbody h3{font-size:1.5rem;margin-bottom:20px;color:var(--ink)}
.pbody dt{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:20px}  /* #proof is a DARK band - this one needs the bright gold, not the ink variant */
.pbody dd{color:#4A4640;margin-top:7px;font-size:.97rem}
.pbody dd.pending{color:#8A857D;font-style:italic}

/* mini proof cards */
.minigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;padding-top:44px;border-top:1px solid var(--line-l)}
.mini{background:var(--white);border:1px solid var(--line-l);border-radius:2px;padding:26px 24px;display:flex;flex-direction:column}
.mini h4{font-size:1.12rem;font-weight:900;color:var(--ink);margin-bottom:10px;letter-spacing:-.015em}
.mini p{font-size:.94rem;color:#4A4640;flex:1}
.mini .mininum{flex:0;margin-top:16px;padding-top:14px;border-top:1px solid #EDE9E1;font-family:'IBM Plex Mono',monospace;font-size:.86rem;font-weight:600;color:var(--pos)}
.mini .mininum.pend{color:#8A857D;font-style:italic;font-weight:500}

/* Proof section: dark-band overrides */
#proof .pimg{background:var(--panel);border-color:var(--line-d)}
#proof .pimg span{color:#8F8B83}
#proof .pbody h3{color:var(--white)}
#proof .pbody dd{color:#CFCBC4}
#proof .pbody dd.pending{color:#7A7571}
#proof .mini{background:var(--panel);border-color:var(--line-d)}
#proof .mini h4{color:var(--white)}
#proof .mini p{color:#CFCBC4}
#proof .mini .mininum{border-top-color:var(--line-d);color:#3A9D63}   /* 3.12 -> 4.63 on the dark panel */
#proof .mini .mininum.pend{color:#8F8B83}                            /* 4.29 -> 4.63 */

.badge{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:2px;
}
.badge-gap{background:rgba(226,185,47,.18);color:var(--gold-ink);border:1px solid rgba(226,185,47,.42)}
.badge-run{background:transparent;color:#4A4640;border:1px solid var(--line-l)}

/* ===== YOUR WORLD: mode toggle ===== */
.mode-toggle{display:flex;gap:10px;margin-top:34px}
.mode-btn{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;border:1px solid var(--line-l);background:var(--white);color:#7A746B;cursor:pointer;
  transition:all .15s ease;
}
.mode-btn:hover{border-color:var(--gold);color:var(--gold-ink)}
.mode-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--gold)}

/* ===== full-bleed carousel: genuinely outside any max-width wrapper ===== */
.carousel-outer{width:100%;max-width:100%;position:relative;margin-top:30px;padding:10px 40px 14px;overflow:hidden;overflow:clip}
.ind-carousel,.dept-carousel{
  position:relative;
  display:flex;min-width:0;max-width:100%;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:10px 0 20px;
}
.ind-carousel::-webkit-scrollbar,.dept-carousel::-webkit-scrollbar{display:none}

.ind-card{
  flex:0 0 auto;width:186px;scroll-snap-align:center;cursor:pointer;
  background:none;border:none;padding:0;font:inherit;color:inherit;text-align:left;
  transition:transform .2s ease;
}
.ind-card:hover{transform:translateY(-4px)}
.ind-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:12px}

.ind-photo{
  position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:linear-gradient(155deg,#5C5646 0%,#2A2A2A 100%);
  filter:grayscale(.6) brightness(.94);
  box-shadow:0 4px 6px rgba(26,26,26,.03), 0 12px 24px rgba(26,26,26,.09);
  transition:filter .25s ease, box-shadow .25s ease;
}
.ind-photo img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
.ind-photo::before{
  content:'';position:absolute;inset:0;background:rgba(226,185,47,.16);mix-blend-mode:multiply;
  transition:opacity .25s ease;z-index:1;
}
.ind-photo::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(21,21,21,.8) 0%,rgba(21,21,21,0) 58%);
}
.ind-photo-default{background:linear-gradient(155deg,#3A2E10 0%,#1A1A1A 100%);filter:none}
.ind-photo-default::before{display:none}
.ind-photo-txt{position:relative;z-index:2;display:flex;align-items:flex-start;height:100%;padding:12px;font-size:.62rem;font-style:italic;color:#B9B4AB;line-height:1.4}

/* "All Companies" tile: a miniature of the hero ticker instead of a photo.
   It is the one slot that has to mean every industry at once, and the ticker
   does that by enumeration - flood, clinic, supplier, kitchen. Built from live
   markup rather than a screenshot, so it stays sharp at any size and picks up
   the brand tokens if they change.
   Sizes are in cqw (percent of the tile's own width) so the whole thing scales
   with the tile: 186px on desktop, 72vw on a phone.
   The ft- prefix is deliberate - .mini is already the proof-section card. */
.ind-photo-feed{container-type:inline-size}
.ind-photo-feed .ft{
  position:relative;z-index:2;display:flex;flex-direction:column;height:100%;
  padding:6cqw 6cqw 38px;gap:2.6cqw;   /* 38px bottom clears .ind-label, which is
     absolutely positioned at bottom:14px in rem - a fixed cost, not a cqw one */
}
.ind-photo-feed .ft-label{
  flex:0 0 auto;display:flex;align-items:center;gap:2cqw;
  font-family:'IBM Plex Mono',monospace;font-size:3.2cqw;letter-spacing:.16em;
  text-transform:uppercase;color:#9A958A;white-space:nowrap;
}
.ind-photo-feed .ft-dot{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--gold);flex:0 0 auto}
.ind-photo-feed .ft-row{
  flex:0 0 auto;display:block;
  background:var(--panel);border:1px solid var(--line-d);
  border-left:1.4cqw solid var(--gold);border-radius:.8cqw;
  padding:2cqw 2.6cqw;
}
.ind-photo-feed .ft-time{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:2.9cqw;
  color:var(--gold);letter-spacing:.06em;line-height:1.2;
}
/* explicit height, not flex:1 - a -webkit-box as a flex child with min-height:0
   collapses to nothing, which is exactly what went wrong the first time */
.ind-photo-feed .ft-txt{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:.8cqw;font-size:3.4cqw;font-weight:600;line-height:1.25;height:2.5em;color:#EDEAE4;
}

.ind-card.is-active .ind-photo{filter:none;box-shadow:0 0 0 3px var(--gold), 0 14px 30px rgba(226,185,47,.35)}
.ind-card.is-active .ind-photo::before{opacity:0}
.ind-card.is-active .ind-photo-txt{color:var(--gold-soft)}

/* the clean label overlays the bottom of the photo instead of sitting in a bar below it */
.ind-card{position:relative}
.ind-label{
  position:absolute;left:16px;bottom:14px;z-index:3;
  font-size:.85rem;font-weight:800;color:#EDEAE4;line-height:1.3;
  pointer-events:none;
}
.ind-card.is-active .ind-label{color:var(--gold-soft)}
/* when a card has no shot-direction placeholder text (real photos),hide the empty txt block */
.ind-photo:not(:has(.ind-photo-txt)) img{display:block}

/* carousel nav arrows */
.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--white);box-shadow:0 4px 6px rgba(26,26,26,.05),0 10px 22px rgba(26,26,26,.12);
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease;
}
.car-arrow:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 6px 10px rgba(26,26,26,.07),0 14px 28px rgba(26,26,26,.16)}
.car-arrow svg{width:18px;height:18px}
.car-arrow.prev{left:10px}
.car-arrow.next{right:10px}
@media (max-width:560px){.car-arrow{width:34px;height:34px}.car-arrow svg{width:14px;height:14px}.car-arrow.prev{left:4px}.car-arrow.next{right:4px}}

.track-wrap{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:2px}
.track-dot{width:6px;height:6px;border-radius:50%;background:var(--line-l);transition:all .2s ease}
.track-dot.is-active{background:var(--gold);width:18px;border-radius:3px}

/* ===== 12-card grid: soft,rounded,floating ===== */
.jc-groups{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px}
.jc-group-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.jc-group-sub{font-size:.82rem;color:#8A857D}
/* Each industry/department set is pre-rendered into the HTML so crawlers that
   do not run JavaScript still see it - that is ~45% of the page's copy. The
   wrapper is display:contents so the cards remain direct grid items. */
.jc-set{display:contents}
.jc-set[hidden]{display:none}
.jc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.jc-card{
  position:relative;background:var(--white);border-radius:12px;padding:20px 20px 18px;
  box-shadow:0 4px 6px rgba(26,26,26,.03), 0 14px 28px rgba(26,26,26,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.jc-card:hover{transform:translateY(-3px);box-shadow:0 6px 10px rgba(26,26,26,.04), 0 20px 36px rgba(26,26,26,.09)}
.jc-card h3{font-size:.96rem;font-weight:900;color:var(--ink);margin:0 0 6px;line-height:1.25;letter-spacing:-.005em}
.jc-card p{font-size:.82rem;color:#5A554E;line-height:1.5;margin:0}

.tcard-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border-radius:999px;margin-bottom:12px}
.tcard-badge-job{background:rgba(226,185,47,.14)}
.tcard-badge-call{background:rgba(21,21,21,.06)}
.badge-dot{width:6px;height:6px;border-radius:50%;flex:none}
.tcard-badge-job .badge-dot{background:var(--gold)}
.tcard-badge-call .badge-dot{background:var(--ink)}
.tcard-badge span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:600;letter-spacing:.06em}
.tcard-badge-job span{color:var(--gold-ink)}
.tcard-badge-call span{color:#4A4640}

/* dark-mode card variant,used inside .dark-embed */
.jc-card.jc-dark{background:var(--panel);box-shadow:0 4px 6px rgba(0,0,0,.15), 0 14px 28px rgba(0,0,0,.2)}
.jc-card.jc-dark h3{color:#EDEAE4}
.jc-card.jc-dark p{color:#B9B4AB}
.jc-dark .tcard-badge-job{background:rgba(226,185,47,.18)}
.jc-dark .tcard-badge-call{background:rgba(255,255,255,.08)}
.jc-dark .tcard-badge-call span{color:#CFCBC4}
/* The dark embed only ever got half its overrides. These three were still
   carrying their light-section colours onto a dark ground:
     "Jobs that RUN"          #9A7D14 on rgb(41,33,8)  = 4.04
     "Calls that GET SHARPER" #4A4640 on black         = 2.24
     the JOB card badge       #9A7D14 on rgb(69,62,37) = 2.70
   Ratios below are against the real composited background, since every one of
   these sits on a translucent layer. */
.jc-dark .tcard-badge-job span{color:var(--gold)}        /* 2.70 -> 5.70 */
.dark-embed .badge-gap{color:var(--gold)}                /* 4.04 -> 8.53 */
.dark-embed .badge-run{color:#CFCBC4;border-color:var(--line-d)}  /* 2.24 -> 12.99 */

.dark-embed{background:var(--dark);border-radius:16px;padding:40px 36px}

.world-note{
  margin-top:26px;padding:16px 20px;background:rgba(226,185,47,.1);border:1px solid rgba(226,185,47,.32);
  border-radius:12px;font-size:.86rem;color:#6B551A;font-style:italic;
}
.dark-embed .world-note{background:rgba(226,185,47,.12);border-color:rgba(226,185,47,.28);color:#D9C88A}

.world-tie{
  margin-top:40px;padding-top:28px;border-top:1px solid var(--line-l);
  font-size:1rem;color:#4A4640;max-width:66ch;font-weight:600;
}

@media (max-width:980px){
  .jc-groups{grid-template-columns:1fr;gap:32px}
  .dark-embed{padding:30px 24px}
}
@media (max-width:560px){
  .jc-grid{grid-template-columns:1fr}
  .ind-card{width:72vw}
  .carousel-outer{padding-left:16px;padding-right:16px}
}

/* ===== BUILDER BAND: comparison panel ===== */
.builder-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center;margin-top:0}
.builder-text .eyebrow{margin-bottom:20px}
.builder-text h2{margin-bottom:22px}

.perf-panel{background:var(--white);border-radius:12px;padding:30px 32px 26px;box-shadow:0 4px 6px rgba(26,26,26,.03), 0 20px 40px rgba(26,26,26,.12)}
.perf-head{display:grid;grid-template-columns:1fr 96px 190px;gap:14px;padding-bottom:14px;border-bottom:2px solid var(--ink);align-items:end}
.perf-col-label{font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#79746D;line-height:1.4}
/* The head has two labels but three columns,so with no explicit column they
   auto-placed into columns 1 and 2 - which is why they sat over the row
   titles instead of over the figures. Pin each label to the column it
   describes,and right-align label and figures alike so the edges line up. */
.perf-col-now{grid-column:2;text-align:right}
.perf-col-target{grid-column:3;color:var(--gold-ink);text-align:right}

.perf-row{display:grid;grid-template-columns:1fr 96px 190px;gap:14px;align-items:center;padding-top:18px}
.perf-row-last{padding-bottom:0}
.perf-row-label h3{font-size:.92rem;font-weight:900;color:var(--ink);margin-bottom:3px;line-height:1.25}
.perf-row-label p{font-size:.78rem;color:#7A746B;line-height:1.4}
.perf-val{font-family:'IBM Plex Mono',monospace;font-weight:600}
.perf-val.perf-now{font-size:1.15rem;color:#8A857D;text-align:right}
.perf-val.perf-target{font-size:1.15rem;color:var(--pos);text-align:right}
.perf-val.perf-target-text{font-size:.86rem;white-space:normal}
.perf-unit-row{
  grid-column:2 / -1;text-align:right;font-size:.68rem;color:#8A857D;font-style:italic;
  margin:2px 0 16px;padding-top:2px;border-bottom:1px solid #EDE9E1;padding-bottom:16px;
}
.perf-row-last + .perf-unit-row{border-bottom:none;padding-bottom:0;margin-bottom:0}

@media (max-width:640px){
  .perf-panel{padding:22px 18px 20px}
  .perf-head,.perf-row{grid-template-columns:1fr 62px 104px;gap:8px}
  .perf-col-label{font-size:.52rem;letter-spacing:0}
  .perf-val.perf-now{font-size:1rem}
  .perf-val.perf-target{font-size:.82rem}
  .perf-val.perf-target-text{font-size:.72rem}
}

@media (max-width:980px){.builder-grid{grid-template-columns:1fr;gap:36px}}

.apply{text-align:center}
.apply h2{font-size:clamp(1.9rem,4.4vw,2.9rem);max-width:20ch;margin:0 auto;color:var(--ink)}
.apply .cap2{margin:24px auto 0;max-width:48ch;color:#4A3F1A;font-weight:600}
.apply .actions{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{background:var(--dark);padding:56px 0 30px}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fgrid p{color:var(--grey);font-size:.9rem;max-width:32ch;margin-top:14px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fgrid ul a{color:#BFBAB2;font-size:.9rem}
.fgrid ul a:hover{color:var(--gold)}
.copy{margin-top:42px;padding-top:20px;border-top:1px solid var(--line-d);color:#7B756D;font-size:.8rem}

@media (max-width:980px){
  .hero-grid,.worth-grid,.proofrow{grid-template-columns:1fr}
  .proofrow.flip .pimg{order:0}
  .ba,.minigrid{grid-template-columns:1fr}
  .chain{grid-template-columns:repeat(2,1fr)}
  /* Below 980px the links used to be display:none with no replacement,which
     left six destinations unreachable on phones and tablets. They now fold
     into a disclosure menu behind the hamburger. */
  .nav{flex-wrap:wrap;gap:14px}
  .logo{order:1;margin-right:auto}
  .nav .btn{order:2}
  .nav-toggle{display:inline-flex;order:3}
  .nav ul{
    display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line-d);margin-top:6px;padding-top:4px;
  }
  .nav ul.is-open{display:flex}
  .nav ul>li{border-bottom:1px solid var(--line-d)}
  .nav ul>li:last-child{border-bottom:none}
  .nav ul>li>a{display:block;padding:15px 2px}
  /* the hover flyout cannot work on touch - show it as indented sub-links */
  .nav-drop-menu{
    position:static;transform:none;display:flex;background:none;border:none;
    box-shadow:none;min-width:0;margin:0 0 10px;padding:0;
  }
  .nav-drop-menu a{padding:9px 2px 9px 20px;color:#9A958A}
  .nav-drop-menu a:hover{background:none}
  .band{padding:72px 0}
  .hero{padding:60px 0}
  .feed{height:420px}
  .pl-ebitda{transform:none;border-radius:6px;flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  /* Shrink the overlay so it cannot climb into the direction note above it. */
  .overlay{padding:18px 10px 12px;gap:0 8px}
  .stat .n{font-size:.95rem}
  .stat .l{font-size:.58rem;margin-top:4px;line-height:1.25;max-width:none}
  .overlay .srctag{font-size:.48rem;letter-spacing:.06em;margin-top:5px}
  .shot{padding:18px}
  .shot span.dir{font-size:.78rem;line-height:1.4}
}
@media (max-width:400px){
  .shot span.dir{font-size:.7rem;line-height:1.34}
  .overlay{padding:14px 7px 10px}
  .stat .n{font-size:.86rem}
  .stat .l{font-size:.55rem}
  .overlay .srctag{font-size:.45rem;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  .track,.feed-label .dot{animation:none}
  *{transition:none!important;scroll-behavior:auto!important}
}


/* ==========================================================================
   Shared components added for the /security page. Appended after the original
   inline stylesheet, which is unchanged above this line. Nothing on the home
   page uses these yet.
   ========================================================================== */

/* The status tags. LIVE NOW already exists (.tag-live). The outline styles for
   BUILDING NOW and ON THE ROADMAP were removed as unused CSS on 2026-09-14 and
   are restored here. Outline colour flips on dark bands so it stays visible. */
.tag-build{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.tag-road{background:transparent;color:#5A554E;border:1px dashed #8A857D}
.band-dark .tag-build,.dark-surface .tag-build{color:#EDEAE4;border-color:#EDEAE4}
.band-dark .tag-road,.dark-surface .tag-road{color:#CFCBC4;border-color:#8F8B83}

/* visually hidden, still read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Print button. The print layout itself is in print.css, which only loads for printing. */
.print-id{display:none}
.print-bar{display:flex;justify-content:flex-end;margin:0 0 22px}
.print-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:0;border-radius:2px;background:var(--ink);color:var(--white);font:inherit;font-weight:800;font-size:.9rem;letter-spacing:.01em;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.print-btn svg{color:var(--gold);flex:none;transition:color .15s ease}
.print-btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.print-btn:hover svg{color:var(--ink)}
.print-btn:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}