/* ============================================================
   Convoy Automation : marketing site
   Field-grade operating systems for business.
   Self-hosted fonts. No external CDN. Dark tactical system.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/Archivo.woff2") format("woff2"),
      url("../fonts/Archivo.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fonts/Barlow-Regular.woff2") format("woff2"),
      url("../fonts/Barlow-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fonts/Barlow-Medium.woff2") format("woff2"),
      url("../fonts/Barlow-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fonts/Barlow-SemiBold.woff2") format("woff2"),
      url("../fonts/Barlow-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono.woff2") format("woff2"),
      url("../fonts/JetBrainsMono.ttf") format("truetype");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --blaze:#FF5A1F;
  --ember:#C6431A;
  --obsidian:#0C0F12;
  --gunmetal:#1C2126;
  --gunmetal-hi:#242a31;
  --steel:#5A6673;
  --sand:#C9B896;
  --paper:#F4F2ED;

  --line:rgba(90,102,115,.24);
  --line-hi:rgba(90,102,115,.42);
  --ink:var(--paper);
  --ink-dim:rgba(244,242,237,.66);
  --ink-faint:rgba(244,242,237,.42);

  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Archivo","Barlow",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  --shell:1240px;
  --pad:clamp(20px,5vw,44px);

  --shadow:0 24px 60px -28px rgba(0,0,0,.72), 0 2px 0 rgba(255,255,255,.03) inset;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--obsidian);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--blaze);color:var(--obsidian)}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.03}
.kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sand);display:inline-flex;align-items:center;gap:11px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--blaze);display:inline-block}
.mono{font-family:var(--mono)}
.blaze{color:var(--blaze)}

/* ---------- Shell ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.section-pad{padding-block:clamp(72px,11vw,132px)}

/* corner registration ticks (brand chrome) */
.ticks span{position:absolute;width:13px;height:13px;border-color:var(--steel);opacity:.45;pointer-events:none}
.ticks .tl{top:0;left:0;border-left:1.5px solid;border-top:1.5px solid}
.ticks .tr{top:0;right:0;border-right:1.5px solid;border-top:1.5px solid}
.ticks .bl{bottom:0;left:0;border-left:1.5px solid;border-bottom:1.5px solid}
.ticks .br{bottom:0;right:0;border-right:1.5px solid;border-bottom:1.5px solid}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(12,15,18,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--shell);margin-inline:auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
}
/* left zone: icon-only logo, pinned left, never shrinks */
.nav-logo{display:flex;align-items:center;flex:0 0 auto}
.nav-logo img{height:30px;width:auto;display:block}
/* center zone: links sized to their natural width and centered in the free
   space via auto side-margins, so the band absorbs slack symmetrically and its
   first/last link stay clear of the logo (left) and CTA (right). The links keep
   an even, viewport-scaled gap so they read as an evenly spread row. */
.nav-inner .nav-links{flex:0 1 auto;min-width:0;margin-inline:auto;padding:0}
.nav-links{
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:clamp(12px,1.5vw,22px);
}
/* right zone: status + CTA cluster, pinned right, never clipped */
.nav-inner > div:last-of-type{flex:0 0 auto}
.nav-links a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .18s ease;position:relative;padding:6px 2px;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;
  background:var(--blaze);transition:right .24s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{right:0}
/* the decorative "Operational" status is dropped from the top bar: 7 wide mono
   links + the CTA already fill the desktop shell, and it (aria-hidden) was the
   element shoving the CTA off-screen. Kept in markup, hidden by CSS. */
.nav-status{
  display:none;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
}
.nav-status .dot{width:7px;height:7px;border-radius:50%;background:var(--blaze);
  box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.5)}70%{box-shadow:0 0 0 7px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:12px 22px;border-radius:3px;cursor:pointer;border:1px solid transparent;
  transition:transform .16s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blaze);color:var(--obsidian);font-weight:600}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(255,90,31,.55)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--line-hi);color:var(--ink-dim)}
.btn-ghost:hover{border-color:var(--steel);color:var(--paper);transform:translateY(-2px)}
.btn .arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translate(3px,0)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-hi);border-radius:3px;
  width:42px;height:38px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;
  margin-left:auto;flex:0 0 auto;
}
.nav-toggle span{display:block;width:18px;height:1.8px;background:var(--paper);transition:.24s}
.nav-toggle.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:55;background:rgba(12,15,18,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:var(--pad);
  transform:translateY(-100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{
  font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,8vw,2.4rem);
  letter-spacing:-.02em;color:var(--paper);padding:10px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;
}
.mobile-nav a .idx{font-family:var(--mono);font-size:.8rem;color:var(--steel);letter-spacing:.1em}
.mobile-nav a:hover{color:var(--blaze)}
.mobile-nav .m-cta{margin-top:26px;border-bottom:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-fallback{position:absolute;inset:0;z-index:0;display:none;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(255,90,31,.10), transparent 55%),
    linear-gradient(160deg,#12161b 0%,#0c0f12 60%,#080a0c 100%);
}
/* scrims for legibility over the moving scene */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,15,18,.62) 0%, rgba(12,15,18,.05) 26%, rgba(12,15,18,.02) 48%, rgba(12,15,18,.55) 80%, rgba(12,15,18,.94) 100%),
    linear-gradient(75deg, rgba(12,15,18,.72) 0%, rgba(12,15,18,.28) 42%, transparent 68%);
}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(8,10,12,.7)}

.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--shell);margin-inline:auto;
  padding:clamp(112px,16vh,164px) var(--pad) clamp(84px,12vh,120px);}
/* Constrained to the SAME shell as .nav-inner and .hero-inner, not to the raw
   viewport. With left/right:var(--pad) it hugged the window edge, so above
   1240px the stamp drifted left of the nav logo it is meant to sit under. */
.hero-topbar{position:absolute;top:calc(72px + 3vh);left:0;right:0;z-index:2;
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:flex;gap:16px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}

.hero-eyebrow{margin-bottom:18px}
.hero h1{
  font-size:clamp(2.6rem,7.4vw,5.4rem);
  font-weight:700;letter-spacing:-.032em;line-height:.98;max-width:15ch;
  text-shadow:0 2px 40px rgba(8,10,12,.6);
}
.hero h1 .em{color:var(--blaze)}
.hero-sub{margin-top:24px;max-width:52ch;font-size:clamp(1.02rem,1.7vw,1.24rem);
  color:var(--ink-dim);line-height:1.55}
.hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hero-tag{margin-top:30px;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.hero-tag .bar{width:26px;height:1.5px;background:var(--blaze)}

.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--steel);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint .line{width:1px;height:34px;background:linear-gradient(var(--steel),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(.3);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* ============================================================
   MARQUEE / OPERATOR STRIP
   ============================================================ */
.strip{border-block:1px solid var(--line);background:#0a0c0f;overflow:hidden}
.strip-inner{display:flex;align-items:center;gap:0;padding:0}
.strip-label{flex:0 0 auto;padding:20px var(--pad);border-right:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.marquee{flex:1;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:inline-flex;align-items:center;gap:52px;padding-left:52px;
  white-space:nowrap;animation:scroll-x 32s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink-dim);letter-spacing:-.01em}
.marquee-item .tick{color:var(--blaze);font-family:var(--mono);font-size:.9rem}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   Section header block (shared)
   ============================================================ */
.sec-head{max-width:64ch}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.3rem);margin-top:16px}
.sec-head .lead{margin-top:18px;font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-dim);max-width:56ch}

/* ============================================================
   WHAT WE BUILD : is / is not
   ============================================================ */
.build{background:linear-gradient(180deg,#0c0f12,#0a0c0f)}
.isnot-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.isnot-card{background:var(--gunmetal);border:1px solid var(--line);border-radius:6px;padding:32px 30px;position:relative;overflow:hidden}
.isnot-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--line)}
.isnot-card.is::before{background:var(--blaze)}
.isnot-card h3{font-size:1.35rem;display:flex;align-items:center;gap:12px}
.isnot-card .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;border:1px solid var(--line-hi);color:var(--steel)}
.isnot-card.is .tag{color:var(--blaze);border-color:rgba(255,90,31,.4)}
.isnot-list{margin-top:22px;display:flex;flex-direction:column;gap:15px}
.isnot-list li{list-style:none;display:flex;gap:13px;font-size:1rem;color:var(--ink-dim);line-height:1.5}
.isnot-list .mk{flex:0 0 auto;font-family:var(--mono);font-weight:600;width:16px;color:var(--blaze)}
.isnot-card.not .mk{color:var(--steel)}
.isnot-list b{color:var(--paper);font-family:var(--sans);font-weight:600}

.build-note{margin-top:34px;padding:26px 30px;border:1px solid var(--line);border-left:2px solid var(--blaze);
  background:rgba(28,33,38,.4);border-radius:0 6px 6px 0;font-size:1.06rem;color:var(--ink-dim);max-width:74ch}
.build-note b{color:var(--paper);font-family:var(--display);font-weight:600}

/* ============================================================
   HOW IT WORKS : layered flow
   ============================================================ */
.how{background:#0a0c0f}
.flow{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.flow-col{background:var(--gunmetal);border:1px solid var(--line);border-radius:6px;padding:26px 22px;position:relative;
  transition:border-color .25s ease, transform .25s ease}
.flow-col:hover{border-color:var(--line-hi);transform:translateY(-4px)}
.flow-col .lyr{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.flow-col h3{font-size:1.18rem;margin-top:10px;color:var(--paper)}
.flow-col.intel h3{color:var(--blaze)}
.flow-col p{margin-top:12px;font-size:.94rem;color:var(--ink-dim);line-height:1.5}
.flow-col .chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.flow-col .chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--sand);
  border:1px solid var(--line);border-radius:2px;padding:4px 8px;background:rgba(12,15,18,.4)}
.flow-arrow{position:absolute;top:50%;right:-13px;transform:translateY(-50%);z-index:3;color:var(--steel);
  font-family:var(--mono);font-size:1.1rem}
.flow-col:last-child .flow-arrow{display:none}
.flow-col.intel{border-color:rgba(255,90,31,.34);box-shadow:0 0 0 1px rgba(255,90,31,.12),0 20px 50px -30px rgba(255,90,31,.3)}

.command-line{margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 26px;border:1px solid var(--line);border-radius:6px;background:rgba(28,33,38,.35)}
.command-line .lg{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.02em}
.command-line .lg .em{color:var(--blaze)}
.command-line .sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-left:auto}

/* ============================================================
   CAPABILITIES : agent roster
   ============================================================ */
.caps{background:linear-gradient(180deg,#0a0c0f,#0c0f12)}
.roster{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.agent{background:var(--gunmetal);border:1px solid var(--line);border-radius:6px;padding:26px 24px;position:relative;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease,background .25s ease}
.agent::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,90,31,.08),transparent 60%);opacity:0;transition:opacity .3s ease}
.agent:hover{transform:translateY(-4px);border-color:var(--line-hi)}
.agent:hover::after{opacity:1}
.agent .idx{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--steel)}
.agent .chev{position:absolute;top:24px;right:22px;width:26px;opacity:.9}
.agent h3{font-size:1.16rem;margin-top:14px;color:var(--paper)}
.agent p{margin-top:10px;font-size:.92rem;color:var(--ink-dim);line-height:1.5}
.agent .own{margin-top:16px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
  display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.agent .own::before{content:"";width:6px;height:6px;background:var(--blaze);border-radius:50%}

/* ============================================================
   INDUSTRIES
   ============================================================ */
/* ============================================================
   INDUSTRY SELECTOR (drives the mock directly above)
   ============================================================ */
.dash-select{margin-top:22px}
.dash-select-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-select-cue{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.08em;
  text-transform:none;color:var(--paper);font-weight:600}
.dash-select-dot{width:8px;height:8px;border-radius:50%;background:var(--blaze);flex:none;
  box-shadow:0 0 0 4px rgba(255,90,31,.14);animation:cuePulse 2.4s ease-in-out infinite}
@keyframes cuePulse{0%,100%{box-shadow:0 0 0 4px rgba(255,90,31,.14)}50%{box-shadow:0 0 0 7px rgba(255,90,31,.04)}}
.dash-select-note{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

.sel-grid{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.sel-chip{display:inline-flex;align-items:center;gap:10px;background:var(--gunmetal);
  border:1px solid var(--line);border-radius:5px;padding:11px 15px;cursor:pointer;
  font-family:var(--sans);text-align:left;position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,background .2s ease}
.sel-chip:hover{transform:translateY(-2px);border-color:var(--line-hi);background:var(--gunmetal-hi)}
.sel-chip:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}
.sel-chip .sel-idx{font-size:.62rem;letter-spacing:.14em;color:var(--steel);flex:none}
.sel-chip .sel-name{font-size:.9rem;font-weight:600;color:var(--ink-dim);letter-spacing:-.01em;white-space:nowrap}
.sel-chip:hover .sel-name{color:var(--paper)}
.sel-chip.is-active{border-color:var(--blaze);background:rgba(255,90,31,.08)}
.sel-chip.is-active .sel-idx{color:var(--blaze)}
.sel-chip.is-active .sel-name{color:var(--paper)}
.sel-chip.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blaze)}

.dash-select-foot{margin-top:20px;max-width:76ch;font-size:.94rem;line-height:1.55;color:var(--ink-dim)}

/* ============================================================
   COMMAND DASHBOARD MOCK
   ============================================================ */
