/* ==========================================================================
   ATLAS — Know AI
   Dark greyscale. Aeonik. No chromatic accent: light is the only accent.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:Aeonik;src:url(../fonts/Aeonik-Light.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Aeonik;src:url(../fonts/Aeonik-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Aeonik;src:url(../fonts/Aeonik-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Aeonik;src:url(../fonts/Aeonik-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* four surfaces, one ink, two mutes — nothing else */
  --void:#0A0A0B;
  --strata:#131315;
  --raise:#1A1A1D;
  --line:#2B2B31;
  --line-soft:#1F1F24;
  --ink:#F2F2F0;
  --mute:#8B8B92;
  --dim:#5A5A61;

  --max:1240px;
  --pad:clamp(20px,5vw,64px);
  --sect:clamp(88px,11vw,168px);

  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Berkeley Mono","JetBrains Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:Aeonik,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-weight:400;font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--ink);color:var(--void)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:calc(var(--sect)*.5);position:relative}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}

/* ---------- Type ---------- */
.display{
  font-weight:500;
  font-size:clamp(2.5rem,6.6vw,5.25rem);
  line-height:.99;letter-spacing:-.038em;
  text-wrap:balance;
}
.h2{
  font-weight:500;
  font-size:clamp(1.9rem,4.2vw,3.25rem);
  line-height:1.06;letter-spacing:-.032em;
  text-wrap:balance;
}
.h3{font-weight:500;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.2;letter-spacing:-.02em}
.lede{font-weight:300;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.55;color:var(--mute);max-width:62ch}
.body{color:var(--mute);max-width:64ch}
.thin{font-weight:300}
.soft{color:var(--mute)}
.dim{color:var(--dim)}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line);flex:none}

.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--mute)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.95em 1.5em;border-radius:999px;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  border:1px solid var(--ink);background:var(--ink);color:var(--void);
  transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .4s;
  will-change:transform;
}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(255,255,255,.35)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(0)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);box-shadow:none}

.btn-text{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.9375rem;font-weight:400;color:var(--ink);
  padding-bottom:2px;border-bottom:1px solid var(--line);
  transition:border-color .35s,gap .35s var(--ease);
}
.btn-text:hover{border-color:var(--ink);gap:.9em}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding-block:18px;
  transition:background .45s,border-color .45s,backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.hdr.docked{
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:11px;font-weight:500;letter-spacing:-.02em;font-size:1.0625rem}
.brand-mark{width:19px;height:19px;flex:none;opacity:.95}
.brand-mark circle,.brand-mark path{transition:transform .8s var(--ease)}
.brand:hover .brand-mark{animation:spinmark 1.2s var(--ease)}
@keyframes spinmark{to{transform:rotate(180deg)}}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:.9375rem;color:var(--mute);position:relative;padding-block:4px;
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}

.hdr-cta{display:flex;align-items:center;gap:14px}
.hdr .btn{padding:.7em 1.15em;font-size:.875rem}

.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px}
.burger span{display:block;width:15px;height:1px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:15px;height:1px;background:var(--ink);transition:transform .35s var(--ease)}
.burger span::before{top:-5px}.burger span::after{top:5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(5px)rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-5px)rotate(-45deg)}

.mobnav{
  position:fixed;inset:0;z-index:55;background:var(--void);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
body.menu-open .mobnav{opacity:1;visibility:visible}
.mobnav a{font-size:clamp(1.9rem,8vw,2.6rem);font-weight:500;letter-spacing:-.03em;padding-block:10px;border-bottom:1px solid var(--line-soft)}
.mobnav .btn{margin-top:28px;align-self:flex-start}

/* ==========================================================================
   HERO — video-first: the field paints before the headline resolves
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(48px,7vw,88px);overflow:hidden}

.hero-media{position:absolute;inset:0;z-index:0}
.hero-media canvas,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity 1.2s ease}
.hero-media video[data-ready]{opacity:1}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(135% 95% at 50% 4%,transparent 0%,rgba(10,10,11,.30) 58%,rgba(10,10,11,.80) 100%),
    linear-gradient(180deg,rgba(10,10,11,.40) 0%,transparent 24%,transparent 40%,rgba(10,10,11,.88) 88%,var(--void) 100%);
}

.hero-in{position:relative;z-index:2;width:100%}
.hero h1{margin-top:22px;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--mute)}
.hero .lede{margin-top:26px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:38px}

/* the readout strip pinned to the hero base */
.hero-readout{
  margin-top:clamp(44px,6vw,72px);padding-top:22px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;
}
.hero-readout div{display:flex;flex-direction:column;gap:5px}
.hero-readout dt,.hero-readout .k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero-readout .v{font-size:.9375rem;color:var(--mute);font-weight:300}

.scrollcue{
  position:absolute;left:var(--pad);bottom:22px;z-index:2;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:9px;
}
.scrollcue i{display:block;width:1px;height:26px;background:linear-gradient(var(--dim),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);transform-origin:top;opacity:1}}

