/* ==========================================================================
   SYS.00 → SYS.08, in document order:
   hero · partner strip · manifesto · modules deck · pipeline terminal ·
   why + telemetry · case-file reel · signal quotes · operators · transmissions.
   ========================================================================== */

/* ---------- hero ---------- */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:14vh; padding-bottom:8vh; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:var(--fs-sm); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:10px 16px; width:fit-content; max-width:100%; }
  .hero .eyebrow .dot{ flex:0 0 auto; }
  @media (max-width:560px){ .hero .eyebrow{ letter-spacing:.14em; padding:9px 12px; gap:9px; } }
.hero .eyebrow .dot{ width:7px; height:7px; background:var(--accent); box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); animation:pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.hero h1{ margin-top:4.5vh; font-family:var(--headline); font-weight:550; font-size:clamp(2rem,11.2cqi,5.6rem); line-height:1.02; letter-spacing:0; max-width:none; }
@supports not (font-size:1cqi){ .hero h1{ font-size:clamp(2rem,6.2vw,5.6rem); max-width:12ch; } }
.hero h1 .line{ display:block; overflow:hidden; padding:.08em 0; }
.hero h1 .ch{ display:inline-block; will-change:transform; }
.hero h1 .outline{ color:transparent; -webkit-text-stroke:1.15px var(--accent); }
/* Statement on the left, terminal on the right. The 1.06/0.94 split gives the
   headline the wider half; both tracks are minmax(0,…) so a long word inside
   either one cannot push the grid wider than the page. */
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(30px,3.4vw,60px); align-items:center; }
.hero-col{ min-width:0; container-type:inline-size; }
.hero .footrow{ margin-top:5vh; display:flex; flex-wrap:wrap; gap:30px 60px; align-items:flex-end; justify-content:flex-end; }
/* The hero used to end on a scroll cue and nothing else — no link, no button,
   and no statement of who this is for. Both now sit directly under the lede,
   which is where a visitor decides whether to keep going. */
.hero-say{ display:grid; gap:clamp(16px,2.2vh,26px); max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero .lede{ max-width:52ch; font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.85; color:var(--muted); }
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 26px; font-size:var(--fs-sm); letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap;
  transition:transform .4s var(--ease-out), filter .4s var(--ease-out), background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.btn-primary{ background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); }
.btn-ghost{ background:none; color:var(--ink); border:1px solid var(--line); }
@media (hover:hover){
  .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
}
@media (max-width:520px){ .btn-primary,.btn-ghost{ flex:1 1 100%; } }

.hud{ margin-top:6vh; display:flex; flex-wrap:wrap; gap:2px; border:1px solid var(--line); background:var(--line); }
.hud .hud-item{ flex:1 1 180px; background:var(--bg); padding:16px 20px; display:flex; flex-direction:column; gap:7px; }
.hud .hk{ font-size:var(--fs-2xs); letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.hud .hv{ font-size:var(--fs-md); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px; }
.hud .hv b{ color:var(--accent); font-weight:500; }
.hud .hv .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2.4s var(--ease-out) infinite; }

