/* =====================================================
   MSTEP — Master Stylesheet v5
   GOVERNANCE: Single source of truth. No patches.
   COLOR LAW: Obsidian + Graphite + Stone + CRIMSON only.
   No amber. No warm. No gold. No blue. Crimson is the
   only accent color and it appears sparingly.
   ===================================================== */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --black:    #000000;
  --obsidian: #060606;
  --carbon:   #0a0a0a;
  --charcoal: #111111;
  --graphite: #161616;
  --slab:     #1c1c1c;
  --stone:    #242424;
  --dim:      #3a3a3a;
  --ash:      #5a5a5a;
  --mist:     #888888;
  --silver:   #b8b8b8;
  --bone:     #d8d4cf;
  --ivory:    #ece9e4;

  --crimson:  #8b1020;
  --crimson-bright: #b01428;
  --crimson-edge:   #c8192e;

  --line:  rgba(255,255,255,.05);
  --line2: rgba(255,255,255,.09);
  --line3: rgba(255,255,255,.14);

  --serif: "Cormorant Garamond", "Didot", Georgia, serif;
  --sans:  "DM Sans", system-ui, sans-serif;
  --mono:  "DM Mono", "Courier New", monospace;

  --ease:  cubic-bezier(.16,1,.3,1);
  --t-mid: .9s;
  --t-slow: 1.4s;
  --nav-h: 64px;
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{
  background:var(--obsidian);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--crimson);color:var(--ivory)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── GRAIN OVERLAY ───────────────────────────────────── */
body::after{
  content:"";
  position:fixed;inset:0;
  z-index:9000;
  pointer-events:none;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── PROGRESS BAR ────────────────────────────────────── */
#progress{
  position:fixed;top:0;left:0;
  height:1px;
  background:var(--crimson);
  z-index:600;width:0;
  transition:width .08s linear;
}

/* ── CURSOR ──────────────────────────────────────────── */
#cursor{
  position:fixed;
  width:6px;height:6px;
  background:var(--crimson);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,opacity .3s;
  opacity:0;
  mix-blend-mode:screen;
}
@media(hover:hover){#cursor{opacity:.9}}
#cursor.grow{width:18px;height:18px;opacity:.4}
@media(max-width:768px){#cursor{display:none}}

/* ── REDUCED MOTION ──────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── LAYOUT ──────────────────────────────────────────── */
.wrap{max-width:1280px;margin:0 auto;padding:0 60px}
@media(max-width:768px){.wrap{padding:0 24px}}

/* ── SECTION REVEALS ─────────────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.1s}
[data-reveal][data-delay="2"]{transition-delay:.2s}
[data-reveal][data-delay="3"]{transition-delay:.3s}
[data-reveal][data-delay="4"]{transition-delay:.4s}
[data-reveal][data-delay="5"]{transition-delay:.5s}

/* ── TYPOGRAPHY ──────────────────────────────────────── */
.t-label{
  font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ash);
  font-family:var(--sans);font-weight:300;
}
.t-rule{
  width:32px;height:1px;
  background:var(--crimson);
  display:block;margin-bottom:28px;
}
h2.section-title{
  font-family:var(--serif);
  font-size:clamp(36px,5vw,66px);
  font-weight:300;line-height:1.05;
  color:var(--ivory);letter-spacing:-.02em;
}
h2.section-title em{font-style:italic;color:var(--mist)}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  padding:15px 32px;border-radius:0;
  cursor:pointer;transition:all .4s var(--ease);
  border:1px solid transparent;font-weight:300;
}
.btn-primary{background:var(--crimson);color:var(--ivory);border-color:var(--crimson)}
.btn-primary:hover{background:var(--crimson-bright);transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,16,32,.45)}
.btn-ghost{color:var(--bone);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--line3);background:rgba(255,255,255,.03)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* ── NAV ─────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:500;
  display:flex;align-items:center;
  justify-content:space-between;
  padding:22px 60px;
  transition:padding .6s var(--ease),background .6s,border-color .6s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(6,6,6,.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:14px 60px;
  border-bottom-color:var(--line);
}
.nav-logo{height:28px;width:auto;opacity:.95;transition:opacity .3s}
.nav-logo:hover{opacity:1}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  color:var(--ash);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  font-weight:300;transition:color .3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--bone)}
.nav-access{
  color:var(--bone)!important;
  border:1px solid var(--line2);
  padding:10px 22px;
  font-size:10px!important;
  letter-spacing:.22em!important;
  transition:border-color .3s,background .3s!important;
}
.nav-access:hover{border-color:var(--crimson)!important;background:rgba(139,16,32,.12)!important}
.nav-toggle{
  display:none;background:none;border:none;
  cursor:pointer;color:var(--bone);z-index:501;
}
@media(max-width:1024px){
  nav,nav.scrolled{padding-left:24px;padding-right:24px}
  .nav-links{
    position:fixed;inset:0;
    background:rgba(6,6,6,.98);
    backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:28px;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:15px!important}
  .nav-toggle{display:flex}
}