/* ==========================================================================
   THE INSTRUMENT — seven pillars as strata columns
   ========================================================================== */
.instrument{
  display:flex;gap:6px;height:clamp(360px,46vw,520px);
  border:1px solid var(--line-soft);border-radius:20px;padding:6px;background:var(--strata);
  margin-top:clamp(38px,5vw,60px);
}
.pillar{
  position:relative;flex:1 1 0;min-width:0;border-radius:15px;overflow:hidden;
  background:var(--raise);border:1px solid transparent;text-align:left;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:flex .65s var(--ease),background .5s,border-color .5s;
  cursor:pointer;
}
.pillar.on{flex:4.2 1 0;background:#212126;border-color:var(--line)}

/* the fill — a core sample reading */
.pillar-fill{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  background:linear-gradient(180deg,rgba(242,242,240,.11),rgba(242,242,240,.03));
  transition:height .8s var(--ease),background .5s;
}
.pillar.on .pillar-fill{background:linear-gradient(180deg,rgba(242,242,240,.2),rgba(242,242,240,.045))}
/* hairline strata across every column — the contour motif, repeated */
.pillar::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 23px,rgba(242,242,240,.05) 23px 24px);
  opacity:.7;
}
/* the reading line at the fill's top edge */
.pillar-line{
  position:absolute;left:0;right:0;z-index:2;height:1px;background:rgba(242,242,240,.38);
  transition:bottom .8s var(--ease),background .5s,box-shadow .5s;
}
.pillar.on .pillar-line{background:var(--ink);box-shadow:0 0 18px rgba(242,242,240,.55)}

.pillar-body{position:relative;z-index:3;padding:20px 18px}

/* collapsed label — vertical, like a map gutter */
.pillar-tab{
  position:absolute;left:0;top:0;z-index:3;width:100%;height:100%;
  display:flex;align-items:flex-start;justify-content:center;padding-top:20px;
  transition:opacity .35s;
}
.pillar-tab span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;transition:color .35s;
}
.pillar:hover .pillar-tab span{color:var(--ink)}
.pillar.on .pillar-tab{opacity:0;pointer-events:none}

.pillar-idx{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--dim);margin-bottom:10px}
.pillar-name{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.028em;line-height:1.05}
.pillar-reads{margin-top:16px;display:flex;flex-direction:column;gap:9px;max-width:34ch}
.pillar-reads li{
  display:flex;gap:10px;font-size:.9375rem;font-weight:300;color:var(--mute);line-height:1.4;
}
.pillar-reads li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--dim)}

/* everything inside the open pillar staggers in */
.pillar-open{opacity:0;transform:translateY(14px);transition:opacity .45s .18s ease,transform .5s .18s var(--ease)}
.pillar.on .pillar-open{opacity:1;transform:none}
.pillar:not(.on) .pillar-open{pointer-events:none}

.instrument-legend{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;
  margin-top:20px;
}

/* ==========================================================================
   REFRAME — the regret arc, as a two-column ledger
   ========================================================================== */
.ledger{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-soft)}
.ledger-row{
  display:grid;grid-template-columns:1.05fr 1fr;gap:8px 48px;
  padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line-soft);
  align-items:baseline;transition:background .45s;
  padding-inline:clamp(0px,1.4vw,18px);
  margin-inline:clamp(0px,-1.4vw,0px);
}
.ledger-row:hover{background:rgba(242,242,240,.022)}
.ledger-was{font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:300;color:var(--dim);letter-spacing:-.02em}
.ledger-is{
  font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:400;letter-spacing:-.02em;
  display:flex;gap:14px;align-items:baseline;
}
.ledger-is::before{
  content:"";flex:none;width:18px;height:1px;background:var(--line);
  transform:translateY(-.35em);transition:width .45s var(--ease),background .45s;
}
.ledger-row:hover .ledger-is::before{width:30px;background:var(--ink)}

