@font-face{font-family:'Limelight';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/limelight-400.ba3e86ecc0.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cinzel-400.b873cdd90d.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cinzel-600.61efc27ceb.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/cinzel-700.8efa224fe7.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/cormorant-garamond-300.8973d65ce7.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('/assets/fonts/cormorant-garamond-300-italic.b931f0a45f.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-condensed-400.7fff1bb22e.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/barlow-condensed-500.460f141ec8.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --ink:#0f0f10; --ink-deep:#0a0a0b; --ink-panel:#131314;
  --ink-card:#1a1a1c; --ink-true:#111112;
  --bone:#f7f5f0; --bone-pure:#ffffff; --bone-warm:#f9f2cd;
  --gold:#e8bc4c; --gold-light:#f7ec8d; --gold-pale:#f9f0b4;
  --gold-deep:#b8862a; --gold-shadow:#8a6420;
  --red:#9c2320; --red-light:#c03b34; --red-on-dark:#d84441;
  --gray-text:#d2d2d2; --gray-muted:#8d8d92; --gray-soft:#b8b8bc;
  --gray-dark:#4a4a48; --gray-label:#707075; --gray-faint:#55555a;
  --paper-text:#f0f0ee;
  --rule-gold:rgba(232,188,76,.22); --rule-gold-mid:rgba(232,188,76,.45);
  --rule-gold-soft:rgba(232,188,76,.5); --rule-brass:rgba(184,134,42,.35);
  --field-border:rgba(184,134,42,.4); --bone-dim:rgba(249,242,205,.85);

  --f-display:'Limelight', 'Cinzel', Georgia, serif;
  --f-head:'Cinzel', Georgia, 'Times New Roman', serif;
  --f-body:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-ui:'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;

  --max-wide:1500px;
  --max-text:1400px;
  --gutter:clamp(22px, 5vw, 56px);
  --band-y:clamp(72px, 9vw, 130px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--gray-text);
  font-family:var(--f-ui); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,p{margin:0; text-wrap:pretty}
h1,h2,h3{font-family:var(--f-head); font-weight:600; color:var(--ink-true)}
a{color:var(--gold); text-decoration:none; transition:color .2s var(--ease)}
a:hover{color:var(--gold-light)}
button,input,textarea{font:inherit; color:inherit}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:1px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:14px 22px; background:var(--gold); color:var(--ink);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{left:0; color:var(--ink)}

.eyebrow{
  font-family:var(--f-ui); font-size:clamp(13px,1.5vw,18px); font-weight:500;
  letter-spacing:.4em; text-transform:uppercase; line-height:1.3;
}
.rule{width:64px; height:1px; background:var(--rule-gold-soft); border:0}

/* ---------- bands ---------- */
.band{padding:var(--band-y) var(--gutter)}
.band-bone{background:var(--bone)}
.band-bone .eyebrow{color:var(--red)}
.band-panel{background:var(--ink-panel)}
.band-panel .eyebrow{color:var(--gold-deep)}
.band-red{background:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:16px 34px 14px; border:0; cursor:pointer;
  background:var(--red); color:var(--gold-light);
  font-family:var(--f-ui); font-size:15px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{background:var(--red-light); color:var(--bone-warm); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6; cursor:progress; transform:none}
.btn-sm{padding:10px 22px 8px; font-size:13px; letter-spacing:.18em}

/* ---------- marks ---------- */
/* One SVG drawing at both sizes — see templates.mark_svg. The nav mark used
   to be a separate CSS construction that had dropped the slabs and the
   perforations, leaving two bare bars that read as a pause button. */
.mark-nav{width:40px; height:40px; flex:0 0 auto; display:block}
.mark-hero{width:clamp(104px,17vw,150px); height:auto; display:block}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--gutter);
  background:rgba(15,15,16,.92);
  border-bottom:1px solid var(--rule-gold);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:14px; color:inherit}
.brand:hover .brand-name{color:var(--gold-light)}
.brand-text{display:flex; flex-direction:column; gap:1px}
.brand-name{
  font-family:var(--f-display); font-size:16px; letter-spacing:.08em;
  color:var(--gold); line-height:1; transition:color .2s var(--ease);
}
.brand-sub{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gray-muted); padding-left:.3em;
}
.nav-menu{display:flex; align-items:center; gap:36px}
.drawer-links{display:flex; align-items:center; gap:36px}
.nav-menu a:not(.btn){
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-text);
}
.nav-menu a:not(.btn):hover{color:var(--gold)}
/* drawer furniture is mobile-only; display:none also keeps it out of the
   desktop tab order */