/* ---------- hero terminal ---------- */
.hero-term{ min-width:0; }
.hterm{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.7);
  font-family:var(--mono);
}
.hterm-bar{ display:flex; align-items:center; gap:13px; flex:0 0 auto; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--elev); }
.hterm-dots{ display:flex; gap:6px; flex:0 0 auto; }
.hterm-dots i{ width:9px; height:9px; border-radius:50%; background:var(--field-line); }
.hterm-dots i:first-child{ background:var(--amber); }
.hterm-dots i:last-child{ background:var(--accent); }
.hterm-title{ min-width:0; font-size:var(--fs-2xs); letter-spacing:.17em; text-transform:uppercase; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Fixed height at every breakpoint. The transcript scrolls inside it as it
   types, so the hero never grows and the buttons below never move. */
.hterm-body{ flex:1 1 auto; height:var(--term-h); overflow:hidden; padding:15px 17px; font-size:var(--fs-md); line-height:1.68; }
.hterm .tl{ display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
.hterm .tl-cmd{ color:var(--ink); }
.hterm .tl-cmd::before{ content:"$ "; color:var(--accent); }
.hterm .tl-out{ color:var(--muted); padding-left:1.35em; }
.hterm .tl-ok{ color:var(--accent); padding-left:1.35em; }
.hterm .tl-gap{ height:.55em; }
.hterm-caret{ display:inline-block; width:.55em; height:1.02em; margin-left:.1em; vertical-align:-.16em; background:var(--accent); animation:caret 1.05s steps(1) infinite; }
@keyframes caret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .hterm-caret{ animation:none; } }
/* Fits the tallest of the four rotating screens (a command plus 4 output
   rows: 145px measured) with a small margin, not the old 12-row single
   transcript this used to hold. Reserved rather than auto on purpose - a box
   that resized between screens would nudge the buttons below it on every
   cycle. */
.hero{ --term-h:176px; }

/* Below 1000px the two columns would each be too narrow to hold their own
   content — the headline starts breaking mid-word and the transcript wraps on
   every line. Stack instead, terminal under the buttons, where it reads as a
   footnote to the pitch rather than competing with it. */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,4.5vh,44px); }
  .hero{ --term-h:156px; }
  .hterm-body{ font-size:var(--fs-sm); line-height:1.72; }
  .hero h1{ font-size:clamp(2rem,7.4vw,4.6rem); }
  @supports not (font-size:1cqi){ .hero h1{ max-width:14ch; } }
}
/* A phone in landscape has almost no height to spare; the terminal is
   atmosphere and the buttons are not, so it stands down rather than pushing
   them under the fold. */
@media (max-height:640px) and (max-width:1000px){ .hero-term{ display:none; } }
/* Phone held sideways: ~375px of height cannot hold a display headline, a
   paragraph and two buttons at full size. Nothing is hidden - the type and the
   rhythm tighten instead, which brings the primary button roughly 120px up the
   page. */
@media (max-height:520px) and (min-width:600px){
  .hero{ padding-top:6vh; padding-bottom:3vh; }
  .hero h1{ margin-top:1.4vh; font-size:clamp(1.55rem,4.3vw,2.3rem); }
  .hero .eyebrow{ padding:6px 12px; letter-spacing:.16em; }
  .hero-say{ gap:10px; max-width:none; }
  /* The 52ch / 44ch caps are a reading-measure choice for when height is
     plentiful. Here the opposite holds: 731px of column sits mostly empty
     while the sentence wraps to 5 lines and pushes the CTA off-screen. Letting
     both run to 78ch removes the wrapped lines without shrinking type or
     cutting a word. */
  .hero .lede{ line-height:1.5; max-width:78ch; }
  .hero-cta{ margin-top:2px; }
  .hero .footrow{ margin-top:1.4vh; }
}

/* Short viewports: the call to action matters more than the atmosphere, so the
   HUD steps aside rather than pushing the buttons below the fold. It is
   aria-hidden decoration, and the qualifier line now states the coverage it
   was carrying. */
@media (max-height:700px){
  .hero{ padding-top:10vh; padding-bottom:4vh; --term-h:156px; }
  .hero h1{ margin-top:3vh; }
  .hero .footrow{ margin-top:3.5vh; }
  .hero-say{ gap:14px; }
  .hud{ display:none; }
}
.hero .lede strong{ color:var(--ink); font-weight:500; }
.hero .scrollcue{ font-size:var(--fs-sm); letter-spacing:.28em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; }
.hero .scrollcue .bar{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero .scrollcue .bar::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); animation:sweep 2.4s var(--ease-out) infinite; }
@keyframes sweep{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
/* ---------- strip ---------- */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:20px 0; display:flex; align-items:center; gap:30px; }
.strip .lbl{ flex:0 0 auto; padding-left:5vw; font-size:var(--fs-xs); letter-spacing:.26em; text-transform:uppercase; color:var(--amber); }
.strip .mq{ overflow:hidden; flex:1; min-width:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }

/* logo-strip.js adds .mq-live once it takes over, swapping the CSS marquee for
   a real scroll container so the strip can be dragged, swiped and shift-wheeled.
   Without JS the animation below still runs, so nothing is lost. */