.dash-stage{margin-top:52px;display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:16px;align-items:stretch}
.dash-sec{background:linear-gradient(180deg,#0a0c0f,#0c0f12)}
.dash{background:var(--gunmetal);border:1px solid var(--line-hi);border-radius:8px;
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}

/* top bar */
.dash-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:#0a0c0f;border-bottom:1px solid var(--line)}

/* connectors strip */
.dash-conn-bar{display:flex;align-items:center;gap:14px;padding:11px 20px;
  background:rgba(10,12,15,.55);border-bottom:1px solid var(--line);flex-wrap:wrap}
.dash-conn-lbl{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);flex:none}
.dash-conn-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.dash-conn{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:3px;
  border:1px solid var(--line);background:var(--gunmetal);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap}
.dash-conn-dot{width:6px;height:6px;border-radius:50%;flex:none}
.dash-conn.on .dash-conn-dot{background:#5FB98A;box-shadow:0 0 0 3px rgba(95,185,138,.14)}
.dash-conn.on .dash-conn-name{color:var(--paper)}
.dash-conn.sync{border-style:dashed}
.dash-conn.sync .dash-conn-dot{background:var(--sand);animation:pulse-sand 2.6s infinite}
.dash-conn.sync .dash-conn-name{color:var(--sand)}
.dash-brand{display:flex;align-items:center;gap:12px;min-width:0}
.dash-brand img{width:20px;height:auto;flex:none;opacity:.95}
.dash-title{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.04em;color:var(--paper)}
.dash-sector{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
  border:1px solid var(--line-hi);border-radius:2px;padding:4px 9px;white-space:nowrap;
  transition:color .3s ease,border-color .3s ease}
.dash-meta{display:flex;align-items:center;gap:16px;font-size:.66rem;letter-spacing:.16em;color:var(--steel);white-space:nowrap}
.dash-live{display:inline-flex;align-items:center;gap:7px;color:var(--sand)}
.dash-live-dot{width:6px;height:6px;border-radius:50%;background:var(--sand);
  box-shadow:0 0 0 0 rgba(201,184,150,.5);animation:pulse-sand 2.6s infinite}
@keyframes pulse-sand{0%{box-shadow:0 0 0 0 rgba(201,184,150,.5)}70%{box-shadow:0 0 0 6px rgba(201,184,150,0)}100%{box-shadow:0 0 0 0 rgba(201,184,150,0)}}

.dash-body{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);flex:1}

/* right-side per-industry command brief */
.dash-blurb{background:var(--gunmetal);border:1px solid var(--line);border-radius:8px;
  padding:28px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:var(--shadow)}
.dash-blurb::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--blaze)}
.dash-blurb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,90,31,.06),transparent 60%)}
.dash-blurb-kicker{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  position:relative;z-index:1}
.dash-blurb-name{font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:-.01em;
  color:var(--paper);margin-top:10px;line-height:1.15;position:relative;z-index:1}
.dash-blurb-body{margin-top:16px;font-size:.96rem;line-height:1.6;color:var(--ink-dim);
  position:relative;z-index:1}
.dash-blurb-foot{margin-top:auto;padding-top:20px;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sand);display:flex;align-items:center;gap:9px;position:relative;z-index:1}
.dash-blurb-foot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blaze);flex:none}

/* shared column head */
.dash-col-head{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
  display:flex;align-items:center;gap:10px}
.dash-col-head span{color:var(--sand)}
.dash-feed-live{color:var(--sand)}

/* LEFT units rail */
.dash-units{padding:20px;border-right:1px solid var(--line);display:flex;flex-direction:column;
  background:rgba(10,12,15,.5)}
.dash-unit-list{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.dash-unit{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;
  background:var(--gunmetal);border:1px solid var(--line);border-radius:5px;position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease}
.dash-unit:hover{border-color:var(--line-hi)}
.dash-unit .u-body{min-width:0;flex:1}
.dash-unit .u-name{font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--paper);line-height:1.2}
.dash-unit .u-job{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-faint);
  margin-top:4px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-chip{flex:none;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;border:1px solid var(--line-hi);color:var(--steel);white-space:nowrap;
  align-self:flex-start;margin-top:2px}
.dash-chip.running{color:var(--sand);border-color:rgba(201,184,150,.4)}
.dash-chip.running::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--sand);margin-right:6px;vertical-align:1px}
.dash-chip.cleared{color:var(--steel)}
.dash-chip.standby{color:var(--steel);opacity:.72}
.dash-chip.command{color:var(--blaze);border-color:rgba(255,90,31,.5);background:rgba(255,90,31,.06)}
.dash-chip.command::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--blaze);margin-right:6px;vertical-align:1px;
  box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:pulse 2.4s infinite}
/* the ONE unit needing command gets a blaze left-rail (one-signal discipline) */
.dash-unit.needs-command{border-color:rgba(255,90,31,.42)}
.dash-unit.needs-command::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blaze)}

/* human-in-command affordance */
.dash-command{margin-top:auto;padding-top:18px}
.dash-command-lbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blaze);
  display:flex;align-items:center;gap:8px}
.dash-command-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blaze)}
.dash-command-row{margin-top:12px;display:flex;gap:10px}
.dash-hold,.dash-approve{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border-radius:3px;cursor:default;border:1px solid var(--line-hi);
  display:inline-flex;align-items:center;gap:8px}
.dash-hold{background:transparent;color:var(--ink-dim)}
.dash-approve{background:var(--blaze);color:var(--obsidian);font-weight:600;border-color:var(--blaze)}
.dash-approve .arrow{transition:transform .18s ease}
.dash-approve:hover .arrow{transform:translateX(3px)}

/* RIGHT main */
.dash-main{padding:20px;display:flex;flex-direction:column;gap:18px;min-width:0}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dash-kpi{background:rgba(10,12,15,.55);border:1px solid var(--line);border-radius:5px;padding:15px 16px}
.dash-kpi .k-lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.dash-kpi .k-val{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--paper);margin-top:8px;line-height:1}
.dash-kpi .k-val .u{font-size:.76rem;color:var(--ink-faint);font-weight:600;margin-left:3px}
.dash-kpi .k-sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--sand);margin-top:7px}

/* feed */
.dash-feed{background:rgba(10,12,15,.55);border:1px solid var(--line);border-radius:5px;padding:16px 18px}
.dash-log{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:0}
.dash-log li{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-dim);line-height:1.45}
.dash-log li:first-child{border-top:none;padding-top:0}
.dash-log .t{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--steel);flex:none;width:56px}
.dash-log .agent-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sand);flex:none}
.dash-log .msg{min-width:0}
.dash-log li.is-command .agent-tag{color:var(--blaze)}
.dash-log li.is-command .msg b{color:var(--paper)}

.dash-foot{margin-top:18px;font-size:.66rem;letter-spacing:.1em;color:var(--steel);max-width:70ch}

/* ============================================================
   RECON (differentiator)
   ============================================================ */
.recon{background:var(--obsidian)}
.recon-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,64px);align-items:start}
.recon-lead h2{font-size:clamp(2.2rem,4.8vw,3.6rem);margin-top:16px}
.recon-lead h2::after{content:"";display:block;width:52px;height:3px;background:var(--blaze);margin-top:22px}
.recon-statement{margin-top:26px;font-family:var(--display);font-weight:600;
  font-size:clamp(1.14rem,1.9vw,1.42rem);line-height:1.4;color:var(--paper);max-width:34ch}
.recon-sub{margin-top:18px;font-size:1.04rem;color:var(--ink-dim);line-height:1.6;max-width:44ch}
.recon-flow{list-style:none;display:flex;flex-direction:column}
.recon-step{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--line);position:relative}
.recon-step:first-child{border-top:none;padding-top:0}
.recon-n{flex:none;font-size:.84rem;letter-spacing:.1em;color:var(--steel);width:44px;padding-top:2px;padding-left:22px;position:relative}
.recon-step h3{font-size:1.16rem;color:var(--paper)}
.recon-step p{margin-top:9px;font-size:.96rem;color:var(--ink-dim);line-height:1.55;max-width:50ch}
/* connective rail + node */
.recon-n::before{content:"";position:absolute;left:5px;top:26px;bottom:-44px;width:1px;background:var(--line)}
.recon-step.is-last .recon-n::before{display:none}
.recon-n::after{content:"";position:absolute;left:1px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--obsidian);border:1.5px solid var(--steel)}
.recon-step:first-child .recon-n::after{background:var(--blaze);border-color:var(--blaze)}

/* ============================================================
   OUTCOMES / METRICS BAND (honest)
   ============================================================ */
.metrics{background:linear-gradient(180deg,#0c0f12,#0a0c0f)}
.metric-grid{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{background:var(--gunmetal);border:1px solid var(--line);border-radius:6px;padding:26px 24px;
  position:relative;overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.metric::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--line);transition:background .25s ease}
.metric:hover{transform:translateY(-4px);border-color:var(--line-hi)}
/* only the structural-truth tile carries the blaze top-rule = one-signal discipline */
.metric-truth::before{background:var(--blaze)}
.metric-truth{grid-column:span 4}
.metric-n{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,4vw,3.2rem);
  letter-spacing:-.03em;color:var(--paper);line-height:.95}
.metric-n .x,.metric-n .plus{color:var(--blaze);font-size:.62em;margin-left:1px}
.metric-n .unit{font-family:var(--sans);font-size:.34em;color:var(--ink-faint);font-weight:600;letter-spacing:0;margin-left:2px}
.metric-lbl{margin-top:16px;font-size:.96rem;color:var(--ink-dim);line-height:1.5;max-width:34ch}
.metric-verb{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
  display:flex;align-items:center;gap:8px}
.metric-verb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blaze)}
.metric-truth .metric-lbl{max-width:52ch;font-size:1.02rem;color:var(--ink)}
.metric-foot{margin-top:22px;font-size:.66rem;letter-spacing:.1em;color:var(--steel);max-width:74ch}

/* Industries: interactive selectable card state */
.ind-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ind-card:focus-visible{outline:2px solid var(--blaze);outline-offset:3px}
.ind-card.is-active{border-color:var(--line-hi)}
.ind-card.is-active::before{background:var(--blaze)}
.ind-card .ind-sel{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blaze);opacity:0;transition:opacity .2s ease;
  display:inline-flex;align-items:center;gap:6px}
.ind-card .ind-sel::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blaze)}
.ind-card.is-active .ind-sel{opacity:1}

/* ============================================================
   HOW A BUILD GOES : horizontal timeline (stacks vertical)
   ============================================================ */
.buildpath{background:var(--obsidian)}
.bp-rail{list-style:none;margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);
  gap:20px;position:relative}
/* the connective rail: a steel base line + a blaze progress overlay, running
   through the centre of the numbered nodes across the row (one-signal: blaze) */
.bp-rail::before{content:"";position:absolute;top:16px;left:calc(10% );right:calc(10%);
  height:2px;background:var(--line);z-index:0}
.bp-rail::after{content:"";position:absolute;top:16px;left:calc(10%);right:calc(10%);
  height:2px;background:linear-gradient(90deg,var(--blaze),rgba(255,90,31,.28));z-index:1;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.36,1) .1s}
.bp-rail.in::after{transform:scaleX(1)}
.bp-node{position:relative;padding-top:44px}
.bp-n{position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:var(--obsidian);border:1.5px solid var(--steel);
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-dim)}
/* stage 01 (recon, the start) and the live stage carry the blaze node */
.bp-node:first-child .bp-n{background:var(--blaze);border-color:var(--blaze);color:var(--obsidian);font-weight:700}
.bp-node.bp-live .bp-n{border-color:var(--blaze);color:var(--blaze)}
.bp-body h3{font-size:1.1rem;color:var(--paper)}
.bp-body p{margin-top:11px;font-size:.92rem;color:var(--ink-dim);line-height:1.5}
.bp-node.bp-live .bp-body h3{color:var(--blaze)}

/* ============================================================
   OWNERSHIP / SECURITY STRIP (compact band)
   ============================================================ */
.own-strip{background:#0a0c0f;border-block:1px solid var(--line);
  padding-block:clamp(40px,6vw,64px)}
.own-eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);
  display:inline-flex;align-items:center;gap:11px}
.own-eyebrow::before{content:"";width:22px;height:2px;background:var(--blaze)}
.own-grid{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.own-pillar{padding:22px 22px 22px 0;border-top:2px solid var(--line);position:relative;
  transition:border-color .25s ease}
.own-pillar:hover{border-color:var(--line-hi)}
.own-pillar:first-child{border-top-color:var(--blaze)}
.own-mk{font-size:.64rem;letter-spacing:.2em;color:var(--steel)}
.own-pillar h3{font-size:1.02rem;margin-top:12px;color:var(--paper);line-height:1.2}
.own-pillar p{margin-top:10px;font-size:.9rem;color:var(--ink-dim);line-height:1.5}

/* ============================================================
   POSITIONING / engagement rail
   ============================================================ */
.march{background:#0a0c0f}
.march-grid{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.march-step{position:relative;padding-top:30px}
.march-step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.march-step.active::before{background:var(--blaze)}
.march-step .n{font-family:var(--mono);font-size:.9rem;color:var(--steel);letter-spacing:.1em}
.march-step.active .n{color:var(--blaze)}
.march-step h3{font-size:1.14rem;margin-top:14px;color:var(--paper)}
.march-step p{margin-top:10px;font-size:.92rem;color:var(--ink-dim);line-height:1.5}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{background:var(--blaze);color:var(--obsidian);position:relative;overflow:hidden}
.cta-band .ticks span{border-color:var(--obsidian);opacity:.28}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-block:clamp(56px,9vw,96px)}
.cta-band .kicker{color:var(--obsidian)}
.cta-band .kicker::before{background:var(--obsidian)}
.cta-band h2{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--obsidian);max-width:16ch;margin-top:16px}
.cta-band p{margin-top:16px;font-size:1.1rem;color:rgba(12,15,18,.78);max-width:46ch}
.cta-band .btn-dark{background:var(--obsidian);color:var(--paper);font-weight:600}
.cta-band .btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(12,15,18,.5)}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-mail{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:rgba(12,15,18,.7);
  border-bottom:1px solid rgba(12,15,18,.3);padding-bottom:2px}
.cta-mail:hover{color:var(--obsidian);border-color:var(--obsidian)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--obsidian);border-top:1px solid var(--line);padding-block:56px 40px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.footer-logo img{height:30px}
.footer-tag{margin-top:16px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.footer-tag .em{color:var(--blaze)}
.footer-nav{display:flex;gap:56px;flex-wrap:wrap}
.footer-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.footer-col a,.footer-col span{display:block;font-size:.94rem;color:var(--ink-dim);padding:5px 0;transition:color .16s}
.footer-col a:hover{color:var(--paper)}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}

/* ============================================================
   Responsive
   ============================================================ */
/* Nav collapses to the hamburger below 1200px: the 7 wide mono links + CTA
   fit cleanly down to ~1220px, so below that the mobile-nav (all links) takes
   over rather than clipping the CTA off the right edge. */