/* ==========================================================================
   STAGES — a real sequence, so numbering earns its place
   ========================================================================== */
.stages{display:grid;gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-soft)}
.stage{
  display:grid;grid-template-columns:auto 1fr minmax(0,1.15fr);gap:24px 40px;
  padding-block:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--line-soft);
  align-items:start;position:relative;
}
.stage-n{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--dim);
  padding-top:.45em;transition:color .4s;
}
.stage:hover .stage-n{color:var(--ink)}
.stage h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.stage p{color:var(--mute);font-weight:300;max-width:46ch}
.stage-note{
  margin-top:14px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}

/* ==========================================================================
   INDUSTRY CARDS — the creative reveals on hover
   ========================================================================== */
.verticals{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  margin-top:clamp(40px,5vw,64px);
}
.vert{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line-soft);border-radius:20px;background:var(--strata);
  padding:clamp(26px,2.6vw,36px);min-height:clamp(290px,26vw,340px);
  display:flex;flex-direction:column;
  transition:border-color .5s,background .5s,transform .55s var(--ease);
  text-align:left;width:100%;
}
.vert:hover,.vert:focus-visible{border-color:var(--line);background:#17171A;transform:translateY(-3px)}

/* the light bloom that tracks the cursor — igloo's aurora halo, in greyscale */
.vert::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(242,242,240,.085),transparent 62%);
  opacity:0;transition:opacity .5s;
}
.vert:hover::before,.vert:focus-visible::before{opacity:1}

.vert-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.vert-name{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .4s}
.vert:hover .vert-name{color:var(--ink)}
.vert-idx{font-family:var(--mono);font-size:.6875rem;color:var(--dim)}

.vert h3{
  margin-top:auto;padding-top:34px;
  font-size:clamp(1.35rem,2.3vw,1.85rem);font-weight:400;letter-spacing:-.03em;line-height:1.14;
  max-width:23ch;text-wrap:balance;transition:transform .55s var(--ease);
}
.vert:hover h3{transform:translateY(-4px)}

/* the creative: a schematic that draws itself in on hover */
.vert-creative{
  position:absolute;top:clamp(22px,2.4vw,32px);right:clamp(22px,2.4vw,32px);
  width:clamp(148px,16vw,204px);aspect-ratio:1;z-index:-1;
  opacity:0;transform:scale(.94) rotate(-3deg);
  transition:opacity .6s ease,transform .7s var(--ease);
}
.vert:hover .vert-creative,.vert:focus-visible .vert-creative{opacity:1;transform:none}
/* dash length is measured and written inline by JS. With no JS the strokes
   simply have no dash and render complete — never a half-drawn shape. */
.vert-creative [data-draw]{
  stroke:var(--ink);fill:none;stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.vert:hover .vert-creative [data-draw],
.vert:focus-visible .vert-creative [data-draw]{stroke-dashoffset:0!important}

.vert-foot{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:border-color .5s;
}
.vert:hover .vert-foot{border-color:var(--line)}
.vert-foot p{font-size:.875rem;font-weight:300;color:var(--mute);max-width:36ch}
.vert-go{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background .4s,border-color .4s,transform .5s var(--ease);
}
.vert:hover .vert-go{background:var(--ink);border-color:var(--ink);transform:translateX(3px)}
.vert-go svg{width:12px;height:12px;stroke:var(--ink);transition:stroke .4s}
.vert:hover .vert-go svg{stroke:var(--void)}

/* ==========================================================================
   VIDEO CARDS — heading + description ABOVE the box, mono quote INSIDE it
   (locked anatomy rule)
   ========================================================================== */
.clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px);margin-top:clamp(40px,5vw,64px)}
.clip-head{margin-bottom:16px}
.clip-head .h3{margin-bottom:7px}
.clip-head p{font-size:.9375rem;font-weight:300;color:var(--mute);max-width:44ch}

.clip-box{
  position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:var(--strata);border:1px solid var(--line-soft);
  transition:border-color .5s,transform .55s var(--ease);
}
.clip:hover .clip-box{border-color:var(--line);transform:translateY(-3px)}
.clip-box video,.clip-box canvas{width:100%;height:100%;object-fit:cover}