.strip.mq-live .mq{ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
.strip.mq-live .mq::-webkit-scrollbar{ display:none; }
.strip.mq-live .mq.dragging{ cursor:grabbing; }
.strip.mq-live .mq-track{ animation:none; }
.strip .mq-track{ display:flex; gap:0; width:max-content; animation:mq 38s linear infinite; will-change:transform; }
.strip .mq-track .logo{ display:inline-flex; align-items:center; padding:0 2.4vw; }
.strip .mq-track .logo svg{ height:clamp(20px,2.2vw,28px); width:auto; filter:grayscale(1) brightness(1.9) opacity(.55); transition:filter .5s var(--ease-out); }
.strip .mq-track .logo-wide svg{ height:clamp(15px,1.68vw,21px); }
.strip .mq-track .logo-xwide svg{ height:clamp(12px,1.3vw,16px); }
/* Brands with no official open artwork run as wordmarks. Same height, same
   dimmed-then-lit treatment, so the strip reads as one set rather than as
   logos with gaps in it. */
.strip .mq-track .logo-word{ font-family:var(--display); font-weight:700; font-size:clamp(12.5px,1.35vw,16px); letter-spacing:.015em; line-height:1; white-space:nowrap; color:var(--ink); opacity:.5; transition:opacity .5s var(--ease-out); }
.strip:hover .mq-track .logo-word{ opacity:.9; }
[data-theme="light"] .strip .mq-track .logo svg{ filter:grayscale(1) brightness(.65) opacity(.6); }
.strip .mq-track .logo::after{ content:""; width:4px; height:4px; background:var(--accent); opacity:.6; margin-left:2.4vw; }
.strip:hover .mq-track{ animation-play-state:paused; }
.strip:hover .mq-track .logo svg{ filter:none; }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (max-width:760px){
  .strip{ flex-direction:column; align-items:stretch; gap:11px; padding:16px 0; }
  .strip .lbl{ padding-left:5vw; padding-right:5vw; }
  .strip .mq{ width:100%; flex:none; }
  .strip .mq-track .logo{ padding:0 5vw; }
  .strip .mq-track .logo::after{ margin-left:5vw; }
}

/* ---------- manifesto ---------- */
.manifesto{ padding-block:24vh; }
.manifesto p{ font-family:var(--display); font-weight:500; text-transform:none; font-size:clamp(1.5rem,3.7vw,3.3rem); line-height:1.18; letter-spacing:-.02em; max-width:24ch; margin-top:7vh; }
.manifesto p em, .mission em{ font-style:normal; color:var(--accent); }
.word{ display:inline-block; }

/* ---------- SYS.02 modules (stacking cards) ---------- */
.mods{ padding-block:12vh 16vh; }
.mod{ position:sticky; top:calc(var(--stacktop) + var(--i,0)*var(--stackstep)); margin-top:9vh; min-height:66vh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--panel); border:1px solid var(--line); will-change:transform; }
.mod:first-of-type{ margin-top:8vh; }
.mod .m-info{ padding:clamp(26px,3.2vw,54px); display:flex; flex-direction:column; justify-content:space-between; gap:30px; min-width:0; }
.mod .m-top .m-sys{ font-size:var(--fs-sm); letter-spacing:.22em; color:var(--amber); text-transform:uppercase; }
.mod .m-top h3{ margin-top:18px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,2.9vw,2.7rem); line-height:1; letter-spacing:-.02em; }
.mod .m-top .m-sum{ margin-top:18px; font-size:var(--fs-base); line-height:1.8; color:var(--muted); max-width:46ch; }
.mod .m-bot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 30px; }
.mod .m-tags{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.mod .m-open{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; background:none; border:1px solid var(--line); padding:13px 22px; font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:background .45s var(--ease-out), border-color .45s var(--ease-out), color .45s var(--ease-out); }
@media (hover:hover){ .mod .m-open:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } }
@media (pointer:coarse){ .mod .m-open{ cursor:pointer; } }
.mod .m-idx{ position:absolute; right:clamp(14px,1.6vw,26px); bottom:6px; z-index:2; font-family:var(--display); font-weight:800; font-size:clamp(3.2rem,7vw,6.4rem); line-height:.78; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--line); pointer-events:none; }
.mod .m-media{ position:relative; overflow:hidden; min-height:300px; background:var(--media-bg); }
.mod .m-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.5) brightness(.6) contrast(1.06); transition:filter .7s var(--ease-out), scale .7s var(--ease-out); scale:1.04; }
.mod .m-media .duo{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(var(--duo-rgb),.85), rgba(var(--duo-rgb),.25) 55%, rgba(var(--duo-rgb),.05)); }
@media (hover:hover){ .mod:hover .m-media img{ filter:grayscale(.05) brightness(.8); scale:1; } }
[data-theme="light"] .mod .m-media img{ filter:grayscale(.25) brightness(.9); }
[data-theme="light"] .mod:hover .m-media img{ filter:grayscale(0) brightness(1); }
@media (max-width:860px){
  :root{ --stacktop:9vh; --stackstep:12px; }
  .mod{ grid-template-columns:1fr; min-height:0; }
  .mod .m-media{ order:-1; min-height:0; aspect-ratio:16/9; }
  .mod .m-idx{ font-size:3.4rem; bottom:auto; top:10px; }
}