.nav-cta,.drawer-head,.drawer-foot,.nav-scrim{display:none}
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; background:none;
  border:1px solid var(--rule-gold); cursor:pointer;
}
.nav-toggle span{
  display:block; width:18px; height:1px; margin:4px auto; background:var(--gold);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:92vh; overflow:hidden; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(88px,12vw,120px) var(--gutter) clamp(64px,9vw,90px);
}
.hero-bg{position:absolute; inset:0}
.hero-bg img,.hero-bg video{width:100%; height:100%; object-fit:cover; display:block}
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 20%,
    rgba(15,15,16,.55) 0%, rgba(15,15,16,.82) 55%, rgba(10,10,11,.96) 100%);
}
.hero-inner{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:clamp(22px,3.4vw,34px); max-width:1000px;
}
/* ---------- wordmark lockup ---------- */
/* SECOND over ACT with the brand gold gradient, then HOLDINGS, LLC between
   two rules — the arrangement from the logo sheet. Limelight per the logo
   directions; Cinzel stays on section headings and the type-ring lettering.

   The gradient sits on the block rather than each line, so one continuous
   ramp runs across both words instead of restarting on ACT. */
.wordmark{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,1.8vw,20px); margin:0;
}
.wordmark-lines{
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(40px,9vw,92px); line-height:1.03; letter-spacing:.08em;
  /* letter-spacing adds a trailing gap after the last glyph, which drags
     centered text left by half of it; this puts it back. */
  text-indent:.08em;
  color:var(--gold-light);
  background:linear-gradient(180deg,
    var(--gold-pale) 0%, var(--gold-light) 18%,
    var(--gold) 56%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark-lines{color:transparent}
}
.wordmark-sub{
  display:flex; align-items:center; gap:clamp(10px,2vw,20px);
  font-family:var(--f-ui); font-weight:500;
  font-size:clamp(11px,1.3vw,15px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--gray-muted); text-indent:.34em;
}
.wordmark-sub::before,.wordmark-sub::after{
  content:""; height:1px; width:clamp(26px,6vw,72px); background:var(--rule-brass);
}

/* the 404's numeral is not the wordmark, so it keeps its own treatment */
.oops{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(52px,12vw,110px); line-height:1; letter-spacing:.08em;
  color:var(--gold-light);
}
.hero-sub{
  font-family:var(--f-body); font-weight:300; font-style:italic;
  font-size:clamp(21px,4vw,34px); line-height:1.35; color:var(--gray-text);
  max-width:780px;
}
.hero .btn{margin-top:12px}

/* ---------- story ---------- */
.story{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,70px);
  max-width:var(--max-wide); margin-inline:auto;
}
.story-head{display:flex; flex-direction:column; gap:24px}
.story h2{font-size:clamp(28px,4vw,40px); letter-spacing:.02em}
.story-body{display:flex; flex-direction:column; gap:26px}
.story-lead{
  font-family:var(--f-body); font-weight:300; font-size:clamp(20px,2.4vw,26px);
  line-height:1.55; color:var(--ink-true);
}
.story-tail{
  font-family:var(--f-body); font-weight:300; font-size:clamp(18px,2vw,22px);
  line-height:1.6; color:var(--gray-dark);
}

/* ---------- why: "The Name" ---------- */
/* Red spine down the edge, the question set large, body and pull alongside.
   Came out of Ryan's revised template and now serves both pages. */
/* No overflow:hidden here. It would make .why the scrollport for anything
   inside it, and .why-body sticks to the viewport — a sticky child inside an
   overflow:hidden ancestor simply never sticks, with nothing to show why.
   align-items:start rather than center for the same reason: a centered grid
   item has no room to travel. */
.why{
  position:relative; background:var(--ink-deep);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(36px,5vw,70px);
  align-items:start; padding-block:clamp(84px,11vw,150px);
}
.why::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:clamp(8px,1vw,14px);
  background:linear-gradient(180deg,var(--red) 0%,#6f160f 100%);
}
.why-head{
  display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px);
  padding-left:clamp(14px,3vw,40px);
}
/* RED reads 7:1 on bone but only 2.5:1 on ink, so a dark band gets the same
   hue lightened just past 4.5:1. */
.why-head .eyebrow{color:var(--red-on-dark)}
.why-head h2{
  font-family:var(--f-head); font-weight:800;
  font-size:clamp(38px,7.4vw,84px); line-height:.96; letter-spacing:.02em;
  color:var(--gold-light);
}
.why-body{
  display:flex; flex-direction:column; gap:clamp(22px,3vw,32px);
  /* holds while the taller left column — heading plus reel — scrolls past.
     The offset clears the sticky nav bar. */
  position:sticky; top:clamp(92px,11vh,120px);
}
.why-body p:first-child{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(20px,2.6vw,28px); line-height:1.45; color:var(--paper-text);
}
.why-pull{
  padding-top:24px; border-top:1px solid rgba(232,188,76,.3);
  font-family:var(--f-body); font-weight:300; font-style:italic;
  font-size:clamp(19px,2.4vw,26px); line-height:1.5; color:var(--gold);
}

