/* ============================================================
   WORKBUILT ACADEMY — shared stylesheet
   Pages: index.html, trades.html, preservation.html
   ============================================================ */

:root{
  --ink:#0B0906; --paper:#EFE6D2;
  /* trade side */
  --navy:#0F1A2E; --navy-2:#071423; --gold:#D4A73E; --gold-lt:#F0CC85; --ember:#C1451F;
  /* preservation side */
  --blue:#1F3F72; --blue-lt:#3D6FB4; --orange:#D9732A; --cream:#F4F0E4;
  --font-display:'Alfa Slab One', serif;
  --font-cond:'Barlow Condensed', sans-serif;
  --font-body:'Barlow', sans-serif;
  --font-mono:'Space Mono', monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--ink); color:var(--paper); font-family:var(--font-body); overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:400; }
.eyebrow{ font-family:var(--font-mono); font-weight:700; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; }
::selection{ background:var(--ember); color:var(--paper); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ===== nav (shared) ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:rgba(10,8,6,0.62); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,167,62,0.22);
}
.nav .word{ font-family:var(--font-display); font-size:1.05rem; color:var(--paper); letter-spacing:0.01em; }
.nav .word span{ display:block; font-family:var(--font-mono); font-size:0.52rem; letter-spacing:0.24em; color:var(--gold-lt); margin-top:-2px; }
.nav .tagline{ font-family:var(--font-cond); font-weight:700; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--paper); }
.nav .tagline .accent{ color:var(--orange); }
@media (max-width:980px){ .nav .tagline{ display:none; } }
.nav .links{ display:flex; align-items:center; gap:26px; }
.nav .links a{ font-family:var(--font-cond); font-weight:700; font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--paper); opacity:0.8; }
.nav .links a:hover{ opacity:1; color:var(--gold-lt); }
.nav-spacer{ height:64px; }
@media (max-width:760px){ .nav .links{ display:none; } }

.nav.nav-light{ background:rgba(244,240,228,0.82); border-bottom:1px solid rgba(31,63,114,0.18); }
.nav.nav-light .word{ color:var(--blue); }
.nav.nav-light .word span{ color:var(--orange); }
.nav.nav-light .tagline{ color:var(--blue); }
.nav.nav-light .links a{ color:var(--blue); opacity:0.85; }
.nav.nav-light .links a:hover{ opacity:1; color:var(--orange); }

/* ===== buttons ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-cond); font-weight:700;
  font-size:1rem; letter-spacing:0.03em; text-transform:uppercase; padding:15px 28px; border:2px solid;
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; z-index:1; cursor:pointer; min-height:44px;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover::before{ transform:scaleX(1); }
.btn-gold{ background:transparent; border-color:var(--gold); color:var(--gold-lt); }
.btn-gold::before{ background:var(--gold); }
.btn-gold:hover{ color:var(--navy); transform:translateY(-3px); box-shadow:0 14px 28px rgba(212,167,62,0.28); }
.btn-blue{ background:var(--blue); border-color:var(--blue); color:var(--cream); }
.btn-blue::before{ background:var(--orange); border-color:var(--orange); }
.btn-blue:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:0 14px 28px rgba(217,115,42,0.3); }
.btn-orange{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.btn-orange:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(217,115,42,0.35); }
.btn-outline-blue{ background:transparent; border-color:var(--blue); color:var(--blue); }
.btn-outline-blue::before{ background:var(--blue); }
.btn-outline-blue:hover{ color:var(--cream); transform:translateY(-3px); }
.btn-sm{ padding:10px 18px; font-size:0.82rem; min-height:40px; }
.btn-full{ width:100%; justify-content:center; }

/* ===== education hero (index) ===== */
.hero{ position:relative; padding:150px 24px 80px; text-align:center; overflow:hidden; background:radial-gradient(120% 90% at 50% -10%, var(--navy-2), var(--ink) 70%); }
.hero-bg{ position:absolute; inset:0; z-index:0; opacity:0.55; }
.hero-bg .silhouette{ position:absolute; bottom:0; width:100%; height:46%; background:linear-gradient(0deg, rgba(0,0,0,0.9), transparent); }
.hero h1{ position:relative; z-index:2; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.05; max-width:920px; margin:0 auto 18px; color:var(--paper); }
.hero h1 .accent{ color:var(--gold-lt); }
.hero .support{ position:relative; z-index:2; font-family:var(--font-cond); font-weight:700; font-size:clamp(1rem,1.6vw,1.3rem); letter-spacing:0.04em; color:#DCD3BE; max-width:640px; margin:0 auto; }
.hero .support .accent{ color:var(--ember); }
.hero .choose{ position:relative; z-index:2; margin-top:26px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-lt); opacity:0.85; }