/* placeholder until real footage lands — a plate, not a grey box.
   Delete this div and un-comment the <video> in the same slot. */
.clip-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(242,242,240,.045) 47px 48px),
    repeating-linear-gradient(180deg,transparent 0 47px,rgba(242,242,240,.045) 47px 48px),
    radial-gradient(80% 70% at 50% 40%,rgba(242,242,240,.05),transparent 70%);
  transition:transform 1.1s var(--ease);
}
.clip:hover .clip-placeholder{transform:scale(1.035)}
.clip-placeholder span{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  transform:translateY(-10px);
}
.clip-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(10,10,11,.86));
}
/* the quote line lives inside the box, bottom-left, mono — per the anatomy rule */
.clip-quote{
  position:absolute;left:20px;bottom:18px;z-index:2;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:rgba(242,242,240,.82);
  max-width:calc(100% - 76px);line-height:1.45;
}
.clip-play{
  position:absolute;right:16px;bottom:16px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(242,242,240,.28);background:rgba(10,10,11,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:background .4s,border-color .4s,transform .5s var(--ease);
}
.clip:hover .clip-play{background:var(--ink);border-color:var(--ink);transform:scale(1.06)}
.clip-play svg{width:11px;height:11px;fill:var(--ink);transition:fill .4s;margin-left:1px}
.clip:hover .clip-play svg{fill:var(--void)}

/* ==========================================================================
   CLOSING
   ========================================================================== */
.closing{text-align:center;padding-block:clamp(110px,14vw,190px);position:relative;overflow:hidden}
.closing-field{position:absolute;inset:0;z-index:0;opacity:.5}
.closing-field canvas{width:100%;height:100%}
.closing::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(75% 65% at 50% 50%,transparent 0%,rgba(10,10,11,.7) 58%,var(--void) 100%);
}
.closing .wrap{position:relative;z-index:2}
.closing .h2{max-width:18ch;margin-inline:auto}
.closing .lede{margin:22px auto 0;text-align:center}
.closing .eyebrow{justify-content:center}
.closing .eyebrow::after{content:"";width:22px;height:1px;background:var(--line)}
.closing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 20px;margin-top:38px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{border-top:1px solid var(--line-soft);padding-block:clamp(52px,6vw,80px) 34px}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(2,minmax(0,1fr));gap:44px}
.ftr-brand p{margin-top:16px;font-size:.9375rem;font-weight:300;color:var(--mute);max-width:32ch}
.ftr h4{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.ftr li+li{margin-top:11px}
.ftr li a{font-size:.9375rem;color:var(--mute);transition:color .3s}
.ftr li a:hover{color:var(--ink)}
.ftr-base{
  margin-top:clamp(48px,6vw,72px);padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
}
.ftr-base p{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--dim)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Hidden ONLY once JS has confirmed it will reveal them again.
   No JS, a script error, or a starved observer => content stays visible. */
.js-reveal .reveal{opacity:0;transition:opacity .8s ease}
.js-reveal .reveal.in{opacity:1}
.js-reveal .reveal:not(.no-lift){transform:translateY(22px);transition:opacity .8s ease,transform .8s var(--ease)}
.js-reveal .reveal.in:not(.no-lift){transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .nav,.hdr-cta .btn{display:none}
  .burger{display:flex}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:36px}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .verticals,.clips{grid-template-columns:1fr}
  .hero-readout{grid-template-columns:1fr 1fr}
  .stage{grid-template-columns:auto 1fr;gap:14px 22px}
  .stage p{grid-column:2}
  .ledger-row{grid-template-columns:1fr;gap:6px}
  .ledger-is::before{display:none}
  .vert-creative{width:104px;opacity:.32;transform:none}

  /* the instrument turns vertical on phones — an accordion of rows.
     A collapsed row must not reserve height for the panel it is hiding. */
  .instrument{flex-direction:column;height:auto;gap:6px}
  .pillar{flex:none;justify-content:flex-start}
  .pillar.on{flex:none}

  .pillar-tab{
    position:relative;width:auto;height:auto;opacity:1;
    padding:17px 18px;align-items:center;justify-content:flex-start;
  }
  .pillar-tab span{writing-mode:horizontal-tb;transform:none}
  .pillar.on .pillar-tab{display:none}
  .pillar:not(.on) .pillar-body{display:none}

  .pillar-body{padding:18px}
  .pillar-open{opacity:1;transform:none}

  /* the depth read only makes sense as columns — drop it in row form,
     keep the strata hairlines so the surface still reads as a core sample */
  .pillar-fill,.pillar-line{display:none}
  .pillar::before{opacity:.4}
  .depth-note{display:none}   /* depth is not drawn in row form */
}
@media (max-width:560px){
  .hero-readout{grid-template-columns:1fr;gap:16px}
  .ftr-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .sel-flow.on .fl-pulse{animation:none;opacity:1}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .vert-creative{opacity:1;transform:none}
  .vert-creative [data-draw]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

/* ==========================================================================
   PAGE HEADER (sub-pages)
   ========================================================================== */
.phead{padding-top:clamp(140px,15vw,210px);padding-bottom:clamp(52px,6vw,84px);position:relative;overflow:hidden}
.phead-field{position:absolute;inset:0;z-index:0;opacity:.42}
.phead-field canvas{width:100%;height:100%}
.phead::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.5),rgba(10,10,11,.72) 55%,var(--void));
}
.phead .wrap{position:relative;z-index:2}
.phead .display{margin-top:20px;max-width:16ch}
.phead .lede{margin-top:24px}