/* ---------- card grids ---------- */
.band-head{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center; margin-bottom:clamp(40px,6vw,60px);
}
.band-lead{
  max-width:900px; font-family:var(--f-body); font-weight:300;
  font-size:clamp(20px,3vw,30px); line-height:1.35;
}
.band-bone .band-lead{color:var(--ink-true)}
.band-panel .band-lead{color:var(--paper-text); font-size:clamp(19px,2.8vw,28px)}
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  max-width:var(--max-wide); margin-inline:auto;
}
.card{display:flex; flex-direction:column; gap:18px}
.card h3{font-family:var(--f-head)}
.card p{font-family:var(--f-body); font-weight:300}

.card-pillar{
  background:var(--bone-pure); border-top:3px solid var(--gold-deep);
  padding:clamp(30px,3.4vw,44px) clamp(26px,3vw,38px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card-pillar:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(17,17,18,.13)}
.card-pillar h3{font-size:clamp(21px,2.3vw,26px); color:var(--ink-true)}
.card-pillar p{font-size:clamp(18px,1.9vw,21px); line-height:1.55; color:var(--gray-dark)}

.card-approach{
  background:var(--ink-card); border:1px solid var(--rule-gold);
  padding:clamp(28px,3.1vw,40px) clamp(24px,2.7vw,34px); gap:16px;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.card-approach:hover{transform:translateY(-3px); border-color:var(--rule-gold-mid)}
.card-approach h3{
  font-size:clamp(19px,2vw,22px); font-weight:400; letter-spacing:.02em;
  color:var(--gold);
}
.card-approach p{font-size:clamp(17px,1.75vw,19px); line-height:1.55; color:var(--gray-soft)}

/* ---------- closing ---------- */
.closing{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:30px; padding-block:clamp(64px,8vw,100px);
}
.closing-pull{
  max-width:900px; font-family:var(--f-body); font-weight:300; font-style:italic;
  font-size:clamp(22px,3.5vw,34px); line-height:1.4; color:var(--bone-warm);
}
.closing-body{
  max-width:820px; font-family:var(--f-body); font-weight:300;
  font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--bone-dim);
}

/* ---------- contact ---------- */
.contact{
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(36px,5vw,70px);
  max-width:var(--max-text); margin-inline:auto;
}
.contact-aside{display:flex; flex-direction:column; gap:26px}
.contact h2{font-size:clamp(26px,3.4vw,36px)}
.contact-block{display:flex; flex-direction:column; gap:6px}
.contact-block.ruled{padding-top:10px; border-top:1px solid var(--rule-brass)}
.contact-label{
  font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-label);
}
.contact-value{font-family:var(--f-body); font-size:clamp(20px,2.2vw,24px); color:var(--ink-true)}
a.contact-value{color:var(--red)}
a.contact-value:hover{color:var(--red-light)}

.form{display:flex; flex-direction:column; gap:20px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-label);
}
.field .req{color:var(--red)}
.field input,.field textarea{
  width:100%; padding:16px 18px; background:var(--bone-pure);
  border:1px solid var(--field-border); border-radius:0;
  font-family:var(--f-ui); font-size:17px; color:var(--ink-true);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{resize:vertical; min-height:132px}
.field input:hover,.field textarea:hover{border-color:var(--gold-deep)}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(184,134,42,.18);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
.field-error{font-size:14px; letter-spacing:.02em; color:var(--red)}
.field-error:empty{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{
  font-family:var(--f-body); font-size:20px; line-height:1.5;
  padding:14px 18px; border-left:3px solid var(--gold-deep);
  background:rgba(184,134,42,.09); color:var(--ink-true);
}
.form-status:empty{display:none}
.form-status[data-state="error"]{border-left-color:var(--red); background:rgba(156,35,32,.08)}
.form .btn{align-self:flex-start}

/* ---------- footer ---------- */
.footer{
  background:var(--ink-deep); border-top:1px solid var(--rule-gold);
  padding:clamp(64px,8vw,100px) var(--gutter) 60px;
  display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4vw,44px);
  text-align:center;
}
.footer-tagline{
  font-family:var(--f-body); font-style:italic; font-weight:300;
  font-size:clamp(19px,2.2vw,22px); color:var(--gray-soft); max-width:640px;
}
.footer-meta{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,4vw,40px); flex-wrap:wrap;
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-muted);
}
.footer-legal{font-size:12px; letter-spacing:.12em; color:var(--gray-faint)}

/* ---------- coming soon ---------- */
.soon{
  position:relative; overflow:hidden; text-align:center;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(56px,9vw,90px) var(--gutter);
}
.soon-veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 18%,
    rgba(15,15,16,.35) 0%, rgba(15,15,16,.78) 55%, rgba(10,10,11,.97) 100%);
}
.soon-inner{
  position:relative; width:100%; max-width:760px;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,2.6vw,28px);
}
.soon .eyebrow{color:var(--gold-deep)}
.soon .wordmark-lines{font-size:clamp(38px,8.4vw,84px)}
.soon-tagline{
  font-family:var(--f-body); font-weight:300; font-style:italic;
  font-size:clamp(19px,3.4vw,30px); line-height:1.35; color:var(--gray-text);
}
.soon-body{
  max-width:620px; font-family:var(--f-body); font-weight:300;
  font-size:clamp(17px,2vw,21px); line-height:1.6; color:var(--gray-soft);
}

