/* ============================================================
   TORQUE — shared stylesheet
   Built on the LIVE talktotorque.com identity (canonical):
     Type:   Barlow Condensed (wordmark/headings) + IBM Plex Sans (body/labels)
     Base:   #050505 flat black · hairline borders · 44px grid texture
     Accent: #05d4a8 (solid + hairline fades only — NO decorative gradient fills)
   Only the two live fonts are used. No JetBrains Mono, no Fraunces.
   ============================================================ */

:root{
  --bg:#050505;
  --bg-soft:#10100f;
  --panel:#0d0d0c;
  --line:#161614;
  --line-strong:#23231f;
  --hair:rgba(255,255,255,.05);
  --hair-soft:rgba(255,255,255,.04);
  --text:#f5f2ea;
  --muted:#928d84;
  --muted-2:#59554f;
  --accent:#05d4a8;
  --accent-strong:#14f0c1;
  --accent-dim:rgba(5,212,168,.18);
  --amber:#ffb454;
  --max:1440px;
  --wrap:1120px;
  --pad:clamp(20px,3vw,48px);
  --radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-weight:300;
  color:var(--text);
  background:
    radial-gradient(circle at 22% 18%, rgba(5,212,168,.08), transparent 22%),
    radial-gradient(circle at 82% 76%, rgba(5,212,168,.06), transparent 18%),
    linear-gradient(180deg,#040404 0%,#070707 100%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
/* 44px grid texture — exactly as live */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.05));
}
.page{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--bg)}

.wrap{width:min(100%,var(--wrap));margin:0 auto;padding:0 var(--pad)}

/* ── shared type ── */
.h-display{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:lowercase;letter-spacing:-.02em;line-height:.9}
.h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(2rem,4vw,3.2rem)}
.eyebrow{
  font-family:"IBM Plex Sans",sans-serif;font-weight:500;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);display:inline-block}
.lede{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:300;max-width:56ch}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:0 22px;min-height:52px;border:1px solid transparent;border-radius:var(--radius);
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary{background:var(--accent);color:#03100d}
.btn--primary:hover{background:var(--accent-strong);transform:translateY(-1px)}
.btn--ghost{border-color:var(--line-strong);color:var(--muted)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ── nav ── */
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(5,5,5,.76)}
.site-header__inner{width:min(100%,var(--max));margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:.03em;text-transform:lowercase;color:var(--accent)}
.brand__line{width:14px;height:1px;background:var(--accent)}
.header-link{color:var(--accent);font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:color .18s ease}
.header-link:hover{color:var(--accent-strong)}

/* ═══ MEDIA SLOT SYSTEM (from drafts, re-skinned) ═══
   Empty by default. Put <video>/<svg> in .media-slot + add data-active. */
.has-media{position:relative;overflow:hidden}
.media-slot{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s}
.has-media[data-active] .media-slot{opacity:1}
.media-slot video,.media-slot svg,.media-slot canvas{width:100%;height:100%;object-fit:cover}
.media-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,5,.55), rgba(5,5,5,.86))}
.has-media > .wrap,.has-media > .content{position:relative;z-index:2}

/* ── section rhythm ── */
.section{padding:clamp(64px,9vw,112px) 0}
.section-head{max-width:60ch}
.section-head .h2{margin-top:16px}
.section-head p{margin-top:14px;color:var(--muted);font-size:1.05rem;font-weight:300}
.block-label{font-family:"IBM Plex Sans",sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);border:1px dashed var(--line-strong);border-radius:99px;padding:4px 12px;display:inline-block;margin-bottom:22px}

/* ── readiness selector (Block A) ── */
.sel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:820px){.sel-cards{grid-template-columns:1fr}}
.sel-card{position:relative;background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--radius);padding:28px 26px;overflow:hidden;display:flex;flex-direction:column;min-height:210px;transition:transform .2s ease, border-color .2s ease}
.sel-card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);transition:width .3s ease}
.sel-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.sel-card:hover::after{width:100%}
.sel-card .num{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sel-card h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;font-size:1.5rem;line-height:1.05;margin:16px 0 8px}
.sel-card p{color:var(--muted);font-size:.95rem;font-weight:300;flex:1}
.sel-card .go{margin-top:18px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:8px;transition:color .2s ease, gap .2s ease}
.sel-card:hover .go{color:var(--accent);gap:12px}

