/* Shared stylesheet for the VCB story pages (Certus Logic, Certus Law,
   ActIntel, Tinman). Self-contained on purpose: the site's prebuilt
   tailwind.min.css is a static subset with no arbitrary-value support. */
:root{
  --brass:#D4A857;--brass-dim:#A67C3E;
  --ink:#06090f;--ink-2:#0b1019;--line:rgba(255,255,255,.08);
  --fg:#eef2f7;--fg-2:#a3afc1;--fg-3:#6b778a;
  --gut:clamp(1.25rem,5vw,4.5rem);--max:1280px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);font:400 17px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px}
p{margin:0}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.035em;line-height:1}
.brass{color:var(--brass)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:68px;display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(6,9,15,.85),rgba(6,9,15,0));transition:background .3s}
.nav.solid{background:rgba(6,9,15,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:2rem;width:100%}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.brand i{width:10px;height:10px;border-radius:2px;background:var(--brass)}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:1.8rem}
.nav nav a{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;white-space:nowrap}
.nav nav a:hover{color:var(--fg)}
@media(max-width:760px){.nav nav a.hide-sm{display:none}}

/* A button reads as a machined surface, not a flat swatch: a top-lit
   gradient, a hairline rim, an inner highlight, and a two-part shadow —
   one tight contact shadow, one soft ambient. The old single wide colour
   blur was doing all the work and it looked cheap. Colours derive from
   --brass, so every page's own accent flows through unchanged. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.02rem 2.05rem;border-radius:999px;border:1px solid transparent;
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;position:relative;isolation:isolate;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s cubic-bezier(.2,.7,.3,1),
    background .28s,border-color .28s,color .28s}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--brass)}

.btn-p{color:#0a0e16;background:var(--brass);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brass) 84%,#fff) 0%,
    var(--brass) 44%,
    color-mix(in srgb,var(--brass-dim) 76%,var(--brass)) 100%);
  border-color:color-mix(in srgb,var(--brass-dim) 72%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.16),
    0 1px 2px rgba(0,0,0,.4),0 10px 24px -10px rgba(0,0,0,.65)}
.btn-p:hover{transform:translateY(-1px);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brass) 92%,#fff) 0%,
    color-mix(in srgb,var(--brass) 97%,#fff) 52%,
    var(--brass) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.14),
    0 2px 4px rgba(0,0,0,.34),0 18px 34px -14px rgba(0,0,0,.7)}
.btn-p:active{transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.4)}

.btn-s{color:var(--fg);border-color:rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.3),
    0 12px 28px -16px rgba(0,0,0,.8);
  backdrop-filter:blur(10px) saturate(1.25)}
.btn-s:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.34);
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.3),
    0 18px 34px -18px rgba(0,0,0,.85)}
.btn-s:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.btn-sm{padding:.72rem 1.3rem;font-size:.69rem;letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){
  .btn{transition:background .2s,border-color .2s}
  .btn:hover,.btn:active{transform:none}
}

/* ── Full-bleed scenes ─────────────────────────────────────────────── */
.scene{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scene::after{content:"";position:absolute;inset:0;z-index:-1}
.scene .copy{position:relative;width:100%;padding-block:clamp(5rem,12vw,9rem)}

.hero{min-height:100svh;min-height:100dvh}
.hero::after{background:
  linear-gradient(to top,var(--ink) 0%,rgba(6,9,15,.72) 38%,rgba(6,9,15,.18) 70%,rgba(6,9,15,.55) 100%),
  linear-gradient(to right,rgba(6,9,15,.7),transparent 60%)}
.hero h1{font-size:clamp(3rem,8.6vw,7.6rem);max-width:12ch;line-height:.92}
.hero .lede{margin-top:1.75rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:#d6dde8;max-width:44ch;line-height:1.55}
.hero .btns{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.9rem}

.act{min-height:92svh}
.act::after{background:linear-gradient(to top,var(--ink) 4%,rgba(6,9,15,.78) 45%,rgba(6,9,15,.3) 100%)}
.act.left::after{background:
  linear-gradient(to top,var(--ink) 2%,rgba(6,9,15,.2) 40%),
  linear-gradient(to right,rgba(6,9,15,.94) 0%,rgba(6,9,15,.75) 42%,rgba(6,9,15,.05) 78%)}
.act h2{font-size:clamp(2.4rem,6vw,5.2rem);max-width:13ch;line-height:.95}
.act .txt{margin-top:1.6rem;max-width:46ch;color:#cfd7e3;font-size:clamp(1rem,1.35vw,1.15rem)}
.act .txt+.txt{margin-top:1rem;color:var(--fg-2)}

.kick{font:700 .7rem/1 Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:1.4rem}

/* ── Plain chapters between scenes ─────────────────────────────────── */
.chapter{padding-block:clamp(5rem,11vw,9rem);border-top:1px solid var(--line)}
.beats{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(3rem,6vw,4.5rem);grid-template-columns:1fr}
@media(min-width:900px){.beats{grid-template-columns:repeat(3,1fr)}}
.beat .n{font:700 .78rem/1 'JetBrains Mono',monospace;color:var(--brass);letter-spacing:.06em}
.beat h3{margin:1rem 0 .8rem;font-size:clamp(1.45rem,2.2vw,1.85rem);letter-spacing:-.025em;line-height:1.1}
.beat p{color:var(--fg-2);font-size:.98rem}
.big{font-size:clamp(2.2rem,5.4vw,4.6rem);max-width:17ch;line-height:.98}

/* ── Proof: the tie-break ──────────────────────────────────────────── */
.proof{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:980px){.proof{grid-template-columns:1.1fr .9fr}}
.quote{font-size:clamp(1.9rem,3.8vw,3.3rem);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.readings{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.readings>div{padding:1.4rem 1rem 0 0}
.readings b{display:block;font:700 clamp(1.6rem,3vw,2.4rem)/1 'JetBrains Mono',monospace;color:var(--brass)}
.readings span{display:block;margin-top:.6rem;font-size:.8rem;color:var(--fg-3);line-height:1.45}
.doc{position:relative;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);transform:rotate(1.4deg)}
.doc img{width:100%;height:auto}
.doc::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(6,9,15,.9),transparent)}
.cap{margin-top:1.2rem;font-size:.85rem;color:var(--fg-3)}

/* ── Numbers ───────────────────────────────────────────────────────── */
.numbers{display:grid;grid-template-columns:repeat(2,1fr);border-block:1px solid var(--line)}
@media(min-width:860px){.numbers{grid-template-columns:repeat(4,1fr)}}
.numbers>div{padding:clamp(2rem,4vw,3rem) var(--gut);border-right:1px solid var(--line)}
.numbers b{display:block;font-size:clamp(2.6rem,5vw,4.2rem);font-weight:900;letter-spacing:-.045em;line-height:1;color:var(--brass)}
.numbers span{display:block;margin-top:.7rem;font-size:.82rem;color:var(--fg-2);line-height:1.45}

/* ── Who ───────────────────────────────────────────────────────────── */
.who{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;max-width:52rem}
.who span{border:1px solid rgba(255,255,255,.22);background:rgba(6,9,15,.5);backdrop-filter:blur(6px);
  border-radius:999px;padding:.6rem 1.1rem;font-size:.86rem;color:#e3e9f2}

/* ── Close ─────────────────────────────────────────────────────────── */
.close{text-align:center;padding-block:clamp(6rem,13vw,10rem);border-top:1px solid var(--line);
  background:radial-gradient(60% 70% at 50% 100%,rgba(212,168,87,.14),transparent 70%)}
.close h2{font-size:clamp(2.6rem,7vw,6rem);line-height:.95;max-width:16ch;margin:0 auto}
.close p{margin:1.6rem auto 0;max-width:42ch;color:var(--fg-2)}
.close .btns{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

footer{border-top:1px solid var(--line);padding-block:3rem;font-size:.85rem;color:var(--fg-3)}
footer .links{display:flex;flex-wrap:wrap;gap:1.5rem}
footer a{text-decoration:none;color:var(--fg-2)}
footer a:hover{color:var(--fg)}
.legal{margin-top:1.5rem;font-size:.72rem;line-height:1.7;max-width:62rem;color:#526076}

/* ── Motion: motivated, and optional ───────────────────────────────── */
/* Reveal lands each act as a separate beat of the story. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
/* The hero image settles in slowly, a single establishing move: a long, gentle
   push that takes most of the time a visitor spends reading the headline. */
@media(prefers-reduced-motion:no-preference){
  .hero>img{animation:settle 7.5s cubic-bezier(.16,.84,.3,1) both}
  @keyframes settle{from{transform:scale(1.2)}to{transform:scale(1)}}
  /* Scenes drift gently as you scroll through them, where supported. */
  @supports (animation-timeline: view()){
    .act>img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes drift{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1.02) translateY(3%)}}
  }
}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
}

/* Four-stage variant: 2x2 on tablet, a single row of four on wide screens. */
@media(min-width:700px){.beats.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.beats.four{grid-template-columns:repeat(4,1fr)}}

/* Figures that must never wrap inside a narrow three-up column. */
.readings.tight b{font-size:clamp(1.3rem,2.2vw,1.9rem);white-space:nowrap}

/* Nav CTAs: `.nav nav a` sets a muted link colour with higher specificity than
   `.btn-p`, which left dark-on-brass buttons with pale, unreadable labels. */
.nav nav a.btn-p{color:#0a0e16}
.nav nav a.btn-p:hover{color:#0a0e16}

/* The "by VCB-AI" byline is its own link to the parent company, so it sits
   beside the brand anchor rather than inside it: anchors cannot nest. */
.brandgroup{display:flex;align-items:center;min-width:0}
a.by{text-decoration:none}
a.by:hover{color:#c3ccdb;text-decoration:underline;text-underline-offset:3px}