/* ==========================================================================
   VERTICAL DETAIL ROWS (industries page)
   ========================================================================== */
.vrow{padding-block:clamp(52px,6vw,86px);border-top:1px solid var(--line-soft);position:relative}
.vrow-top{display:grid;grid-template-columns:auto 1fr auto;gap:20px 34px;align-items:start}
.vrow-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--dim);padding-top:.7em}
.vrow-name{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.vrow h2{margin-top:12px;font-size:clamp(1.65rem,3.2vw,2.6rem);font-weight:500;letter-spacing:-.032em;line-height:1.08;max-width:20ch;text-wrap:balance}
.vrow-glyph{width:clamp(84px,9vw,116px);aspect-ratio:1;opacity:.5;transition:opacity .6s}
.vrow:hover .vrow-glyph{opacity:1}
.vrow-glyph [data-draw]{stroke:var(--ink);fill:none;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.2s var(--ease)}
.vrow:hover .vrow-glyph [data-draw]{stroke-dashoffset:0!important}

/* the small parts — this is the "break it down" grid */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3vw,40px)}
.part{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line-soft);border-radius:16px;background:var(--strata);
  padding:22px 22px 24px;
  transition:border-color .5s,background .5s,transform .5s var(--ease);
}
.part:hover{border-color:var(--line);background:#17171A;transform:translateY(-3px)}
.part::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(242,242,240,.09),transparent 65%);
  opacity:0;transition:opacity .5s;
}
.part:hover::before{opacity:1}
.part-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);transition:color .4s}
.part:hover .part-k{color:var(--ink)}
.part p{margin-top:12px;font-size:.9375rem;font-weight:300;color:var(--mute);line-height:1.5}
.vrow-open{
  margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;
  font-size:.9375rem;font-weight:300;color:var(--mute);
}
.vrow-open b{font-weight:400;color:var(--ink)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.qa{border-top:1px solid var(--line-soft);margin-top:clamp(34px,4vw,56px)}
.qa details{border-bottom:1px solid var(--line-soft)}
.qa summary{
  list-style:none;cursor:pointer;padding-block:clamp(22px,2.6vw,30px);
  display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  font-size:clamp(1.05rem,1.9vw,1.4rem);font-weight:400;letter-spacing:-.02em;
  transition:color .35s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--ink)}
.qa-mark{
  flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;position:relative;transition:border-color .4s,background .4s;
}
.qa-mark::before,.qa-mark::after{content:"";position:absolute;background:var(--mute);transition:transform .4s var(--ease),background .4s}
.qa-mark::before{width:10px;height:1px}
.qa-mark::after{width:1px;height:10px}
.qa details[open] .qa-mark{border-color:var(--ink)}
.qa details[open] .qa-mark::after{transform:scaleY(0)}
.qa summary:hover .qa-mark{border-color:var(--ink)}
.qa summary:hover .qa-mark::before,.qa summary:hover .qa-mark::after{background:var(--ink)}
.qa-a{padding-bottom:clamp(24px,2.8vw,32px);max-width:62ch}
.qa-a p{color:var(--mute);font-weight:300}
.qa-a p+p{margin-top:12px}