/* ─────────────────────────────────────────────────
   LOADING SCREEN (INTRO)
   Single bg: archherobg.png stays the whole time.
   No crossfade. No pen phase. No second image.
   lightlogo.png (flat two-tone) centered.
   Console types, progress bar fills, then exits.
   ──────────────────────────────────────────────── */
#intro{
  position:fixed;inset:0;z-index:9950;
  background:#000;overflow:hidden;
}
#intro::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,
    rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px
  );
}
.intro-bg{
  position:absolute;inset:0;z-index:2;
  opacity:0;transition:opacity 1.2s ease;
}
.intro-bg.show{opacity:1}
.intro-bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.42) contrast(1.1);
}
.intro-veil{
  position:absolute;inset:0;z-index:3;
  background:rgba(0,0,0,.5);
}
.intro-console{
  position:absolute;left:28px;bottom:52px;
  z-index:5;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;
  color:rgba(175,170,163,.72);
  line-height:2;max-height:120px;overflow:hidden;
  pointer-events:none;
}
.intro-console .cl-accent{color:var(--crimson)}
@media(max-width:640px){
  .intro-console{left:16px;bottom:44px;font-size:9px}
}
.intro-center{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 24px;
}
#introLogoFlat{
  height:clamp(40px,7vw,80px);width:auto;
  opacity:0;transform:scale(.92);
  transition:opacity 1.2s ease,transform 1.2s ease;
  filter:drop-shadow(0 0 18px rgba(139,16,32,.55));
}
#introLogoFlat.show{opacity:1;transform:scale(1)}
.intro-bar{
  position:absolute;bottom:0;left:0;right:0;
  height:2px;background:rgba(255,255,255,.04);z-index:7;
}
.intro-fill{height:100%;width:0;background:var(--crimson);transition:width .07s linear}
.intro-skip{
  position:absolute;bottom:24px;right:28px;z-index:8;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(90,90,90,0);pointer-events:none;
  animation:skipFade 1s ease 2.5s forwards;
}
@keyframes skipFade{to{color:rgba(90,90,90,.5);pointer-events:auto}}
@media(min-width:641px){.intro-skip{display:none}}
#intro.done{animation:introExit .7s ease forwards}
@keyframes introExit{
  0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-6px)}
}

/* ─────────────────────────────────────────────────
   HERO — THE WEBSITE (after loading screen exits)
   Background: intropenhalo.png (pen on chessboard)
   - object-fit:cover, object-position:center = no stretch
   - brightness(.48) = dark, moody
   - Mobile: same treatment, fits cleanly
   Typography logo (intrologomain) + slogan centered.
   Veil: center-weighted so logo reads, edges are darker.
   ──────────────────────────────────────────────── */
#hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
}
.hero-bg img{
  width:100%;height:100%;
  object-fit:cover;
  /* Center the pen — on mobile this naturally crops to center */
  object-position:center;
  /* Dark enough to read over. No stretch because cover handles it. */
  filter:brightness(.48) contrast(1.06) saturate(.92);
}
/* Veil: darker at edges, lighter in center so logo reads over pen */
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(
    ellipse 70% 70% at 50% 50%,
    rgba(6,6,6,.2) 0%,
    rgba(6,6,6,.65) 100%
  );
}
/* Typography logo + slogan — centered over pen */
.hero-identity{
  position:relative;z-index:3;
  display:flex;flex-direction:column;
  align-items:center;gap:18px;
  text-align:center;
  padding:0 24px;
}
.hero-typo-logo{
  /* mix-blend:screen drops white bg if any survives */
  mix-blend-mode:screen;
  /* Much larger — fills the hero with presence */
  height:clamp(120px,22vw,320px);
  width:auto;max-width:90vw;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.7))
         drop-shadow(0 0 50px rgba(139,16,32,.7))
         drop-shadow(0 0 120px rgba(185,20,40,.3));
  opacity:0;transform:scale(.92);
  transition:opacity 1.3s ease .3s, transform 1.3s ease .3s;
}
.hero-typo-logo.visible{opacity:1;transform:scale(1)}
@media(max-width:768px){
  .hero-typo-logo{height:clamp(96px,32vw,180px)}
}
.hero-slogan{
  font-family:var(--serif);
  font-size:clamp(14px,2vw,22px);
  font-weight:300;font-style:italic;
  color:rgba(216,212,207,.72);
  letter-spacing:.07em;
  opacity:0;transform:translateY(10px);
  transition:opacity 1s ease .9s, transform 1s ease .9s;
}
.hero-slogan.visible{opacity:1;transform:none}
/* Scroll indicator */
.hero-scroll{
  position:absolute;bottom:48px;left:50%;
  transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:8px;
  opacity:0;transition:opacity .8s ease;
}
.hero-scroll.visible{opacity:.4}
.hero-scroll .sl{
  width:1px;height:44px;
  background:linear-gradient(var(--crimson),transparent);
  animation:scrollPulse 2.6s ease-in-out infinite;
}
.hero-scroll span{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
@keyframes scrollPulse{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}


/* ─────────────────────────────────────────────────
   OPENING BLOCK — Text LEFT · Pen RIGHT
   
   MOBILE FIX: pen is absolute positioned at z:0
   behind the text column, NOT a grid sibling.
   Text gets z:2 and reads cleanly over it.
   This matches the approved screenshot exactly.
   ──────────────────────────────────────────────── */
#opening{
  position:relative;
  padding:140px 0 120px;
  background:var(--obsidian);
}
.opening-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  position:relative;
}
/* LEFT */
.opening-left{position:relative;z-index:2}
.opening-eyebrow{
  display:flex;align-items:center;gap:14px;
  margin-bottom:32px;
}
.opening-eyebrow .bar{width:28px;height:1px;background:var(--crimson);flex-shrink:0}
.opening-eyebrow span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.opening-headline{
  font-family:var(--serif);
  font-size:clamp(48px,7.5vw,104px);
  line-height:.88;color:var(--ivory);
  font-weight:300;letter-spacing:-.025em;
  margin-bottom:12px;
}
.opening-headline .it{font-style:italic;color:var(--mist)}
.opening-sub{
  font-family:var(--serif);
  font-size:clamp(18px,2.2vw,28px);
  color:var(--ash);font-style:italic;
  margin-bottom:26px;font-weight:300;
}
.opening-body{
  font-size:15px;color:var(--dim);
  line-height:1.82;max-width:44ch;
  margin-bottom:44px;
}
.opening-body strong{color:var(--mist);font-weight:300}
.opening-ctas{display:flex;gap:16px;flex-wrap:wrap}