@media (max-width:1200px){
  .nav-links,.nav .nav-status,.nav > .nav-inner .btn{display:none}
  .nav-toggle{display:flex}
}
@media (max-width:960px){
  .flow{grid-template-columns:1fr 1fr}
  .flow-arrow{display:none}
  .roster{grid-template-columns:1fr 1fr}
  .march-grid{grid-template-columns:1fr 1fr}
  .dash-stage{grid-template-columns:1fr}
  .dash-body{grid-template-columns:1fr}
  .dash-units{border-right:none;border-bottom:1px solid var(--line)}
  .dash-command{margin-top:18px}
  .recon-grid{grid-template-columns:1fr;gap:44px}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric-truth{grid-column:span 2}
  .own-grid{grid-template-columns:1fr 1fr;gap:14px 28px}
  /* timeline: drop the horizontal rail, become a vertical timeline */
  .bp-rail{grid-template-columns:1fr;gap:0;margin-top:44px}
  .bp-rail::before,.bp-rail::after{display:none}
  .bp-node{padding-top:0;padding-left:56px;padding-bottom:26px}
  .bp-node:last-child{padding-bottom:0}
  .bp-n{top:2px}
  /* vertical connective rail between the round nodes */
  .bp-node::before{content:"";position:absolute;left:16px;top:36px;bottom:-2px;width:2px;
    background:var(--line);z-index:0}
  .bp-node:last-child::before{display:none}
}
@media (max-width:640px){
  .isnot-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .roster{grid-template-columns:1fr}
  .march-grid{grid-template-columns:1fr}
  .sel-chip{flex:1 1 100%}
  .strip-inner{flex-direction:column;align-items:stretch}
  .strip-label{border-right:none;border-bottom:1px solid var(--line);text-align:center}
  .command-line .sm{margin-left:0;width:100%}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .dash-kpis{grid-template-columns:1fr}
  .dash-log li{flex-wrap:wrap;gap:6px 12px}
  .dash-bar{flex-wrap:wrap;gap:12px}
  .dash-brand{flex-wrap:wrap;gap:8px 12px}
  .dash-title{font-size:.82rem}
  .dash-sector{font-size:.58rem;white-space:normal}
  .dash-meta{gap:12px}
  .metric-grid{grid-template-columns:1fr}
  .metric-truth{grid-column:span 1}
  .own-grid{grid-template-columns:1fr;gap:0}
  .own-pillar{padding:20px 0}
  .own-pillar:not(:first-child){border-top-color:var(--line)}
  .hero{min-height:92svh}
  /* the road is panned toward the right edge on small screens, so deepen the
     directional scrim under the (full-width) text column for legibility */
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(12,15,18,.68) 0%, rgba(12,15,18,.42) 30%, rgba(12,15,18,.40) 52%, rgba(12,15,18,.66) 78%, rgba(12,15,18,.95) 100%),
      linear-gradient(85deg, rgba(12,15,18,.90) 0%, rgba(12,15,18,.74) 46%, rgba(12,15,18,.30) 74%, transparent 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
}

/* ============================================================
   RECON FORM  (added 2026-08-31)
   Lives inside the blaze CTA band. Brand rule: never Paper text
   on Blaze at small sizes (2.79:1, fails AA) - so every field is
   Paper ground with Obsidian ink, and all supporting text on the
   band is Obsidian at reduced alpha.
   ============================================================ */
.cta-inner{align-items:flex-start}
.cta-copy{flex:1 1 380px;max-width:52ch}
.cta-form-wrap{flex:1 1 480px;max-width:560px;display:flex;flex-direction:column;gap:14px}

.recon-steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.recon-steps li{display:flex;gap:12px;align-items:baseline;font-size:.82rem;letter-spacing:.02em;
  color:rgba(12,15,18,.82);line-height:1.5}
.rs-n{font-size:.68rem;letter-spacing:.18em;color:rgba(12,15,18,.5);flex:none}
.recon-note{margin-top:20px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(12,15,18,.62);line-height:1.7;max-width:40ch}

.recon-form{background:var(--paper);color:var(--obsidian);border-radius:4px;
  padding:clamp(22px,3.4vw,32px);box-shadow:0 30px 70px -34px rgba(12,15,18,.62)}
.rf-head{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ember);
  margin:0 0 20px;display:flex;align-items:center;gap:10px}
.rf-head::before{content:"";width:20px;height:2px;background:var(--ember);display:inline-block}

.rf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.rf-wide{grid-column:1 / -1}
.rf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.rf-field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(12,15,18,.66);display:flex;align-items:center;gap:8px}
.rf-opt{font-size:.58rem;letter-spacing:.12em;color:rgba(12,15,18,.42);
  border:1px solid rgba(12,15,18,.2);border-radius:2px;padding:1px 5px}

.recon-form input[type=text],
.recon-form input[type=email],
.recon-form input[type=tel],
.recon-form select{
  width:100%;font-family:var(--sans);font-size:.98rem;color:var(--obsidian);
  background:#fff;border:1px solid rgba(12,15,18,.22);border-radius:3px;
  padding:12px 13px;min-height:46px;
  transition:border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance:none;appearance:none;
}
.recon-form input::placeholder{color:rgba(12,15,18,.36)}
.recon-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230C0F12' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;cursor:pointer;
}
.recon-form select:invalid{color:rgba(12,15,18,.42)}
.recon-form input:hover,.recon-form select:hover{border-color:rgba(12,15,18,.42)}
.recon-form input:focus-visible,.recon-form select:focus-visible{
  outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(198,67,26,.22)}
.recon-form .rf-invalid{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.16)}

.rf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.rf-submit{margin-top:22px;width:100%;justify-content:center;min-height:50px;font-size:.78rem}
.rf-submit[disabled]{opacity:.6;cursor:progress}
.rf-legal{margin-top:14px;font-size:.62rem;letter-spacing:.08em;line-height:1.6;
  color:rgba(12,15,18,.5);text-transform:none}
.rf-error{margin-top:12px;font-size:.72rem;letter-spacing:.04em;color:#8C1D18;
  background:rgba(179,38,30,.09);border:1px solid rgba(179,38,30,.28);border-radius:3px;padding:9px 11px}

.rf-fallback{align-self:flex-start;color:rgba(12,15,18,.66);border-bottom-color:rgba(12,15,18,.26);
  font-size:.74rem}
.rf-fallback:hover{color:var(--obsidian);border-color:var(--obsidian)}

/* success state */
.recon-done{background:var(--obsidian);color:var(--paper);border-radius:4px;
  padding:clamp(26px,3.6vw,36px);box-shadow:0 30px 70px -34px rgba(12,15,18,.7)}
.rd-flag{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--blaze);
  margin:0 0 14px;display:flex;align-items:center;gap:10px}
.rd-flag::before{content:"";width:20px;height:2px;background:var(--blaze);display:inline-block}
.rd-title{font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:0 0 12px}
.rd-body{font-size:1rem;line-height:1.6;color:var(--ink-dim);max-width:44ch;margin:0 0 22px}
.recon-done .rd-book{background:var(--blaze);color:var(--obsidian);font-weight:600}
.recon-done .rd-book:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(255,90,31,.5)}
.rd-mail{display:inline-block;margin-top:16px;color:var(--ink-faint);border-bottom-color:rgba(244,242,237,.24)}
.rd-mail:hover{color:var(--paper);border-color:var(--paper)}
.rd-book[href="CALENDAR_URL"]{display:none}

@media (max-width:900px){
  .cta-inner{flex-direction:column;gap:34px}
  .cta-copy,.cta-form-wrap{max-width:none;width:100%}
}
@media (max-width:560px){
  .rf-grid{grid-template-columns:1fr}
}

/* --- specificity fix (2026-08-31) ---
   `.cta-band p {color:rgba(12,15,18,.78)}` is (0,1,1) and was beating every
   (0,1,0) paragraph rule below it. On the PAPER form that only muted the
   intended greys, but on the OBSIDIAN success panel it painted obsidian text
   on an obsidian ground, so "Brief received" and the whole body paragraph
   rendered invisible. Nothing errors when this happens - it only shows up in
   a screenshot. Re-stated at (0,2,0) so the panel wins. */
.cta-band .rd-flag{color:var(--blaze)}
.cta-band .rd-body{color:var(--ink-dim)}
.cta-band .rf-legal{color:rgba(12,15,18,.5)}
.cta-band .rf-error{color:#8C1D18}
.cta-band .recon-note{color:rgba(12,15,18,.62)}

/* --- recon: left-column mailto + Fillout embed slot (2026-08-31) --- */
.cta-band .recon-mailto{margin-top:16px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(12,15,18,.62)}
.cta-band .recon-mailto a{color:var(--obsidian);font-weight:600;
  border-bottom:1px solid rgba(12,15,18,.38);padding-bottom:1px}
.cta-band .recon-mailto a:hover{border-color:var(--obsidian)}
.cta-band .recon-mailto a:focus-visible{outline:2px solid var(--obsidian);outline-offset:3px}

.recon-embed{background:var(--paper);border-radius:4px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(12,15,18,.62);min-height:640px}
.recon-embed iframe{display:block;width:100%;height:760px;border:0;background:var(--paper)}
@media (max-width:560px){ .recon-embed iframe{height:820px} }

/* --- Calendly inline booking inside the success panel (2026-08-31) --- */
.calendly-slot{min-height:640px;margin:4px 0 18px;border-radius:4px;overflow:hidden;
  background:var(--paper)}
.calendly-slot:empty{display:none}
.calendly-slot.is-empty{display:none}
.calendly-slot iframe{display:block;width:100%;border:0}
.recon-done .rd-book[hidden]{display:none}
.recon-done .rd-book{margin-bottom:4px}
@media (max-width:560px){ .calendly-slot{min-height:820px} }

/* Calendly's own widget.css does not win here, so the iframe fell back to the
   HTML default of 150px. Give the slot a real height and let the iframe fill it. */
.calendly-slot{height:660px;min-height:0}
.calendly-slot iframe{height:100%}
@media (max-width:560px){ .calendly-slot{height:840px;min-height:0} }

/* --- mid-page conversion points (2026-08-31) --- */
.midcta{margin-top:clamp(40px,5vw,64px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.midcta-line{font-family:var(--display);font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.35;color:var(--ink);margin:0;max-width:44ch}
@media (max-width:640px){
  .midcta{flex-direction:column;align-items:flex-start;gap:16px}
  .midcta .btn{width:100%;justify-content:center}
}

/* ============================================================
   CATALOG / PRODUCTIZED UNITS  (2026-08-31)
   ============================================================ */
.catalog{background:var(--obsidian);border-top:1px solid var(--line)}
.catalog-lede{margin-top:18px;max-width:70ch;font-size:1.05rem;line-height:1.65;color:var(--ink-dim)}

.cat-grid{margin-top:clamp(34px,4vw,52px);display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

.cat-card{background:var(--gunmetal);border:1px solid var(--line);border-radius:4px;
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;
  transition:border-color .18s ease, transform .18s ease}
.cat-card:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.cat-live{border-color:rgba(255,90,31,.45);background:var(--gunmetal-hi)}
.cat-live:hover{border-color:var(--blaze)}

.cat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cat-tag{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--obsidian);
  background:var(--blaze);border-radius:2px;padding:4px 9px;font-weight:600}
.cat-soon{background:transparent;color:var(--sand);border:1px solid rgba(201,184,150,.4);font-weight:500}
.cat-no{font-size:.66rem;letter-spacing:.2em;color:var(--steel)}

.cat-card h3{font-family:var(--display);font-size:1.5rem;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.cat-desc{font-size:.96rem;line-height:1.6;color:var(--ink-dim);margin:0 0 18px}

.cat-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.cat-list li{position:relative;padding-left:20px;font-size:.88rem;line-height:1.5;color:var(--ink-dim)}
.cat-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;
  background:var(--blaze)}

.cat-price{margin:auto 0 18px;font-size:1.02rem;letter-spacing:.02em;color:var(--ink);font-weight:600}
.cat-price-sub{display:block;margin-top:4px;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);font-weight:400}
.cat-cta{align-self:flex-start}

.cat-foot{margin-top:clamp(26px,3vw,38px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.7rem;letter-spacing:.09em;line-height:1.8;color:var(--steel);max-width:80ch;
  text-transform:none}

@media (max-width:640px){ .cat-cta{width:100%;justify-content:center} }

/* --- nav fits 8 links + CTA (2026-08-31) ---
   Adding "Catalog" made the link band 889px inside an 837px slot: the logo was
   overlapped on the left and the CTA overlapped "Catalog" on the right. The
   original comment in this file already warned that 7 links + the CTA filled
   the shell. Tighter tracking and gap buy the room back without dropping a
   destination or shrinking the type. Desktop only - the drawer is untouched. */
.nav-links{gap:clamp(10px,1.05vw,15px)}
.nav-links a{letter-spacing:.13em}


/* ============================================================
   MEGA NAV  (2026-08-31)
   Replaces the 8-anchor flat bar. Four top-level items, two with
   dropdowns, so the header is proportional and the type can be
   bigger and more legible than the old .74rem / .2em tracking.
   ============================================================ */
.nav-links{position:relative;gap:clamp(6px,0.9vw,16px)}
.navitem{position:relative;display:flex;align-items:center}

/* EVEN NAV RHYTHM (2026-09-01).
   The gap a reader perceives is label-to-label, not box-to-box. With the caret
   IN the flex flow, the two dropdown triggers pushed an extra 15px (8px gap +
   7px caret) into the space after their own label, so System->Industries read
   tighter than Industries->Catalog and the row looked bunched at the right end.
   Fix: identical horizontal padding on every link, and the caret pulled out of
   the layout with a negative margin so it paints inside its own padding and
   contributes zero width. Label-to-label is then 16 + gap + 16 everywhere. */
.navlink{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--ink-dim);background:none;border:0;cursor:pointer;
  padding:12px 16px;border-radius:3px;white-space:nowrap;
  transition:color .16s ease, background .16s ease;
}
.navlink:hover,.navlink:focus-visible{color:var(--paper);background:rgba(244,242,237,.05)}
.navlink:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}

/* THE OTHER HALF OF THE EVEN-RHYTHM FIX (2026-09-01).
   `.nav-links a` (0,1,1) up at the top of this file out-specifies `.navlink`
   (0,1,0), so the four plain ANCHORS in the bar were never taking the mega-nav
   styling at all - they kept the old flat-bar values: 2px side padding against
   the two <button> triggers' 16px, and .74rem/.2em type against .82rem/.1em.
   Measured label-to-label, that made the row read 15.5 / 29.5 / 43.5px in the
   same bar. Restate the intended values at a specificity that wins, so anchors
   and buttons are one component. Kill the inherited underline sweep too: the
   triggers cannot have it, and half a row animating on hover is worse than
   none. */
.nav-links .navlink{
  font-size:.82rem;
  letter-spacing:.1em;
  padding:12px 16px;
}
.nav-links .navlink::after{display:none}

/* margin-right cancels the caret's own 7px box + the 7px flex gap before it, so
   it sits inside the link's 16px right padding and adds nothing to the row. */
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;flex:none;
  margin-right:-14px}