@media (max-width:820px){
  .parts{grid-template-columns:1fr}
  .vrow-top{grid-template-columns:auto 1fr;gap:14px 20px}
  .vrow-glyph{display:none}
}

/* ==========================================================================
   V2 — EXPERIENCE PASS
   Fewer sections, each one a stage. Content is revealed by interaction,
   not laid out as copy. Depth lives on industries.html / faq.html.
   ========================================================================== */

.stage-sect{
  min-height:94svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(72px,8vw,120px);position:relative;
}
.stage-sect > .wrap{width:100%}

/* ---------- hero: quieter, and the field reacts to the cursor ---------- */
.hero-hint{
  margin-top:30px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.hero .lede{max-width:46ch}

/* load sequence — the field paints, then the words resolve */
.rise{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.1s var(--ease)}
.loaded .rise{opacity:1;transform:none}
.loaded .rise:nth-child(1){transition-delay:.15s}
.loaded .rise:nth-child(2){transition-delay:.28s}
.loaded .rise:nth-child(3){transition-delay:.42s}
.loaded .rise:nth-child(4){transition-delay:.56s}
.loaded .rise:nth-child(5){transition-delay:.70s}

/* ---------- BOOK. MAP. BUILD. — three words, not three paragraphs ---------- */
.moves{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line-soft);
  padding-top:clamp(26px,3vw,42px);
}
.move-w{
  font-size:clamp(2rem,5vw,4rem);font-weight:500;letter-spacing:-.042em;line-height:.95;
  color:var(--dim);transition:color .5s var(--ease);
}
.move:hover .move-w{color:var(--ink)}
.move-w + p{margin-top:16px;color:var(--mute);font-weight:300;font-size:.9375rem;max-width:24ch}

/* ---------- INDUSTRY SELECTOR — one big object, six labels ---------- */
.selector{margin-top:clamp(28px,3.5vw,48px)}
.sel-stage{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,2.6vw,34px);text-align:center;
}
/* the stage holds BOTH the industry schematics (1:1, letterboxed) and the
   wide flow diagrams — one stack, so hovering a pressure point morphs it */
.sel-arts{position:relative;width:clamp(300px,40vw,540px);aspect-ratio:2/1;flex:none}
.sel-art{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;scale:.92;transition:opacity .5s ease,scale .8s var(--ease);
}
.sel-art.on{opacity:.75;scale:1}
.sel-arts.probing .sel-art{opacity:0}   /* a flow takes over the stage */

/* ---------- flow scenes: a line drawing per pressure point ---------- */
.sel-flow{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;scale:.97;pointer-events:none;
  transition:opacity .4s ease,scale .6s var(--ease);
}
.sel-flow.on{opacity:1;scale:1}

