/* Use-case page overrides — collapse grays to white (content only, not nav/footer) */
html:has(body.uc-page) { overflow-x: hidden; }
body.uc-page {
  --ink-2: #FFFFFF;
  --ink-3: #FFFFFF;
  --ink-4: rgba(255,255,255,0.14);
  overflow-x: clip;
}
body.uc-page nav[aria-label="Primary"],
body.uc-page footer {
  --ink-2: rgba(255,255,255,0.92);
  --ink-3: rgba(255,255,255,0.70);
  --ink-4: rgba(255,255,255,0.35);
}

/* ─── USE CASE PAGE TEMPLATE ───────────────────────────────────────────
   Tines-inspired structure (centered hero → product hero → tabbed
   workflow → stats → customer grid → CTA), Bricklayer dark/lime visual
   language. Reuses the existing nav + footer + sub-footer CTA + buttons.

   Shared by every page under /use-cases/. Loaded after ../styles.css so
   variables like --bg, --ink, --acc, --line are available. */

.uc-page{ background:var(--bg); color:var(--ink); }

/* ──────────────────────────────────────────────────────────────────────
   Disable browser scroll-anchoring on the actual scroll container
   (html/body — NOT on inner sections, which has no effect). When the
   page height changes mid-scroll (mobile address bar toggling, an
   image loading below the fold, a sticky element's min-height
   recomputing on viewport resize), some browsers compensate by
   jumping the scroll position. Turning this off lets the user's
   scroll position stay exactly where they put it.
   ────────────────────────────────────────────────────────────────────── */
html, body{
  overflow-anchor: none;
}

/* Hero wrapper: shared animated pixel backdrop spans both the hero
   text section and the dashboard section so they read as one block. */
.uc-hero-wrap{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(13,21,23,0) 0%, rgba(6,11,13,.6) 60%, #020608 100%),
    #020608;
}

/* ── HERO ── */
.uc-hero{
  position:relative;
  padding:160px clamp(24px,5vw,96px) 80px;
  text-align:center;
  background:transparent;
  border-bottom:0;
  z-index:3;
}
/* (Hero ::before/::after washes removed — they were creating a
   visible divider between the hero text and the animated cascade.
   The hero now sits cleanly on top of the wrapper's pixel backdrop.) */
.uc-hero-inner{ position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.uc-hero-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc); font-weight:500; margin-bottom:32px;
}
.uc-hero-eyebrow::before,
.uc-hero-eyebrow::after{
  content:''; width:36px; height:1px; background:var(--acc); opacity:0.7;
}
.uc-hero h1{
  font-family:'Titillium Web',sans-serif; font-weight:300;
  font-size:clamp(44px, 7vw, 96px); line-height:1.02; letter-spacing:-0.03em;
  margin:0 0 28px; color:var(--ink);
}
.uc-hero h1 .acc{ color:var(--acc); }
.uc-hero-sub{
  font-family:'Titillium Web',sans-serif; font-weight:400;
  font-size:clamp(16px, 1.4vw, 20px); line-height:1.55;
  color:var(--ink-2); max-width:64ch; margin:0 auto 40px;
}
.uc-hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}

/* ── PRODUCT HERO IMAGE / ANIMATED DASHBOARD ── */
.uc-product{
  position:relative;
  padding:64px clamp(20px,4vw,80px);
  background:var(--bg);
  display:flex; justify-content:center;
}
.uc-product-frame{
  position:relative; width:100%; max-width:1280px;
  aspect-ratio:16 / 10;
  /* Chunky laptop-style bezel + pixelated stacked drop for a voxel feel */
  border:10px solid #0E1418;
  border-radius:0; overflow:hidden;
  background:#0A1014;
  box-shadow:
    inset 0 0 0 1px rgba(213,255,28,0.18),
    0 0 0 2px rgba(213,255,28,0.22),
    8px 8px 0 0 #0a1014,
    16px 16px 0 0 #060a0d,
    24px 24px 0 0 #03050a,
    0 80px 120px rgba(0,0,0,0.6),
    0 0 80px rgba(213,255,28,0.06);
  /* Tilt effect removed — frame sits flat */
  transform:none;
}
.uc-product-frame canvas{ display:block; width:100%; height:100%; }
@media(max-width:760px){
  .uc-product-frame{
    border-width:6px;
    box-shadow:
      inset 0 0 0 1px rgba(213,255,28,0.18),
      0 0 0 1px rgba(213,255,28,0.22),
      4px 4px 0 0 #0a1014,
      8px 8px 0 0 #060a0d,
      0 40px 60px rgba(0,0,0,0.6);
  }
}

/* ── ANIMATED HERO: crossfading product screenshots ─────────────────── */
.uc-product-stage{
  position:absolute; inset:0;
  background:#0A1014;
}
.uc-product-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* contain so the whole dashboard is visible — no cropping */
  object-fit:contain; object-position:center;
  background:#0A1014;
  opacity:0;
  transition:opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events:none;
}
.uc-product-img.is-active{ opacity:1; }

/* Scanning highlight that sweeps across the active screenshot — gives the
   dashboard a "live agents working" feel without being noisy. */
.uc-product-scan{
  position:absolute; top:0; bottom:60px; left:0; right:0;
  pointer-events:none; overflow:hidden;
  z-index:3;
  mix-blend-mode:screen;
}
.uc-product-scan::before{
  content:''; position:absolute; top:0; bottom:0;
  left:-30%; width:30%;
  background:linear-gradient(90deg, transparent, rgba(213,255,28,0.10), transparent);
  animation:uc-scan 6.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes uc-scan{
  0%   { left:-30%; }
  60%  { left:100%; }
  100% { left:100%; }
}

/* Bottom overlay: LIVE pill + step indicators */
.uc-product-overlay{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:18px 24px;
  background:linear-gradient(180deg, transparent 0%, rgba(6,11,13,0.80) 60%, rgba(6,11,13,0.95) 100%);
  z-index:5;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.18em; text-transform:uppercase;
}
.uc-product-live{
  display:flex; align-items:center; gap:10px;
  color:var(--acc); font-weight:500;
}
.uc-product-live .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--acc);
  box-shadow:0 0 12px rgba(213,255,28,0.7);
  animation:uc-pulse 1.6s ease-in-out infinite;
}
@keyframes uc-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%   { opacity:0.45; transform:scale(0.65); }
}
.uc-product-indicators{
  display:flex; gap:24px; align-items:center;
}
.uc-product-step{
  color:rgba(245,247,242,0.45); font-weight:500;
  display:inline-flex; align-items:center; gap:10px;
  transition:color 0.5s ease;
  white-space:nowrap;
}
.uc-product-step::before{
  content:''; width:24px; height:2px;
  background:rgba(245,247,242,0.18);
  transition:background 0.5s ease, width 0.5s ease;
}
.uc-product-step.is-active{ color:var(--acc); }
.uc-product-step.is-active::before{
  background:var(--acc);
  width:36px;
  box-shadow:0 0 8px rgba(213,255,28,0.4);
}
@media(max-width:760px){
  .uc-product-overlay{ padding:14px 16px; font-size:16px; gap:10px; }
  .uc-product-indicators{ gap:14px; }
  .uc-product-step::before{ width:18px; }
  .uc-product-step.is-active::before{ width:24px; }
}

/* Real product screenshots inside step panels — show the full
   dashboard (no cropping); slight letterbox is fine. */
.uc-step-visual{
  background:#0A1014; padding:0;
  aspect-ratio:16 / 10;
  cursor:zoom-in;
}
.uc-step-visual img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
  transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.uc-step-visual:hover img{ transform:scale(1.03); }
/* Corner frames removed — they were too noisy site-wide */
.uc-product-corner{ display:none; }

/* ── SECTION SCAFFOLDING ── */
.uc-section{
  padding:120px clamp(24px,5vw,96px);
  border-bottom:1px solid var(--line);
}
.uc-section.alt{ background:#0B1316; }
.uc-inner{ max-width:1200px; margin:0 auto; }
.uc-section-head{
  margin-bottom:56px; max-width:780px;
}
.uc-section-eyebrow{
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc); font-weight:500; margin-bottom:22px;
  display:inline-flex; align-items:center; gap:14px;
}
.uc-section-eyebrow::before{ content:''; width:36px; height:1px; background:var(--acc); }
.uc-section h2{
  font-family:'Titillium Web',sans-serif; font-weight:300;
  font-size:clamp(36px, 5vw, 64px); line-height:1.05; letter-spacing:-0.025em;
  margin:0 0 28px; color:var(--ink);
}
.uc-section h2 .acc{ color:var(--acc); }
.uc-lead{
  font-family:'Titillium Web',sans-serif; font-weight:400;
  font-size:clamp(18px, 1.6vw, 24px); line-height:1.5;
  color:var(--ink); margin:0 0 24px; max-width:60ch;
}
.uc-body{
  font-family:'Titillium Web',sans-serif; font-weight:400;
  font-size:17px; line-height:1.65; color:var(--ink-2);
  margin:0 0 18px; max-width:64ch;
}
.uc-body.acc{
  color:var(--acc); font-weight:500;
  font-size:18px; max-width:42ch; line-height:1.45;
}