/* RIGHT — mega pen */
.opening-pen{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:flex-end;
}
.opening-pen img{
  width:100%;max-width:580px;height:auto;
  mask-image:linear-gradient(to left,#000 35%,transparent 100%);
  -webkit-mask-image:linear-gradient(to left,#000 35%,transparent 100%);
  filter:brightness(.92) contrast(1.06);
}

/* MOBILE: pen becomes atmospheric bg, text stays readable */
@media(max-width:768px){
  #opening{padding:100px 0 80px}
  .opening-grid{grid-template-columns:1fr}
  .opening-pen{
    position:absolute;
    right:-16px;top:50%;
    transform:translateY(-50%);
    z-index:0;width:70%;
    pointer-events:none;
    justify-content:flex-end;
  }
  .opening-pen img{
    width:100%;max-width:none;
    opacity:.22;
    mask-image:linear-gradient(to left,#000 15%,transparent 75%);
    -webkit-mask-image:linear-gradient(to left,#000 15%,transparent 75%);
    filter:brightness(.6) contrast(1.1);
  }
  .opening-left{grid-column:1;position:relative;z-index:2}
  .opening-headline{font-size:clamp(40px,11vw,68px)}
  .opening-ctas .btn{flex:1;justify-content:center}
}

/* ─────────────────────────────────────────────────
   STATEMENT — power words background, pure CSS.
   Background environment: Image 3 (grid floor).
   Dark gray to slightly-less-dark-gray gradient sweep.
   NO color. NO amber. Stone tones only.
   ──────────────────────────────────────────────── */
#statement{
  position:relative;
  padding:120px 0;
  background:var(--carbon);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Environment bg */
.statement-env{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.statement-env img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.18) contrast(1.1);
  opacity:.6;
}
/* Power words layer — CSS only, no JS */
.power-words{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.power-words::before{
  content:
    "PERSPECTIVE   STRUCTURE   CLARITY"
    "\A ALIGNMENT   JUDGMENT   CONTINUITY"
    "\A GOVERNANCE   MOMENTUM   STEWARDSHIP"
    "\A PERSPECTIVE   STRUCTURE   CLARITY"
    "\A ALIGNMENT   JUDGMENT   CONTINUITY";
  white-space:pre;
  font-family:var(--serif);
  font-size:clamp(10px,1.2vw,14px);
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.04);
  line-height:3.2;text-align:center;
}
/* The sweep — dark stone gray only */
.power-words::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(38,38,42,.16) 35%,
    rgba(58,58,62,.2) 50%,
    rgba(38,38,42,.16) 65%,
    transparent 100%
  );
  background-size:300% 100%;
  animation:pwSweep 10s ease-in-out infinite;
}
@keyframes pwSweep{
  0%{background-position:200% 0}
  65%{background-position:-100% 0}
  100%{background-position:-100% 0}
}
/* Statement content */
.statement-inner{position:relative;z-index:2}
.statement-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:80px;align-items:start;
}
@media(max-width:820px){.statement-grid{grid-template-columns:1fr;gap:40px}}
.statement-quote{
  font-family:var(--serif);
  font-size:clamp(32px,4.5vw,60px);
  font-weight:300;line-height:1.18;
  color:var(--bone);
}
.statement-quote .hl{font-style:italic;color:var(--ivory)}
.statement-quote .accent{color:var(--crimson)}
.obs-item{
  font-size:15px;color:var(--ash);
  line-height:1.8;margin-bottom:22px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.obs-item:last-child{border-bottom:none;margin-bottom:0}
.obs-item strong{color:var(--silver);font-weight:300}

/* ─────────────────────────────────────────────────
   CAPABILITIES — 6 divisions
   Background: Image 5 (stone desk surface)
   ──────────────────────────────────────────────── */
#capabilities{
  position:relative;
  padding:130px 0;overflow:hidden;
}
.caps-env{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.caps-env img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  filter:brightness(.12) contrast(1.15);
  opacity:.8;
}
.caps-inner{position:relative;z-index:2}
.caps-header{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:end;margin-bottom:64px;
}
@media(max-width:820px){.caps-header{grid-template-columns:1fr;gap:20px}}
.caps-intro{font-size:15px;color:var(--ash);line-height:1.8;max-width:400px}
.caps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
@media(max-width:900px){.caps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.caps-grid{grid-template-columns:1fr}}
.cap{
  background:rgba(6,6,6,.9);
  padding:44px 36px;position:relative;
  overflow:hidden;
  transition:background .4s;
  --mx:50%;--my:50%;
}
.cap::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(
    ellipse 55% 45% at var(--mx) var(--my),
    rgba(139,16,32,.08) 0%,transparent 70%
  );
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.cap:hover{background:rgba(12,12,12,.96)}
.cap:hover::before{opacity:1}
.cap__num{
  font-family:var(--serif);
  font-size:36px;color:var(--slab);
  line-height:1;margin-bottom:18px;
  transition:color .4s;
}
.cap:hover .cap__num{color:var(--crimson)}
.cap__name{
  font-family:var(--serif);
  font-size:21px;color:var(--ivory);
  font-weight:400;margin-bottom:10px;line-height:1.2;
}
.cap__desc{font-size:13.5px;color:var(--ash);line-height:1.72}
.cap__arrow{
  position:absolute;bottom:22px;right:26px;
  color:var(--crimson);font-size:16px;
  opacity:0;transform:translateX(-5px);
  transition:opacity .3s,transform .3s var(--ease);
}
.cap:hover .cap__arrow{opacity:1;transform:none}