.fl-s,.fl-f,.fl-link,.fl-cut,.fl-roll,.fl-hand{
  fill:none;stroke:var(--ink);stroke-width:1.1;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
.fl-s,.fl-roll,.fl-hand{opacity:.9}
.fl-f{opacity:.42}
.fl-link{opacity:.5}
.fl-cut{opacity:.28;stroke-dasharray:4 5}
.fl-dot{fill:var(--ink);stroke:none;opacity:.75}
.fl-pulse{fill:var(--ink);stroke:none;offset-distance:0%;offset-rotate:0deg;opacity:0}
.sel-flow.on .fl-pulse{opacity:1;animation:flowPulse 3s linear infinite}
@keyframes flowPulse{from{offset-distance:0%}to{offset-distance:100%}}

/* the two objects that should actually move */
.sel-flow.on .fl-roll{animation:flRoll 2.4s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes flRoll{to{transform:rotate(360deg)}}
.sel-flow.on .fl-hand{animation:flSweep 4s linear infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes flSweep{to{transform:rotate(360deg)}}

.fl-t{
  font-family:var(--mono);font-size:6px;letter-spacing:.12em;
  fill:var(--dim);stroke:none;text-transform:uppercase;
}

/* the chip that is being probed lights up */
.sel-part.probing{border-color:var(--ink);background:#1B1B1F}
.sel-part.probing .sel-part-k{color:var(--ink)}

.sel-art [data-draw]{
  stroke:var(--ink);fill:none;stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.3s var(--ease);
}
.sel-art.on [data-draw]{stroke-dashoffset:0!important}

.sel-lines{display:grid;width:100%;place-items:center}
.sel-line{
  grid-area:1/1;max-width:18ch;
  font-size:clamp(1.6rem,3.6vw,3rem);font-weight:500;letter-spacing:-.034em;line-height:1.06;
  text-wrap:balance;
  opacity:0;translate:0 12px;transition:opacity .5s ease,translate .6s var(--ease);
}
.sel-line.on{opacity:1;translate:0 0}

/* the three pressure points — they swap with the industry */
.sel-partsets{display:grid;width:100%;margin-top:clamp(24px,3vw,40px)}
.sel-parts{
  grid-area:1/1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  opacity:0;translate:0 10px;pointer-events:none;
  transition:opacity .45s ease,translate .55s var(--ease);
}
.sel-parts.on{opacity:1;translate:0 0;pointer-events:auto}
.sel-part{
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  border:1px solid var(--line-soft);border-radius:15px;background:var(--strata);
  padding:18px 18px 20px;
  transition:border-color .45s,background .45s,transform .5s var(--ease);
}
.sel-part:hover{border-color:var(--line);background:#17171A;transform:translateY(-3px)}
.sel-part::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%),rgba(242,242,240,.09),transparent 65%);
  opacity:0;transition:opacity .45s;
}
.sel-part:hover::before{opacity:1}
.sel-part-k{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);transition:color .4s;
}
.sel-part:hover .sel-part-k{color:var(--ink)}
.sel-part p + p{margin-top:10px;font-size:.9375rem;font-weight:300;color:var(--mute);line-height:1.45}

.sel-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;
  margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line-soft);padding-top:22px;
}
.sel-tab{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:10px 15px;border-radius:999px;border:1px solid transparent;
  transition:color .35s,border-color .35s,background .35s;
}
.sel-tab:hover{color:var(--mute)}
.sel-tab.on{color:var(--ink);border-color:var(--line);background:var(--strata)}

/* ---------- LIBRARY — one horizontal strip, drag or scroll ---------- */
.strip-wrap{margin-top:clamp(30px,3.5vw,48px);position:relative}
.strip{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  scrollbar-width:none;cursor:grab;
}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.strip .clip{flex:0 0 clamp(280px,40vw,520px);scroll-snap-align:start}
.strip .clip-head{margin-bottom:13px}
.strip .clip-head p{font-size:.875rem}
.strip-note{
  display:flex;justify-content:space-between;gap:20px;margin-top:16px;
}

/* ---------- closing gets the stage treatment too ---------- */
.closing{padding-block:clamp(120px,16vw,210px)}

@media (max-width:820px){
  .stage-sect{min-height:auto}
  .moves{grid-template-columns:1fr;gap:26px}
  .move-w{font-size:clamp(2rem,10vw,2.8rem)}
  .sel-art{opacity:.55}
  .sel-line{font-size:clamp(1.45rem,6.4vw,2rem)}
  .sel-parts{grid-template-columns:1fr;gap:10px}
  .sel-arts{width:min(100%,420px)}
}

/* ==========================================================================
   THE READING — a sample Atlas Blueprint as a live artifact.
   Qoves' move: don't describe the analysis, show the report.
   Every number here is an explicitly-labelled SAMPLE.
   ========================================================================== */
.reading{
  border:1px solid var(--line-soft);border-radius:24px;background:var(--strata);
  padding:clamp(20px,2.6vw,36px);margin-top:clamp(28px,3.4vw,46px);position:relative;overflow:hidden;
}
.reading::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 39px,rgba(242,242,240,.022) 39px 40px);
}
.reading > *{position:relative}

.reading-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;
  padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line-soft);
}
.reading-tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.score{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.score b{font-size:clamp(3rem,8vw,5.6rem);font-weight:500;letter-spacing:-.05em;line-height:.82}
.score span{font-family:var(--mono);font-size:.8125rem;color:var(--dim)}

.verdict{max-width:34ch}
.verdict p{font-weight:300;color:var(--mute);font-size:.9375rem}
.verdict b{color:var(--ink);font-weight:400}

/* the seven gauges */
.gauges{margin-top:6px}
.gauge{
  display:grid;grid-template-columns:minmax(88px,124px) minmax(0,1fr) auto;
  gap:10px 18px;align-items:center;width:100%;text-align:left;
  padding-block:clamp(13px,1.5vw,17px);border-bottom:1px solid var(--line-soft);
  transition:background .4s;cursor:pointer;
}
.gauge:hover,.gauge.on{background:rgba(242,242,240,.026)}
.gauge-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);transition:color .35s}
.gauge:hover .gauge-k,.gauge.on .gauge-k{color:var(--ink)}
.gauge-track{height:5px;border-radius:999px;background:rgba(242,242,240,.075);overflow:hidden}
.gauge-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(242,242,240,.42),var(--ink));
  transition:width 1.4s var(--ease);
}
.gauge.weak .gauge-fill{background:linear-gradient(90deg,rgba(242,242,240,.3),rgba(242,242,240,.85))}
.gauge-v{font-family:var(--mono);font-size:.8125rem;color:var(--mute);min-width:3.2em;text-align:right;transition:color .35s}
.gauge:hover .gauge-v,.gauge.on .gauge-v{color:var(--ink)}

