/* ============================================================
   Sterling Cooper, Inc. — site.css  (v4 "Obsidian & Gold")
   Full-dark, cinematic system: old-money legacy, modern velocity.
   Type: Fraunces (display) · Spectral (body) · Archivo (utility)
   ============================================================ */

:root{
  --bg:#050506;            /* obsidian */
  --bg-2:#0A0A0D;          /* raised section */
  --panel:#0E0E12;         /* card */
  --panel-2:#131319;       /* elevated card */
  --gold:#CDA24E;          /* primary gold */
  --gold-bright:#E8CB7E;   /* highlight gold */
  --gold-deep:#93701F;     /* shadowed gold */
  --gold-pale:#F1E4BC;     /* pale accents */
  --text:#ECEAE3;          /* body on dark */
  --text-2:#C9C7BE;        /* secondary body */
  --muted:#94928A;         /* muted */
  --line:rgba(205,162,78,.15);
  --line-2:rgba(205,162,78,.32);
  --glow:rgba(205,162,78,.15);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --disp:"Fraunces", Georgia, serif;
  --body:"Spectral", Georgia, serif;
  --util:"Archivo", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:18px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:rgba(205,162,78,.35); color:#FFF8E7}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:#131313; padding:10px 16px; z-index:200; font-family:var(--util)}
.skip:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--util); font-size:12px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:14px; margin:0 0 20px;
}
.eyebrow::before{content:"◆"; font-size:8px; transform:translateY(-1px)}
.eyebrow::after{content:""; height:1px; width:64px; background:linear-gradient(90deg,currentColor,transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}

h1,h2,h3{font-family:var(--disp); font-weight:400; line-height:1.08; letter-spacing:-.015em; margin:0; color:#F6F4EE; font-variation-settings:"opsz" 72}
h1{font-size:clamp(42px,6vw,80px)}
h2{font-size:clamp(32px,4.2vw,52px)}
h3{font-size:23px; line-height:1.3; font-variation-settings:"opsz" 40}
h4{font-family:var(--util); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; color:#F0EEE7}
.lede{font-size:clamp(18px,1.9vw,22px); line-height:1.65; color:var(--text-2); max-width:64ch}
p{margin:0 0 1.15em}
.small{font-size:15px; color:var(--muted); line-height:1.7}
.fine{font-family:var(--util); font-size:14px; color:var(--muted); line-height:1.8; letter-spacing:.01em}

.foil-rule{width:96px; height:6px; margin:28px 0 0; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); opacity:.75}
.foil-rule.center{margin-left:auto; margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  white-space:nowrap; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--util); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 30px; text-decoration:none; border:1px solid transparent; position:relative;
  transition:all .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,#E9CB80,#B98F38); color:#151004; border-color:var(--gold-deep); box-shadow:0 0 0 0 rgba(205,162,78,0)}
.btn-gold:hover{background:linear-gradient(180deg,#F4DA96,#CBA04A); box-shadow:0 8px 34px -8px rgba(205,162,78,.55)}
.btn-ghost{background:rgba(205,162,78,.03); color:var(--gold-pale); border-color:rgba(205,162,78,.4)}
.btn-ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright); background:rgba(205,162,78,.08); box-shadow:0 8px 30px -12px rgba(205,162,78,.4)}
.btn-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:38px}

.tlink{font-family:var(--util); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--gold-bright); border-bottom:1px solid rgba(205,162,78,.4); padding-bottom:4px; transition:all .25s}
.tlink:hover{border-color:var(--gold-bright); text-shadow:0 0 18px rgba(232,203,126,.4)}