/* ─────────────────────────────────────────────────
   ENGAGEMENT — Deep corridor background (Image 4)
   ──────────────────────────────────────────────── */
#engagement{
  position:relative;padding:130px 0;
  background:var(--carbon);overflow:hidden;
}
.eng-env{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.eng-env img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.14) contrast(1.1);
  opacity:.7;
}
.eng-inner{position:relative;z-index:2}
.eng-grid{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:80px;align-items:start;
}
@media(max-width:820px){.eng-grid{grid-template-columns:1fr;gap:48px}}
.eng-framework{
  margin-top:36px;
  filter:brightness(.7) saturate(.4);
  opacity:.8;
  max-width:340px;
}
.eng-step{
  display:grid;grid-template-columns:52px 1fr;
  gap:22px;padding:26px 0;
  border-top:1px solid var(--line);
  align-items:start;
  transition:border-color .4s;
}
.eng-step:hover{border-top-color:var(--crimson)}
.eng-step__num{
  font-family:var(--serif);font-size:30px;
  color:var(--slab);line-height:1;transition:color .4s;
}
.eng-step:hover .eng-step__num{color:var(--crimson)}
.eng-step__title{
  font-family:var(--serif);font-size:20px;
  color:var(--ivory);font-weight:400;margin-bottom:7px;
}
.eng-step__text{font-size:13.5px;color:var(--ash);line-height:1.7}

/* ─────────────────────────────────────────────────
   INSIGHTS — Private library (Image 2)
   Objects: bookscollection.png, fieldnotesstone.png
   ──────────────────────────────────────────────── */
#insights{
  position:relative;padding:130px 0;overflow:hidden;
}
.insights-env{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.insights-env img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.15) contrast(1.1) saturate(0);
  opacity:.75;
}
.insights-inner{position:relative;z-index:2}
.insights-header{margin-bottom:60px}
.insights-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:60px;
}
@media(max-width:820px){.insights-grid{grid-template-columns:1fr}}
.insight-card{
  background:rgba(6,6,6,.88);
  padding:38px 32px;
  transition:background .4s;
  position:relative;overflow:hidden;
}
.insight-card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--crimson);
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease);
}
.insight-card:hover{background:rgba(10,10,10,.96)}
.insight-card:hover::before{transform:scaleY(1)}
.insight-card__cat{
  font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--crimson);
  margin-bottom:12px;font-weight:400;
}
.insight-card__title{
  font-family:var(--serif);
  font-size:18px;color:var(--ivory);
  font-weight:400;margin-bottom:12px;line-height:1.3;
}
.insight-card__meta{font-size:11px;color:var(--ash)}
/* Publication objects — treated as physical things */
.pub-objects{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;margin-top:0;
}
@media(max-width:640px){.pub-objects{grid-template-columns:1fr}}
.pub-obj{
  position:relative;overflow:hidden;
  background:var(--carbon);
}
.pub-obj img{
  width:100%;
  filter:brightness(.82) contrast(1.04) saturate(.85);
  transition:transform .7s var(--ease),filter .5s;
  display:block;
}
.pub-obj:hover img{
  transform:scale(1.03);
  filter:brightness(.92) contrast(1.06) saturate(.9);
}
.pub-obj__label{
  position:absolute;bottom:0;left:0;right:0;
  padding:12px 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash);
}

/* ─────────────────────────────────────────────────
   ACCESS PORTAL — Crimson door (Image 1)
   The door IS the section. Content over it.
   ──────────────────────────────────────────────── */