/* ---------- SYS.03 pipeline terminal ---------- */
.term{ margin-top:8vh; background:var(--panel); border:1px solid var(--line); }
.term-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(18px,2.4vw,34px); border-bottom:1px solid var(--line); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.term-head b{ color:var(--accent); font-weight:500; }
.term-body{ padding:clamp(22px,3vw,48px) clamp(18px,2.6vw,40px); display:grid; gap:clamp(34px,5vh,56px); }
.ph{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(20px,4vw,70px); align-items:start; }
.ph .ph-shell{ min-width:0; font-size:clamp(13px,1vw,15px); line-height:2; }
.ph .ph-line{ color:var(--muted); }
.ph .ph-line .pr{ color:var(--accent); margin-right:10px; }
.ph .ph-cmd{ color:var(--ink); font-weight:500; word-break:break-all; }
.ph .ph-cmd::after{ content:"▌"; color:var(--accent); animation:caret 1s steps(2) infinite; margin-left:2px; }
.ph.done .ph-cmd::after{ content:""; animation:none; }
@keyframes caret{ 50%{opacity:0} }
.ph .ph-out{ list-style:none; margin-top:6px; }
.ph .ph-out li{ color:var(--muted); opacity:0; transform:translateY(6px); }
.ph .ph-out li::before{ content:"→ "; color:var(--faint); }
.ph .ph-out li em{ font-style:normal; color:var(--accent); }
.ph .ph-ok{ margin-top:8px; color:var(--faint); opacity:0; transform:translateY(6px); }
.ph.done .ph-ok{ color:var(--accent); }
.ph .ph-meta .pm-tag{ font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--amber); }
.ph .ph-meta h3{ margin-top:12px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.28rem,2vw,1.85rem); letter-spacing:-.01em; line-height:1.05; }
.ph .ph-meta p{ margin-top:14px; font-size:var(--fs-base); line-height:1.8; color:var(--muted); max-width:44ch; }
@media (max-width:760px){ .ph{ grid-template-columns:1fr; gap:18px; } .ph .ph-meta{ order:-1; } }

/* ---------- SYS.04 why + telemetry ---------- */
.why-open{ margin-top:clamp(50px,9vh,110px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(44px,6vh,80px) clamp(44px,7vw,130px); }
.wr{ position:relative; padding-top:26px; }
.wr::before{ content:""; position:absolute; top:0; left:0; width:36px; height:2px; background:var(--accent); transition:width .5s var(--ease-out); }
.wr .wr-i{ font-size:var(--fs-sm); letter-spacing:.22em; color:var(--amber); text-transform:uppercase; }
.wr h3{ margin-top:16px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.15rem,1.85vw,1.7rem); letter-spacing:-.01em; line-height:1.06; }
.wr p{ margin-top:16px; font-size:var(--fs-base); line-height:1.8; color:var(--muted); max-width:46ch; }
@media (hover:hover){ .wr:hover::before{ width:72px; } }
@media (max-width:760px){ .why-open{ grid-template-columns:1fr; gap:44px; } }