.navitem.open .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.navitem.open > .navlink{color:var(--paper);background:rgba(244,242,237,.06)}

.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:min(880px,92vw);background:var(--gunmetal);border:1px solid var(--line-hi);
  border-radius:5px;box-shadow:0 30px 70px -28px rgba(0,0,0,.8);
  padding:24px 26px 18px;z-index:70;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.mega-sm{min-width:min(460px,92vw)}
.navitem.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}

.mega-inner{display:grid;gap:20px 30px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain}
.mega-inner::-webkit-scrollbar{width:8px}
.mega-inner::-webkit-scrollbar-thumb{background:var(--steel);border-radius:4px}
.mega-inner::-webkit-scrollbar-track{background:transparent}

.mega-head{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mega-col a{display:block;padding:7px 8px;margin-left:-8px;border-radius:3px;
  font-size:.88rem;line-height:1.35;color:var(--ink-dim);
  transition:color .14s ease, background .14s ease}
.mega-col a:hover{color:var(--paper);background:rgba(255,90,31,.1)}
.mega-col a:focus-visible{outline:2px solid var(--blaze);outline-offset:1px;color:var(--paper)}

.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.66rem;letter-spacing:.1em;color:var(--steel)}
.mega-cta{color:var(--blaze);font-weight:600;letter-spacing:.1em}
.mega-cta:hover{color:var(--paper)}

.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}
.nav-cta{font-size:.78rem}

/* skip link, was missing entirely */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blaze);color:var(--obsidian);padding:12px 18px;border-radius:0 0 4px 0;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.skiplink:focus{left:0}

/* ---- mobile drawer additions ---- */
.mobile-nav{overflow-y:auto;overscroll-behavior:contain;padding-bottom:40px}
.m-sec{margin:22px 0 6px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blaze);border-top:1px solid var(--line);padding-top:18px}
.m-group{margin-bottom:14px}
.m-head{margin:0 0 4px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.m-group a{display:block;padding:9px 0;font-size:.95rem;color:var(--ink-dim);
  border-bottom:1px solid rgba(90,102,115,.14)}
.m-group a:last-child{border-bottom:0}

@media (max-width:1180px){
  .nav-links{display:none}
  .nav-cta{display:none}
}
@media (min-width:1181px){
  .nav-toggle{display:none !important}
}

/* ============================================================
   INDUSTRY PAGES
   ============================================================ */
.ind-body{background:var(--obsidian)}
.ind-hero{padding:calc(78px + clamp(52px,7vw,86px)) 0 clamp(46px,6vw,72px);
  position:relative;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#11151a 0%,var(--obsidian) 100%)}
.crumbs{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  margin-bottom:20px;display:flex;gap:9px;flex-wrap:wrap}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--blaze)}
.crumb-here{color:var(--ink-dim)}
.ind-hero h1{font-family:var(--display);font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06;
  margin:18px 0 0;max-width:18ch;color:var(--ink)}
.ind-lede{margin-top:20px;max-width:66ch;font-size:1.08rem;line-height:1.65;color:var(--ink-dim)}
.ind-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

.sec-lede{margin-top:14px;max-width:70ch;font-size:1rem;line-height:1.65;color:var(--ink-dim)}
.ind-friction h2,.ind-flows h2,.ind-systems h2{font-family:var(--display);
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;margin:16px 0 0;color:var(--ink)}

.fr-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.fr-list li{position:relative;padding:16px 18px 16px 40px;background:var(--gunmetal);
  border:1px solid var(--line);border-radius:4px;font-size:.96rem;line-height:1.55;color:var(--ink-dim)}
.fr-list li::before{content:"";position:absolute;left:18px;top:24px;width:11px;height:1.5px;
  background:var(--blaze)}
.ind-note{margin-top:22px;font-size:.72rem;letter-spacing:.06em;line-height:1.7;color:var(--steel);
  border-left:2px solid var(--sand);padding-left:14px;max-width:70ch;text-transform:none}

.ind-flows{background:#0e1216;border-block:1px solid var(--line)}
.wf-grid{margin-top:30px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.wf-card{background:var(--gunmetal);border:1px solid var(--line);border-radius:4px;
  padding:24px;transition:border-color .18s ease,transform .18s ease}
.wf-card:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.wf-no{font-size:.66rem;letter-spacing:.2em;color:var(--blaze)}
.wf-card h3{font-family:var(--display);font-size:1.22rem;margin:10px 0 10px;color:var(--ink)}
.wf-card p{font-size:.92rem;line-height:1.6;color:var(--ink-dim);margin:0}

.sys-wrap{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.sys-chip{font-size:.76rem;letter-spacing:.06em;color:var(--ink-dim);background:var(--gunmetal);
  border:1px solid var(--line);border-radius:3px;padding:9px 14px}
.sys-foot{margin-top:24px;font-size:.72rem;letter-spacing:.1em}
.sys-foot a{color:var(--blaze)}
.sys-foot a:hover{color:var(--paper)}

/* industries index */
.ix-group{margin-bottom:44px}
.ix-head{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ix-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ix-card{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--gunmetal);border:1px solid var(--line);border-radius:4px;padding:18px 20px;
  transition:border-color .16s ease,transform .16s ease,background .16s ease}
.ix-card:hover{border-color:var(--blaze);transform:translateY(-2px);background:var(--gunmetal-hi)}
.ix-name{font-size:1rem;color:var(--ink)}
.ix-go{color:var(--blaze);font-size:.9rem}
.ix-foot{margin-top:10px;font-size:.74rem;letter-spacing:.08em;color:var(--steel);text-transform:none}
.ix-foot a{color:var(--blaze)}

/* ============================================================
   CONNECTORS
   ============================================================ */
.connectors{background:#0e1216;border-top:1px solid var(--line)}
.cn-lede{margin-top:18px;max-width:74ch;font-size:1.05rem;line-height:1.65;color:var(--ink-dim)}

.cs-grid{margin-top:clamp(32px,4vw,48px);display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.cs-step{background:var(--gunmetal);border:1px solid var(--line);border-radius:4px;padding:24px}
.cs-no{font-size:.66rem;letter-spacing:.22em;color:var(--blaze)}
.cs-step h3{font-family:var(--display);font-size:1.3rem;margin:10px 0 10px;color:var(--ink)}
.cs-step p{font-size:.92rem;line-height:1.6;color:var(--ink-dim);margin:0}

.cn-wrap{margin-top:clamp(32px,4vw,48px);display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cn-head{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cn-chips{display:flex;flex-wrap:wrap;gap:7px}
.cn-chip{font-family:var(--sans);font-size:.8rem;color:var(--ink-dim);
  background:var(--gunmetal);border:1px solid var(--line);border-radius:3px;padding:6px 11px;
  transition:border-color .14s ease,color .14s ease}
.cn-chip:hover{border-color:var(--line-hi);color:var(--paper)}
.cn-foot{margin-top:clamp(28px,3vw,40px);padding-top:20px;border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.08em;line-height:1.8;color:var(--steel);text-transform:none}
.cn-foot a{color:var(--blaze)}
.cn-foot a:hover{color:var(--paper)}

/* focus visibility, site-wide - there were only 2 :focus rules before this */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--blaze);outline-offset:3px;border-radius:2px}


/* --- mega link reset (2026-08-31) ---
   `.nav-links a` upstream sets mono / .2em / uppercase / nowrap for the top bar.
   Dropdown links are body text, not nav chrome, so undo all four here. Stated
   explicitly so a later reorder of this file cannot silently re-break it. */
.mega-col a{
  font-family:var(--sans) !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  white-space:normal !important;
  font-size:.9rem;
  padding:8px 9px;
}
.mega-col a::after{display:none !important}

/* four even columns that fit the longest label, then a clean second row */
.mega-inner{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 26px}
.mega{min-width:min(940px,94vw)}

/* keep the panel inside the viewport rather than centred on a narrow trigger */
.navitem.has-mega{position:static}
.nav-links{position:relative}
.mega{left:50%;transform:translateX(-50%) translateY(-6px)}
.navitem.open .mega{transform:translateX(-50%) translateY(0)}

@media (max-width:1300px){
  .mega-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega{min-width:min(720px,94vw)}
}


/* ============================================================
   LIGHTER SURFACES (2026-08-31)
   Tony: the CIS dashboard on the homepage is too dark to read.
   The panel greys were near-black on a near-black page, so the
   whole component read as one flat mass. Raise the surface and
   the hairlines rather than changing the palette - Obsidian and
   Blaze stay exactly as the brand guide defines them.
   ============================================================ */
:root{
  --panel:#1F262D;        /* was gunmetal #1C2126 */
  --panel-hi:#28313A;
  --panel-line:rgba(122,136,150,.34);
  --ink-soft:rgba(244,242,237,.80);   /* was .66 - too low on dark panels */
}

.dash-sec{background:#12171C}
.dash-sec .dash-shell,.dash-sec .dash-card,.dash-sec .dash-panel,
.dash-sec .dash-side,.dash-sec .dash-main{background:var(--panel) !important;
  border-color:var(--panel-line) !important}
.dash-sec .dash-metric,.dash-sec .dash-kpi,.dash-sec .dash-feed-row{
  background:var(--panel-hi) !important;border-color:var(--panel-line) !important}
.dash-sec p,.dash-sec li,.dash-sec .dash-desc{color:var(--ink-soft)}

/* ============================================================
   DRAGGABLE INDUSTRY DASHBOARD
   ============================================================ */
.ind-dash{background:#12171C;border-block:1px solid var(--line)}
.ind-dash h2{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.15;margin:16px 0 0;color:var(--ink)}

.dbx{margin-top:30px;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:6px;overflow:hidden;box-shadow:0 28px 60px -34px rgba(0,0,0,.8)}
.dbx-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;background:var(--panel-hi);border-bottom:1px solid var(--panel-line)}
.dbx-brand{font-size:.72rem;letter-spacing:.18em;color:var(--blaze);font-weight:600}
.dbx-scope{font-size:.84rem;color:var(--paper);background:rgba(244,242,237,.08);
  border:1px solid var(--panel-line);border-radius:3px;padding:4px 11px}
.dbx-live{margin-left:auto;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);display:inline-flex;align-items:center;gap:7px}
.dbx-dot{width:7px;height:7px;border-radius:50%;background:var(--sand);display:inline-block}

.dbx-grid{display:grid;gap:14px;padding:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.dbx-panel{background:var(--panel-hi);border:1px solid var(--panel-line);border-radius:4px;
  padding:16px;cursor:grab;transition:border-color .16s ease,box-shadow .16s ease,opacity .16s ease}
.dbx-panel:hover{border-color:var(--steel)}
.dbx-panel.dragging{opacity:.45;cursor:grabbing}
.dbx-panel.dragover{border-color:var(--blaze);box-shadow:0 0 0 2px rgba(255,90,31,.28)}
.dbx-wide{grid-column:1 / -1}

.dbx-panel-head{display:flex;align-items:center;justify-content:space-between;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--panel-line)}
.dbx-drag{color:var(--steel);letter-spacing:-2px;font-size:.9rem}

.dbx-agent{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;margin-bottom:8px;background:rgba(244,242,237,.04);
  border:1px solid var(--panel-line);border-radius:3px}
.dbx-agent.is-flagged{border-color:rgba(255,90,31,.55);background:rgba(255,90,31,.08)}
.dbx-agent-name{font-size:.9rem;color:var(--paper)}
.dbx-state{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;white-space:nowrap}
.st-run{color:#7FE0A8;border:1px solid rgba(127,224,168,.4)}
.st-cmd{color:var(--blaze);border:1px solid rgba(255,90,31,.55)}
.st-clear{color:var(--steel);border:1px solid var(--panel-line)}

.dbx-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.dbx-tile{background:rgba(244,242,237,.04);border:1px solid var(--panel-line);
  border-radius:3px;padding:13px 12px;display:flex;flex-direction:column;gap:5px}
.dbx-tile-label{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.dbx-tile-value{font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--paper)}
.dbx-tile-sub{font-size:.58rem;letter-spacing:.08em;color:var(--steel);line-height:1.4}

.dbx-row{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(122,136,150,.18)}
.dbx-time{font-size:.66rem;color:var(--steel)}
.dbx-tag{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blaze);
  white-space:nowrap}
.dbx-text{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}

.dbx-approve{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--panel-line)}
.dbx-approve > .mono{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blaze)}
.dbx-btns{display:flex;gap:9px}
.dbx-btn{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border-radius:3px;cursor:pointer;
  background:transparent;color:var(--ink-soft);border:1px solid var(--panel-line)}
.dbx-btn:hover{color:var(--paper);border-color:var(--steel)}
.dbx-btn-go{background:var(--blaze);color:var(--obsidian);border-color:var(--blaze);font-weight:600}
.dbx-btn-go:hover{color:var(--obsidian);filter:brightness(1.08)}

.dbx-foot{padding:14px 18px;background:rgba(0,0,0,.22);border-top:1px solid var(--panel-line);
  font-size:.62rem;letter-spacing:.06em;line-height:1.7;color:var(--steel);
  margin:0;text-transform:none}

/* ============================================================
   TRUST PAGE
   ============================================================ */
.tp-grid{margin-top:34px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.tp-card{display:block;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:4px;padding:22px;transition:border-color .16s ease,transform .16s ease}
.tp-card:hover{border-color:var(--blaze);transform:translateY(-3px)}
.tp-name{font-family:var(--display);font-size:1.22rem;margin:0 0 10px;color:var(--ink)}
.tp-blurb{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0 0 14px}
.tp-go{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blaze)}

.tposture h2,.td-sec h2,.faq-sec h2{font-family:var(--display);
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;margin:16px 0 0;color:var(--ink)}
.ti-head{margin:38px 0 14px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);padding-bottom:9px;border-bottom:1px solid var(--line)}
.ti-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ti-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;padding:18px}
.ti-tag{display:inline-block;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);border:1px solid rgba(201,184,150,.4);border-radius:2px;padding:3px 8px;
  margin-bottom:11px}