/* what Atlas found there — revealed, not printed */
.gauge-note{
  grid-column:1/-1;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .55s var(--ease),opacity .4s ease,margin-top .55s var(--ease);
}
.gauge.on .gauge-note{max-height:20em;opacity:1;margin-top:14px}
.gauge-note p{font-size:.9375rem;font-weight:300;color:var(--mute);max-width:52ch;line-height:1.5}

/* the note carries its own little scene, so what the auditor found is
   something you look at, not only something you read */
.gauge-note{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.gauge-art{flex:none;width:clamp(150px,17vw,230px);height:auto}
.gauge-art .fl-pulse{opacity:0}
.gauge.on .gauge-art .fl-pulse{opacity:1;animation:flowPulse 3s linear infinite}
.gauge.on .gauge-art .fl-roll{animation:flRoll 2.4s linear infinite;transform-box:fill-box;transform-origin:center}
.gauge.on .gauge-art .fl-hand{animation:flSweep 4s linear infinite;transform-box:fill-box;transform-origin:bottom center}

@media (max-width:820px){
  .gauge-note{flex-direction:column;align-items:flex-start;gap:14px}
  .gauge-art{width:min(100%,240px)}
}
.gauge-note em{font-style:normal;color:var(--ink)}

.reading-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:clamp(18px,2vw,26px);
}

/* the priority stack — the sequence, which is what Atlas actually sells */
.priority{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prio{
  border:1px solid var(--line-soft);border-radius:16px;background:var(--raise);
  padding:20px 20px 22px;transition:border-color .45s,transform .5s var(--ease);
}
.prio:hover{border-color:var(--line);transform:translateY(-3px)}
.prio-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--dim)}
.prio h4{margin-top:10px;font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:500;letter-spacing:-.02em}
.prio p{margin-top:8px;font-size:.875rem;font-weight:300;color:var(--mute)}

@media (max-width:820px){
  .priority{grid-template-columns:1fr}
  .gauge{grid-template-columns:minmax(76px,96px) minmax(0,1fr) auto;gap:8px 12px}
  .reading-top{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   SMOOTH SCROLL + PINNED HERO + CURSOR
   The wrapper is fixed and the content is translated by an eased scroll
   position. Only armed once JS confirms it (html.smooth) — without JS the
   page is an ordinary, perfectly scrollable document.
   ========================================================================== */
html.smooth #smooth-wrapper{
  position:fixed;inset:0;overflow:hidden;
}
html.smooth #smooth-content{will-change:transform}
html.smooth .hero-stage{will-change:transform}

/* the hero owns extra track so the fly-in has somewhere to play */
.hero{height:190svh;min-height:0;display:block;padding:0;overflow:visible}
.hero-stage{
  position:relative;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;padding-bottom:clamp(48px,7vw,88px);
}
.hero-in{will-change:transform,opacity}
.scrollcue{transition:opacity .3s linear}

/* no JS / reduced motion / touch: no extra track, no pin */
html:not(.smooth) .hero{height:auto}
@media (prefers-reduced-motion:reduce){.hero{height:auto}}
@media (hover:none){.hero{height:auto}}

/* ---------- cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:90;
  width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(242,242,240,.55);
  pointer-events:none;opacity:0;
  mix-blend-mode:difference;
  transition:width .35s var(--ease),height .35s var(--ease),
             background .35s,border-color .35s,opacity .3s;
}
.cursor.live{opacity:1}
.cursor.big{
  width:58px;height:58px;
  background:rgba(242,242,240,.16);border-color:transparent;
}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}