/* ---------- SYS.05 case files (horizontal reel) ---------- */
.showcase{ position:relative; }
.showcase .head{ padding-block:8vh 3vh; }
.h-viewport{ overflow:hidden; }
.h-track{ display:flex; width:max-content; will-change:transform; }
/* --rp-reserve keeps the last results row clear of .reel-progress, which is
   position:fixed and so contributes nothing to the panel's own layout: the
   bar's offset from the viewport foot, plus its own ~30px block, plus a gap. */
.showcase{ --rp-reserve:calc(clamp(20px,4.5vh,46px) + 48px); }
.h-panel{ position:relative; width:min(92vw,1060px); min-height:calc(100svh - 13vh); flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vh,64px) 5vw max(clamp(38px,5.5vh,72px), var(--rp-reserve)); border-left:1px solid var(--line); overflow:visible; }
.h-panel .panel-media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.h-panel .panel-media>img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); filter:grayscale(.6) brightness(.85); transition:transform 1.2s var(--ease-out), filter 1.2s var(--ease-out); }
.h-panel .panel-media .duo{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(var(--duo-rgb),.97) 0%, rgba(var(--duo-rgb),.85) 42%, rgba(var(--duo-rgb),.4) 100%); }
.h-panel>*:not(.panel-media){ position:relative; z-index:2; }
@media (hover:hover){ .h-panel:hover .panel-media>img{ transform:scale(1); filter:grayscale(.25) brightness(.6); } }
[data-theme="light"] .h-panel .panel-media>img{ filter:grayscale(.4) brightness(1.16) contrast(.82); }
[data-theme="light"] .h-panel:hover .panel-media>img{ filter:grayscale(0) brightness(1.1) contrast(.9); }
/* The scrim has to carry more of the work in light mode: dark type over a
   photograph with bright highlights is unreliable at any average luminance. */
[data-theme="light"] .h-panel .panel-media .duo{ background:linear-gradient(100deg, rgba(var(--duo-rgb),.99) 0%, rgba(var(--duo-rgb),.95) 42%, rgba(var(--duo-rgb),.74) 100%); }
.h-panel .p-idx{ font-size:var(--fs-sm); letter-spacing:.26em; color:var(--amber); text-transform:uppercase; }
.h-panel .p-client{ font-size:var(--fs-sm); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.h-panel h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,2.5vw,2.35rem); line-height:1.04; letter-spacing:-.02em; margin-top:12px; max-width:24ch; }
.h-panel .p-desc{ margin-top:14px; max-width:52ch; font-size:var(--fs-md); line-height:1.65; color:var(--muted); }
.h-panel .p-results{ display:flex; flex-wrap:wrap; gap:16px 40px; margin-top:clamp(16px,2.6vh,30px); }
.h-panel .p-results .r .rv{ font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,3vw,2.4rem); line-height:.9; color:var(--accent); }
.h-panel .p-results .r .rl{ margin-top:8px; font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); max-width:18ch; }
.h-panel .p-quote{ margin-top:clamp(16px,2.6vh,30px); font-family:var(--display); font-weight:500; font-size:clamp(.95rem,1.25vw,1.15rem); line-height:1.35; max-width:42ch; color:var(--ink); }
.h-panel .p-quote cite{ display:block; margin-top:13px; font-family:var(--mono); font-style:normal; font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cs-open{ margin-top:clamp(14px,2vh,26px); align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:transparent; border:1px solid var(--line); padding:13px 22px; cursor:pointer; transition:background .45s var(--ease-out), border-color .45s var(--ease-out), color .45s var(--ease-out); }
@media (hover:hover){ .cs-open:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } }
@media (pointer:coarse){ .cs-open{ cursor:pointer; } }
@media (max-height:820px) and (min-width:769px){ .showcase .head{ padding-block:7vh 2vh; } .h-panel{ justify-content:flex-start; min-height:calc(100svh - 12vh); padding-top:4vh; padding-bottom:max(6vh, var(--rp-reserve)); } .h-panel h3{ font-size:clamp(1.45rem,2.6vw,2.25rem); } .h-panel .p-desc{ line-height:1.55; margin-top:12px; max-width:68ch; } .h-panel .p-results{ margin-top:18px; } .h-panel .p-quote{ margin-top:18px; } .cs-open{ margin-top:18px; } }
@media (max-height:700px) and (min-width:769px){ .h-panel{ padding-top:4vh; padding-bottom:max(5vh, var(--rp-reserve)); } .h-panel .p-desc{ margin-top:11px; } .h-panel .p-results{ margin-top:13px; gap:12px 34px; } .cs-open{ margin-top:13px; } }
@media (max-width:768px){ .h-viewport{ overflow:visible; } .h-track{ flex-direction:column; width:100%; } .h-panel{ width:100%; min-height:0; padding:10vh 5vw; border-left:none; border-top:1px solid var(--line); } .h-panel h3{ font-size:clamp(1.5rem,6.6vw,2.5rem); } .h-panel .p-results{ gap:22px 30px; } }
@media (max-width:480px){ .h-panel{ padding:9vh 5vw; } .h-panel .p-client{ letter-spacing:.16em; } .h-panel .p-results{ display:grid; grid-template-columns:1fr; } .cs-open{ width:100%; } }
/* Closing panel of the reel — a sign-off rather than a case file, so it
   centres its own short stack instead of inheriting the case-file rhythm. */