.ti-tag-req{color:var(--blaze);border-color:rgba(255,90,31,.5)}
.ti-name{font-size:1rem;color:var(--ink);margin:0 0 7px;font-weight:600}
.ti-desc{font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin:0}
.ti-foot{margin-top:22px;font-size:.72rem;letter-spacing:.08em;color:var(--steel);text-transform:none}
.ti-foot a{color:var(--blaze)}

.td-sec{border-top:1px solid var(--line)}
.td-list{margin-top:28px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.td-row{background:var(--obsidian);padding:20px 22px}
.td-q{font-size:1rem;color:var(--ink);margin:0 0 8px;font-weight:600}
.td-a{font-size:.94rem;line-height:1.65;color:var(--ink-soft);margin:0;max-width:80ch}

.faq-sec{background:#12171C;border-top:1px solid var(--line)}
.faq-list{margin-top:28px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--line);background:var(--obsidian)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-size:1rem;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:background .14s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--blaze);font-size:1.2rem;flex:none;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{background:rgba(244,242,237,.03)}
.faq-item p{margin:0;padding:0 22px 20px;font-size:.94rem;line-height:1.7;
  color:var(--ink-soft);max-width:82ch}

.trust-cta-card{background:var(--paper);color:var(--obsidian);border-radius:4px;
  padding:clamp(24px,3.4vw,32px);box-shadow:0 30px 70px -34px rgba(12,15,18,.62)}
.tcc-body{font-size:1rem;line-height:1.6;color:rgba(12,15,18,.72);margin:0 0 22px;max-width:40ch}
.cta-band .tcc-body{color:rgba(12,15,18,.72)}
.tcc-mail{display:inline-block;margin-top:16px;color:rgba(12,15,18,.66);
  border-bottom-color:rgba(12,15,18,.26)}
.tcc-mail:hover{color:var(--obsidian);border-color:var(--obsidian)}

/* --- dashboard tile legibility (2026-08-31) ---
   Tile labels and sub-text were rendering near-invisible against the raised
   panel: --steel #5A6673 on #28313A is about 1.9:1, well under the 4.5:1 AA
   floor for small text. This is the same "too dark to read" Tony flagged on the
   homepage board. Lift the label and sub, not the palette. */
.dbx-tile-label{color:#9FB0C0}
.dbx-tile-sub{color:#8C9BAA}
.dbx-time{color:#9FB0C0}
.dbx-foot{color:#8C9BAA}
.dbx-tile{background:rgba(244,242,237,.07)}
.dbx-agent{background:rgba(244,242,237,.06)}
.st-clear{color:#9FB0C0;border-color:rgba(159,176,192,.4)}


/* ============================================================
   MEGA DROPDOWN: orange treatment (Tony, 2026-08-31)
   The industry links and the footer line now carry Blaze rather
   than muted paper. Note this spends the brand's only saturated
   signal on 30 links, so the group headings stay Sand and the
   hover state goes to Paper to keep a hierarchy.
   ============================================================ */
.mega-col a{color:var(--blaze) !important}
.mega-col a:hover{color:var(--paper) !important;background:rgba(255,90,31,.14)}
.mega-foot{color:var(--blaze)}
.mega-foot .mono{color:var(--blaze)}
.mega-cta{color:var(--blaze);font-weight:700}
.mega-cta:hover{color:var(--paper)}

/* ============================================================
   LIVE DASHBOARD
   ============================================================ */
.dbx-clock{margin-left:14px;font-size:.68rem;letter-spacing:.1em;color:#9FB0C0}
.dbx-live{margin-left:auto}

button.dbx-agent{width:100%;text-align:left;font:inherit;cursor:pointer;
  transition:border-color .14s ease, background .14s ease}
button.dbx-agent:hover{border-color:var(--steel);background:rgba(244,242,237,.09)}
.dbx-agent.is-open{border-color:var(--blaze);background:rgba(255,90,31,.1)}
.dbx-agent.is-added{animation:dbxIn .34s ease both}
@keyframes dbxIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .dbx-agent.is-added,.dbx-tile.is-added,.dbx-row.is-new{animation:none}
}

.dbx-detail{margin:12px 0 0;padding:13px 14px;background:rgba(255,90,31,.08);
  border:1px solid rgba(255,90,31,.32);border-radius:3px;
  font-size:.86rem;line-height:1.55;color:var(--ink-soft)}

.dbx-tile.is-added{animation:dbxIn .34s ease both;border-color:rgba(255,90,31,.42)}

.dbx-units{display:flex;flex-direction:column;gap:8px}
.dbx-unit{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  background:rgba(244,242,237,.05);border:1px solid var(--panel-line);border-radius:3px;
  padding:11px 12px;cursor:pointer;font:inherit;
  transition:border-color .14s ease, background .14s ease}
.dbx-unit:hover{border-color:var(--steel);background:rgba(244,242,237,.09)}
.dbx-unit.is-on{border-color:var(--blaze);background:rgba(255,90,31,.1)}
.dbx-unit-tick{width:15px;height:15px;flex:none;margin-top:2px;border-radius:2px;
  border:1.5px solid var(--steel);position:relative;transition:border-color .14s ease}
.dbx-unit.is-on .dbx-unit-tick{border-color:var(--blaze);background:var(--blaze)}
.dbx-unit.is-on .dbx-unit-tick::after{content:"";position:absolute;left:4px;top:0;
  width:4px;height:9px;border-right:2px solid var(--obsidian);border-bottom:2px solid var(--obsidian);
  transform:rotate(42deg)}
.dbx-unit-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.dbx-unit-name{font-size:.9rem;color:var(--paper)}
.dbx-unit-blurb{font-size:.76rem;line-height:1.45;color:#8C9BAA}
.dbx-unit-foot{margin:12px 0 0;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel)}

.dbx-streaming{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7FE0A8;border:1px solid rgba(127,224,168,.36);border-radius:2px;padding:2px 7px;
  margin-left:auto;margin-right:10px}
.dbx-rows{min-height:210px}
.dbx-row.is-new{animation:dbxIn .5s ease both}
.dbx-row.is-flagged .dbx-tag{color:var(--sand)}
.st-hold{color:var(--sand);border:1px solid rgba(201,184,150,.45)}
.dbx-btn[disabled]{opacity:.42;cursor:not-allowed}
[data-dbx-signal].is-clear{color:#7FE0A8 !important}


/* ============================================================
   HOMEPAGE TABS (2026-08-31)
   The page ran ~12,300px. Hero and the CIS explainer stay always
   visible; the nine sections between them became six panels, so a
   visitor scrolls one at a time. Section ids are unchanged, so
   every existing anchor still resolves - the JS opens whichever
   panel holds the target.
   ============================================================ */
.tabwrap{border-top:1px solid var(--line)}
.tabbar-outer{position:sticky;top:78px;z-index:40;
  background:rgba(12,15,18,.94);backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line)}
.tabbar-shell{padding-block:0}
.tabbar{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}

.tabbtn{
  flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-dim);padding:18px 16px;cursor:pointer;white-space:nowrap;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.tabbtn:hover{color:var(--paper);background:rgba(244,242,237,.04)}
.tabbtn.is-on{color:var(--blaze);border-bottom-color:var(--blaze)}
.tabbtn:focus-visible{outline:2px solid var(--blaze);outline-offset:-2px}

.tabpanel[hidden]{display:none}
.tabpanel > section:first-child{border-top:0}

@media (max-width:1180px){
  .tabbar-outer{top:71px}
  .tabbtn{padding:15px 13px;font-size:.72rem}
}

/* --- catalog close block (2026-08-31) --- */
.cat-soon-note{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--sand)}
.cat-close{margin-top:clamp(28px,3vw,40px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cat-close-copy{flex:1 1 420px;min-width:0}
.cat-close-head{font-family:var(--display);font-size:1.28rem;color:var(--ink);margin:0 0 8px}
.cat-close-body{font-size:.96rem;line-height:1.65;color:var(--ink-soft);margin:0;max-width:66ch}
.cat-close-cta{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}
@media (max-width:700px){ .cat-close-cta{width:100%} .cat-close-cta .btn{flex:1 1 auto;justify-content:center} }

/* --- waste grid, replacing the client-figure metric band (2026-08-31) --- */
.wst-grid{margin-top:clamp(30px,4vw,44px);display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.wst{background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;
  padding:24px;display:flex;flex-direction:column;
  transition:border-color .16s ease,transform .16s ease}
.wst:hover{border-color:var(--steel);transform:translateY(-3px)}
.wst-no{font-size:.66rem;letter-spacing:.22em;color:var(--blaze)}
.wst h3{font-family:var(--display);font-size:1.2rem;line-height:1.25;margin:12px 0 10px;color:var(--ink)}
.wst p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0 0 18px}
.wst-verb{margin-top:auto;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand);padding-top:12px;border-top:1px solid var(--panel-line)}
.wst-truth{background:var(--panel-hi);border-color:rgba(255,90,31,.42)}
.wst-truth .wst-verb{color:var(--blaze)}
.metric-foot{margin-top:26px;font-size:.68rem;letter-spacing:.08em;color:var(--steel);
  text-transform:none}


/* ============================================================
   HOMEPAGE TAB STRIP, v2 (2026-08-31)
   Bigger, brighter, and obviously clickable. The underline-only
   version read as a caption rather than a control.
   ============================================================ */
.tabbar-outer{background:rgba(12,15,18,.96)}
.tabbar-shell{padding-block:0}
.tabbar{gap:10px;padding-block:16px}

.tabbtn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line-hi);border-bottom:1px solid var(--line-hi);
  border-radius:4px;background:var(--panel);
  font-family:var(--mono);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--paper);
  padding:15px 20px;line-height:1;
  box-shadow:0 2px 0 rgba(0,0,0,.28);
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .14s ease;
}
.tabbtn::before{
  content:attr(data-n);
  font-size:.62rem;letter-spacing:.14em;color:var(--steel);
  border-right:1px solid var(--line-hi);padding-right:10px;
  transition:color .16s ease, border-color .16s ease;
}
.tabbtn:hover{background:var(--panel-hi);border-color:var(--steel);
  color:var(--paper);transform:translateY(-2px)}
.tabbtn:hover::before{color:var(--sand)}

.tabbtn.is-on{
  background:var(--blaze);border-color:var(--blaze);color:var(--obsidian);
  box-shadow:0 10px 26px -12px rgba(255,90,31,.75);
}
.tabbtn.is-on::before{color:rgba(12,15,18,.6);border-right-color:rgba(12,15,18,.28)}
.tabbtn:focus-visible{outline:2px solid var(--blaze);outline-offset:3px}

/* a hint that the strip scrolls on narrow screens */
.tabbar-shell{position:relative}
.tabbar-shell::after{content:"";position:absolute;right:0;top:0;bottom:0;width:44px;
  pointer-events:none;background:linear-gradient(90deg,rgba(12,15,18,0),rgba(12,15,18,.96))}

@media (max-width:1180px){
  .tabbar-outer{top:71px}
  .tabbtn{font-size:.78rem;padding:13px 16px}
}
@media (max-width:640px){
  .tabbtn{font-size:.74rem;padding:12px 14px;gap:8px}
  .tabbtn::before{padding-right:8px}
}

/* ============================================================
   DASHBOARD LANDING PAGE (2026-08-31)
   ============================================================ */
.dp-what h2,.dp-point h2,.dp-loop h2,.dp-panels h2,.dp-build h2{
  font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;
  margin:16px 0 0;color:var(--ink)}

.wi-grid{margin-top:30px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.wi-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;padding:22px}
.wi-card:last-child{border-color:rgba(255,90,31,.45);background:var(--panel-hi)}
.wi-card h3{font-family:var(--display);font-size:1.12rem;margin:0 0 10px;color:var(--ink)}
.wi-card p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0}

.dp-point{background:#12171C;border-block:1px solid var(--line)}
.pt-grid{margin-top:30px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.pt-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;padding:24px}
.pt-no{font-size:.66rem;letter-spacing:.22em;color:var(--blaze)}
.pt-card h3{font-family:var(--display);font-size:1.2rem;line-height:1.25;margin:12px 0 10px;color:var(--ink)}
.pt-card p{font-size:.93rem;line-height:1.62;color:var(--ink-soft);margin:0}

.lp-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px;
  background:var(--panel-line);border:1px solid var(--panel-line);border-radius:4px;overflow:hidden}
.lp-step{display:flex;gap:20px;background:var(--obsidian);padding:24px 26px}
.lp-no{flex:none;font-size:.72rem;letter-spacing:.2em;color:var(--blaze);padding-top:4px}
.lp-step h3{font-family:var(--display);font-size:1.15rem;margin:0 0 8px;color:var(--ink)}
.lp-step p{font-size:.94rem;line-height:1.62;color:var(--ink-soft);margin:0;max-width:78ch}

.dp-panels{background:#12171C;border-block:1px solid var(--line)}
.pn-list{margin-top:28px;display:grid;gap:2px;background:var(--panel-line);
  border:1px solid var(--panel-line);border-radius:4px;overflow:hidden}
.pn-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:22px;
  background:var(--obsidian);padding:20px 24px;align-items:baseline}
.pn-name{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blaze);margin:0}
.pn-desc{font-size:.94rem;line-height:1.62;color:var(--ink-soft);margin:0;max-width:76ch}
@media (max-width:680px){ .pn-row{grid-template-columns:1fr;gap:8px} }

.dp-build-body{margin-top:24px;max-width:78ch;display:flex;flex-direction:column;gap:16px}
.dp-build-body p{font-size:1rem;line-height:1.7;color:var(--ink-soft);margin:0}
.dp-build-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   TAB STRIP FIXES (2026-08-31)
   1. NOT sticky any more. The header is already position:fixed at
      78px; a second sticky bar under it meant ~140px of permanent
      chrome sitting on top of the content as you read down. Once
      you have picked a tab the strip has done its job, so it now
      scrolls away with the page.
   2. The right-edge scroll fade was painting over the last tab, so
      "06 Working With Us" looked cut off. It only ever mattered on
      a narrow strip, and it cost more than it bought. Removed.
   ============================================================ */
.tabbar-outer{position:static;top:auto}
.tabbar-shell::after{display:none}
.tabbar{padding-block:18px;flex-wrap:wrap}

/* in-page anchors must clear the fixed header rather than hide under it */
section[id],div[id]{scroll-margin-top:96px}
html{scroll-padding-top:96px}

@media (max-width:1180px){
  section[id],div[id]{scroll-margin-top:88px}
  html{scroll-padding-top:88px}
}
@media (max-width:640px){
  .tabbar{gap:8px;padding-block:14px}
  .tabbtn{flex:1 1 calc(50% - 4px);justify-content:center}
}

/* ============================================================
   TAB STRIP: all six on one row (2026-08-31)
   The flex + wrap version dropped "Working With Us" onto a second
   line at 1240 (the shell max-width). A six-column grid makes them
   share the row evenly and stay one row at every desktop size,
   then falls back to two columns on a phone.
   ============================================================ */
.tabbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  overflow:visible}
.tabbtn{
  justify-content:center;text-align:center;
  padding:14px 10px;font-size:.76rem;letter-spacing:.07em;
  min-width:0;
}
.tabbtn::before{padding-right:8px;font-size:.6rem}