/* ── PROBLEM / SOLUTION TWO-COLUMN ── */
.uc-cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px; align-items:start;
}
@media(max-width:900px){ .uc-cols{ grid-template-columns:1fr; gap:48px; } }
.uc-col-rules{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line);
}
.uc-col-rules li{
  padding:22px 0; border-bottom:1px solid var(--line);
  font-family:'Titillium Web',sans-serif;
  font-size:17px; line-height:1.55; color:var(--ink);
  display:flex; gap:16px; align-items:flex-start;
}
.uc-col-rules li::before{
  content:''; flex-shrink:0; width:8px; height:8px;
  margin-top:9px; background:var(--acc);
}

/* ── TABBED 3-STEP WORKFLOW (Tines-style "Smart, secure workflows") ── */
.uc-steps-tabs{
  display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap;
}
.uc-step-tab{
  appearance:none; border:1px solid var(--line);
  background:rgba(255,255,255,0.02); color:var(--ink-2);
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.16em; text-transform:uppercase;
  padding:14px 22px; cursor:pointer;
  transition:all .2s ease;
  display:flex; align-items:center; gap:10px;
}
.uc-step-tab:hover{ color:var(--ink); border-color:rgba(213,255,28,0.3); }
.uc-step-tab.is-active{
  color:var(--bg); background:var(--acc); border-color:var(--acc);
  box-shadow:0 0 24px rgba(213,255,28,0.25);
}
.uc-step-tab .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,0.2); font-weight:600;
}
.uc-step-tab.is-active .num{ background:rgba(0,0,0,0.18); }
.uc-step-panel{
  display:none;
  background:#0E1418; border:1px solid var(--line);
  padding:48px clamp(28px,4vw,64px);
  position:relative; overflow:hidden;
}
.uc-step-panel.is-active{ display:grid; }
.uc-step-panel{
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:48px; align-items:center;
}
@media(max-width:900px){ .uc-step-panel{ grid-template-columns:1fr; gap:32px; } }
.uc-step-content h3{
  font-family:'Titillium Web',sans-serif; font-weight:400;
  font-size:clamp(24px,2.4vw,34px); line-height:1.15; letter-spacing:-0.015em;
  margin:0 0 18px; color:var(--ink);
}
.uc-step-num-large{
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc); font-weight:500; margin-bottom:14px;
}
.uc-step-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--acc); text-decoration:none;
  border-bottom:1px solid var(--acc);
  padding-bottom:4px; margin-top:18px;
}
.uc-step-visual{
  background:#070C0F; border:1px solid var(--line);
  /* No fixed aspect — image dictates height so there's no letterbox below it */
  display:block; position:relative; overflow:hidden;
}
.uc-step-visual::before{
  /* faint grid behind the image */
  content:'';position:absolute;inset:0;opacity:0.4;
  background-image:
    linear-gradient(rgba(213,255,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,255,28,0.04) 1px, transparent 1px);
  background-size:24px 24px;
  z-index:1;
}
.uc-step-visual canvas{ position:relative; width:100%; height:100%; }

/* ── EXAMPLE BANNER ── */
.uc-example-banner{
  display:flex; align-items:center; gap:14px;
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-2); font-weight:500;
  padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:40px 0;
}
.uc-example-banner .label{ color:var(--acc); }
.uc-example-banner .pill{
  margin-left:auto;
  padding:6px 12px; background:rgba(213,255,28,0.08); border:1px solid rgba(213,255,28,0.3);
  color:var(--acc); font-size:16px;
}

/* ── STATS GRID — 2×2 layout for breathing room with the pixel font ── */
.uc-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0; border:1px solid var(--line);
}
@media(max-width:540px){ .uc-stats{ grid-template-columns:1fr; } }
.uc-stat{
  padding:64px 48px;
  position:relative;
  /* 2×2 borders: right on first column, bottom on first row */
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-height:240px;
  display:flex; flex-direction:column; justify-content:center;
}
.uc-stats .uc-stat:nth-child(2n){ border-right:0; }
.uc-stats .uc-stat:nth-last-child(-n+2){ border-bottom:0; }
@media(max-width:540px){
  .uc-stats .uc-stat{ border-right:0; }
  .uc-stats .uc-stat:last-child{ border-bottom:0; }
  .uc-stat{ padding:48px 32px; min-height:0; }
}
.uc-stat-num{
  /* Pixel-style face for the at-scale numbers */
  font-family:'Silkscreen', monospace; font-weight:400;
  font-size:clamp(34px, 4vw, 56px); line-height:1.05; letter-spacing:0.01em;
  color:var(--acc); margin-bottom:22px; display:block;
  text-shadow:0 0 18px rgba(213,255,28,0.28);
  word-break:break-word;
}
.uc-stat-label{
  font-family:'Titillium Web', sans-serif; font-weight:400;
  font-size:17px; line-height:1.5; color:var(--ink-2);
  letter-spacing:0;
}
/* Hover lift on stats */
.uc-stat{
  transition:background 0.3s ease, transform 0.3s ease;
}
.uc-stat:hover{
  background:rgba(213,255,28,0.025);
}
.uc-stat:hover .uc-stat-num{
  text-shadow:0 0 28px rgba(213,255,28,0.55);
}
/* Subtle pixel-style scanline accent on the stats grid */
.uc-stats{ position:relative; }
.uc-stats::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(0deg, rgba(213,255,28,0.04) 1px, transparent 1px);
  background-size:100% 4px;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0.5;
}

/* ── CUSTOMER CASE GRID ── */
.uc-cases{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0; border:1px solid var(--line);
}
@media(max-width:760px){ .uc-cases{ grid-template-columns:1fr; } }
.uc-case{
  padding:40px 36px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.uc-cases .uc-case:nth-child(2n){ border-right:0; }
.uc-cases .uc-case:nth-last-child(-n+2){ border-bottom:0; }
@media(max-width:760px){
  .uc-cases .uc-case{ border-right:0; }
  .uc-cases .uc-case:last-child{ border-bottom:0; }
}
.uc-case-co{
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc); font-weight:500; margin-bottom:24px;
  display:flex; align-items:center; gap:10px;
}
.uc-case-co::before{ content:''; width:6px; height:6px; background:var(--acc); border-radius:50%; }
.uc-case-stat{
  font-family:'Titillium Web',sans-serif; font-weight:400;
  font-size:22px; line-height:1.35; color:var(--ink);
  margin:0 0 8px;
}
.uc-case-stat .num{ color:var(--acc); font-weight:500; }
.uc-case-stat:last-child{ margin-bottom:0; }

/* ── CONNECTS LIST (Tines library teaser equivalent) ── */
.uc-connects{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px; align-items:start;
}
@media(max-width:900px){ .uc-connects{ grid-template-columns:1fr; gap:40px; } }
.uc-connects-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.uc-connects-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0; border-bottom:1px solid var(--line);
  font-family:'Titillium Web',sans-serif;
  font-size:20px; color:var(--ink); font-weight:400;
}
.uc-connects-list li::after{
  content:'→'; color:var(--acc); font-family:'Titillium Web',sans-serif;
  font-size:18px;
}

/* ── MARQUEE TAGS (Tines capability strip) ── */
.uc-marquee{
  padding:32px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#0B1316;
  overflow:hidden; position:relative;
}
.uc-marquee-track{
  display:flex; gap:0; white-space:nowrap;
  animation:uc-marquee-scroll 40s linear infinite;
}
.uc-marquee-track.reverse{ animation-direction:reverse; animation-duration:55s; }
.uc-marquee + .uc-marquee{ border-top:0; }
.uc-marquee-tag{
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-2); padding:0 32px; flex-shrink:0;
  display:flex; align-items:center; gap:18px;
}
.uc-marquee-tag::after{ content:'·'; color:var(--acc); margin-left:32px; }
@keyframes uc-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ── INLINE BIG STAT STRIP (alt) ── */
.uc-bigstat-strip{
  display:flex; align-items:center; gap:64px; flex-wrap:wrap;
  padding:48px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.uc-bigstat{
  display:flex; flex-direction:column; gap:6px;
}
.uc-bigstat .n{
  font-family:'Titillium Web',sans-serif; font-weight:300;
  font-size:clamp(36px,4vw,56px); line-height:1; color:var(--acc);
}
.uc-bigstat .l{
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-2);
}