.h-panel-end{ justify-content:center; gap:clamp(18px,3vh,34px); }
.h-panel-end .p-idx{ color:var(--faint); }
.reel-cta{ display:inline-block; max-width:18ch; font-size:clamp(1.15rem,2vw,1.7rem); line-height:1.2; text-transform:none; letter-spacing:0; border-bottom:1px solid var(--accent); padding-bottom:8px; transition:color .4s var(--ease-out); }
@media (hover:hover){ .reel-cta:hover{ color:var(--accent); } }

.reel-progress{ position:fixed; left:5vw; right:5vw; bottom:clamp(20px,4.5vh,46px); z-index:40; pointer-events:none; opacity:0; transition:opacity .45s var(--ease-out); }
.reel-progress.show{ opacity:1; }
.rp-meta{ display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.rp-count{ color:var(--accent); }
.rp-bar{ position:relative; height:2px; background:var(--line); overflow:hidden; }
.rp-bar>i{ position:absolute; inset:0; transform-origin:left center; transform:scaleX(0); background:var(--accent); will-change:transform; }
@media (max-width:768px){ .reel-progress{ display:none; } }

/* ---------- SYS.06 signal (testimonials) ---------- */
/* ---------- SYS.07 credentials + references ---------- */
.creds,.refs{ margin-top:clamp(52px,9vh,110px); border-top:1px solid var(--line); padding-top:clamp(26px,4vh,46px); }
/* Six credentials, so the column count has to divide into six — auto-fit gave
   four and left two dead cells showing the grid's own background. */
.cred-grid{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:880px){ .cred-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cred-grid{ grid-template-columns:1fr; } }
.cred{ background:var(--bg); padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.cred dt{ font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.cred dd{ margin:0; font-size:var(--fs-md); line-height:1.5; color:var(--ink); }
.cred-note{ margin-top:18px; font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.refs .quotes-open{ margin-top:22px; }

/* Unfilled slots render visibly unfinished on purpose. This site has already
   shipped once with invented content; a placeholder that looks like finished
   copy is how that happens. Delete this rule when the slots are filled. */
[data-placeholder]{
  color:var(--muted); font-style:normal;
  border-bottom:1px dashed color-mix(in oklab, var(--amber) 60%, transparent);
  text-decoration:none;
}

/* PARKED — the testimonial layout below is now used by .refs above:
   a lead quote over a two-up row. Reinstate it in SYS.06 (or its own section)
   the moment a client gives written permission to be quoted by name. Kept
   rather than deleted so a real quote is a markup change, not a rebuild. */
.quotes-open{ margin-top:9vh; }
.qo blockquote{ font-family:var(--display); font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.qo blockquote::before{ content:"// "; color:var(--accent); }
.qo-lead{ padding-bottom:clamp(42px,6vh,80px); border-bottom:1px solid var(--line); }
.qo-lead blockquote{ font-size:clamp(1.35rem,2.7vw,2.4rem); line-height:1.26; max-width:28ch; }
.qo-row{ margin-top:clamp(42px,6vh,80px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); }
.qo-row .qo blockquote{ font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.45; }
.qo figcaption{ margin-top:clamp(20px,2.6vh,34px); display:flex; flex-direction:column; gap:6px; }
.tq-name{ font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.tq-role{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .qo-row{ grid-template-columns:1fr; gap:44px; } }

/* ---------- SYS.07 operators (about) ---------- */
.mission{ font-family:var(--display); font-weight:500; font-size:clamp(1.45rem,3.2vw,2.7rem); line-height:1.2; letter-spacing:-.02em; max-width:26ch; margin-top:7vh; }
.about-story{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(30px,6vw,90px); margin-top:8vh; align-items:start; }
.about-story .as-text{ display:grid; gap:22px; max-width:60ch; }
.about-story .as-text p{ font-size:var(--fs-base); line-height:1.9; color:var(--muted); }
.about-facts{ border-top:1px solid var(--line); }
.about-facts > div{ display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); }
.about-facts dt{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.about-facts dd{ font-size:var(--fs-sm); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-align:right; }
@media (max-width:760px){ .about-story{ grid-template-columns:1fr; gap:32px; } }
.team-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,40px); margin-top:clamp(60px,11vh,150px); }
.team-row .tm .m-photo{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--media-bg); margin-bottom:18px; }
.team-row .tm .m-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.82) contrast(1.05); transition:filter .8s var(--ease-out), scale .8s var(--ease-out); scale:1.04; }
.team-row .tm .m-photo .duo{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(var(--duo-rgb),.55)); }
.team-row .tm .m-photo .scan{ position:absolute; left:0; right:0; top:-20%; height:18%; background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 22%, transparent), transparent); opacity:0; transition:opacity .3s; pointer-events:none; }
@media (hover:hover){
  .team-row .tm:hover .m-photo img{ filter:grayscale(0) brightness(.95); scale:1; }
  .team-row .tm:hover .m-photo .scan{ opacity:1; animation:scan 1.4s linear infinite; }
}
@keyframes scan{ to{ transform:translateY(660%); } }
[data-theme="light"] .team-row .tm .m-photo img{ filter:grayscale(1) brightness(1.02); }
[data-theme="light"] .team-row .tm:hover .m-photo img{ filter:grayscale(0) brightness(1.02); }
.team-row .tm .nm{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.05rem; letter-spacing:-.01em; }
.team-row .tm .ro{ margin-top:8px; font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.team-row .tm p{ margin-top:13px; font-size:var(--fs-md); line-height:1.7; color:var(--muted); }
@media (max-width:860px){ .team-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .team-row{ grid-template-columns:1fr; } }
.values{ margin-top:clamp(50px,9vh,120px); border-top:1px solid var(--line); }
.values .val{ display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(16px,4vw,60px); align-items:baseline; padding:clamp(24px,3.2vh,42px) 0; border-bottom:1px solid var(--line); transition:padding-left .5s var(--ease-out); }
.values .val h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.12rem,1.8vw,1.65rem); letter-spacing:-.01em; }
.values .val p{ font-size:var(--fs-base); line-height:1.8; color:var(--muted); max-width:54ch; }
@media (hover:hover){ .values .val:hover{ padding-left:16px; } }
@media (max-width:680px){ .values .val{ grid-template-columns:1fr; gap:12px; } }

/* Shortest desktop viewports (≈1280×700 laptops). The case-file reel has to
   fit its header and a whole panel into one screen, so the longest panel gets
   one more notch of compaction rather than clipping its results row. */
@media (max-height:730px) and (min-width:769px){
  .showcase .head{ padding-block:6vh 2vh; }
  .h-panel h3{ font-size:clamp(1.25rem,2.1vw,1.75rem); }
  .h-panel .p-desc{ margin-top:10px; line-height:1.6; }
  .h-panel .p-results{ margin-top:14px; gap:12px 34px; }
  .h-panel .p-quote{ margin-top:14px; font-size:.95rem; }
  .cs-open{ margin-top:12px; }
}

/* Closing line under the SYS.06 engagement rows. */
.eng-note{ margin-top:clamp(28px,4vh,52px); font-size:var(--fs-base); line-height:1.8; color:var(--muted); max-width:60ch; }