@media (max-width:1120px){
  .tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tabbtn{font-size:.74rem}
}
@media (max-width:640px){
  .tabbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .tabbtn{font-size:.7rem;padding:12px 8px;letter-spacing:.05em}
  .tabbtn::before{padding-right:6px}
}


/* ============================================================
   CIS COMMAND BOARD, app-shell (2026-08-31)
   Structure modelled on the real product demo in the bundle:
   sidebar + topbar, KPI row, cards with a head and padded body,
   state pills with paired colours, a queue table. Their build is
   light navy because it was skinned for HTX; this is the same
   anatomy in Convoy's own palette.
   ============================================================ */
.cbx-shell{max-width:1240px}
.cbx{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;
  overflow:hidden;box-shadow:0 30px 70px -34px rgba(0,0,0,.85);margin-top:30px;
}

/* ---------- sidebar ---------- */
.cbx-side{background:#161C22;border-right:1px solid var(--panel-line);
  padding:18px 14px 20px;display:flex;flex-direction:column;gap:4px}
.cbx-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;
  border-bottom:1px solid var(--panel-line);margin-bottom:14px}
.cbx-brand-mark{color:var(--blaze);font-size:1rem;letter-spacing:-1px}
.cbx-brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.cbx-brand-txt strong{font-family:var(--display);font-size:1rem;color:var(--paper);letter-spacing:.04em}
.cbx-brand-txt em{font-style:normal;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cbx-nav-label{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  margin:14px 8px 8px}
.cbx-nav{display:flex;flex-direction:column;gap:2px}
.cbx-nav-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;border-radius:5px;cursor:pointer;font:inherit;
  font-size:.82rem;color:var(--ink-soft);padding:9px 10px;
  transition:background .14s ease,color .14s ease}
.cbx-nav-item:hover{background:rgba(244,242,237,.06);color:var(--paper)}
.cbx-nav-item.is-on{background:rgba(255,90,31,.14);color:var(--paper)}
.cbx-nav-dot{width:5px;height:5px;border-radius:50%;background:var(--steel);flex:none}
.cbx-nav-item.is-on .cbx-nav-dot{background:var(--blaze);box-shadow:0 0 0 3px rgba(255,90,31,.2)}

.cbx-units{display:flex;flex-direction:column;gap:6px}
.cbx-unit{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  background:rgba(244,242,237,.04);border:1px solid var(--panel-line);border-radius:5px;
  padding:9px 10px;cursor:pointer;font:inherit;transition:border-color .14s ease,background .14s ease}
.cbx-unit:hover{border-color:var(--steel);background:rgba(244,242,237,.08)}
.cbx-unit.is-on{border-color:var(--blaze);background:rgba(255,90,31,.12)}
.cbx-unit-tick{width:13px;height:13px;flex:none;margin-top:2px;border-radius:3px;
  border:1.5px solid var(--steel);position:relative}
.cbx-unit.is-on .cbx-unit-tick{border-color:var(--blaze);background:var(--blaze)}
.cbx-unit.is-on .cbx-unit-tick::after{content:"";position:absolute;left:3.5px;top:0;
  width:3px;height:8px;border-right:2px solid var(--obsidian);border-bottom:2px solid var(--obsidian);
  transform:rotate(42deg)}
.cbx-unit-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cbx-unit-name{font-size:.8rem;color:var(--paper)}
.cbx-unit-blurb{font-size:.68rem;line-height:1.4;color:#8C9BAA}
.cbx-side-foot{margin-top:auto;padding-top:16px;font-size:.54rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel)}

/* ---------- topbar ---------- */
.cbx-main{display:flex;flex-direction:column;min-width:0;background:#12171C}
.cbx-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 22px;border-bottom:1px solid var(--panel-line);background:var(--panel)}
.cbx-top-title{display:flex;align-items:baseline;gap:12px;min-width:0}
.cbx-top-title h3{font-family:var(--display);font-size:1.06rem;margin:0;color:var(--paper)}
.cbx-scope{font-size:.66rem;letter-spacing:.1em;color:var(--sand);
  background:rgba(201,184,150,.12);border:1px solid rgba(201,184,150,.28);
  border-radius:3px;padding:3px 9px}
.cbx-asof{margin-left:auto;font-size:.66rem;letter-spacing:.08em;color:#9FB0C0}
.cbx-badge{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
  border:1px solid rgba(201,184,150,.4);border-radius:3px;padding:3px 8px;
  display:inline-flex;align-items:center;gap:6px}
.cbx-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--sand)}

/* ---------- body ---------- */
.cbx-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:16px}
.cbx-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cbx-kpi{background:var(--panel);border:1px solid var(--panel-line);border-radius:7px;
  padding:15px 16px;display:flex;flex-direction:column;gap:5px}