/* signup — dark-ground fields, unlike the contact form on bone */
.notify{
  width:100%; max-width:540px; margin-top:clamp(6px,1.6vw,14px);
  display:flex; flex-direction:column; gap:13px;
}
.notify-head{
  font-family:var(--f-ui); font-size:14px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gray-text);
}
.notify-row{display:flex; gap:12px; align-items:stretch}
.notify label.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.notify input{
  flex:1 1 auto; min-width:0; padding:15px 18px; border-radius:0;
  background:rgba(255,255,255,.05); border:1px solid var(--rule-gold);
  font-family:var(--f-ui); font-size:17px; color:var(--bone);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.notify input::placeholder{color:var(--gray-muted)}
.notify input:hover{border-color:var(--rule-gold-mid)}
.notify input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,188,76,.15);
}
.notify input[aria-invalid="true"]{border-color:var(--red-light)}
.notify .btn{flex:0 0 auto; align-self:stretch}
.notify-note{font-size:13px; letter-spacing:.06em; color:var(--gray-faint)}
.notify-error{font-size:14px; color:var(--red-light); text-align:left}
.notify-error:empty{display:none}
.notify-status{
  font-family:var(--f-body); font-size:19px; line-height:1.5;
  padding:13px 17px; text-align:left;
  border-left:3px solid var(--gold); background:rgba(232,188,76,.08);
  color:var(--gold-light);
}
.notify-status:empty{display:none}
.notify-status[data-state="error"]{
  border-left-color:var(--red-light); background:rgba(192,59,52,.12);
  color:var(--gray-text);
}

.soon-foot{
  position:relative; margin-top:clamp(30px,5vw,52px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.soon-foot-meta{
  display:flex; align-items:center; gap:clamp(16px,3vw,32px); flex-wrap:wrap;
  justify-content:center;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-muted);
}
.soon-legal{font-size:12px; letter-spacing:.12em; color:var(--gray-faint)}

@media (max-width:560px){
  .notify-row{flex-direction:column}
  .notify .btn{align-self:stretch; text-align:center}
  .soon-foot-meta{flex-direction:column; gap:10px}
}

/* ==========================================================================
   home2 — Ryan's revised template.

   Selectors here are -v2 variants or classes that exist nowhere else, so the
   two pages can be compared side by side. The exception is the "why" section:
   it was approved off /home2 and promoted into the shared stylesheet above,
   where it now serves both pages under plain .why names.
   ========================================================================== */

/* hero: text left over the dark side of the composite, subject at the right */
/* .hero is a column flex, so the horizontal axis is align-items; justify
   would move this vertically and leave it centered where the design wants it
   hard against the left, over the dark half of the composite. */
.hero-v2{
  align-items:flex-start; text-align:left;
  padding:clamp(96px,12vw,120px) var(--gutter) clamp(72px,9vw,90px) clamp(22px,8vw,110px);
}
.hero-v2 .hero-veil{
  background:linear-gradient(100deg,
    rgba(10,10,11,.95) 0%, rgba(10,10,11,.86) 32%,
    rgba(10,10,11,.5) 58%, rgba(10,10,11,.18) 100%);
}
.hero-v2 .hero-inner{align-items:flex-start; text-align:left; max-width:760px}
.hero-v2 .wordmark{align-items:flex-start}
.hero-v2 .wordmark-lines{align-items:flex-start; font-size:clamp(40px,8.6vw,86px)}
.hero-v2 .hero-sub{max-width:620px}

/* Our Story: both paragraphs set alike. The shared treatment drops the second
   one to a smaller, grayer size, which reads as an afterthought rather than
   as the other half of the thought. Scoped to .v2 so /home and /home-norman
   keep the original until someone asks otherwise. */
.v2 .story-tail{
  font-size:clamp(20px,2.4vw,26px); line-height:1.55; color:var(--ink-true);
}

/* the sizzle reel, under the why columns */
/* sits under the heading, in the left column */
.sizzle{
  position:relative; margin:clamp(22px,3vw,36px) 0 0;
  aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--rule-gold); background:var(--ink);
}
.sizzle-video{width:100%; height:100%; object-fit:cover; display:block}
.sizzle-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transition:opacity .4s ease;
}

/* ---- prose pages ---- */
.prose{padding-block:clamp(110px,14vh,170px)}
.prose-inner{max-width:68ch; margin:0 auto; padding-inline:clamp(16px,5vw,40px)}
.prose h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5vw,54px); line-height:1.1; letter-spacing:.01em;
  margin:.24em 0 0; color:var(--ink);
}
.prose-date{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray-label); margin:.9em 0 0;
}
.prose-lead{
  font-size:clamp(18px,2vw,21px); line-height:1.65; color:var(--gray-dark);
  margin:1.5em 0 0;
}
.prose-sec{margin-top:2.6em}
.prose-sec h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(21px,2.4vw,27px); line-height:1.25; color:var(--ink);
  margin:0 0 .6em;
}
.prose-sec p{
  font-size:clamp(16px,1.7vw,18px); line-height:1.7; color:var(--gray-dark);
  margin:0 0 1em; max-width:62ch;
}
.prose-sec p:last-child{margin-bottom:0}