/* ---------- topbar ---------- */
.topbar{background:#020203; border-bottom:1px solid rgba(205,162,78,.12); font-family:var(--util); font-size:12.5px; letter-spacing:.06em; color:var(--muted)}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; min-height:40px; gap:16px}
.topbar a{color:var(--gold-pale); text-decoration:none; transition:color .2s}
.topbar a:hover{color:var(--gold-bright)}
.tb-right{display:flex; gap:26px}
.tb-tag{text-transform:uppercase; letter-spacing:.22em; font-size:11px}

/* ---------- header / nav ---------- */
.nav{position:sticky; top:0; z-index:90; background:rgba(6,5,4,.82); backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid rgba(205,162,78,.18); transition:box-shadow .3s, background .3s}
.nav.scrolled{box-shadow:0 14px 40px rgba(0,0,0,.55); background:rgba(6,5,4,.94)}
.nav .wrap{max-width:1460px; display:flex; align-items:center; min-height:86px; gap:18px}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; flex:none}
.brand img{height:50px; width:auto; filter:drop-shadow(0 0 14px rgba(205,162,78,.25))}
.bt{display:flex; flex-direction:column; line-height:1.12}
.bt b{white-space:nowrap; font-family:var(--disp); font-weight:450; font-size:22px; color:#F6F4EE; letter-spacing:.01em}
.bt span{white-space:nowrap; font-family:var(--util); font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-top:5px}
.navlinks{display:flex; gap:clamp(22px,2.2vw,34px); margin-left:auto; padding-left:40px}
.navlinks a{white-space:nowrap; font-family:var(--util); font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#D6D4CC; text-decoration:none; padding:10px 0; position:relative; transition:color .25s}
.navlinks a::after{content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px; background:var(--gold-bright); transition:right .3s var(--ease)}
.navlinks a:hover{color:var(--gold-pale)}
.navlinks a:hover::after,.navlinks a.on::after{right:0}
.navlinks a.on{color:var(--gold-bright)}
.nav-cta{padding:13px 22px; margin-left:8px; font-size:11.5px; letter-spacing:.14em}
.burger{display:none; background:none; border:1px solid rgba(205,162,78,.4); width:46px; height:46px; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; margin-left:auto}
.burger span{display:block; width:20px; height:1.5px; background:var(--gold-pale)}

/* drawer */
.scrim{position:fixed; inset:0; background:rgba(3,2,1,.72); opacity:0; pointer-events:none; transition:opacity .3s; z-index:95}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(380px,90vw); background:#0A0A0D; border-left:1px solid var(--line-2); z-index:96; transform:translateX(102%); transition:transform .4s var(--ease); padding:28px 32px; overflow-y:auto}
.drawer.open{transform:none}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px}
.drawer-head img{height:46px}
.drawer-close{background:none; border:1px solid rgba(205,162,78,.4); color:var(--gold-pale); width:42px; height:42px; font-size:20px; cursor:pointer}
.d-sub{font-family:var(--util); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:24px 0 10px}
.drawer a{display:block; font-family:var(--disp); font-size:22px; color:#F0EEE7; text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(205,162,78,.12); transition:color .2s, padding-left .25s}
.drawer a:hover{color:var(--gold-bright); padding-left:6px}
.drawer .btn{display:inline-flex; margin-top:24px; font-size:12px}
.drawer .d-contact a{font-family:var(--util); font-size:14px; letter-spacing:.04em; border:none; padding:7px 0; color:var(--gold-pale)}

/* ---------- hero ---------- */
.hero{background:radial-gradient(1200px 700px at 78% 30%, #12121A 0%, var(--bg) 55%); color:var(--text); position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; top:50%; right:4%; transform:translateY(-50%);
  width:min(680px,44vw); aspect-ratio:1500/1023;
  background:url("emblem-lg.webp") center/contain no-repeat;
  opacity:.16; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5}
.hero .wrap{position:relative; z-index:1; padding-top:clamp(80px,11vw,150px); padding-bottom:clamp(70px,9vw,130px)}
.hero h1{max-width:15ch; text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero .lede{margin-top:28px}
.hero-home .wrap{padding-top:clamp(96px,13vw,180px)}

/* stat strip */
.stats{background:linear-gradient(180deg,#09090B,#070605); border-top:1px solid rgba(205,162,78,.2); position:relative}
.stats::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,203,126,.5),transparent)}
.stats .wrap.stat-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 28px 34px; border-left:1px solid rgba(205,162,78,.14)}
.stat:first-child{border-left:none}
.stat b{display:block; font-family:var(--disp); font-weight:420; font-size:clamp(36px,3.4vw,54px); margin-bottom:10px; color:var(--gold-bright); font-variation-settings:"opsz" 40; letter-spacing:-.01em}
.stat b .ast{font-size:.4em; color:var(--muted); font-family:var(--util); vertical-align:super; margin-left:3px}
.stat-note{text-align:center; padding:16px 32px 24px; border-top:1px solid var(--line)}
.stat-note p{max-width:none}
.stat-note a{color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(205,162,78,.3)}
.stat > span{font-family:var(--util); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.stat b span{font:inherit; color:inherit; letter-spacing:inherit; text-transform:none}
.stat b .ast{font-size:.4em; color:var(--muted); font-family:var(--util); vertical-align:super; margin-left:4px}
.stat-notes{padding:18px 32px 26px; border-top:1px solid var(--line)}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,10vw,140px) 0; background:var(--bg); position:relative}
.sec.alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec.dark{background:var(--bg)}
.sec-head{max-width:800px; margin-bottom:clamp(44px,5vw,72px)}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head .lede{margin-top:20px}
.sec-head.center .lede{margin-left:auto; margin-right:auto}

.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(44px,6vw,96px); align-items:start}
.prose p{color:var(--text-2)}
.prose p:last-child{margin-bottom:0}