.cbx-kpi-label{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#9FB0C0}
.cbx-kpi-value{font-family:var(--display);font-size:1.72rem;line-height:1;color:var(--paper)}
.cbx-kpi-foot{font-size:.58rem;letter-spacing:.06em;color:#8C9BAA;line-height:1.4}
.cbx-delta{font-style:normal;margin-left:6px;padding:1px 5px;border-radius:2px;font-size:.56rem}
.cbx-delta.is-up{color:#7FE0A8;background:rgba(127,224,168,.12)}
.cbx-delta.is-dn{color:#F0A868;background:rgba(240,168,104,.12)}

.cbx-cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.cbx-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden}
.cbx-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--panel-line);background:rgba(244,242,237,.03)}
.cbx-card-head h4{font-family:var(--display);font-size:.94rem;margin:0;color:var(--paper)}
.cbx-card-meta{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.cbx-card-pad{padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.cbx-card-foot{margin-top:auto;display:flex;gap:8px;justify-content:flex-end;
  padding:12px 16px;border-top:1px solid var(--panel-line)}

.cbx-agent{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;font:inherit;cursor:pointer;
  background:rgba(244,242,237,.04);border:1px solid var(--panel-line);border-radius:5px;
  padding:10px 12px;transition:border-color .14s ease,background .14s ease}
.cbx-agent:hover{border-color:var(--steel);background:rgba(244,242,237,.08)}
.cbx-agent.is-open{border-color:var(--blaze);background:rgba(255,90,31,.1)}
.cbx-agent.is-flagged{border-color:rgba(255,90,31,.5);background:rgba(255,90,31,.08)}
.cbx-agent.is-added{animation:dbxIn .34s ease both}
.cbx-agent-l{display:flex;align-items:center;gap:9px;min-width:0}
.cbx-agent-name{font-size:.88rem;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-dot{width:7px;height:7px;border-radius:50%;flex:none}
.cbx-dot.is-run{background:#7FE0A8}
.cbx-dot.is-cmd{background:var(--blaze);box-shadow:0 0 0 3px rgba(255,90,31,.22)}
.cbx-dot.is-clear{background:var(--steel)}

.cbx-pill{font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;white-space:nowrap;border:1px solid transparent}
.cbx-pill.is-run{color:#7FE0A8;background:rgba(127,224,168,.1);border-color:rgba(127,224,168,.3)}
.cbx-pill.is-cmd{color:var(--blaze);background:rgba(255,90,31,.12);border-color:rgba(255,90,31,.42)}
.cbx-pill.is-clear{color:#9FB0C0;background:rgba(159,176,192,.08);border-color:rgba(159,176,192,.26)}
.cbx-pill.is-hold{color:var(--sand);background:rgba(201,184,150,.1);border-color:rgba(201,184,150,.34)}

.cbx-detail{margin:0 16px 14px;padding:12px 13px;background:rgba(255,90,31,.08);
  border:1px solid rgba(255,90,31,.3);border-radius:5px;
  font-size:.84rem;line-height:1.55;color:var(--ink-soft)}

.cbx-stream{font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;color:#7FE0A8;
  border:1px solid rgba(127,224,168,.34);border-radius:3px;padding:2px 7px}
.cbx-rows{gap:0;min-height:212px}
.cbx-row{display:grid;grid-template-columns:auto auto 1fr;gap:11px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid rgba(122,136,150,.16)}
.cbx-row:last-child{border-bottom:0}
.cbx-row.is-new{animation:dbxIn .5s ease both}
.cbx-time{font-size:.64rem;color:#9FB0C0}
.cbx-tag{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blaze);white-space:nowrap}
.cbx-text{font-size:.86rem;line-height:1.5;color:var(--ink-soft)}

.cbx-table-wrap{overflow-x:auto}
.cbx-table{width:100%;border-collapse:collapse;min-width:460px}
.cbx-table th{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:#9FB0C0;text-align:left;padding:11px 16px;border-bottom:1px solid var(--panel-line);
  background:rgba(244,242,237,.02);font-weight:500}
.cbx-table td{padding:12px 16px;font-size:.86rem;color:var(--ink-soft);
  border-bottom:1px solid rgba(122,136,150,.14)}
.cbx-table tr:last-child td{border-bottom:0}
.cbx-table tbody tr:hover td{background:rgba(244,242,237,.03)}
.cbx-td-name{color:var(--paper)}
.cbx-td-age{color:#8C9BAA}

.cbx-btn{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 14px;border-radius:4px;cursor:pointer;
  background:transparent;color:var(--ink-soft);border:1px solid var(--panel-line)}
.cbx-btn:hover{color:var(--paper);border-color:var(--steel)}
.cbx-btn.is-go{background:var(--blaze);color:var(--obsidian);border-color:var(--blaze);font-weight:600}
.cbx-btn.is-go:hover{filter:brightness(1.08);color:var(--obsidian)}
.cbx-btn[disabled]{opacity:.4;cursor:not-allowed}

.cbx-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cbx-tiles .dbx-tile{background:var(--panel);border:1px solid rgba(255,90,31,.4);border-radius:7px;
  padding:15px 16px}

.cbx-foot{margin-top:16px;font-size:.64rem;letter-spacing:.06em;line-height:1.7;
  color:var(--steel);text-transform:none;max-width:88ch}

[data-dbx-signal].is-clear{color:#7FE0A8 !important}

@media (max-width:900px){
  .cbx{grid-template-columns:1fr}
  .cbx-side{border-right:0;border-bottom:1px solid var(--panel-line)}
  .cbx-nav{flex-direction:row;flex-wrap:wrap}
  .cbx-nav-item{width:auto}
  .cbx-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}


/* ============================================================
   CIS COMMAND BOARD v3 (2026-08-31)
   LIGHT theme. The product demo in the bundle is white surfaces
   on a pale canvas, and an operations product genuinely looks
   like that - a white board framed inside the dark site reads as
   "this is the software", not "more page". Convoy keeps the
   accent: Blaze is still the only saturated colour.
   These rules come after the v2 dark block and override it.
   ============================================================ */
.cbx-shell{max-width:1240px}
.cbx-frame{
  position:relative;margin-top:30px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(244,242,237,.14);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  min-height:560px;
  /* light tokens, scoped to the board only */
  --b-canvas:#F4F6F8;
  --b-surface:#FFFFFF;
  --b-ink:#141A21;
  --b-body:#48525E;
  --b-mute:#6E7885;
  --b-line:#E3E7EC;
  --b-line-2:#D3D9E0;
  --b-rail:#F8F9FB;
  --b-green:#12795A;  --b-green-bg:#E6F4EE;
  --b-amber:#9A6A12;  --b-amber-bg:#FBF1DC;
}

/* sign-in gate and brand reveal removed 2026-08-31 (Tony) - the board
   renders directly, which is also one less click to the thing that sells. */

/* ---------- the light app ---------- */
.cbx{background:var(--b-canvas);border:0;border-radius:0;box-shadow:none;margin-top:0;
  grid-template-columns:220px minmax(0,1fr)}
.cbx[hidden]{display:none}

.cbx-side{background:var(--b-surface);border-right:1px solid var(--b-line);padding:16px 12px 18px}
.cbx-brand{border-bottom:1px solid var(--b-line);padding:4px 8px 14px;margin-bottom:12px}
.cbx-brand-txt strong{color:var(--b-ink)}
.cbx-brand-txt em{color:var(--b-mute)}
.cbx-nav-label{color:var(--b-mute)}
.cbx-nav-item{color:var(--b-body)}
.cbx-nav-item:hover{background:var(--b-rail);color:var(--b-ink)}
.cbx-nav-item.is-on{background:rgba(255,90,31,.1);color:var(--b-ink);font-weight:600}
.cbx-nav-dot{background:var(--b-line-2)}
.cbx-side-foot{color:var(--b-mute)}

.cbx-main{background:var(--b-canvas)}
.cbx-top{background:var(--b-surface);border-bottom:1px solid var(--b-line);padding:14px 20px}
.cbx-top-title h3{color:var(--b-ink)}
.cbx-scope{color:var(--b-body);background:var(--b-rail);border-color:var(--b-line)}
.cbx-asof{color:var(--b-mute)}
.cbx-badge{color:var(--b-amber);background:var(--b-amber-bg);border-color:rgba(154,106,18,.28)}
.cbx-badge-dot{background:var(--b-amber)}

/* panel toggle chips */
.cbx-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 20px;background:var(--b-surface);border-bottom:1px solid var(--b-line)}
.cbx-chips-label{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--b-mute);
  margin-right:2px}
.cbx-chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--b-body);background:var(--b-rail);border:1px solid var(--b-line);border-radius:20px;
  padding:7px 14px;cursor:pointer;transition:all .14s ease}
.cbx-chip::before{content:"+ ";color:var(--b-mute)}
.cbx-chip:hover{border-color:var(--b-line-2);color:var(--b-ink)}
.cbx-chip.is-on{background:var(--blaze);border-color:var(--blaze);color:#12171C;font-weight:600}
.cbx-chip.is-on::before{content:"\2713 ";color:rgba(18,23,28,.6)}
.cbx-chip:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}

.cbx-body{padding:18px 20px 22px;gap:14px}
.cbx-kpi{background:var(--b-surface);border-color:var(--b-line);border-radius:9px;
  box-shadow:0 1px 2px rgba(20,26,33,.04)}
.cbx-kpi-label{color:var(--b-mute)}
.cbx-kpi-value{color:var(--b-ink)}
.cbx-kpi-foot{color:var(--b-mute)}
.cbx-delta.is-up{color:var(--b-green);background:var(--b-green-bg)}
.cbx-delta.is-dn{color:var(--b-amber);background:var(--b-amber-bg)}

.cbx-card{background:var(--b-surface);border-color:var(--b-line);border-radius:10px;
  box-shadow:0 1px 2px rgba(20,26,33,.04)}
.cbx-card[hidden]{display:none}
.cbx-card-head{background:transparent;border-bottom-color:var(--b-line);padding:13px 16px}
.cbx-card-head h4{color:var(--b-ink)}
.cbx-card-meta{color:var(--b-mute)}
.cbx-card-foot{border-top-color:var(--b-line)}

.cbx-agent{background:var(--b-rail);border-color:var(--b-line)}
.cbx-agent:hover{background:#F1F3F6;border-color:var(--b-line-2)}
.cbx-agent.is-open{border-color:var(--blaze);background:rgba(255,90,31,.07)}
.cbx-agent.is-flagged{border-color:rgba(255,90,31,.45);background:rgba(255,90,31,.06)}
.cbx-agent-name{color:var(--b-ink)}
.cbx-dot.is-run{background:var(--b-green)}
.cbx-dot.is-clear{background:var(--b-line-2)}

.cbx-pill.is-run{color:var(--b-green);background:var(--b-green-bg);border-color:rgba(18,121,90,.22)}
.cbx-pill.is-cmd{color:#B4431B;background:rgba(255,90,31,.1);border-color:rgba(255,90,31,.34)}
.cbx-pill.is-clear{color:var(--b-mute);background:var(--b-rail);border-color:var(--b-line)}
.cbx-pill.is-hold{color:var(--b-amber);background:var(--b-amber-bg);border-color:rgba(154,106,18,.26)}

.cbx-detail{background:rgba(255,90,31,.07);border-color:rgba(255,90,31,.26);color:var(--b-body)}
.cbx-stream{color:var(--b-green);background:var(--b-green-bg);border-color:rgba(18,121,90,.24)}
.cbx-row{border-bottom-color:var(--b-line)}
.cbx-time{color:var(--b-mute)}
.cbx-tag{color:#B4431B}
.cbx-text{color:var(--b-body)}

.cbx-unit{background:var(--b-rail);border-color:var(--b-line)}
.cbx-unit:hover{background:#F1F3F6;border-color:var(--b-line-2)}
.cbx-unit.is-on{border-color:var(--blaze);background:rgba(255,90,31,.08)}
.cbx-unit-tick{border-color:var(--b-line-2)}
.cbx-unit-name{color:var(--b-ink)}
.cbx-unit-blurb{color:var(--b-mute)}
.cbx-units{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.cbx-table th{color:var(--b-mute);background:var(--b-rail);border-bottom-color:var(--b-line)}
.cbx-table td{color:var(--b-body);border-bottom-color:var(--b-line)}
.cbx-table tbody tr:hover td{background:var(--b-rail)}
.cbx-td-name{color:var(--b-ink)}
.cbx-td-age{color:var(--b-mute)}

.cbx-btn{color:var(--b-body);border-color:var(--b-line-2);background:var(--b-surface)}
.cbx-btn:hover{color:var(--b-ink);border-color:var(--b-mute)}
.cbx-btn.is-go{background:var(--blaze);color:#12171C;border-color:var(--blaze)}

.cbx-tiles[hidden]{display:none}
.cbx-tiles .dbx-tile{background:var(--b-surface);border-color:rgba(255,90,31,.34);
  box-shadow:0 1px 2px rgba(20,26,33,.04)}
.cbx-tiles .dbx-tile-label{color:var(--b-mute)}
.cbx-tiles .dbx-tile-value{color:var(--b-ink)}
.cbx-tiles .dbx-tile-sub{color:var(--b-mute)}

[data-dbx-signal].is-clear{color:var(--b-green) !important}

@media (max-width:900px){
  .cbx-side{border-right:0;border-bottom:1px solid var(--b-line)}
}


/* --- "every industry gets its own board" signpost (2026-08-31) --- */
.dashmore{margin-top:clamp(34px,4vw,52px);padding-top:28px;border-top:1px solid var(--line);
  display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dashmore-copy{flex:1 1 460px;min-width:0}
.dashmore-kicker{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  margin:0 0 10px}
.dashmore-head{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.25;
  color:var(--ink);margin:0 0 10px}
.dashmore-body{font-size:.98rem;line-height:1.65;color:var(--ink-soft);margin:0;max-width:70ch}
.dashmore-body strong{color:var(--blaze);font-weight:600}
.dashmore-cta{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}
@media (max-width:700px){
  .dashmore-cta{width:100%}
  .dashmore-cta .btn{flex:1 1 auto;justify-content:center}
}


/* ============================================================
   HOMEPAGE CIS BOARD -> LIGHT (2026-08-31)
   Same treatment as the per-industry .cbx-* boards so the two
   read as one product. Structure and JS untouched; this is only
   the surface. Scoped to .dash-sec throughout.
   ============================================================ */
.dash-sec{
  --b-canvas:#F4F6F8; --b-surface:#FFFFFF; --b-ink:#141A21; --b-body:#48525E;
  --b-mute:#6E7885; --b-line:#E3E7EC; --b-line-2:#D3D9E0; --b-rail:#F8F9FB;
  --b-green:#12795A; --b-green-bg:#E6F4EE;
  --b-amber:#9A6A12; --b-amber-bg:#FBF1DC;
  background:#12171C;
}

/* the two-column stage: board on the left, brief on the right */
.dash-sec .dash{
  background:var(--b-canvas) !important;border:1px solid var(--b-line) !important;
  border-radius:12px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}

/* --- top bar --- */
.dash-sec .dash-bar{background:var(--b-surface) !important;
  border-bottom:1px solid var(--b-line) !important}
.dash-sec .dash-title{color:var(--b-ink) !important}
.dash-sec .dash-sector{color:var(--b-body) !important;background:var(--b-rail) !important;
  border:1px solid var(--b-line) !important}
.dash-sec .dash-clock{color:var(--b-mute) !important}
.dash-sec .dash-live{color:var(--b-green) !important;background:var(--b-green-bg) !important;
  border:1px solid rgba(18,121,90,.24) !important;border-radius:3px;padding:3px 8px}
.dash-sec .dash-live-dot{background:var(--b-green) !important}
/* the mark is a dark-ground SVG; invert it for the light bar */
.dash-sec .dash-brand img{filter:none}

/* --- connectors strip --- */
.dash-sec .dash-conn-bar{background:var(--b-rail) !important;
  border-bottom:1px solid var(--b-line) !important}
.dash-sec .dash-conn-lbl{color:var(--b-mute) !important}
.dash-sec .dash-conn{background:var(--b-surface) !important;
  border:1px solid var(--b-line) !important;color:var(--b-body) !important}
.dash-sec .dash-conn-name{color:var(--b-body) !important}
.dash-sec .dash-conn.on .dash-conn-dot{background:var(--b-green) !important}

/* --- body: roster + main --- */
.dash-sec .dash-body{background:var(--b-canvas) !important}
.dash-sec .dash-units{background:var(--b-surface) !important;
  border-right:1px solid var(--b-line) !important}
.dash-sec .dash-main{background:var(--b-canvas) !important}
.dash-sec .dash-col-head{color:var(--b-mute) !important;
  border-bottom:1px solid var(--b-line) !important}
.dash-sec .dash-col-head span{color:var(--b-ink)}

.dash-sec .dash-unit{background:var(--b-rail) !important;
  border:1px solid var(--b-line) !important;border-radius:6px}
.dash-sec .dash-unit:hover{background:#F1F3F6 !important;border-color:var(--b-line-2) !important}
.dash-sec .u-name{color:var(--b-ink) !important}
.dash-sec .u-job{color:var(--b-mute) !important}

.dash-sec .dash-chip{border-radius:3px;border:1px solid transparent}
.dash-sec .dash-chip.running{color:var(--b-green) !important;background:var(--b-green-bg) !important;
  border-color:rgba(18,121,90,.22) !important}
.dash-sec .dash-chip.needs,.dash-sec .dash-chip.command,
.dash-sec .dash-chip[class*="need"]{color:#B4431B !important;
  background:rgba(255,90,31,.1) !important;border-color:rgba(255,90,31,.34) !important}
.dash-sec .dash-chip.cleared{color:var(--b-mute) !important;background:var(--b-rail) !important;
  border-color:var(--b-line) !important}

.dash-sec .dash-command{border-top:1px solid var(--b-line) !important}
.dash-sec .dash-command-lbl{color:#B4431B !important}
.dash-sec .dash-hold{background:var(--b-surface) !important;color:var(--b-body) !important;
  border:1px solid var(--b-line-2) !important}
.dash-sec .dash-hold:hover{color:var(--b-ink) !important;border-color:var(--b-mute) !important}
.dash-sec .dash-approve{background:var(--blaze) !important;color:#12171C !important;
  border:1px solid var(--blaze) !important}

/* --- KPI tiles --- */
.dash-sec .dash-kpi{background:var(--b-surface) !important;
  border:1px solid var(--b-line) !important;border-radius:9px;
  box-shadow:0 1px 2px rgba(20,26,33,.04)}
.dash-sec .k-lbl{color:var(--b-mute) !important}
.dash-sec .k-val{color:var(--b-ink) !important}
.dash-sec .k-val .u{color:var(--b-mute) !important}
.dash-sec .k-sub{color:var(--b-mute) !important}

/* --- activity feed --- */
.dash-sec .dash-feed{background:var(--b-surface) !important;
  border:1px solid var(--b-line) !important;border-radius:10px;
  box-shadow:0 1px 2px rgba(20,26,33,.04)}
.dash-sec .dash-feed-live{color:var(--b-green) !important;background:var(--b-green-bg) !important;
  border:1px solid rgba(18,121,90,.24) !important;border-radius:3px;padding:2px 7px}
.dash-sec .dash-log li{border-bottom:1px solid var(--b-line) !important}
.dash-sec .dash-log .t{color:var(--b-mute) !important}
.dash-sec .dash-log .agent-tag{color:#B4431B !important}
.dash-sec .dash-log .msg{color:var(--b-body) !important}

/* --- right-hand brief: stays DARK on purpose.
       It is page copy explaining the board, not part of the product surface,
       and keeping it dark stops the white panel bleeding into the page. --- */
.dash-sec .dash-blurb{background:var(--panel);border:1px solid var(--panel-line)}

/* --- industry switcher chips --- */
.dash-sec .sel-chip{background:var(--panel) !important;border-color:var(--panel-line) !important}
.dash-sec .sel-chip:hover{border-color:var(--steel) !important}
.dash-sec .sel-chip.is-active{border-color:var(--blaze) !important;
  background:rgba(255,90,31,.12) !important}

@media (max-width:900px){
  .dash-sec .dash-units{border-right:0 !important;
    border-bottom:1px solid var(--b-line) !important}
}

/* --- inherited dark-theme ink inside the light board (2026-08-31) ---
   The feed injects a bare <b> ("Holding for command:") with no class, so it
   inherited Paper #F4F2ED and rendered white-on-white - invisible, and nothing
   errors when that happens. Any unclassed emphasis inside a light surface has
   to be given an explicit colour. */
.dash-sec .dash-log b,.dash-sec .dash-log strong{color:var(--b-ink) !important;font-weight:600}
.dash-sec .dash-log em,.dash-sec .dash-log i{color:var(--b-body) !important}
.dash-sec .dash-unit b,.dash-sec .dash-unit strong{color:var(--b-ink) !important}
.dash-sec .dash-kpi b,.dash-sec .dash-kpi strong{color:var(--b-ink) !important}
.cbx b,.cbx strong{color:var(--b-ink)}
.cbx em,.cbx i{color:var(--b-body)}

/* --- muted ink darkened to clear AA (2026-08-31) ---
   --b-mute #6E7885 measured 4.25-4.48:1 against the white and rail surfaces,
   just under the 4.5 floor, on 9-12px labels - the smallest text on the board
   and the least forgiving. Darkened rather than enlarged, so the layout is
   untouched. Verified by sweep, not by eye. */
.dash-sec,.cbx-frame{--b-mute:#5F6976}

/* last two AA misses on the industry board: the sidebar chevron mark (Blaze on
   white is 3.12:1) and the amber "down" delta chip. Both are small text, so
   both need the 4.5 floor - darken to Ember-and-below rather than resize. */
.cbx .cbx-brand-mark{color:#B4431B}
.cbx-frame{--b-amber:#84590C}


/* --- presentation loop: arriving rows and ticking KPIs (2026-09-01) --- */
.dash-sec .dash-log li.is-new{animation:dashRowIn .55s ease both}
@keyframes dashRowIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.dash-sec .dash-kpi{transition:border-color .3s ease, box-shadow .3s ease}
.dash-sec .dash-kpi.is-tick{border-color:rgba(255,90,31,.55) !important;
  box-shadow:0 0 0 3px rgba(255,90,31,.12)}
.dash-sec .dash-kpi.is-tick .k-val{color:#B4431B !important;transition:color .3s ease}
.dash-sec .dash-unit{transition:border-color .3s ease, background .3s ease}
.dash-sec .dash-unit.needs-command{border-color:rgba(255,90,31,.5) !important;
  background:rgba(255,90,31,.07) !important}
@media (prefers-reduced-motion: reduce){
  .dash-sec .dash-log li.is-new{animation:none}
  .dash-sec .dash-kpi,.dash-sec .dash-unit{transition:none}
}


/* the command label goes quiet when nothing is waiting */
.dash-sec .dash-command-lbl.is-clear{color:#12795A !important}


/* --- FAQ page + the pointer left on trust (2026-09-01) --- */
.faq-alt{background:var(--obsidian)}
.faq-sec h2{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.18;margin:16px 0 0;color:var(--ink)}
.faq-sec .faq-list{margin-top:24px}
.faq-point{background:#12171C;border-top:1px solid var(--line)}
.faq-point h2{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.15;margin:16px 0 0;color:var(--ink)}

/* --- catalog + connectors headings match the other tab panels (2026-09-01) ---
   Both sections were added later and only ever inherited the base h2, so they
   rendered at 24px while every other panel heading is clamp(...) ~52.8px at
   desktop. Side by side under the same tab strip that reads as a mistake. */
.catalog h2,.connectors h2{
  font-family:var(--display);
  font-size:clamp(2.1rem,4.4vw,3.3rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:16px 0 0;
  color:var(--ink);
  max-width:20ch;
}

/* One heading scale for every tab panel. Sections were authored at different
   times and had drifted to three sizes at mobile (32 / 33.6 / 35.2px) and two
   at desktop; under a single tab strip they should read as one system.
   Cards inside panels use h3/h4, so this only catches section headings. */
.tabpanel h2{
  font-family:var(--display);
  font-size:clamp(2.1rem,4.4vw,3.3rem) !important;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--ink);
}


/* ============================================================
   THE BOARD, WITHOUT THE MOCK  (2026-09-01)
   Tony: the interactive dummy board on the homepage undersold us
   against the real client build, so it came out. These two blocks
   carry the same information as prose and structure: what sits on
   a board (.boardparts) and what a board carries once it is shaped
   to an operation (.brief). No invented figures anywhere.
   ============================================================ */
.boardparts{
  margin-top:52px;list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.bpart{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;
  padding:26px 22px;transition:border-color .25s ease,transform .25s ease;
}
.bpart:hover{border-color:var(--line-hi);transform:translateY(-4px)}
.bpart-n{font-size:.64rem;letter-spacing:.2em;color:var(--steel)}
.bpart h3{font-size:1.18rem;margin-top:10px;color:var(--paper)}
.bpart p{margin-top:12px;font-size:.94rem;line-height:1.55;color:var(--ink-soft)}

/* --- the per-operation brief --- */
.brief{
  margin-top:34px;position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;
  padding:32px 30px;box-shadow:var(--shadow);
}
.brief::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--blaze)}
.brief::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,90,31,.06),transparent 60%)}
.brief-lead,.brief-cols,.brief-foot{position:relative;z-index:1}
.brief-kicker{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.brief-name{font-family:var(--display);font-weight:700;font-size:1.42rem;letter-spacing:-.01em;
  color:var(--paper);margin-top:10px;line-height:1.15}
.brief-body{margin-top:14px;font-size:.98rem;line-height:1.65;color:var(--ink-soft);max-width:78ch}

.brief-cols{margin-top:28px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px 40px}
.brief-lbl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--panel-line)}
.brief-lbl-2{margin-top:26px}
.brief-lbl .brief-n{color:var(--sand)}

.brief-units,.brief-reports{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* Name and job on one row at desktop, stacked when the column gets narrow -
   the job text is the informative half and must never be clipped. */
.brief-unit,.brief-report{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.bu-name,.br-name{font-size:.94rem;font-weight:600;color:var(--paper);flex:0 0 auto;min-width:9.5ch}
.bu-job,.br-sub{font-size:.9rem;line-height:1.45;color:var(--ink-soft);flex:1 1 14ch;min-width:0}
.brief-unit .bu-name::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--blaze);margin-right:9px;vertical-align:middle}

.brief-conns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.brief-conn{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--sand);
  border:1px solid var(--panel-line);border-radius:2px;padding:5px 10px;background:rgba(12,15,18,.4)}

.brief-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--panel-line);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
  display:flex;align-items:center;gap:9px}
.brief-foot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blaze);flex:none}

@media (max-width:960px){
  .boardparts{grid-template-columns:1fr 1fr}
  .brief-cols{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .boardparts{grid-template-columns:1fr}
  .brief{padding:26px 22px}
}


/* ============================================================
   2026-09-02  (Tony)
   Three fixes: a wider nav bar, an even operation grid, and the
   "don't see yours" escape hatch beside the selector cue.
   ============================================================ */

/* --- NAV: the bar was 16% empty ------------------------------
   Labels were already evenly spaced (46.4px between every pair), but the whole
   .nav-links block only filled 695px of a 1240px shell, leaving 202px of dead
   air split unevenly - 78px after the logo, 124px before the CTA. Even spacing
   inside a block that floats in the middle of the bar still reads as "bunched",
   which is what Tony kept seeing. So grow the block rather than re-space it:
   bigger type, wider link padding, wider gap. The residual gap shrinks on both
   sides and the asymmetry goes with it. Desktop only - the drawer is untouched. */
@media (min-width:1025px){
  .nav-links{gap:clamp(10px,1.5vw,24px)}
  .nav-links .navlink{
    font-size:.90rem;
    letter-spacing:.11em;
    padding:12px 22px;
  }
  /* the caret still has to contribute zero width, so its negative margin has to
     track the link padding it hides inside - see the EVEN NAV RHYTHM note above */
  .caret{margin-right:-14px}
}

/* --- OPERATION SELECTOR: even columns ------------------------
   Seven content-width chips in a flex-wrap row left a ragged last line. Twelve
   chips on a real grid give three clean rows of four, every chip the same width,
   which is what "evenly space them out" actually needs. */
.sel-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.sel-chip{justify-content:flex-start;width:100%}
.sel-chip .sel-name{white-space:normal}
@media (max-width:1024px){ .sel-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){  .sel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){  .sel-grid{grid-template-columns:1fr} }

/* --- "Don't see yours?" ---------------------------------------
   .dash-select-head is already space-between, so this lands at the right end of
   the cue line. Sends them to the full 31-industry index rather than leaving a
   visitor whose trade is not one of the twelve with nowhere to go. */
.sel-more{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--blaze);text-decoration:none;
  padding:8px 14px;border:1px solid var(--blaze);border-radius:3px;
  background:rgba(255,90,31,.06);white-space:nowrap;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.sel-more:hover{background:var(--blaze);color:#fff;transform:translateY(-1px)}
.sel-more:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}
.sel-more .arrow{transition:transform .16s ease}
.sel-more:hover .arrow{transform:translateX(3px)}
@media (max-width:560px){ .sel-more{width:100%;justify-content:center} }


/* ============================================================
   ENGINE BADGE  (2026-09-02, Tony)
   "Built on Claude" credential mark, from the FluentOS reference shot:
   pill label overlapping a double ring, white core, engine name inside.
   Rebuilt in Convoy's colourway - steel outer, blaze inner - and drawn in
   CSS rather than shipped as a PNG so it stays sharp at any size, recolours
   with the palette, and costs no image request.

   Wording is deliberately "Built on": a statement of what we run, not a claim
   of partnership, endorsement or certification by Anthropic. The Trust page
   makes a point of not implying credentials we do not hold, and this badge
   must not quietly undo that.
   ============================================================ */
.engine-badge{
  --ring:168px;
  display:inline-flex;flex-direction:column;align-items:center;
  position:relative;padding-top:15px;
}
/* Pill and core type both scale off --ring, so the badge stays in proportion at
   any size. Fixed values looked right at 210px and wrong at 132px: the pill grew
   wider than the circle it sits on, which reads as a mistake rather than a mark. */
.engine-pill{
  position:relative;z-index:2;
  background:var(--gunmetal);border:1px solid var(--line-hi);
  color:var(--paper);
  font-size:calc(var(--ring)*.048);letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;
  padding:calc(var(--ring)*.036) calc(var(--ring)*.072);
  border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
.engine-ring{
  width:var(--ring);height:var(--ring);border-radius:50%;
  margin-top:-15px;padding:7px;
  background:var(--steel);
  box-shadow:0 0 42px -6px rgba(255,90,31,.28);
  display:grid;place-items:center;
}
.engine-ring-2{
  width:100%;height:100%;border-radius:50%;padding:9px;
  background:var(--blaze);
  display:grid;place-items:center;
}
.engine-core{
  width:100%;height:100%;border-radius:50%;
  background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:10px;text-align:center;
}
.engine-mark{
  font-family:var(--mono);font-weight:700;
  font-size:calc(var(--ring)*.105);line-height:1.05;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--blaze);
  /* the reference logotype is blocky - a hard offset shadow reads the same way
     without reproducing Anthropic's actual mark */
  text-shadow:1.5px 1.5px 0 rgba(28,33,38,.18);
}
.engine-sub{
  font-family:var(--mono);font-size:calc(var(--ring)*.061);
  letter-spacing:.03em;color:var(--steel);line-height:1.35;
}
.engine-badge-lg{--ring:210px}

/* hero placement: sits under the model-drives line, left-aligned with it */
.hero-engine{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-engine .engine-badge{--ring:152px}
.hero-engine-copy{max-width:270px}
.hero-engine-copy .heh{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--paper);margin:0 0 5px}
.hero-engine-copy .hep{font-size:.82rem;line-height:1.5;color:var(--ink-dim);margin:0}
@media (max-width:900px){ .hero-engine{margin-top:18px} }
@media (max-width:560px){
  .hero-engine{gap:14px}
  .hero-engine .engine-badge{--ring:112px}
  .hero-engine-copy{max-width:none}
}

/* trust page section */
.tengine .tengine-wrap{
  display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;
  padding:34px 36px;margin-top:22px;
}
.tengine .te-why{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.tengine .te-why li{position:relative;padding-left:20px;color:var(--ink-soft);line-height:1.6}
.tengine .te-why li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--blaze)}
.tengine .te-why b{color:var(--paper);font-weight:600}
.tengine .te-foot{
  margin-top:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-faint);line-height:1.6}
@media (max-width:820px){
  .tengine .tengine-wrap{grid-template-columns:1fr;justify-items:center;text-align:left;
    padding:28px 22px;gap:26px}
}


/* mega-foot now carries two links (2026-09-02): the industries hub had almost no
   inbound links despite being the parent of 31 pages, which wastes the crawl. */
.mega-foot-links{display:inline-flex;align-items:center;gap:18px}
.mega-all{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line-hi);
  padding-bottom:1px;transition:color .16s ease,border-color .16s ease}
.mega-all:hover{color:var(--paper);border-color:var(--blaze)}


/* ============================================================
   MOBILE FIX: the command board was being sliced off (2026-09-19)

   The v3 LIGHT block re-declares `.cbx { grid-template-columns:
   220px minmax(0,1fr) }` AFTER the v2 `@media (max-width:900px)`
   collapse, so the two-column grid won at EVERY width - the later
   unconditional rule beats the earlier media query.

   On a 390px phone that left .cbx-main 128px wide against 214px of
   content, and .cbx carries `overflow:hidden`, so the dashboard was
   simply cut off with no scrollbar to reveal it. Measured before the
   fix: .cbx scrollWidth 434 vs clientWidth 348; KPI tiles rendered
   out to x=401 on a 390px viewport; .cbx-agent-name collapsed to
   clientWidth 0 against scrollWidth 189.

   These rules live at the END of the file so they come after v3.
   ============================================================ */
@media (max-width:900px){
  .cbx{grid-template-columns:1fr}
  .cbx-side{border-right:0;border-bottom:1px solid var(--b-line)}
  .cbx-nav{flex-direction:row;flex-wrap:wrap}
  .cbx-nav-item{width:auto}
  .cbx-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

@media (max-width:640px){
  /* breathing room back: the desktop 22px gutters cost 44px of a 390px screen */
  .cbx-top{padding:13px 16px;gap:10px}
  .cbx-body{padding:16px 16px 18px;gap:14px}
  .cbx-side{padding:14px 12px 16px}

  /* minmax(0,...) lets tiles SHRINK; the auto-fit minmax(140px,...) could not,
     so on a 320px screen it forced a track wider than the column. */
  .cbx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cbx-cols{grid-template-columns:1fr}
  .cbx-units{grid-template-columns:1fr}
  .cbx-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  /* the agent rows put a name, a dot and a pill on one line; let the name
     truncate instead of forcing the row wider than the card */
  .cbx-agent{gap:8px}
  .cbx-agent-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cbx-row{grid-template-columns:auto auto minmax(0,1fr);gap:8px}

  /* the 460px table is a deliberate horizontal scroller - make sure the wrap
     actually scrolls on touch rather than being clipped by .cbx overflow */
  .cbx-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:400px){
  /* one-up below 400px: two 140px tiles plus a gap do not fit 320px */
  .cbx-kpis,.cbx-tiles{grid-template-columns:1fr}
}


/* ------------------------------------------------------------
   MOBILE: centre the chevron emblem (2026-09-19, Tony)
   On a phone the header was emblem hard-left and burger hard-right
   with ~270px of dead space between them. Taking the logo out of
   flow and centring it leaves .nav-right's margin-left:auto to hold
   the burger at the right edge, so nothing else moves.
   Desktop is untouched - the emblem stays left of the nav links.
   ------------------------------------------------------------ */
@media (max-width:900px){
  .nav-inner{position:relative}
  .nav-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}

/* ------------------------------------------------------------
   MOBILE: tab sizing (2026-09-19)
   The bar is a 2-up grid below 640px. minmax(0,1fr) already lets the
   cells shrink; these rules stop the LABEL from being the thing that
   overflows - .tabbtn had white-space:nowrap from the desktop
   scroller, so a long label like "Working With Us" would push past
   its own cell rather than wrapping inside it.
   ------------------------------------------------------------ */
@media (max-width:640px){
  .tabbtn{
    white-space:normal;           /* release the desktop nowrap */
    overflow-wrap:anywhere;
    line-height:1.25;
    min-height:46px;              /* equal heights across all 6 cells */
    align-items:center;
  }
}