/* ---- consent bar ---- */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; flex-wrap:wrap; gap:14px 22px;
  align-items:center; justify-content:center;
  padding:16px clamp(16px,4vw,40px);
  background:rgba(12,12,13,.96); border-top:1px solid rgba(232,188,76,.3);
  color:var(--gray-text);
  transform:translateY(100%); transition:transform .4s ease;
}
/* display:none while hidden, so a dismissed bar is out of the hit test at
   once rather than 400ms later — a full-width bar at the bottom sits over the
   footer, and an invisible one that still catches taps has shipped here before.
   The reveal is an animation rather than a JS-toggled class: an animation runs
   itself the moment the element is displayed, where a class added on the next
   frame depends on requestAnimationFrame, which does not fire in a background
   tab. Same trap as the drawer's visibility transition. */
.cookie[hidden]{display:none}
.cookie:not([hidden]){animation:cookie-up .4s ease forwards}
.cookie.is-down{animation:none; transform:translateY(100%)}
@keyframes cookie-up{from{transform:translateY(100%)} to{transform:none}}
.cookie-text{
  margin:0; font-size:14px; line-height:1.5; max-width:62ch;
  color:var(--gray-soft);
}
.cookie-text a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.cookie-text a:hover{color:var(--gold-light)}
.cookie-acts{display:flex; gap:10px; flex-shrink:0}
.cookie-btn{
  font:inherit; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 20px; border-radius:2px; cursor:pointer;
  border:1px solid rgba(232,188,76,.45); background:transparent;
  color:var(--gold-light); transition:background .2s ease, color .2s ease;
}
.cookie-btn:hover{background:rgba(232,188,76,.14)}
.cookie-yes{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.cookie-yes:hover{background:var(--gold-light); color:var(--ink)}
@media (max-width:640px){
  .cookie{justify-content:flex-start}
  .cookie-acts{width:100%}
  .cookie-btn{flex:1}
}
@media (prefers-reduced-motion: reduce){
  .cookie{transition:none}
  .cookie:not([hidden]){animation:none; transform:none}
}
/* Once frames are arriving the still has nothing left to cover. */
.sizzle[data-started] .sizzle-poster{opacity:0; pointer-events:none}
.sizzle-btn{
  position:absolute; inset:0; margin:auto; padding:0;
  width:clamp(70px,8.5vw,104px); height:clamp(70px,8.5vw,104px);
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,11,.55); border:1.5px solid var(--gold);
  border-radius:50%; color:var(--gold); cursor:pointer;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.sizzle-btn:hover{background:rgba(10,10,11,.78); color:var(--gold-light); transform:scale(1.05)}
.sizzle-btn svg{width:40%; height:40%; fill:currentColor}

/* Once the sound is on, the invitation has been accepted: the center button
   and the caption give way to the controls. */
.sizzle[data-playing="audio"] .sizzle-btn,
.sizzle[data-playing="audio"] .sizzle-caption{opacity:0; pointer-events:none}
.sizzle[data-playing="audio"] .sizzle-bar{opacity:1; pointer-events:auto; transform:none}

.sizzle-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:clamp(8px,1.2vw,14px);
  padding:clamp(10px,1.4vw,15px) clamp(12px,1.6vw,18px);
  background:linear-gradient(0deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.55) 70%, transparent 100%);
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.sizzle-ctl{
  flex:0 0 auto; width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:50%;
  color:var(--gold); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.sizzle-ctl:hover{color:var(--gold-light); background:rgba(232,188,76,.14)}
.sizzle-ctl svg{width:19px; height:19px; fill:currentColor; display:block}
.sizzle-ctl[hidden]{display:none}

/* only one glyph of each pair shows at a time */
.ico-pause,.ico-off{display:none}
.sizzle[data-paused] .ico-play{display:block}
.sizzle[data-paused] .ico-pause{display:none}
.sizzle:not([data-paused]) .ico-play{display:none}
.sizzle:not([data-paused]) .ico-pause{display:block}
.sizzle[data-muted] .ico-on{display:none}
.sizzle[data-muted] .ico-off{display:block}

.sizzle-time{
  flex:0 0 auto; font-family:var(--f-ui); font-size:13px;
  letter-spacing:.1em; color:var(--gray-soft); font-variant-numeric:tabular-nums;
}

/* the scrubber is a real range input, so keyboard and screen readers work
   without reimplementing a slider */
.sizzle-seek{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:40px; height:4px; margin:0;
  border-radius:2px; cursor:pointer; background:rgba(255,255,255,.22);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:var(--p,0%) 100%; background-repeat:no-repeat;
}
.sizzle-seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border:0;
  border-radius:50%; background:var(--gold); cursor:pointer;
}
.sizzle-seek::-moz-range-thumb{
  width:13px; height:13px; border:0; border-radius:50%;
  background:var(--gold); cursor:pointer;
}
.sizzle-seek:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold); outline-offset:4px;
  /* Spelled out although the :where() rule above covers them: this rule is
     here to be found. Nothing may come between the previous } and the
     selector, and nothing before the declarations - a reader using a pattern
     rather than a parser treats a leading comment as part of what it is
     matching, and stops seeing the rule at all. */
}