/* framed plate */
.plate{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2); box-shadow:0 30px 60px -34px rgba(0,0,0,.8); position:relative; padding:38px 36px}
.plate::before{content:""; position:absolute; inset:10px; border:1px solid rgba(205,162,78,.3); pointer-events:none}

/* mini stat grid */
.ministats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line-2)}
.ministats div{background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:30px 26px}
.ministats b{display:block; font-family:var(--disp); font-weight:430; font-size:34px; color:var(--gold-bright)}
.ministats b sup{font-size:.42em; color:var(--muted); font-family:var(--util)}
.ministats span{font-family:var(--util); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ---------- card grids ---------- */
.grid{display:grid; gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);
  border:1px solid var(--line); padding:34px 30px 30px; text-decoration:none; display:flex; flex-direction:column;
  position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:linear-gradient(90deg,var(--gold-bright),transparent 75%); opacity:0; transition:opacity .35s}
.card:hover{transform:translateY(-6px); box-shadow:0 34px 60px -28px rgba(0,0,0,.85), 0 0 44px -18px var(--glow); border-color:rgba(205,162,78,.5)}
.card:hover::before{opacity:1}
.card .k{font-family:var(--util); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:16px}
.card h3{margin-bottom:12px}
.card p{font-size:16.5px; line-height:1.72; color:var(--muted); margin:0}
.card .more{margin-top:auto; padding-top:22px; font-family:var(--util); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-pale); transition:color .25s}
.card:hover .more{color:var(--gold-bright)}