/* ── PROCEDURE STEP STAGE (the Workbench / agent team / output mocks) ── */
.uc-mock{
  width:100%; height:100%;
  display:flex; flex-direction:column; gap:0;
  font-family:'Titillium Web',sans-serif; font-size:16px;
  color:var(--ink-2);
  position:relative; z-index:1;
}
.uc-mock-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--line);
  font-size:16px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--acc);
}
.uc-mock-bar .dot{ width:6px; height:6px; background:var(--acc); border-radius:50%; }
.uc-mock-body{ flex:1; padding:18px; display:flex; flex-direction:column; gap:8px; }
.uc-mock-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:rgba(255,255,255,0.02);
  border-left:2px solid var(--acc); font-size:16px;
}
.uc-mock-row .k{ color:var(--acc); font-weight:500; min-width:90px; }
.uc-mock-row .v{ color:var(--ink); }
.uc-mock-row.dim{ border-left-color:rgba(255,255,255,0.1); opacity:0.55; }
.uc-mock-agents{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.uc-mock-agent{
  border:1px solid var(--line); padding:12px;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(255,255,255,0.015);
}
.uc-mock-agent .role{ color:var(--acc); font-size:16px; letter-spacing:0.18em; text-transform:uppercase; }
.uc-mock-agent .nm{ color:var(--ink); font-size:16px; }

/* ── BREADCRUMB ── */
.uc-crumbs{
  font-family:'Titillium Web',sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-3);
  padding:24px clamp(24px,5vw,96px) 0;
  display:flex; align-items:center; gap:10px;
}
.uc-crumbs a{ color:var(--ink-2); }
.uc-crumbs a:hover{ color:var(--acc); }
.uc-crumbs .sep{ color:var(--ink-4); }