/* fullscreen: the frame stops being a 16:9 box and the video letterboxes */
.sizzle:fullscreen{aspect-ratio:auto; width:100%; height:100%; border:0; margin:0}
.sizzle:fullscreen .sizzle-video{object-fit:contain; background:var(--ink-deep)}

/* the pulse: what tells you the button is live rather than decoration */
.sizzle-ring{
  position:absolute; inset:-2px; border-radius:50%;
  border:1.5px solid var(--gold); pointer-events:none; opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .sizzle-ring{animation:sizzlePulse 2.6s var(--ease) infinite}
}
@keyframes sizzlePulse{
  0%{transform:scale(1); opacity:.85}
  70%,100%{transform:scale(1.6); opacity:0}
}
.sizzle[data-playing="audio"] .sizzle-ring{animation:none; opacity:0}

.sizzle-caption{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:14px 18px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-soft); pointer-events:none;
  background:linear-gradient(0deg, rgba(10,10,11,.85) 0%, transparent 100%);
}

/* programming: watermark strips behind, pillar badge on each card */
.pillars-v2{position:relative; overflow:hidden}
.pillars-v2 .band-head,.pillars-v2 .grid-3{position:relative}
/* the mark's own pillars, ringless, rather than two plain gradient bars */
.pillars-watermark{
  position:absolute; right:5%; top:36px;
  width:clamp(150px,17vw,240px);
  opacity:.12; pointer-events:none;
}
.pillars-watermark svg{width:100%; height:auto; display:block}
/* the mark itself carries the ring, so the badge needs no border of its own */
.card-mark{width:64px; height:64px; flex:0 0 auto}
.card-approach.card-v2{gap:20px}
.card-pillar.card-v2{gap:22px}

/* now in development */
.dev{
  background:#efebe3;
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,4.5vw,60px);
  align-items:center; max-width:var(--max-wide); margin-inline:auto;
}
/* The title card carries its own lettering, so the frame follows the image's
   16:9 rather than a fixed height — a taller box crops the wordmark off both
   ends and the card stops saying what it says. */
.dev-art{
  position:relative; aspect-ratio:16/9;
  border:1px solid var(--rule-brass); overflow:hidden;
}
.dev-art img{width:100%; height:100%; object-fit:cover}
.dev-body{display:flex; flex-direction:column; gap:22px}
.dev-body .eyebrow{color:var(--red)}
.dev-body h2{font-family:var(--f-head); font-size:clamp(28px,3.6vw,38px); color:var(--ink-true)}
.dev-tagline{
  font-family:var(--f-body); font-weight:300; font-style:italic;
  font-size:clamp(19px,2.2vw,24px); line-height:1.4; color:var(--gray-dark);
}
.dev-hosts{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid rgba(184,134,42,.3);
}
.dev-host{
  width:64px; height:64px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  border:1.5px solid var(--gold-deep);
}
/* Faces sit high in a portrait; a centered square crop lands on the chest. */
.dev-host img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.dev-host-names{display:flex; flex-direction:column; justify-content:center; gap:2px}
.dev-host-names strong{
  font-family:var(--f-head); font-weight:400; font-size:16px; color:var(--ink-true);
}
.dev-host-names span{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-label);
}

/* footer: three columns over a legal bar */
.footer-v2{
  background:var(--ink-deep); border-top:1px solid var(--rule-gold);
  padding:0; display:block; text-align:left;
}
.footer-v2-cols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(32px,4.5vw,60px);
  max-width:var(--max-wide); margin-inline:auto;
  padding:clamp(56px,7vw,90px) var(--gutter) 60px;
}
.footer-v2-brand{display:flex; flex-direction:column; gap:22px}
.footer-v2-lockup{display:flex; align-items:center; gap:14px}
.footer-v2-lockup .mark-nav{width:44px; height:44px}
.footer-v2-lockup span{
  font-family:var(--f-display); font-size:20px; letter-spacing:.08em; color:var(--gold);
}
.footer-v2-brand p{
  max-width:320px; font-family:var(--f-body); font-weight:300; font-style:italic;
  font-size:20px; line-height:1.5; color:#9a9a9e;
}
.footer-v2-col{display:flex; flex-direction:column; gap:16px}
.footer-v2-col > span:first-child{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-muted);
}
.footer-v2-col a,.footer-v2-col span:not(:first-child){font-size:17px; color:var(--gray-text)}
.footer-v2-col a[href^="mailto"]{color:var(--gold)}
.footer-v2-legal a{color:var(--gray-muted); text-decoration:none}
.footer-v2-legal a:hover{color:var(--gold)}
.footer-v2-col a:hover{color:var(--gold-light)}
.footer-v2-legal{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  max-width:var(--max-wide); margin-inline:auto;
  padding:26px var(--gutter); border-top:1px solid rgba(232,188,76,.14);
  font-size:13px; color:var(--gray-muted);
}
.footer-v2-legal .est{letter-spacing:.18em; text-transform:uppercase}