/* ===== two-path fork (index) ===== */
.fork{ display:flex; min-height:78vh; }
@media (max-width:860px){ .fork{ flex-direction:column; } }
.panel{ position:relative; flex:1; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 28px; }
.panel-trade{ background:radial-gradient(120% 100% at 30% 0%, var(--navy-2), var(--navy) 70%); }
.panel-preservation{ background:linear-gradient(155deg, var(--cream), #EAE3D0 100%); }
.panel .bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.cover-stage{ position:relative; width:min(52vw,240px); margin:0 auto 24px; }
.cover-stage img{ width:100%; border-radius:3px; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.panel-trade .cover-stage img{ box-shadow:0 26px 54px -18px rgba(0,0,0,0.75), 0 0 0 1px rgba(212,167,62,0.25); transform:rotate(-2.5deg); }
.panel-preservation .cover-stage img{ box-shadow:0 26px 54px -18px rgba(31,63,114,0.35), 0 0 0 1px rgba(31,63,114,0.15); transform:rotate(2deg); }
.panel:hover .cover-stage img{ transform:rotate(0deg) scale(1.035); }

.panel .eyebrow{ position:relative; z-index:2; }
.panel-trade .eyebrow{ color:rgba(240,204,133,0.85); }
.panel-preservation .eyebrow{ color:var(--blue-lt); }
.panel .hook{ position:relative; z-index:2; font-family:var(--font-cond); font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); margin:4px 0 16px; }
.panel-trade .hook{ color:var(--gold-lt); }
.panel-preservation .hook{ color:var(--orange); }
.panel .sub{ position:relative; z-index:2; font-size:0.94rem; font-weight:500; max-width:380px; margin:0 auto 22px; }
.panel-trade .sub{ color:#DCD3BE; }
.panel-preservation .sub{ color:#4A4F45; }

.pathways-tag{ position:relative; z-index:2; margin:4px 0 14px; }
.pathways-tag .line1{ font-family:var(--font-mono); font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); }
.pathways-tag .line2{ font-family:var(--font-cond); font-weight:800; font-size:1.05rem; color:var(--orange); margin-top:2px; }
.mini-tiers{ position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; max-width:420px; }
.mini-tier{ font-family:var(--font-mono); font-size:0.66rem; font-weight:700; border:1.5px solid var(--blue); padding:6px 10px; color:var(--blue); background:rgba(255,255,255,0.55); }
.mini-tier b{ display:block; font-family:var(--font-display); font-size:0.86rem; color:var(--orange); margin-top:1px; }

.center-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20;
  width:52px; height:52px; border-radius:999px; background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:0.66rem; font-weight:700;
  box-shadow:0 6px 24px rgba(0,0,0,0.45); pointer-events:none;
}
@media (max-width:860px){ .center-mark{ display:none; } }

/* ===== ambient motion ===== */
.ember-field{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.ember{ position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:var(--gold-lt); opacity:0; box-shadow:0 0 6px 1px rgba(240,204,133,0.7); animation:rise linear infinite; }
@keyframes rise{ 0%{ opacity:0; transform:translateY(0) translateX(0);} 10%{ opacity:.85;} 90%{ opacity:.5;} 100%{ opacity:0; transform:translateY(-92vh) translateX(var(--drift,20px));} }
.blueprint{ position:absolute; inset:0; z-index:0; opacity:0.5; background-image:linear-gradient(rgba(31,63,114,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(31,63,114,0.09) 1px, transparent 1px); background-size:34px 34px; animation:grid-drift 26s linear infinite; }
@keyframes grid-drift{ 0%{ background-position:0 0,0 0;} 100%{ background-position:34px 34px,34px 34px;} }
.blueprint-scan{ position:absolute; inset:-10% -20%; z-index:0; background:linear-gradient(100deg, transparent 42%, rgba(217,115,42,0.10) 50%, transparent 58%); animation:sweep 8s linear infinite; }
@keyframes sweep{ 0%{ transform:translateX(-25%);} 100%{ transform:translateX(25%);} }

/* ===== value strip (shared) ===== */
.value-strip{ background:var(--navy-2); border-top:1px solid rgba(212,167,62,0.2); padding:26px 24px; }
.value-strip ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:44px; flex-wrap:wrap; }
.value-strip li{ display:flex; align-items:center; gap:10px; font-family:var(--font-cond); font-weight:700; font-size:0.82rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--paper); }
.value-strip li svg{ width:20px; height:20px; color:var(--gold-lt); flex-shrink:0; }
.value-strip.light{ background:var(--cream); border-top:1px solid rgba(31,63,114,0.15); }
.value-strip.light li{ color:var(--blue); }
.value-strip.light li svg{ color:var(--orange); }

/* ===== footer ===== */
.site-footer{ background:var(--ink); padding:22px 24px; text-align:center; font-family:var(--font-mono); font-size:0.68rem; color:rgba(239,230,210,0.5); }
.site-footer a{ color:var(--gold-lt); }
.site-footer a:hover{ text-decoration:underline; }

/* ===== inner page hero (trades / preservation) ===== */
.page-hero{ padding:130px 24px 60px; }
.page-hero-inner{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:52px; align-items:center; }
@media (max-width:860px){ .page-hero-inner{ grid-template-columns:1fr; text-align:center; gap:26px; } }
.page-hero .cover-lg{ position:relative; }
.page-hero .cover-lg img{ width:100%; border-radius:3px; }
.trades-hero .cover-lg img{ box-shadow:0 30px 60px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(212,167,62,0.25); transform:rotate(-1.5deg); }
.preservation-hero .cover-lg img{ box-shadow:0 30px 60px -20px rgba(31,63,114,0.35), 0 0 0 1px rgba(31,63,114,0.15); transform:rotate(1.2deg); }
@media (max-width:860px){ .page-hero .cover-lg{ max-width:260px; margin:0 auto; } }

.trades-hero{ background:radial-gradient(120% 100% at 30% 0%, var(--navy-2), var(--navy) 70%); }
.preservation-hero{ background:linear-gradient(155deg, var(--cream), #EAE3D0 100%); position:relative; overflow:hidden; }

.page-hero h1{ font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.04; margin:10px 0 14px; }
.trades-hero h1{ color:var(--paper); }
.preservation-hero h1{ color:var(--blue); position:relative; z-index:2; }
.trades-hero .eyebrow{ color:rgba(240,204,133,0.85); }
.preservation-hero .eyebrow{ color:var(--blue-lt); position:relative; z-index:2; }
.page-hero .support-line{ font-family:var(--font-cond); font-weight:700; font-size:1.05rem; margin-bottom:14px; }
.trades-hero .support-line{ color:var(--ember); }
.preservation-hero .support-line{ color:var(--orange); position:relative; z-index:2; }
.page-hero p.body-copy{ font-size:0.98rem; font-weight:500; max-width:480px; margin:0 0 18px; position:relative; z-index:2; }
.trades-hero p.body-copy{ color:#DCD3BE; }
.preservation-hero p.body-copy{ color:#4A4F45; }
@media (max-width:860px){ .page-hero p.body-copy{ margin-left:auto; margin-right:auto; } }
.page-hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:2; }
@media (max-width:860px){ .page-hero .cta-row{ justify-content:center; } }

/* ===== give-back seal ===== */
.give-seal{ position:relative; display:inline-flex; align-items:center; gap:14px; margin:18px 0; padding:12px 18px 12px 12px; background:rgba(212,167,62,0.08); border:1px solid rgba(212,167,62,0.35); }
.give-seal .badge{ width:64px; height:64px; flex-shrink:0; }
.give-seal .badge svg{ width:100%; height:100%; }
.give-seal .text b{ display:block; font-family:var(--font-cond); font-weight:800; color:var(--gold-lt); font-size:0.92rem; letter-spacing:0.02em; }
.give-seal .text span{ display:block; font-family:var(--font-body); font-size:0.8rem; color:#CDC4AC; margin-top:2px; max-width:360px; }

/* ===== audience line ===== */
.audience-line{ font-family:var(--font-mono); font-size:0.76rem; font-weight:700; max-width:480px; margin:0 0 22px; position:relative; z-index:2; }
.trades-hero .audience-line{ color:#B9AF97; }
.preservation-hero .audience-line{ color:#6B7280; }

/* ===== five trades section ===== */
.section-band{ padding:64px 24px; }
.section-band.dark{ background:var(--ink); }
.section-band.light{ background:var(--cream); }
.section-head{ text-align:center; max-width:720px; margin:0 auto 40px; }
.section-head h2{ font-size:clamp(1.4rem,2.8vw,2rem); }
.dark .section-head h2{ color:var(--paper); }
.light .section-head h2{ color:var(--blue); }

.trade-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1100px; margin:0 auto; }
@media (max-width:920px){ .trade-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trade-grid{ grid-template-columns:1fr; } }
.trade-card{ border:1.5px solid rgba(212,167,62,0.3); padding:20px 16px; text-align:center; transition:border-color .2s, transform .2s; }
.trade-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.trade-card svg{ width:30px; height:30px; color:var(--gold-lt); margin-bottom:10px; }
.trade-card h3{ font-family:var(--font-cond); font-weight:800; font-size:1rem; color:var(--paper); text-transform:uppercase; margin-bottom:6px; }
.trade-card p{ font-size:0.8rem; color:#CDC4AC; margin:0; line-height:1.4; }

/* ===== pathway cards (preservation) ===== */
.pathways-band{ padding:20px 24px 64px; background:var(--cream); }
.pathways-banner{ max-width:1100px; margin:0 auto 22px; text-align:center; background:var(--navy); color:var(--paper); padding:12px 18px; }
.pathways-banner b{ font-family:var(--font-cond); font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.pathways-banner span{ display:block; font-family:var(--font-mono); font-size:0.7rem; color:var(--gold-lt); margin-top:2px; letter-spacing:0.06em; }

.pathways-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:920px){ .pathways-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pathways-grid{ grid-template-columns:1fr; } }
.pathway-card{ background:#fff; border:1.5px solid rgba(31,63,114,0.18); border-top:4px solid var(--blue); padding:20px 18px; display:flex; flex-direction:column; }
.pathway-card.featured{ border-top-color:var(--orange); box-shadow:0 14px 30px -14px rgba(217,115,42,0.35); }
.pathway-card .p-name{ font-family:var(--font-display); font-size:1.05rem; color:var(--blue); }
.pathway-card .p-price{ font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:var(--orange); margin-bottom:8px; }
.pathway-card .p-q{ font-family:var(--font-mono); font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--blue-lt); margin-bottom:8px; }
.pathway-card ul{ list-style:none; margin:0 0 16px; padding:0; flex:1; }
.pathway-card li{ font-size:0.84rem; color:#3A3F35; margin-bottom:6px; padding-left:18px; position:relative; }
.pathway-card li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700; }

/* ===== what you'll learn ===== */
.learn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto; }
@media (max-width:640px){ .learn-grid{ grid-template-columns:1fr; } }
.learn-card{ display:flex; gap:14px; align-items:flex-start; }
.learn-card .num{ font-family:var(--font-display); font-size:1.6rem; color:rgba(31,63,114,0.25); line-height:1; flex-shrink:0; }
.learn-card h3{ font-family:var(--font-cond); font-weight:800; font-size:1rem; color:var(--blue); text-transform:uppercase; margin-bottom:4px; }
.learn-card p{ font-size:0.86rem; color:#4A4F45; margin:0; line-height:1.45; }

/* ===== closing CTA band ===== */
.closing-cta{ background:var(--orange); padding:52px 24px; text-align:center; }
.closing-cta h2{ color:var(--ink); font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:12px; }
.closing-cta p{ font-family:var(--font-cond); font-weight:700; font-size:1rem; color:rgba(11,9,6,0.8); max-width:560px; margin:0 auto 22px; }
.closing-cta .btn{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.closing-cta .btn::before{ background:var(--navy); border-color:var(--navy); }
.closing-cta .btn:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,0.3); }

.closing-cta-dark{ background:var(--navy); padding:52px 24px; text-align:center; }
.closing-cta-dark h2{ color:var(--paper); font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:12px; }
.closing-cta-dark p{ font-family:var(--font-cond); font-weight:700; font-size:1rem; color:#CDC4AC; max-width:560px; margin:0 auto 22px; }

/* ===== back link ===== */
.back-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; opacity:0.75; position:relative; z-index:2; }
.back-link:hover{ opacity:1; }
.trades-hero .back-link{ color:var(--gold-lt); }
.preservation-hero .back-link{ color:var(--blue); }