/* ── MOBILE TUNING ── */
@media(max-width:760px){
  .uc-hero{ padding:120px 20px 60px; }
  .uc-section{ padding:80px 20px; }
  .uc-product{ padding:32px 20px; }
  .uc-step-panel{ padding:32px 20px; }
  .uc-case{ padding:32px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD COMPONENT (.uc-dash)
   Used inside .uc-screen (hero) and .uc-step-visual (step panels).
   Internal sizes scale with container width via cqi-based font-size,
   so the entire dashboard always fits its frame without cropping.
   ═══════════════════════════════════════════════════════════════════ */
.uc-dash{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  font-family:'Titillium Web', sans-serif;
  color:#E8EAE8;
  background:#0A1014;
  font-size:clamp(7px, 1.1cqi, 14px);
  padding:1.6em 1.8em 1.4em;
  gap:1em;
  overflow:hidden;
}

/* Top nav bar */
.uc-dash-top{
  flex:0 0 auto;
  display:flex; align-items:center; gap:1.6em;
  padding-bottom:1em;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.uc-dash-mark{
  flex:0 0 auto;
  display:inline-flex; align-items:baseline;
  font-family:'Titillium Web', sans-serif;
  font-size:1.3em; letter-spacing:0.04em;
  color:#fff;
}
.uc-dash-mark em{
  display:inline-block;
  margin-left:0.15em; padding:0.05em 0.3em;
  font-style:normal;
  background:#d5ff1c; color:#0a0d0d;
}
.uc-dash-tabs{
  display:flex; gap:1.5em; align-items:center;
  font-family:'Titillium Web', sans-serif;
  font-size:0.85em; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
.uc-dash-tabs span{ position:relative; padding:0.6em 0; }
.uc-dash-tabs span.is-active{ color:#fff; }
.uc-dash-tabs span.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:#d5ff1c;
}
.uc-dash-user{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:0.5em;
  font-size:0.92em;
  color:rgba(255,255,255,0.7);
}
.uc-dash-user .u-avi{
  width:1.6em; height:1.6em; border-radius:50%;
  background:linear-gradient(135deg, #2a3035, #4a5055);
  display:inline-block;
  border:1px solid rgba(255,255,255,0.15);
}

/* Title row */
.uc-dash-titlerow{
  flex:0 0 auto;
  display:flex; align-items:center; gap:0.6em;
  font-size:1.3em; font-weight:600;
  color:#fff;
}
.uc-dash-titlerow .uc-dash-pen{
  font-size:0.7em; color:rgba(255,255,255,0.4);
}

/* Sub tabs row */
.uc-dash-subtabs{
  flex:0 0 auto;
  position:relative;
  display:flex; gap:1.3em; align-items:center;
  font-family:'Titillium Web', sans-serif;
  font-size:0.85em; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding-bottom:0.7em;
}
.uc-dash-subtabs span.is-active{
  color:#d5ff1c; position:relative;
}
.uc-dash-subtabs span.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-0.78em;
  height:2px; background:#d5ff1c;
}
.uc-dash-subtabs .uc-dash-open{
  margin-left:auto; color:rgba(255,255,255,0.6);
}

/* ─── SCREEN 1: AGENTS GRID ─── */
.uc-agents-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1em;
  align-content:start;
  min-height:0;
}
.uc-agent-card{
  position:relative;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.07);
  padding:1em 1.2em 0.9em;
  display:flex; flex-direction:column; gap:0.45em;
  min-width:0;
}
.uc-agent-pill{
  position:absolute; top:0.7em; left:0.7em;
  display:inline-flex; align-items:center; gap:0.35em;
  padding:0.25em 0.65em;
  background:rgba(60,180,90,0.15);
  border:1px solid rgba(80,200,110,0.4);
  color:#88e29c;
  font-family:'Titillium Web', sans-serif;
  font-size:0.78em; letter-spacing:0.12em;
}
.uc-agent-avi{
  align-self:center;
  width:2.6em; height:2.6em; margin:0.5em 0 0.3em;
  background:#0E1518; border:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; justify-content:center;
}
.uc-agent-avi svg{ width:78%; height:78%; }
.uc-agent-name{
  text-align:center;
  font-size:1em; font-weight:600;
  color:#d5ff1c;
  margin-bottom:0.2em;
  line-height:1.2;
}
.uc-agent-meta{
  font-family:'Titillium Web', sans-serif;
  font-size:0.72em;
  color:rgba(255,255,255,0.5);
  line-height:1.45;
}
.uc-agent-meta b{ color:rgba(255,255,255,0.75); font-weight:400; }
.uc-agent-actions{
  margin-top:auto;
  display:flex; gap:0.9em;
  padding-top:0.6em;
  font-size:0.95em;
  color:rgba(255,255,255,0.35);
}
.uc-agent-actions .trash{ color:#c64a4a; }

/* ─── SCREEN 2: WORKBENCH ─── */
.uc-workbench{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:1em;
  min-height:0;
}
.uc-wb-graph{
  position:relative;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  padding:0.8em;
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:0;
}
.uc-wb-graph svg{
  width:100%; height:100%;
  font-family:'Titillium Web', sans-serif;
}
.uc-wb-detail{
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.08);
  padding:1em;
  display:flex; flex-direction:column; gap:0.6em;
  min-width:0; min-height:0; overflow:hidden;
}
.uc-wb-d-head{
  display:flex; align-items:center; justify-content:space-between; gap:0.6em;
  font-size:1em; color:#fff; font-weight:600;
  padding-bottom:0.6em;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.uc-wb-pill{
  padding:0.2em 0.6em;
  background:rgba(60,180,90,0.15); border:1px solid rgba(80,200,110,0.4);
  color:#88e29c;
  font-family:'Titillium Web', sans-serif;
  font-size:0.74em; letter-spacing:0.12em; text-transform:uppercase;
}
.uc-wb-d-row{
  display:flex; justify-content:space-between; gap:1em;
  font-family:'Titillium Web', sans-serif;
  font-size:0.82em;
  color:rgba(255,255,255,0.7);
}
.uc-wb-d-row > span:first-child{
  color:rgba(255,255,255,0.4);
  text-transform:uppercase; letter-spacing:0.12em;
}
.uc-wb-d-row .acc{ color:#d5ff1c; }
.uc-wb-d-out{
  margin-top:0.4em; padding-top:0.6em;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; flex-direction:column; gap:0.4em;
  font-family:'Titillium Web', sans-serif;
  font-size:0.74em;
  color:rgba(255,255,255,0.7);
}
.uc-wb-d-out > div{
  background:rgba(0,0,0,0.35); padding:0.45em 0.65em;
  border-left:2px solid #d5ff1c;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ─── SCREEN 3: OUTPUT ─── */
.uc-output{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:1em;
  min-height:0;
}
.uc-output-card{
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.07);
  padding:1em 1.2em;
  display:flex; flex-direction:column; gap:0.7em;
  min-width:0; min-height:0; overflow:hidden;
}
.uc-output-h{
  font-size:0.95em; color:#fff; font-weight:600;
  padding-bottom:0.5em;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.uc-output-card p{
  font-size:0.85em; line-height:1.55;
  color:rgba(255,255,255,0.7);
  margin:0;
}
.uc-ioc-table{
  width:100%; border-collapse:collapse;
  font-family:'Titillium Web', sans-serif;
  font-size:0.74em;
}
.uc-ioc-table th{
  text-align:left; padding:0.4em 0.6em;
  color:rgba(255,255,255,0.4);
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-transform:uppercase; letter-spacing:0.12em; font-weight:500;
}
.uc-ioc-table td{
  padding:0.5em 0.6em;
  border-bottom:1px solid rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.75);
  word-break:break-all;
}
.uc-ioc-table td:first-child{ color:#d5ff1c; white-space:nowrap; }
.uc-ioc-table tr:last-child td{ border-bottom:0; }

/* "Live" pulse on active dashboard's status pill */
.uc-screen.is-active .uc-agent-pill,
.uc-screen.is-active .uc-wb-pill{
  animation:uc-pill-pulse 2.4s ease-in-out infinite;
}
@keyframes uc-pill-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(80,200,110,0.0); }
  50%      { box-shadow:0 0 0 0.4em rgba(80,200,110,0.18); }
}

/* ═══════════════════════════════════════════════════════════════════
   ICON GRID  —  used in THE APPROACH section
   ═══════════════════════════════════════════════════════════════════ */
.uc-icon-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.uc-icon-cell{
  background:var(--bg);
  padding:36px 28px 32px;
  display:flex; flex-direction:column; gap:18px;
  min-width:0;
}
.uc-icon-svg{
  width:48px; height:48px;
  color:var(--acc);
  display:inline-flex; align-items:center; justify-content:center;
}
.uc-icon-svg svg{ width:100%; height:100%; }
.uc-icon-cell p{
  font-size:16px; line-height:1.55;
  color:var(--ink-2);
  margin:0;
}
.uc-icon-grid-tag{
  margin-top:32px; text-align:center;
  font-size:18px; letter-spacing:0.005em;
}
@media(max-width:1100px){
  .uc-icon-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media(max-width:760px){
  .uc-icon-grid{ grid-template-columns:repeat(2, 1fr); }
  .uc-icon-cell{ padding:28px 22px; }
}
@media(max-width:480px){
  .uc-icon-grid{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTEGRATIONS LOGO GRID (replaces second marquee) — airy & elegant
   ═══════════════════════════════════════════════════════════════════ */
.uc-logo-grid-wrap{
  background:var(--bg);
  padding:96px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.uc-logo-grid-wrap .uc-logo-eyebrow{
  display:block; text-align:center;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:64px;
}

/* ── Continuous-scrolling integrations marquee ── */
.uc-logo-marquee{
  position:relative;
  overflow:hidden;
  /* Edge-mask so the logos fade in/out at left and right */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.uc-logo-track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  animation:uc-logo-scroll 60s linear infinite;
}
.uc-logo-marquee:hover .uc-logo-track{
  animation-play-state:paused;
}
@keyframes uc-logo-scroll{
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.uc-logo-cell{
  position:relative;
  flex:0 0 auto;
  width:160px; height:120px;
  display:flex; align-items:center; justify-content:center;
  padding:0 24px;
  transition:opacity 0.35s ease;
}
.uc-logo-cell img{
  max-width:64px; max-height:48px;
  width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.4) contrast(0.9);
  opacity:0.55;
  transition:filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.uc-logo-cell:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.12);
}

/* Spotlight: when a cell is hovered, dim every other logo in the track */
.uc-logo-track:has(.uc-logo-cell:hover) .uc-logo-cell:not(:hover) img{
  opacity:0.12;
  filter:grayscale(1) brightness(0.6);
}

/* Floating mono label — shown on hover */
.uc-logo-label{
  position:absolute; left:50%; bottom:8px;
  transform:translate(-50%, 6px);
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--acc);
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.uc-logo-cell:hover .uc-logo-label{
  opacity:1;
  transform:translate(-50%, 0);
}

@media(max-width:760px){
  .uc-logo-grid-wrap{ padding:64px 0; }
  .uc-logo-cell{ width:130px; height:100px; padding:0 16px; }
  .uc-logo-cell img{ max-width:54px; max-height:42px; }
  .uc-logo-label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .uc-logo-track{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION DIFFERENTIATION
   Each section has a recognisable treatment so the page reads as a
   sequence of distinct beats instead of a flat scroll.
   ═══════════════════════════════════════════════════════════════════ */

/* Default → alt → grid pattern → bordered → CTA: rotating treatments */
.uc-section.alt{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(213,255,28,0.025), transparent 70%),
    #0B1316;
  position:relative;
}
.uc-section.alt::before{
  /* Faint dotted texture for a different surface feel */
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(213,255,28,0.05) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none; opacity:0.5;
  mask-image:linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.uc-section.alt > *{ position:relative; z-index:1; }

/* (Corner brackets removed; corner frames are off site-wide) */
.uc-section.alt .uc-inner{ position:relative; }

/* Decorative section connector — small accent run between sections */
/* (Vertical accent connector between sections removed.) */

/* ═══════════════════════════════════════════════════════════════════
   INTERACTIVITY  —  hover states, lifts, animated affordances
   ═══════════════════════════════════════════════════════════════════ */

/* Customer cases — clickable, accent left edge on hover */
.uc-case{
  cursor:default;
  transition:background 0.35s ease, transform 0.35s ease;
  background:transparent;
}
.uc-case::after{
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:2px; background:var(--acc);
  transform:scaleY(0); transform-origin:top;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.uc-case:hover{
  background:rgba(213,255,28,0.025);
}
.uc-case:hover::after{ transform:scaleY(1); }
.uc-case:hover .uc-case-co{ color:#fff; }
.uc-case .uc-case-co{ transition:color 0.3s ease; }

/* Icon-grid cells — hover lifts icon, accents text */
.uc-icon-cell{
  transition:background 0.3s ease;
  cursor:default;
}
.uc-icon-cell:hover{
  background:rgba(213,255,28,0.025);
}
.uc-icon-cell .uc-icon-svg{
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1), color 0.3s ease;
}
.uc-icon-cell:hover .uc-icon-svg{
  transform:translateY(-4px) scale(1.05);
}
.uc-icon-cell p{ transition:color 0.3s ease; }
.uc-icon-cell:hover p{ color:var(--ink); }

/* Connects list — animated arrow + color shift on hover */
.uc-connects-list li{
  cursor:pointer;
  transition:padding-left 0.35s cubic-bezier(0.4,0,0.2,1), color 0.3s ease;
  position:relative;
}
.uc-connects-list li::before{
  content:''; position:absolute; left:0; top:50%;
  width:0; height:1px; background:var(--acc);
  transition:width 0.35s cubic-bezier(0.4,0,0.2,1);
  transform:translateY(-50%);
}
.uc-connects-list li:hover{
  padding-left:24px; color:var(--acc);
}
.uc-connects-list li:hover::before{ width:16px; }
.uc-connects-list li::after{
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.uc-connects-list li:hover::after{ transform:translateX(8px); }

/* Tabs — extra polish on the workflow tabs */
.uc-step-tab{
  position:relative; overflow:hidden;
}
.uc-step-tab::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(213,255,28,0.15), transparent 70%);
  opacity:0; transition:opacity 0.3s ease;
}
.uc-step-tab:hover::before{ opacity:1; }
.uc-step-tab.is-active::before{ opacity:0; }

/* Demo CTA buttons — subtle pulse on hero & subfooter primary buttons */
.btn-acc.btn-big{
  position:relative; overflow:hidden;
}
.btn-acc.btn-big::after{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition:left 0.7s ease;
}
.btn-acc.btn-big:hover::after{ left:100%; }

/* ═══════════════════════════════════════════════════════════════════
   SCROLL REVEAL  —  subtle fade-in on icon grid + customer cases
   ═══════════════════════════════════════════════════════════════════ */
/* Generic scroll-reveal — fade-up as content enters the viewport.
   Excludes elements with their own scroll-driven transforms
   (.uc-product-frame, .uc-blueprint-axis) AND elements that toggle
   their own visibility (.uc-step-panel children — those need to be
   visible immediately when their tab becomes active, otherwise the
   IntersectionObserver-based reveal would never fire on tab clicks
   and the content would stay invisible). */
.uc-icon-cell, .uc-case, .uc-stat,
.uc-section-head,
.uc-soc-node,
.uc-why-content, .uc-why-image,
.uc-hero-eyebrow, .uc-hero h1, .uc-hero-sub, .uc-hero-actions,
.uc-logo-grid-wrap .uc-logo-eyebrow,
.uc-soc-caption,
.uc-stats-caption,
.uc-icon-grid-tag,
.uc-subfooter-cta .subfooter-cta-h,
.uc-subfooter-cta .subfooter-cta-actions,
.uc-subfooter-cta .uc-image-placeholder{
  opacity:0; transform:translateY(24px);
  transition:opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
  will-change:opacity, transform;
}
.uc-icon-cell.is-revealed,
.uc-case.is-revealed,
.uc-stat.is-revealed,
.uc-section-head.is-revealed,
.uc-soc-node.is-revealed,
.uc-why-content.is-revealed,
.uc-why-image.is-revealed,
.uc-hero-eyebrow.is-revealed,
.uc-hero h1.is-revealed,
.uc-hero-sub.is-revealed,
.uc-hero-actions.is-revealed,
.uc-logo-eyebrow.is-revealed,
.uc-soc-caption.is-revealed,
.uc-stats-caption.is-revealed,
.uc-icon-grid-tag.is-revealed,
.subfooter-cta-h.is-revealed,
.subfooter-cta-actions.is-revealed,
.uc-subfooter-cta .uc-image-placeholder.is-revealed{
  opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .uc-icon-cell, .uc-case, .uc-stat,
  .uc-section-head, .uc-soc-node,
  .uc-why-content, .uc-why-image,
  .uc-hero-eyebrow, .uc-hero h1, .uc-hero-sub, .uc-hero-actions,
  .uc-logo-grid-wrap .uc-logo-eyebrow,
  .uc-soc-caption, .uc-stats-caption, .uc-icon-grid-tag,
  .uc-subfooter-cta .subfooter-cta-h,
  .uc-subfooter-cta .subfooter-cta-actions,
  .uc-subfooter-cta .uc-image-placeholder{
    opacity:1; transform:none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CENTERED APPROACH SECTION
   The "What Coordinated AI Agents Actually Looks Like" section uses
   centered hierarchy — heading, lead, icon grid, and tagline all
   align to the page center.
   ═══════════════════════════════════════════════════════════════════ */
.uc-section.is-centered .uc-section-head{
  margin:0 auto 56px;
  max-width:780px;
  text-align:center;
}
.uc-section.is-centered .uc-section-eyebrow{
  justify-content:center;
}
.uc-section.is-centered .uc-section-head .uc-lead{
  margin-left:auto; margin-right:auto;
  max-width:60ch;
}
.uc-section.is-centered .uc-icon-cell{
  text-align:center; align-items:center;
}
.uc-section.is-centered .uc-icon-svg{
  margin:0 auto;
}
.uc-section.is-centered .uc-icon-grid-tag{
  text-align:center;
}

/* ═══════════════════════════════════════════════════════════════════
   ZOOMABLE IMAGE WRAPPER  — generic click-to-zoom image container
   used wherever a dashboard-style image lives outside the step panels
   (WHY BRICKLAYER, sub-footer CTA, etc).
   ═══════════════════════════════════════════════════════════════════ */
.uc-zoomable{
  position:relative;
  display:block;
  background:#0A1014;
  border:1px solid var(--line);
  cursor:zoom-in;
  overflow:hidden;
}
.uc-zoomable img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
  transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.uc-zoomable:hover img{ transform:scale(1.03); }
.uc-zoomable::after{
  content:'⌖ CLICK TO ZOOM';
  position:absolute; bottom:14px; right:14px;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.16em;
  color:var(--acc);
  background:rgba(6,11,13,0.65);
  padding:6px 10px;
  z-index:3;
  opacity:0; transform:translateY(4px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  pointer-events:none;
}
.uc-zoomable:hover::after{
  opacity:1; transform:translateY(0);
}
/* WHY BRICKLAYER image slot — 16:10 to match the placeholder it replaced */
.uc-why-img{ aspect-ratio:16 / 10; }
/* Sub-footer CTA image slot — 4:3 to match the placeholder it replaced */
.uc-subfooter-img{ aspect-ratio:4 / 3; }

/* ═══════════════════════════════════════════════════════════════════
   ZOOM MODAL  — clicking a 3-step image opens a fullscreen lightbox
   ═══════════════════════════════════════════════════════════════════ */
.uc-zoom-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(6,11,13,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw;
  opacity:0; pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);
}
.uc-zoom-modal.is-open{
  opacity:1; pointer-events:auto;
}
.uc-zoom-modal img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 30px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(213,255,28,0.18);
  transform:scale(0.96);
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.uc-zoom-modal.is-open img{ transform:scale(1); }
.uc-zoom-close{
  position:absolute; top:24px; right:24px;
  width:44px; height:44px;
  background:transparent; border:1px solid rgba(213,255,28,0.4);
  color:var(--acc); cursor:pointer;
  font-family:'Titillium Web', sans-serif;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.uc-zoom-close:hover{ background:rgba(213,255,28,0.1); border-color:var(--acc); }
.uc-zoom-hint{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
}

/* Subtle "click to zoom" affordance on each step image */
.uc-step-visual::after{
  content:'⌖ CLICK TO ZOOM';
  position:absolute; bottom:14px; right:14px;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.16em;
  color:var(--acc);
  background:rgba(6,11,13,0.65);
  padding:6px 10px;
  z-index:3;
  opacity:0; transform:translateY(4px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  pointer-events:none;
}
.uc-step-visual:hover::after{
  opacity:1; transform:translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   PIXEL DIVIDERS  — port of the homepage canvas-drawn dividers
   ═══════════════════════════════════════════════════════════════════ */
.uc-section{ position:relative; }
.section-divider{
  position:absolute; top:0; left:0; right:0;
  transform:translateY(-50%);
  height:72px; width:100%;
  pointer-events:none; z-index:3;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  display:block;
}
/* Hide on the very first section (no divider above hero) */
.uc-section:first-of-type .section-divider,
.uc-section.no-divider .section-divider{ display:none; }

/* ═══════════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDER  — used in WHY BRICKLAYER and SUB-FOOTER CTA
   ═══════════════════════════════════════════════════════════════════ */
.uc-image-placeholder{
  width:100%;
  aspect-ratio:16 / 10;
  background:rgba(213,255,28,0.025);
  border:1px dashed rgba(213,255,28,0.3);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px;
  position:relative;
}
.uc-image-placeholder::before,
.uc-image-placeholder::after{
  content:''; position:absolute;
  background-image:linear-gradient(45deg,
    transparent 48%, rgba(213,255,28,0.08) 49%, rgba(213,255,28,0.08) 51%, transparent 52%);
  background-size:24px 24px;
  inset:0;
  opacity:0.5;
  pointer-events:none;
}
.uc-image-placeholder-label{
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(213,255,28,0.7);
  position:relative;
}
.uc-image-placeholder-spec{
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.18em;
  color:rgba(213,255,28,0.4);
  position:relative;
}

/* ═══════════════════════════════════════════════════════════════════
   WHY BRICKLAYER  — image-left, text-right two-column layout
   ═══════════════════════════════════════════════════════════════════ */
.uc-why{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:80px;
  align-items:center;
}
@media(max-width:900px){
  .uc-why{ grid-template-columns:1fr; gap:48px; }
}
.uc-why-image .uc-image-placeholder{ aspect-ratio:4/3; }
.uc-why-content .uc-section-eyebrow{ margin-bottom:18px; }
.uc-why-content h2{ margin-bottom:28px; }

/* ═══════════════════════════════════════════════════════════════════
   SOC CONNECT MAP  — Euclid-style blueprint:
     • centered BLAI hub with crossing axis lines
     • faint grid backdrop
     • row of 4 bordered stat-style nodes
     • caption stripe sealing the bottom
   Recurring across all use case pages — set [data-current] on the map
   AND .is-current on the matching node to highlight a different one.
   ═══════════════════════════════════════════════════════════════════ */
.uc-soc-map{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:80px 0 0;
}

/* Blueprint grid backdrop — fades in/out at the edges */
.uc-soc-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(213,255,28,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,255,28,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center center;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 50%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 50%, transparent 100%);
  z-index:0;
}

/* Crossing axis: vertical lines above + below the hub, horizontal
   axis painted by the hub's own ::before that shoots out left/right */
.uc-soc-axis{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:64px;
}
.uc-soc-vline{
  width:1px; height:64px;
  background:linear-gradient(180deg, transparent 0%, rgba(213,255,28,0.45) 50%, rgba(213,255,28,0.6) 100%);
}
.uc-soc-axis .uc-soc-vline:last-child{
  background:linear-gradient(180deg, rgba(213,255,28,0.6) 0%, rgba(213,255,28,0.45) 50%, transparent 100%);
}

.uc-soc-hub{
  position:relative;
  width:120px; height:120px;
  background:#0A1014;
  border:1px solid rgba(213,255,28,0.5);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 80px rgba(213,255,28,0.18);
  z-index:3;
}
/* Horizontal axis line that shoots through the hub */
.uc-soc-hub::before{
  content:''; position:absolute;
  top:50%; left:-100vw; right:-100vw;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(213,255,28,0.35) 30%, rgba(213,255,28,0.35) 70%, transparent 100%);
  z-index:-1;
}
.uc-soc-hub-img{
  width:54%; height:54%;
  object-fit:contain;
  display:block;
}

/* Row of 5 use case nodes */
.uc-soc-row{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  border:1px solid var(--line);
  background:rgba(10,16,20,0.85);
}
.uc-soc-node{
  position:relative;
  padding:32px 22px 26px;
  border-right:1px solid var(--line);
  text-decoration:none;
  display:flex; flex-direction:column;
  gap:16px;
  transition:background 0.3s ease;
  min-height:200px;
}
.uc-soc-row .uc-soc-node:last-child{ border-right:0; }
.uc-soc-node:hover{ background:rgba(213,255,28,0.025); }

.uc-soc-name{
  font-family:'Titillium Web', sans-serif;
  font-size:22px; line-height:1.18; color:var(--ink);
  font-weight:300; letter-spacing:-0.005em;
}
.uc-soc-meta{
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-3);
  margin-top:auto;
}

/* Current node highlight */
.uc-soc-node.is-current{
  background:rgba(213,255,28,0.04);
  cursor:default;
}
.uc-soc-node.is-current::before{
  /* Top accent rail */
  content:''; position:absolute; top:-1px; left:-1px; right:-1px;
  height:2px; background:var(--acc);
  box-shadow:0 0 14px rgba(213,255,28,0.55);
}
.uc-soc-node.is-current .uc-soc-name{ color:#fff; }
.uc-soc-node.is-current .uc-soc-meta{ color:var(--acc); }

.uc-soc-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc);
  align-self:flex-start;
}
.uc-soc-pill::before{
  content:''; width:7px; height:7px;
  background:var(--acc); border-radius:50%;
  box-shadow:0 0 10px rgba(213,255,28,0.7);
  animation:uc-soc-pulse 1.6s ease-in-out infinite;
}
@keyframes uc-soc-pulse{
  0%, 100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.45; transform:scale(0.7); }
}
.uc-soc-arrow{
  position:absolute; bottom:24px; right:24px;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; color:var(--acc);
  opacity:0.6;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.uc-soc-node:hover .uc-soc-arrow{
  transform:translateX(6px);
  opacity:1;
}

/* Caption stripe seals the bottom of the diagram */
.uc-soc-caption{
  position:relative; z-index:2;
  border:1px solid var(--line);
  border-top:0;
  padding:22px 24px;
  text-align:center;
  background:rgba(10,16,20,0.85);
  font-family:'Titillium Web', sans-serif;
  font-size:16px; color:var(--ink-2);
}

/* Tablet: collapse the 5-up row to a 2-col grid with the 5th item full width */
@media(max-width:900px){
  .uc-soc-map{ padding-top:56px; }
  .uc-soc-vline{ height:40px; }
  .uc-soc-row{ grid-template-columns:1fr 1fr; }
  .uc-soc-node{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:160px; padding:32px 24px 26px; }
  .uc-soc-row .uc-soc-node:nth-child(2n){ border-right:0; }
  .uc-soc-row .uc-soc-node:last-child{ grid-column:1 / -1; border-right:0; border-bottom:0; }
}
/* Mobile: stack everything into a single column */
@media(max-width:540px){
  .uc-soc-row{ grid-template-columns:1fr; }
  .uc-soc-node{ border-right:0; border-bottom:1px solid var(--line); }
  .uc-soc-row .uc-soc-node:last-child{ grid-column:auto; border-bottom:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO BLUEPRINT  — Euclid-style centered hub + live counter row,
   replaces the old slideshow. Counters are animated by use-case.js.
   ═══════════════════════════════════════════════════════════════════ */
.uc-hero-blueprint{
  position:relative;
  padding:64px clamp(20px,4vw,80px) 96px;
  background:transparent;
  border-bottom:1px solid var(--line);
  z-index:3;
}

/* Animated pixel cascade backdrop — ported from the homepage's
   wf-pxbg. Canvas is drawn by use-case.js (chunky 24px blocks
   that cascade inward from the edges, scroll-driven). */
.uc-bp-pxbg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1; pointer-events:none;
}
.uc-bp-vignette{
  position:absolute; inset:0;
  z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 50%,
    rgba(6,11,13,0) 0%, rgba(6,11,13,.35) 65%, rgba(6,11,13,.85) 100%);
}

.uc-blueprint-frame{
  position:relative;
  z-index:3;
  max-width:1280px; margin:0 auto;
  padding:80px 0 0;
  perspective:1400px;  /* enables the 3D scroll-tilt on .uc-product-frame */
}
.uc-blueprint-axis{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:64px;
}
.uc-blueprint-vline{
  width:1px; height:64px;
  background:linear-gradient(180deg, transparent 0%, rgba(213,255,28,0.45) 50%, rgba(213,255,28,0.6) 100%);
}
.uc-blueprint-axis .uc-blueprint-vline:last-child{
  background:linear-gradient(180deg, rgba(213,255,28,0.6) 0%, rgba(213,255,28,0.45) 50%, transparent 100%);
}
.uc-blueprint-hub{
  position:relative;
  width:120px; height:120px;
  background:#0A1014;
  border:1px solid rgba(213,255,28,0.5);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 80px rgba(213,255,28,0.2);
  z-index:3;
}
.uc-blueprint-hub::before{
  content:''; position:absolute;
  top:50%; left:-100vw; right:-100vw;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(213,255,28,0.35) 30%, rgba(213,255,28,0.35) 70%, transparent 100%);
  z-index:-1;
}
.uc-blueprint-hub-img{
  width:54%; height:54%;
  object-fit:contain;
  display:block;
}

/* Live counter row */
.uc-blueprint-stats{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border:1px solid var(--line);
  background:rgba(10,16,20,0.85);
}
.uc-blueprint-stat{
  position:relative;
  padding:36px 28px 28px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  min-height:180px;
}
.uc-blueprint-stat:last-child{ border-right:0; }
.uc-bp-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc);
  align-self:flex-start;
}
.uc-bp-pill .dot{
  width:7px; height:7px;
  background:var(--acc); border-radius:50%;
  box-shadow:0 0 10px rgba(213,255,28,0.7);
  animation:uc-soc-pulse 1.6s ease-in-out infinite;
}
.uc-bp-stat-num{
  font-family:'Silkscreen', monospace;
  font-size:clamp(28px,3.4vw,42px); line-height:1; letter-spacing:0.02em;
  color:var(--acc);
  text-shadow:0 0 18px rgba(213,255,28,0.28);
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:baseline;
}
.uc-bp-stat-num .unit{
  font-style:normal;
  font-size:0.55em; margin-left:0.15em;
  opacity:0.85;
}
.uc-bp-stat-label{
  font-family:'Titillium Web', sans-serif;
  font-size:16px; line-height:1.4; color:var(--ink-2);
  margin-top:auto;
}

.uc-blueprint-caption{
  position:relative; z-index:2;
  border:1px solid var(--line); border-top:0;
  padding:18px 24px;
  text-align:center;
  background:rgba(10,16,20,0.85);
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.uc-blueprint-caption .dot{
  width:7px; height:7px; background:var(--acc); border-radius:50%;
  box-shadow:0 0 10px rgba(213,255,28,0.7);
  animation:uc-soc-pulse 1.6s ease-in-out infinite;
}
@media(max-width:900px){
  .uc-blueprint-frame{ padding-top:56px; }
  .uc-blueprint-vline{ height:40px; }
  .uc-blueprint-stats{ grid-template-columns:1fr 1fr; }
  .uc-blueprint-stat{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:140px; }
  .uc-blueprint-stats .uc-blueprint-stat:nth-child(2n){ border-right:0; }
  .uc-blueprint-stats .uc-blueprint-stat:nth-last-child(-n+2){ border-bottom:0; }
}
@media(max-width:540px){
  .uc-blueprint-stats{ grid-template-columns:1fr; }
  .uc-blueprint-stat{ border-right:0; border-bottom:1px solid var(--line); }
  .uc-blueprint-stats .uc-blueprint-stat:last-child{ border-bottom:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   STATS BLUEPRINT WRAPPER  — adds blueprint chrome to the AT SCALE
   stats grid (faint grid backdrop + caption stripe sealing the bottom).
   ═══════════════════════════════════════════════════════════════════ */
.uc-stats-blueprint{ position:relative; }
.uc-stats-grid{
  position:absolute; inset:-32px;
  background-image:
    linear-gradient(rgba(213,255,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,255,28,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center center;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 50%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 50%, transparent 100%);
  z-index:0;
}
.uc-stats-blueprint > .uc-stats{ position:relative; z-index:1; }
.uc-stats-caption{
  position:relative; z-index:1;
  border:1px solid var(--line); border-top:0;
  padding:22px 24px;
  text-align:center;
  background:rgba(10,16,20,0.85);
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════════════
   WHY BRICKLAYER BLUEPRINT  — vertical guide line through the section,
   grid backdrop, dimension callouts and corner ticks on the image.
   ═══════════════════════════════════════════════════════════════════ */
.uc-why-blueprint{ position:relative; overflow:hidden; }
.uc-why-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(213,255,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,255,28,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center center;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  opacity:0.8;
  z-index:0;
}
.uc-why-vline{
  position:absolute; top:0; bottom:0; left:50%;
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%, rgba(213,255,28,0.18) 20%, rgba(213,255,28,0.18) 80%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
.uc-why-blueprint .uc-why{ position:relative; z-index:1; }
.uc-why-image{ position:relative; }
.uc-why-callout{
  position:absolute; z-index:2;
  font-family:'Titillium Web', sans-serif;
  font-size:16px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--acc);
  background:rgba(10,16,20,0.85);
  padding:4px 8px;
  border:1px solid rgba(213,255,28,0.25);
}
.uc-why-callout-tl{ top:-12px; left:-12px; }
.uc-why-callout-br{ bottom:-12px; right:-12px; }
.uc-why-tick{
  position:absolute; width:14px; height:14px;
  border:0 solid var(--acc); opacity:0.6;
  pointer-events:none; z-index:2;
}
.uc-why-tick-tl{ top:-1px;    left:-1px;    border-top-width:1px;    border-left-width:1px;  }
.uc-why-tick-tr{ top:-1px;    right:-1px;   border-top-width:1px;    border-right-width:1px; }
.uc-why-tick-bl{ bottom:-1px; left:-1px;    border-bottom-width:1px; border-left-width:1px;  }
.uc-why-tick-br{ bottom:-1px; right:-1px;   border-bottom-width:1px; border-right-width:1px; }
@media(max-width:900px){
  .uc-why-vline{ display:none; }
  .uc-why-callout-tl{ top:-8px; left:-8px; }
  .uc-why-callout-br{ bottom:-8px; right:-8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SUB-FOOTER CTA  — flipped to dark teal bg with image placeholder
   alongside left-aligned headline + actions
   ═══════════════════════════════════════════════════════════════════ */
.uc-subfooter-cta{
  background:#1a262c !important;
  text-align:left;
}
.uc-subfooter-cta .subfooter-cta-inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:80px; align-items:center;
  max-width:1280px; margin:0 auto;
  text-align:left;
}
.uc-subfooter-cta .uc-subfooter-text{
  text-align:left;
}
.uc-subfooter-cta .subfooter-cta-h{
  text-align:left;
  margin:0 0 56px;
}
.uc-subfooter-cta .subfooter-cta-actions{
  justify-content:flex-start;
  margin-top:0;
  padding-top:8px;
}
.uc-subfooter-cta .uc-image-placeholder{
  aspect-ratio:4/3;
  background:rgba(213,255,28,0.04);
}
@media(max-width:900px){
  .uc-subfooter-cta .subfooter-cta-inner{
    grid-template-columns:1fr; gap:48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   OPERATIONALIZE THE INVESTIGATION  (sticky-right scroll section)
   v2 — 4 steps, PDF-aligned. Replaces the old 3-step tabbed workflow
   on the alert-triage page. Spans PDF section #2 (Operationalize) and
   PDF section #3 (Coordinate Through Workbench).

   Recording → step mapping (option b, matches PDF screenshots):
     STEP 01  Investigation Reports               · reports.mp4
     STEP 02  Task-Level Execution                · tasks.mp4
     STEP 03  Visual Orchestration                · workbench-2.mp4
     STEP 04  Procedure Engineering & Governance  · workbench-1.mp4

   Mechanics:
     • Two-col grid: left scrolls (4 step blocks), right is sticky.
     • Scroll listener picks the step whose midpoint is nearest the
       45% line of the viewport → toggles .is-active on the
       matching .op-stage-screen.
     • Each screen holds a <video> with poster fallback; only the
       active one plays, the rest pause.
     • Mobile (<900px): grid collapses, sticky disabled, each
       video stacks under its copy block.
     • Respects prefers-reduced-motion: no autoplay.
   ═══════════════════════════════════════════════════════════════════ */
.op-section{
  position:relative;
  padding:96px 0 112px;
  /* Disable browser scroll-anchoring so a late video/image load below the
     fold can never yank the user's scroll position to keep "anchored"
     content in view. This was causing the page to jump on this section. */
  overflow-anchor:none;
}
.op-section *{
  overflow-anchor:none;
}

.op-inner{
  /* Section-only override: breaks out wider than the site's 1280
     container so the dense SOC screens have room to read. */
  width:min(1560px, 96vw);
  margin:0 auto;
  padding:0 16px;
}

.op-head{
  text-align:center;
  max-width:900px;
  margin:0 auto 72px;
}
.op-head .uc-section-eyebrow{
  margin-bottom:14px;
  color:var(--acc);
  font-size:16px;
  letter-spacing:0.28em;
}
.op-head h2{
  font-family:'Titillium Web', sans-serif;
  font-size:clamp(40px, 5.2vw, 64px);
  line-height:1.12;
  font-weight:300;
  letter-spacing:-0.015em;
  color:#fff;
  margin:0 0 22px;
}
.op-head h2 .acc{ color:var(--acc); }
.op-head p{
  font-family:'Titillium Web', sans-serif;
  font-size:18px; line-height:1.6;
  color:#fff;
  margin:0;
}

/* ── Two-col layout ── */
.op-grid{
  display:grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.55fr);
  gap:clamp(32px, 4.5vw, 80px);
  align-items:start;
}

/* ── LEFT: stacked step blocks ── */
/* Heights use svh (small viewport height) instead of vh so that mobile
   browser chrome (address bar hide/show) does NOT recompute the
   gap/padding mid-scroll. Recomputing on every scroll changes the
   total scroll length, which is what was yanking the scroll position
   on this section. */
.op-steps{
  display:flex;
  flex-direction:column;
  gap:clamp(160px, 22svh, 280px);
  padding:32svh 0;
}

.op-step{
  position:relative;
  max-width:460px;
  opacity:0.42;
  transition:opacity .45s ease;
}
.op-step.is-active{ opacity:1; }

/* Two-line eyebrow: STEP NUM + PDF section tag */
.op-step-num{
  font-family:'Titillium Web', sans-serif;
  text-transform:uppercase;
  font-size:16px; font-weight:600;
  letter-spacing:0.28em;
  color:var(--acc);
  margin-bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(213,255,28,0.35);
}
.op-step-num .op-step-section{
  font-family:'Titillium Web', sans-serif;
  text-transform:uppercase;
  color:#fff;
  font-weight:500;
  letter-spacing:0.22em;
  font-size:16px;
}
.op-step-num .op-step-section::before{
  content:'·';
  margin-right:10px;
  color:#fff;
}

.op-step h3{
  font-family:'Titillium Web', sans-serif;
  font-size:clamp(28px, 3vw, 36px);
  line-height:1.15;
  font-weight:500;
  color:#fff;
  letter-spacing:-0.01em;
  margin:0 0 18px;
}
.op-step h3 .acc{ color:var(--acc); }

.op-step p{
  font-family:'Titillium Web', sans-serif;
  font-size:18px; line-height:1.6;
  color:#fff;
  margin:0 0 18px;
}

.op-step ul{
  list-style:none;
  padding:0; margin:18px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.op-step ul li{
  font-family:'Titillium Web', sans-serif;
  font-size:16px; line-height:1.5;
  color:#fff;
  padding-left:22px;
  position:relative;
}
.op-step ul li::before{
  content:'';
  position:absolute;
  left:0; top:0.55em;
  width:6px; height:6px;
  background:var(--acc);
  opacity:0.7;
}

/* ── RIGHT: sticky video stage ── */
/* min-height uses svh (small viewport height) so mobile chrome
   showing/hiding doesn't shrink/grow the sticky element and trigger
   a layout shift that can yank the page scroll position. */
.op-stage-wrap{
  position:sticky;
  top:80px;
  align-self:start;
  min-height:calc(100svh - 160px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.op-stage{
  position:relative;
  /* aspect-ratio is set dynamically from the first video's intrinsic dimensions
     via JS (see use-case.js → op-stage-aspect IIFE). Fallback while videos
     load: 16/10 keeps layout stable. */
  aspect-ratio: 16 / 10;
  width:100%;
  background:#0E1418;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
}

.op-stage-screen{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .55s ease;
}
.op-stage-screen.is-active{ opacity:1; }

.op-stage-screen video,
.op-stage-screen img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#0E1418;
}

/* ── Fallback poster — hidden by default; the live videos are the only
       thing shown on the page. (Kept in markup so JS can opt in later.) ── */
.op-stage-fallback{ display:none; }

/* ── Fullscreen toggle ── */
.op-fs-btn{
  position:absolute;
  top:12px; right:12px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,17,20,0.65);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  cursor:pointer;
  z-index:5;
  opacity:0;
  transition:opacity .25s ease, background .2s ease, transform .2s ease, border-color .2s ease;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding:0;
}
.op-fs-btn:hover{
  background:rgba(11,17,20,0.85);
  border-color:rgba(213,255,28,0.55);
  transform:scale(1.05);
}
.op-fs-btn:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  opacity:1;
}
.op-fs-btn svg{
  width:16px; height:16px; display:block;
  stroke:#fff; stroke-width:1.6;
  fill:none; stroke-linecap:square;
}
.op-stage:hover .op-fs-btn,
.op-stage-mobile .op-fs-btn{ opacity:1; }
@media (hover: none){
  .op-stage .op-fs-btn{ opacity:1; }
}

.op-fs-btn .ic-exit{ display:none; }
.op-stage.is-fullscreen .op-fs-btn .ic-enter,
.op-stage-mobile.is-fullscreen .op-fs-btn .ic-enter{ display:none; }
.op-stage.is-fullscreen .op-fs-btn .ic-exit,
.op-stage-mobile.is-fullscreen .op-fs-btn .ic-exit{ display:block; }

.op-stage:fullscreen,
.op-stage:-webkit-full-screen,
.op-stage-mobile:fullscreen,
.op-stage-mobile:-webkit-full-screen{
  width:100vw; height:100vh;
  max-width:none; max-height:none;
  aspect-ratio:auto;
  background:#000;
  border:none;
}
.op-stage:fullscreen video,
.op-stage:-webkit-full-screen video,
.op-stage-mobile:fullscreen video,
.op-stage-mobile:-webkit-full-screen video{
  object-fit:contain;
}
.op-stage:fullscreen .op-fs-btn,
.op-stage:-webkit-full-screen .op-fs-btn,
.op-stage-mobile:fullscreen .op-fs-btn,
.op-stage-mobile:-webkit-full-screen .op-fs-btn{
  opacity:1;
  top:24px; right:24px;
  width:42px; height:42px;
}

/* ── Progress strip under the sticky stage (4 segments) ── */
.op-progress{
  display:flex;
  gap:14px;
  margin-top:24px;
  justify-content:flex-start;
  align-items:center;
}
.op-progress-step{
  flex:1;
  height:3px;
  background:rgba(255,255,255,0.08);
  position:relative;
  overflow:hidden;
}
.op-progress-step::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--acc);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .45s ease;
}
.op-progress-step.is-active::after,
.op-progress-step.is-past::after{ transform:scaleX(1); }

.op-progress-count{
  font-family:'JetBrains Mono', monospace;
  font-size:16px;
  letter-spacing:0.14em;
  color:#fff;
  margin-left:18px;
  white-space:nowrap;
}
.op-progress-count .acc{ color:var(--acc); }

/* ── Mobile / narrow ── */
@media (max-width: 900px){
  .op-grid{
    grid-template-columns: 1fr;
    gap:48px;
  }
  .op-steps{
    gap:80px;
    padding:0;
  }
  .op-stage-wrap{
    position:static;
    min-height:0;
    order:-1;
    display:none;
  }
  .op-step .op-stage-mobile{
    position:relative;
    display:block;
    margin-top:24px;
    aspect-ratio:16/10;
    background:#0E1418;
    border:1px solid var(--line);
    overflow:hidden;
  }
  .op-step .op-stage-mobile video,
  .op-step .op-stage-mobile img{
    width:100%; height:100%; object-fit:contain;
  }
  .op-step{
    opacity:1;
  }
}
@media (min-width: 901px){
  .op-step .op-stage-mobile{ display:none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .op-step,
  .op-stage-screen,
  .op-progress-step::after{ transition:none; }
}

/* ──────────────────────────────────────────────────────────────────────
   WHY BRICKLAYER image — reserve aspect-ratio so the JPG can't cause
   layout shift when it finishes loading. A late-loading image below
   the fold was triggering browser scroll-anchoring on .op-section,
   which yanked the user back to the top of the page mid-scroll.
   ────────────────────────────────────────────────────────────────────── */
.uc-why-img{
  aspect-ratio: 16 / 10;
  width: 100%;
  display: block;
  background: #0E1418;
  overflow: hidden;
}
.uc-why-img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ─── SUB-FOOTER CTA (from styles.css) ─── */
.subfooter-cta{
  position:relative;
  padding:120px clamp(32px,5vw,96px);
  background:#0C151A;
  border-top:1px solid rgba(213,255,28,0.18);
  overflow:hidden;
}
.subfooter-cta::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(213,255,28,0.10), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(213,255,28,0.04), transparent 70%);
  pointer-events:none;
}
.subfooter-cta::after{
  content:'';position:absolute;inset:0;opacity:0.25;
  background-image:
    linear-gradient(rgba(213,255,28,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,255,28,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events:none;
}
.subfooter-cta-inner{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:28px;
}
.subfooter-cta-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--acc);font-weight:500;
  display:inline-flex;align-items:center;gap:14px;
}
.subfooter-cta-eyebrow::before,
.subfooter-cta-eyebrow::after{
  content:'';width:36px;height:1px;background:var(--acc);opacity:0.8;
}
.subfooter-cta-h{
  font-family:'Titillium Web',sans-serif;font-weight:400;
  font-size:clamp(40px,6vw,84px);line-height:1.02;letter-spacing:-0.03em;
  margin:0;color:var(--ink);
}
.subfooter-cta-h .acc{color:var(--acc)}
.subfooter-cta-sub{
  font-family:'Titillium Web',sans-serif;
  font-size:clamp(16px,1.2vw,18px);line-height:1.55;
  color:var(--ink-2);max-width:60ch;margin:0;
}
.subfooter-cta-actions{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
  margin-top:8px;
}
.subfooter-cta-btn{
  padding:22px 36px;font-size:14px;letter-spacing:0.12em;
  box-shadow:0 0 0 0 rgba(213,255,28,0), 0 12px 32px rgba(213,255,28,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.subfooter-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 0 rgba(213,255,28,0), 0 18px 44px rgba(213,255,28,0.28);
}
.subfooter-cta-secondary{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid rgba(245,247,242,0.25);padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.subfooter-cta-secondary:hover{color:var(--acc);border-bottom-color:var(--acc)}
@media(max-width:760px){
  .subfooter-cta{padding:80px 20px}
  .subfooter-cta-inner{gap:22px}
  .subfooter-cta-actions{flex-direction:column;gap:18px;width:100%}
  .subfooter-cta-btn{width:100%;text-align:center;justify-content:center;padding:20px 24px}
}