#access{
  position:relative;padding:130px 0;overflow:hidden;
}
.access-env{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.access-env img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  /* Keep the red! That's our crimson. Only desaturate non-red. */
  filter:brightness(.35) contrast(1.12);
  opacity:.9;
}
/* Additional dark overlay — top and bottom */
.access-env::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(6,6,6,.7) 0%,
    rgba(6,6,6,.1) 40%,
    rgba(6,6,6,.1) 60%,
    rgba(6,6,6,.8) 100%
  );
}
.access-inner{position:relative;z-index:2}
.access-paths{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:52px;
}
@media(max-width:820px){.access-paths{grid-template-columns:1fr}}
.access-path{
  background:rgba(6,6,6,.88);
  padding:42px 36px;transition:background .4s;
}
.access-path:hover{background:rgba(6,6,6,.92)}
.access-path__num{
  font-family:var(--serif);font-size:13px;
  color:var(--crimson);letter-spacing:.14em;margin-bottom:16px;
}
.access-path__title{
  font-family:var(--serif);font-size:22px;
  color:var(--ivory);font-weight:400;margin-bottom:10px;
}
.access-path__desc{font-size:13.5px;color:var(--ash);line-height:1.72;margin-bottom:24px}
.access-path__cta{
  font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--crimson);
  transition:letter-spacing .3s;
}
.access-path__cta:hover{letter-spacing:.28em}
/* Access card — physical object on dark surface */
.access-card-wrap{
  margin-top:64px;
  display:flex;justify-content:center;
}
.access-card-wrap img{
  max-width:560px;width:100%;
  filter:brightness(.88) contrast(1.04) saturate(.9);
  transition:transform .6s var(--ease);
}
.access-card-wrap:hover img{transform:translateY(-5px) scale(1.01)}

/* ─────────────────────────────────────────────────
   NUMBERS BAND
   ──────────────────────────────────────────────── */
.numbers{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media(max-width:820px){.numbers{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.numbers{grid-template-columns:1fr}}
.num-item{
  background:var(--carbon);padding:48px 36px;
  transition:background .4s;
}
.num-item:hover{background:var(--graphite)}
.num-item__val{
  font-family:var(--serif);
  font-size:clamp(34px,4.5vw,56px);
  color:var(--ivory);font-weight:300;
  line-height:1;margin-bottom:8px;
}
.num-item__val.italic{font-style:italic}
.num-item__label{font-size:11px;color:var(--ash);letter-spacing:.1em;text-transform:uppercase}

/* ─────────────────────────────────────────────────
   CONCIERGE — bottom right, approved design.
   This is the version you said finally looked right.
   Kept exactly. Botpress 144GY7OJ wired in JS.
   ──────────────────────────────────────────────── */
.concierge-wrap{
  position:fixed;bottom:52px;right:28px;
  z-index:8000;
  display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;
}
@media(max-width:768px){.concierge-wrap{bottom:54px;right:14px}}
.concierge-trigger{
  display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--crimson);
  border:1px solid rgba(139,16,32,.3);
  padding:11px 20px;cursor:pointer;
  background:rgba(6,6,6,.92);
  backdrop-filter:blur(20px);
  transition:all .4s var(--ease);
  font-weight:300;
}
.concierge-trigger:hover{
  border-color:var(--crimson);
  background:rgba(8,8,8,.97);
}
.ct-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--crimson);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Panel */
.concierge-panel{
  width:380px;
  background:rgba(4,4,4,.98);
  border:1px solid var(--line2);
  overflow:hidden;
  transform:translateY(10px) scale(.97);
  opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.concierge-panel.open{transform:none;opacity:1;pointer-events:all}
@media(max-width:768px){
  .concierge-panel{
    position:fixed;bottom:108px;
    left:10px;right:10px;width:auto;
  }
}
.cp-header{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
}
.cp-header-left{display:flex;align-items:center;gap:10px}
.cp-live{
  width:7px;height:7px;border-radius:50%;
  background:#3d8b3d;animation:pulse 2.4s infinite;
}
.cp-name{
  font-size:12px;letter-spacing:.12em;
  color:var(--bone);font-weight:300;
}
.cp-desk{
  font-size:9.5px;letter-spacing:.18em;
  color:var(--ash);text-transform:uppercase;margin-top:2px;
}
.cp-close{
  background:none;border:none;color:var(--ash);
  cursor:pointer;font-size:17px;line-height:1;
  transition:color .3s;padding:4px;
}
.cp-close:hover{color:var(--bone)}
.cp-body{
  height:190px;overflow-y:auto;
  padding:14px 18px;
  display:flex;flex-direction:column;gap:9px;
  scrollbar-width:none;
}
.cp-body::-webkit-scrollbar{display:none}
.cp-msg{font-size:12.5px;color:var(--ash);line-height:1.62;max-width:92%}
.cp-msg.system{
  font-size:10px;letter-spacing:.1em;color:var(--dim);
  text-align:center;max-width:100%;font-family:var(--mono);
}
.cp-msg.user{
  color:var(--silver);text-align:right;align-self:flex-end;
}
.cp-input-row{
  display:flex;gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--line);
}
.cp-input{
  flex:1;background:transparent;
  border:1px solid var(--line2);
  color:var(--bone);
  font-family:var(--sans);font-size:12.5px;
  font-weight:300;padding:9px 13px;
  outline:none;transition:border-color .3s;
}
.cp-input:focus{border-color:var(--crimson)}
.cp-input::placeholder{color:var(--ash)}
.cp-send{
  background:var(--crimson);border:none;
  color:var(--ivory);padding:9px 15px;
  cursor:pointer;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;
  transition:background .3s;
}
.cp-send:hover{background:var(--crimson-bright)}
.cp-footer{
  padding:9px 18px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;color:var(--ash);
  text-transform:uppercase;text-align:center;
}