@media (max-width:1080px){
  .why,.dev,.footer-v2-cols{grid-template-columns:1fr}
  .why::before{width:8px}
  /* one column: nothing to stick beside, and pinning text over the reel
     while it scrolls past would be worse than just letting it flow */
  .why-body{position:static; top:auto}
  /* That inset exists to hold the heading off the red spine in the two-column
     layout. Stacked, it only pushes the heading, eyebrow and reel out of line
     with their own paragraph — 14px adrift on a phone, 25px on a tablet. The
     spine is 8px and sits well inside the gutter, so nothing needs clearing. */
  .why-head{padding-left:0}
  .pillars-watermark{display:none}
  .footer-v2-cols{gap:38px}
}

/* ---------- motion ----------
   Three gestures, all additive. Every starting state lives inside a guard, so
   a browser without the feature — or a visitor who asked for less motion —
   renders the finished state and loses nothing.

   1. cards cascade instead of the whole grid arriving at once
   2. the hero composite drifts, and its content recedes as it leaves
   3. the red spine grows down the side of "Why The Second Act"
*/

/* 1. staggered cards. Scoped to .card-v2, which exists only on /home2, so the
      original page keeps its single-block reveal. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal .card-v2{opacity:0; transform:translateY(22px)}
  .js .reveal.reveal-in .card-v2{
    opacity:1; transform:none;
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .js .reveal.reveal-in .card-v2:nth-child(2){transition-delay:.09s}
  .js .reveal.reveal-in .card-v2:nth-child(3){transition-delay:.18s}
}

/* 4. hero entrance, on load.
      The image and .hero-inner already carry the scroll-driven animations
      below, and two animations on one element both writing transform means
      the last one wins. So the entrance rides the wrapper and the children
      instead, and the two compose rather than fight: .hero-bg scales while
      the img inside it drifts. */
@media (prefers-reduced-motion:no-preference){
  .hero-v2 .hero-bg{animation:heroIn 1.6s var(--ease) both}
  @keyframes heroIn{
    from{opacity:0; transform:scale(1.07)}
    to  {opacity:1; transform:scale(1)}
  }
  .hero-v2 .hero-inner > *{animation:heroRise .9s var(--ease) both}
  .hero-v2 .hero-inner > *:nth-child(1){animation-delay:.20s}
  .hero-v2 .hero-inner > *:nth-child(2){animation-delay:.33s}
  .hero-v2 .hero-inner > *:nth-child(3){animation-delay:.46s}
  .hero-v2 .hero-inner > *:nth-child(4){animation-delay:.59s}
  @keyframes heroRise{
    from{opacity:0; transform:translateY(18px)}
    to  {opacity:1; transform:none}
  }
}

/* 2 and 3 ride a scroll-driven timeline: no listeners, no JS, and the work
   happens off the main thread. Browsers without it keep the plain reveal. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    /* The hero clips its background, and overflow:hidden makes .hero the
       nearest scroll container for anything inside it. An anonymous view()
       timeline on the image would therefore measure against a box that never
       scrolls and sit inactive forever. Naming the timeline on the section —
       whose own scroll container is the document — is what makes it run. */
    .hero-v2{view-timeline-name:--hero-v2; view-timeline-axis:block}

    /* hero: the photograph drifts slower than the page */
    .hero-v2 .hero-bg img{
      animation:heroDrift linear both;
      animation-timeline:--hero-v2;
      animation-range:cover 0% cover 100%;
      will-change:transform;
    }
    @keyframes heroDrift{
      from{transform:scale(1.07) translateY(-2.6%)}
      to  {transform:scale(1.07) translateY(2.6%)}
    }

    /* hero: the lockup recedes rather than sliding off */
    .hero-v2 .hero-inner{
      animation:heroRecede linear both;
      animation-timeline:--hero-v2;
      animation-range:exit 0% exit 85%;
    }
    @keyframes heroRecede{
      from{opacity:1; transform:none}
      to  {opacity:.12; transform:translateY(-26px)}
    }

    /* the red spine draws down the edge as the section arrives */
    .why{view-timeline-name:--why-spine; view-timeline-axis:block}
    .why::before{
      transform-origin:top center;
      animation:spineGrow linear both;
      animation-timeline:--why-spine;
      animation-range:entry 15% cover 35%;
    }
    @keyframes spineGrow{
      from{transform:scaleY(0)}
      to  {transform:scaleY(1)}
    }
  }
}