/* ── capability families (Block B) — accent spine, NO icons ── */
.families{background:linear-gradient(180deg,var(--bg),#070706)}
.fam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.fam-grid{grid-template-columns:1fr}}
.fam-card{position:relative;background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease, border-color .2s ease}
.fam-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);z-index:2}
.fam-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.fam-body{position:relative;z-index:2;padding:30px 28px 28px 32px}
.fam-kicker{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.fam-title{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;font-size:1.7rem;line-height:1.02;margin:12px 0 10px}
.fam-desc{color:var(--muted);font-size:.98rem;font-weight:300;max-width:42ch}
.fam-go{margin-top:20px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:8px;transition:color .2s ease, gap .2s ease}
.fam-card:hover .fam-go{color:var(--accent);gap:12px}
/* reserved glyph slot: dormant + invisible in production (per locked card decision) */
.glyph-slot{display:none}

/* ── audit CTA band ── */
.cta-band{background:var(--bg-soft)}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media(max-width:820px){.cta-grid{grid-template-columns:1fr;gap:28px}}
.cta-grid .lede{margin-top:16px}

/* ── footer ── */
.site-footer{padding:56px 0 64px}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot-brand{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.15rem;text-transform:lowercase;color:var(--accent)}
.foot-tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:8px}
.foot-mail{color:var(--muted);font-size:.84rem}
.foot-mail:hover{color:var(--accent)}

/* ── scroll reveal ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.media-slot video{display:none}}

/* ============================================================
   HOMEPAGE HERO — carried verbatim from the live site
   (the canonical hero: lowercase oversized wordmark bleeding off-frame)
   ============================================================ */
:root{
  --wordmark:clamp(7rem,18vw,20rem);
  --tagline:clamp(2rem,3vw,3rem);
}
.hero{
  width:min(100%,var(--max));margin:0 auto;
  min-height:clamp(400px,56vh,580px);
  display:grid;grid-template-columns:minmax(280px,.44fr) minmax(0,.56fr);
  padding:clamp(16px,4vh,40px) var(--pad);
}
.hero__copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:8px 0}
.hero__body{padding:0 0 12px;max-width:32rem}
.tagline{margin:0 0 20px;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;font-size:var(--tagline);line-height:.98;letter-spacing:-.03em;white-space:nowrap}
.hook{margin:0 0 20px;color:var(--muted);font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.72;font-weight:300;white-space:nowrap}
.support-inline{margin:0 0 22px;color:var(--muted);font-size:.84rem;line-height:1.6;white-space:nowrap}
.support-inline strong{color:var(--accent);font-family:"Barlow Condensed",sans-serif;font-size:1.05em;font-weight:700;letter-spacing:.02em;text-transform:lowercase}
.hero-rule{width:32px;height:1px;background:var(--accent);margin-bottom:22px}
.capture-form{display:grid;gap:16px;max-width:340px}
.capture-form input{width:100%;color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--line-strong);padding:14px 0;outline:none;transition:border-color .18s ease}
.capture-form input::placeholder{color:var(--muted-2)}
.capture-form input:focus{border-color:var(--accent)}
.hero__footer{padding-top:28px}
.hero__footer a{color:var(--muted-2);font-size:.72rem;letter-spacing:.04em;transition:color .18s ease}
.hero__footer a:hover{color:var(--muted)}
.hero__wordmark-wrap{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:34px 0 22px clamp(18px,2vw,28px)}
.wordmark{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:var(--wordmark);line-height:.82;font-weight:800;letter-spacing:-.03em;color:var(--accent);text-transform:lowercase;position:relative;right:-.14em;bottom:-.03em;animation:drift 14s ease-in-out infinite;white-space:nowrap;user-select:none}
.hero__wordmark-wrap::after{content:"";position:absolute;right:0;bottom:22px;width:min(34vw,300px);height:1px;background:linear-gradient(90deg,rgba(5,212,168,0),rgba(5,212,168,.75));pointer-events:none}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,4px,0)}}
.scroll-cue{margin-top:20px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);display:inline-flex;align-items:center;gap:8px}
@media(max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero__copy{border-right:0;min-height:auto;padding-bottom:28px}
  .hero__wordmark-wrap{padding:0;min-height:30vh;align-items:flex-end;justify-content:flex-start}
  .wordmark{font-size:clamp(8rem,28vw,16rem);right:auto;bottom:-.04em}
}
@media(max-width:720px){
  .hero{min-height:auto}
  .hero__copy{padding-top:24px}
  .tagline{max-width:10ch;white-space:normal}
  .hook,.support-inline{white-space:normal}
  .wordmark{margin-left:-.02em;font-size:clamp(7.5rem,35vw,10rem);right:-.12em;bottom:-.08em}
  .hero__wordmark-wrap{min-height:22vh;justify-content:flex-end;padding:4px 0 0}
}