/* ─────────────────────────────────────────────────
   DIVIDER
   ──────────────────────────────────────────────── */
.divider{
  height:1px;background:var(--line);
  position:relative;overflow:hidden;
}
.divider::after{
  content:"";position:absolute;top:0;left:-30%;
  width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--crimson),transparent);
  animation:sweep 7s var(--ease) infinite;
}
@keyframes sweep{0%{left:-30%}60%,100%{left:130%}}

/* ─────────────────────────────────────────────────
   TICKER
   ──────────────────────────────────────────────── */
.ticker{
  position:fixed;bottom:0;left:0;right:0;
  z-index:400;
  background:rgba(6,6,6,.94);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  height:40px;display:flex;
  align-items:center;
  /* overflow:hidden on the whole bar clips the track correctly */
  overflow:hidden;
}
.ticker-label{
  /* flex:none keeps label fixed width so track never slides under it */
  flex:none;
  display:flex;align-items:center;gap:7px;
  padding:0 18px;height:100%;
  background:var(--crimson);
  font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivory);
  /* z-index keeps label painted above the scrolling text */
  position:relative;z-index:2;
}
.ticker-label .pulse-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--ivory);animation:pulse 2.4s infinite;
}
/* The scrolling area is a separate flex child with clip */
.ticker-scroll{
  flex:1;overflow:hidden;height:100%;
  display:flex;align-items:center;
  position:relative;
}
.ticker-track{
  display:flex;align-items:center;gap:48px;
  white-space:nowrap;padding-left:32px;
  animation:scrollX 80s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track,
.ticker-scroll:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  font-size:11.5px;color:var(--ash);
  letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;
}
.ticker-item .src{
  color:var(--crimson);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;
}
.ticker-item a{color:var(--ash);transition:color .3s}
.ticker-item a:hover{color:var(--bone)}
@keyframes scrollX{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line);
  padding:90px 0 50px;
  background:var(--obsidian);
}
.foot-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:60px;margin-bottom:64px;
}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .foot-logo{height:26px;width:auto;margin-bottom:18px;opacity:.86}
.foot-brand p{font-size:13.5px;color:var(--ash);line-height:1.78;max-width:30ch}
.foot-col__heading{
  font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--dim);
  margin-bottom:18px;
}
.foot-col__link{
  display:block;font-size:13.5px;color:var(--ash);
  padding:6px 0;transition:color .3s;
}
.foot-col__link:hover{color:var(--bone)}
.foot-bottom{
  display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:28px;
}
.foot-legal{font-size:11.5px;color:var(--dim)}
.foot-slogan{
  font-family:var(--serif);
  font-size:15px;color:var(--ash);font-style:italic;
}
.foot-slogan .accent{color:var(--crimson);font-style:normal}