/* tiles */
.tile{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); padding:32px 30px; position:relative; transition:border-color .3s}
.tile:hover{border-color:rgba(205,162,78,.45)}
.tile::after{content:""; position:absolute; left:30px; bottom:0; width:48px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.tile:hover::after{transform:scaleX(1)}
.tile p{font-size:16px; color:var(--muted); margin:0}

/* ---------- past / present / future ---------- */
.eras{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line-2)}
.era{background:linear-gradient(180deg,#0D0D11,#09090B); padding:clamp(30px,3.4vw,48px); position:relative; overflow:hidden}
.era::before{content:attr(data-era); position:absolute; top:-14px; right:8px; font-family:var(--disp); font-size:120px; line-height:1; color:rgba(205,162,78,.06); font-style:italic; pointer-events:none}
.era .k{font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block}
.era h3{margin-bottom:14px; font-size:clamp(22px,2vw,27px)}
.era p{font-size:16.5px; line-height:1.78; color:var(--muted); margin:0}

/* ---------- numbers explained ---------- */
.num-list{border-top:1px solid var(--line-2)}
.num{display:grid; grid-template-columns:300px 1fr; gap:clamp(24px,4vw,64px); padding:36px 4px; border-bottom:1px solid var(--line); align-items:start}
.num b{font-family:var(--disp); font-weight:420; font-size:clamp(34px,3.4vw,52px); color:var(--gold-bright); line-height:1; letter-spacing:-.01em}
.num b em{display:block; font-style:normal; font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:12px}
.num p{font-size:17.5px; color:var(--text-2); margin:0; line-height:1.8}

/* ---------- publications list ---------- */
.pubs{border-top:1px solid var(--line-2)}
.pub{display:grid; grid-template-columns:130px 1fr auto; gap:26px; align-items:center; padding:24px 8px; border-bottom:1px solid var(--line); text-decoration:none; transition:background .25s, padding-left .25s}
.pub:hover{background:rgba(205,162,78,.05); padding-left:16px}
.pub .k{font-family:var(--util); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.pub b{font-family:var(--disp); font-weight:460; font-size:21px; color:#F0EEE7}
.pub span.src{display:block; font-family:var(--util); font-size:12px; color:var(--muted); margin-top:4px; letter-spacing:.05em}
.pub .open{font-family:var(--util); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-pale); white-space:nowrap}
.pub:hover .open{color:var(--gold-bright)}

/* ---------- letters ---------- */
.letter{max-width:840px; margin:0 auto; background:linear-gradient(180deg,#111116,#0B0B0E); border:1px solid var(--line-2); box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 80px -40px var(--glow); position:relative; padding:clamp(40px,6vw,76px) clamp(28px,6vw,84px)}
.letter::before{content:""; position:absolute; inset:14px; border:1px solid rgba(205,162,78,.35); pointer-events:none}
.letter-crest{width:96px; margin:0 auto 30px; opacity:.96; filter:drop-shadow(0 0 26px rgba(205,162,78,.35))}
.letter-crest.lg{width:200px; margin-bottom:38px}
.letter p{font-size:19px; line-height:1.95; color:var(--text-2)}
.letter p.salute{font-style:italic; color:var(--muted)}
.letter .dropcap::first-letter{font-family:var(--disp); font-weight:460; font-size:68px; line-height:.82; float:left; padding:10px 14px 0 0; color:var(--gold-bright)}
.signature{margin-top:44px; padding-top:30px; border-top:1px solid var(--line-2); display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.signature .sig-name{font-family:"Tangerine", var(--disp); font-style:italic; font-weight:700; font-size:clamp(48px,4.6vw,66px); line-height:.95; color:var(--gold-pale); letter-spacing:.01em; text-shadow:0 0 30px rgba(205,162,78,.25)}
.signature .sig-rule{width:180px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:14px 0 12px}
.signature .who{font-family:var(--util); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:12px}
.signature .sig-photo{width:118px; height:118px; object-fit:cover; object-position:center top; border:1px solid rgba(205,162,78,.6); box-shadow:0 0 40px -12px var(--glow); flex:none}
.pullquote{font-family:var(--disp); font-size:clamp(24px,3vw,33px); font-style:normal; font-weight:400; line-height:1.45; color:#F0EEE7; border-left:3px solid var(--gold); padding-left:28px; margin:36px 0}

/* leadership duo */
.exec-duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,56px); margin-top:clamp(40px,5vw,60px)}
.exec{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2); padding:clamp(28px,3vw,44px); position:relative; transition:border-color .3s, box-shadow .3s}
.exec:hover{border-color:rgba(205,162,78,.45); box-shadow:0 0 60px -24px var(--glow)}
.exec::before{content:""; position:absolute; inset:10px; border:1px solid rgba(205,162,78,.22); pointer-events:none}
.exec-head{display:flex; align-items:center; gap:26px; margin-bottom:24px; position:relative; z-index:1}
.exec-photo{width:132px; height:132px; flex:none; object-fit:cover; object-position:center top; border:1px solid rgba(205,162,78,.55); filter:saturate(.9); box-shadow:0 0 34px -10px var(--glow)}
.exec-head h3{font-size:clamp(25px,2.4vw,31px); color:#F6F4EE; margin:0}
.exec-head .role{display:block; font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-bright); margin-top:9px}
.exec p{font-size:17px; line-height:1.8; color:var(--text-2); position:relative; z-index:1}
.exec p:last-child{margin-bottom:0}

/* president's note */
.note-plate{max-width:840px; margin:46px auto 0; background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2); padding:32px 36px; display:flex; gap:28px; align-items:center; position:relative}
.note-plate::before{content:""; position:absolute; inset:9px; border:1px solid rgba(205,162,78,.25); pointer-events:none}
.note-plate picture{flex:none; position:relative; z-index:1}
.note-plate img{width:92px; height:92px; max-width:none; object-fit:cover; object-position:center top; border:1px solid rgba(205,162,78,.5)}
.note-plate .np-body{position:relative; z-index:1}
.note-plate p{font-family:var(--disp); font-size:clamp(19px,1.8vw,23px); line-height:1.6; color:#F0EEE7; margin:0 0 14px; font-style:normal}
.note-plate .np-sig{font-family:var(--disp); font-style:italic; font-weight:430; font-size:26px; color:var(--gold-pale); line-height:1.1}
.note-plate .np-who{font-family:var(--util); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:7px}

/* principles */
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.principle{border-top:2px solid var(--gold); padding-top:22px}
.principle h4{color:#F0EEE7}
.principle p{font-size:16px; color:var(--muted); margin:0}

/* ---------- services detail ---------- */
.svc-layout{display:grid; grid-template-columns:260px 1fr; gap:clamp(40px,5vw,80px); align-items:start}
.rail{position:sticky; top:118px; border-left:1px solid var(--line-2)}
.rail a{display:block; font-family:var(--util); font-size:13px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:10px 0 10px 20px; border-left:2px solid transparent; margin-left:-1px; transition:color .2s, border-color .2s}
.rail a:hover,.rail a.on{color:var(--gold-bright); border-left-color:var(--gold-bright)}
.svc{padding:48px 0; border-top:1px solid var(--line); scroll-margin-top:120px}
.svc:first-child{border-top:none; padding-top:0}
.svc .k{font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:12px}
.svc h2{font-size:clamp(28px,3.2vw,38px); margin-bottom:20px}
.svc p{color:var(--text-2)}
.svc h4{margin-top:28px; color:var(--gold-bright); letter-spacing:.18em}
.svc ul{margin:0 0 1.1em; padding-left:20px}
.svc li{margin-bottom:7px; color:var(--text-2)}
.tagline{font-style:italic; color:var(--muted); border-left:2px solid var(--gold); padding-left:18px; margin-top:22px}

/* ---------- research library ---------- */
.lib{columns:2; column-gap:44px; border-top:1px solid var(--line-2)}
.lib a{display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:15px 6px; border-bottom:1px solid var(--line); text-decoration:none; break-inside:avoid; transition:background .2s, padding-left .2s}
.lib a:hover{background:rgba(205,162,78,.05); padding-left:14px}
.lib b{font-family:var(--body); font-weight:500; font-size:16.5px; color:#ECEAE3}
.lib .pdf{font-family:var(--util); font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--gold); white-space:nowrap}

/* ---------- article ---------- */
.article{max-width:780px; margin:0 auto}
.article .back{display:inline-block; font-family:var(--util); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); text-decoration:none; margin-bottom:30px}
.article .acat{display:block; font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:16px}
.article h1{font-size:clamp(34px,4.6vw,54px); margin-bottom:18px}
.article .adate{display:block; font-family:var(--util); font-size:13px; letter-spacing:.1em; color:var(--muted); margin-bottom:36px; padding-bottom:26px; border-bottom:1px solid var(--line-2)}
.article p{font-size:18.5px; line-height:1.92; color:var(--text-2)}
.article p.note{font-size:13.5px; color:var(--muted); border-top:1px solid var(--line-2); padding-top:22px; margin-top:38px; font-family:var(--util); letter-spacing:.02em; line-height:1.75}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.field{display:flex; flex-direction:column; gap:9px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16.5px; color:var(--text); background:#0B0B0E;
  border:1px solid var(--line-2); padding:14px 15px; width:100%; transition:border-color .25s, box-shadow .25s;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.field textarea{min-height:160px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(205,162,78,.15)}
.contact-list{list-style:none; margin:0; padding:0}
.contact-list li{display:grid; grid-template-columns:110px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); font-size:16.5px; color:var(--text-2)}
.contact-list .lbl{font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding-top:4px}
.contact-list a{color:#ECEAE3; text-decoration:none; border-bottom:1px solid rgba(205,162,78,.35); transition:color .2s}
.contact-list a:hover{color:var(--gold-bright)}
.cities{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.cities span{font-family:var(--util); font-size:12.5px; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); padding:6px 12px; background:rgba(205,162,78,.03)}

/* ---------- highlight band (buying group) ---------- */
.band{background:linear-gradient(135deg,#121218 0%,#0A0A0D 60%); border:1px solid var(--line-2); position:relative; overflow:hidden; padding:clamp(36px,5vw,64px); margin-top:clamp(48px,6vw,80px)}
.band::before{content:""; position:absolute; inset:10px; border:1px solid rgba(205,162,78,.25); pointer-events:none}
.band::after{content:""; position:absolute; top:-40%; right:-6%; width:420px; aspect-ratio:1500/1023; background:url("emblem-lg.webp") center/contain no-repeat; opacity:.07; pointer-events:none}
.band b.big{display:block; font-family:var(--disp); font-weight:420; font-size:clamp(40px,5vw,68px); color:var(--gold-bright); line-height:1; margin-bottom:14px}
.band .k{font-family:var(--util); font-size:11.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:18px}
.band p{color:var(--text-2); max-width:70ch}

/* ---------- CTA band ---------- */
.cta-band{background:radial-gradient(900px 500px at 50% 120%, #14141C 0%, var(--bg) 70%); color:var(--text); position:relative; overflow:hidden; text-align:center; border-top:1px solid var(--line)}
.cta-band::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:680px; aspect-ratio:1500/1023; background:url("emblem-lg.webp") center/contain no-repeat; opacity:.08;
  -webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%); mask-image:radial-gradient(closest-side,#000 50%,transparent 100%)}
.cta-band .wrap{position:relative; padding:clamp(80px,10vw,130px) 32px}
.cta-band h2{color:#F6F4EE; max-width:24ch; margin:0 auto}
.cta-band .lede{margin:22px auto 0}
.cta-band .btn-row{justify-content:center}

/* ---------- footer ---------- */
footer{background:#030304; color:var(--muted); border-top:1px solid rgba(205,162,78,.22)}
.f-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:48px; padding:72px 0 52px}
.f-brand img{height:62px; margin-bottom:20px; filter:drop-shadow(0 0 16px rgba(205,162,78,.2))}
.f-brand b{display:block; font-family:var(--disp); font-weight:450; font-size:21px; color:#F6F4EE}
.f-brand .tag{font-family:var(--util); font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin:6px 0 18px}
.f-brand p{font-size:15.5px; line-height:1.75; max-width:36ch}
footer h4{color:var(--gold-bright); letter-spacing:.24em; font-size:11px; margin-bottom:18px}
.f-links a{display:block; font-family:var(--util); font-size:14.5px; color:#C4C2B9; text-decoration:none; padding:6px 0; letter-spacing:.02em; transition:color .2s}
.f-links a:hover{color:var(--gold-bright)}
.f-legal{border-top:1px solid rgba(205,162,78,.14); padding:28px 0 36px; font-family:var(--util); font-size:13px; line-height:1.85; color:#807E76}
.f-legal .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:16px}

.totop{position:fixed; right:24px; bottom:24px; width:48px; height:48px; background:#0B0B0E; color:var(--gold-bright); border:1px solid var(--line-2); font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s, box-shadow .3s; z-index:80}
.totop:hover{box-shadow:0 0 30px -8px var(--glow)}
.totop.show{opacity:1; pointer-events:auto}

.crumb{font-family:var(--util); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:28px}
.crumb a{color:var(--gold-bright); text-decoration:none}
.crumb span{margin:0 9px; opacity:.5}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .navlinks,.nav-cta{display:none}
  .burger{display:flex}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .svc-layout{grid-template-columns:1fr}
  .rail{display:none}
  .exec-duo{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .principles{grid-template-columns:1fr 1fr}
  .eras{grid-template-columns:1fr}
  .num{grid-template-columns:220px 1fr}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .wrap{padding:0 22px}
  .topbar .tb-tag{display:none}
  .topbar .wrap{justify-content:center}
  .hero::before{display:none}
  .stats .wrap.stat-grid{grid-template-columns:1fr 1fr}
  .stat{border-left:none; border-top:1px solid rgba(205,162,78,.14); padding:26px 22px}
  .grid-4,.grid-3,.principles{grid-template-columns:1fr}
  .ministats{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .pub{grid-template-columns:1fr; gap:8px}
  .lib{columns:1}
  .f-top{grid-template-columns:1fr; gap:36px}
  .contact-list li{grid-template-columns:1fr; gap:5px}
  .signature .script{font-size:40px}
  .bt span{display:none}
  .num{grid-template-columns:1fr; gap:12px; padding:28px 2px}
  .exec-head{flex-direction:column; align-items:flex-start; gap:16px}
  .note-plate{flex-direction:column; align-items:flex-start}
}


/* leadership words — home page */
.words{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px)}
.word{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2); padding:clamp(30px,3.4vw,46px); position:relative; display:flex; flex-direction:column}
.word::before{content:""; position:absolute; inset:10px; border:1px solid rgba(205,162,78,.24); pointer-events:none}
.word .quote-mark{font-family:var(--disp); font-size:64px; line-height:.6; color:var(--gold); opacity:.55; margin-bottom:18px}
.word blockquote{margin:0 0 30px; font-family:var(--disp); font-style:normal; font-weight:420; font-size:clamp(23px,2.1vw,28px); line-height:1.55; letter-spacing:.002em; color:#F4F2EC; position:relative; z-index:1}
.word-foot{margin-top:auto; display:flex; align-items:center; gap:18px; position:relative; z-index:1}
.word-foot img{width:76px; height:76px; object-fit:cover; object-position:center top; border:1px solid rgba(205,162,78,.5); flex:none}
.word-foot b{display:block; font-family:var(--disp); font-weight:470; font-size:22px; color:#F6F4EE; font-style:normal}
.word-foot span{display:block; font-family:var(--util); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:5px}
.word .tlink{margin-top:22px; align-self:flex-start; position:relative; z-index:1}
@media (max-width:1240px){ .words{grid-template-columns:1fr} }