/* ---------- reveal ---------- */
/* Scoped to .js so that a blocked or broken script leaves the page fully
   visible rather than hiding everything below the hero. */
.js .reveal{opacity:0; transform:translateY(18px)}
.js .reveal.reveal-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid-3{grid-template-columns:1fr; gap:22px; max-width:760px}
  .story,.contact{grid-template-columns:1fr}
  .story-head{gap:14px}
}
@media (max-width:820px){
  /* backdrop-filter makes an element a containing block for fixed-position
     descendants, so with it on .nav the drawer's top/bottom would resolve
     against the 72px bar instead of the viewport. The bar is already 92%
     opaque, so dropping the blur here costs almost nothing. */
  .nav{
    padding:14px var(--gutter);
    background:rgba(15,15,16,.97);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav-toggle{display:block}
  .nav-cta-desktop{display:none}

  .nav-scrim{
    display:block; position:fixed; inset:0; z-index:60;
    background:rgba(10,10,11,.66);
    opacity:0; transition:opacity .3s var(--ease);
    /* Without this the closed scrim is an invisible sheet over the whole
       viewport that eats every tap on the page beneath it — the toggle
       included. Nothing looks wrong; nothing works. */
    pointer-events:none;
  }
  .nav-scrim[data-open="true"]{
    opacity:1; pointer-events:auto;
    /* only while open, so the page is not sitting under a compositing
       layer for the 99% of the time the drawer is shut */
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }

  /* the drawer itself */
  .nav-menu{
    position:fixed; top:0; right:0; bottom:0; z-index:70;
    width:min(88vw,360px);
    flex-direction:column; align-items:stretch; gap:0; padding:0;
    background:var(--ink-panel);
    border-left:1px solid var(--rule-gold);
    box-shadow:-26px 0 64px rgba(0,0,0,.55);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(102%); visibility:hidden;
    /* visibility is stepped, not eased: it flips to visible the instant the
       drawer opens, and waits for the slide-out before hiding. Transitioning
       it normally leaves the drawer computing as hidden at the moment the
       close button is focused, and focus on a hidden element is refused. */
    transition:transform .34s var(--ease), visibility 0s linear .34s;
  }
  .nav-menu[data-open="true"]{
    transform:none; visibility:visible;
    transition:transform .34s var(--ease), visibility 0s linear 0s;
  }

  /* top: the logo */
  .drawer-head{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:18px var(--gutter);
    border-bottom:1px solid var(--rule-gold);
  }
  .drawer-brand{cursor:default}
  .drawer-brand .mark-nav{width:34px; height:34px}
  .drawer-close{
    flex:0 0 auto; width:40px; height:40px; padding:0; line-height:1;
    background:none; border:1px solid var(--rule-gold); cursor:pointer;
    color:var(--gold); font-size:24px;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .drawer-close:hover{border-color:var(--gold); color:var(--gold-light)}

  /* middle: the menu */
  .drawer-links{
    flex-direction:column; align-items:stretch; gap:0;
    padding:6px var(--gutter) 20px;
  }
  .nav-menu a:not(.btn){
    padding:17px 0; border-bottom:1px solid var(--rule-gold); font-size:15px;
  }

  /* bottom: contact */
  .drawer-foot{
    display:flex; flex-direction:column; gap:18px; margin-top:auto;
    padding:24px var(--gutter) 32px;
    border-top:1px solid var(--rule-gold);
    background:var(--ink-deep);
  }
  .drawer-foot .nav-cta{display:block; text-align:center}
  .drawer-contact{display:flex; flex-direction:column; gap:4px}
  .drawer-label{
    font-size:12px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--gray-muted);
  }
  /* the nav-link treatment upper-cases and tracks out everything in the
     drawer; an address is not a nav label, so it opts back out */
  .drawer-foot a[href^="mailto"]{
    font-family:var(--f-body); font-size:21px; color:var(--gold);
    border:0; padding:0; text-transform:none; letter-spacing:.01em;
  }
  .drawer-loc{font-size:14px; letter-spacing:.05em; color:var(--gray-soft)}

  /* the page behind must not scroll while the drawer is open */
  body.nav-open{overflow:hidden}

  .hero{min-height:88vh}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:420px){
  .brand-sub{letter-spacing:.22em}
  .footer-meta{flex-direction:column; gap:14px}
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .js .reveal{opacity:1; transform:none}
}
@media print{
  .nav,.nav-toggle,.hero-bg,.hero-veil,.form{display:none}
  body{background:#fff; color:#000}
  .band,.footer{padding:24px 0}
  .band-bone,.band-panel,.band-red,.footer{background:#fff}
  .why-body,.closing-pull,.closing-body,.footer-tagline{color:#000}
}