/* ─────────────────────────────────────────────────
   PAGE VEIL
   ──────────────────────────────────────────────── */
.page-veil{
  position:fixed;inset:0;z-index:9500;
  background:var(--obsidian);pointer-events:none;
  opacity:0;transition:opacity .5s;
}
.page-veil.show{opacity:1;pointer-events:all}


/* ── MOBILE PERFORMANCE — remove GPU-heavy effects on small screens ── */
@media(max-width:768px){
  /* Nav backdrop-filter causes compositor lag on mobile */
  nav.scrolled{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(6,6,6,.97);
  }
  /* Ticker backdrop-filter same issue */
  .ticker{
    backdrop-filter:none;
    background:rgba(6,6,6,.98);
  }
  /* Mobile nav overlay */
  .nav-links{
    backdrop-filter:none;
    background:rgba(6,6,6,.99);
  }
}

/* ── INNER PAGES — shared styles ─────────────────── */
.page-hero{
  position:relative;
  min-height:52vh;
  display:flex;align-items:flex-end;
  padding-bottom:80px;
  overflow:hidden;
}
.page-hero-bg{
  position:absolute;inset:0;z-index:0;
}
.page-hero-bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.32) contrast(1.1);
}
.page-hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(6,6,6,.9) 0%, rgba(6,6,6,.3) 100%);
}
.page-hero-inner{position:relative;z-index:2;padding-top:120px}
.page-title{
  font-family:var(--serif);
  font-size:clamp(48px,8vw,96px);
  font-weight:300;line-height:.95;
  color:var(--ivory);letter-spacing:-.025em;
  margin:12px 0 20px;
}
.page-subtitle{
  font-size:16px;color:var(--ash);
  line-height:1.82;max-width:52ch;
}
.page-section{padding:100px 0}
@media(max-width:768px){
  .page-hero{min-height:44vh;padding-bottom:52px}
  .page-hero-inner{padding-top:100px}
  .page-section{padding:64px 0}
}

/* Cap full — inner capabilities page */
.cap-full{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  padding:64px 0;
  align-items:start;
}
@media(max-width:820px){
  .cap-full{grid-template-columns:1fr;gap:28px;padding:48px 0}
}
.cap-full__header{display:flex;align-items:flex-start;gap:24px}
.cap-full__num{
  font-family:var(--serif);
  font-size:52px;color:var(--slab);
  line-height:1;flex-shrink:0;
  margin-top:-6px;
}
.cap-full__name{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,38px);
  color:var(--ivory);font-weight:300;
  margin-bottom:6px;
}
.cap-full__tag{
  font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--crimson);
}
.cap-full__body p{
  font-size:15px;color:var(--ash);
  line-height:1.82;margin-bottom:18px;
  max-width:58ch;
}
.cap-full__list{
  list-style:none;
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 32px;
}
@media(max-width:600px){.cap-full__list{grid-template-columns:1fr}}
.cap-full__list li{
  font-size:13px;color:var(--dim);
  padding:7px 0;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.cap-full__list li::before{
  content:"–";color:var(--crimson);flex-shrink:0;
}

/* CTA band — shared across pages */
.cta-band{
  padding:100px 0;
  background:var(--carbon);
  border-top:1px solid var(--line);
  text-align:center;
}
.cta-band__label{margin-bottom:16px;display:block}
.cta-band__title{
  font-family:var(--serif);
  font-size:clamp(32px,4.5vw,58px);
  font-weight:300;line-height:1.15;
  color:var(--ivory);margin-bottom:40px;
}
.cta-band__title em{font-style:italic;color:var(--mist)}
@media(max-width:768px){.cta-band{padding:72px 0}}


/* ── CONCIERGE TYPING INDICATOR ──────────────────── */
.cp-dots{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.cp-dots i{
  width:5px;height:5px;border-radius:50%;
  background:var(--ash);
  animation:cpDot 1.3s infinite ease-in-out both;
}
.cp-dots i:nth-child(1){animation-delay:-.32s}
.cp-dots i:nth-child(2){animation-delay:-.16s}
@keyframes cpDot{
  0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}
}