/* ==========================================================================
   Archo Advocacy — shared stylesheet for all redesign mockups
   Brand: navy #05153A · gold #D1B98B · pale #E1E5F2 · Avenir
   Every page links this file, then adds a small page-specific <style> block.
   ========================================================================== */

@font-face{font-family:'Avenir';src:url('fonts/Avenir_Light.ttf') format('truetype');font-weight:300 500;font-style:normal;font-display:swap;}
@font-face{font-family:'Avenir';src:url('fonts/Avenir_Black.ttf') format('truetype');font-weight:600 900;font-style:normal;font-display:swap;}

:root{
  /* ---- CORE (official palette) ---- */
  --navy:#05153A;        /* Navy */
  --champagne:#D1B98B;   /* Champagne (primary gold) */
  --lavender:#E1E2F5;    /* Lavender */
  --white:#FFFFFF;       /* White */
  --black:#000000;       /* Black */
  /* ---- SUPPORTING NEUTRALS (official) ---- */
  --slate:#5B6B8C;       /* Slate */
  --graphite:#2A3140;    /* Graphite */
  --mist:#F3F4F9;        /* Mist */
  --sand:#EFE8D9;        /* Sand */
  /* ---- EXTENDED ACCENTS (official) ---- */
  --bronze:#8A6E3E;      /* Bronze */
  --teal:#1F7A8C;        /* Teal */
  --mauve:#8C6A88;       /* Mauve */
  /* ---- SEMANTIC / DATA (official) ---- */
  --sage:#4F8A6B;        /* positive */
  --amber:#C8922B;       /* watch */
  --clay:#B0503F;        /* risk */
  --sky:#3D7BB5;         /* info */

  /* ---- derived / working tokens (built on the official palette) ---- */
  --navy-dark:#010919; --navy-2:#1B3C66; --navy-3:#3C4A6B;
  --pale:var(--lavender); --pale-2:#EEF1F8; --surface:var(--mist);
  --tan:var(--champagne); --tan-deep:#B89863; --tan-soft:#E8D9B8;
  --ink:#05153A; --ink-2:#1B2A4A; --ink-3:#4A587A; --ink-4:#8892AB; --rule:#D6DCEA;
  --f:'Avenir','Avenir Next','Helvetica Neue',Arial,sans-serif; --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--f);color:var(--ink);background:var(--white);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.5;}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.022em;line-height:1.04;}
h1{letter-spacing:-.03em;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;}

/* eyebrow */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:10px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--tan-deep);}
.eyebrow.on-navy{color:var(--tan);} .eyebrow.on-navy .dot{background:var(--tan);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:16px 28px;border-radius:2px;transition:.18s ease;cursor:pointer;border:1.5px solid transparent;font-family:var(--f);}
.btn-primary{background:var(--navy);color:var(--white);} .btn-primary:hover{background:var(--navy-dark);transform:translateY(-1px);}
.btn-gold{background:var(--tan);color:var(--navy);} .btn-gold:hover{background:var(--tan-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule);} .btn-ghost:hover{border-color:var(--navy);}
.btn-ghost.on-navy{color:#fff;border-color:rgba(255,255,255,.3);} .btn-ghost.on-navy:hover{border-color:var(--tan);color:var(--tan);}
.btn.sm{padding:12px 20px;font-size:12px;}

/* ---------- HEADER ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--rule);}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:42px;height:42px;}
.brand .bn{font-weight:600;font-size:17px;letter-spacing:.04em;}
.brand .bs{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);}
.nav-links a:hover,.nav-links a.active{color:var(--navy);}
.nav-links a.active{border-bottom:2px solid var(--tan-deep);padding-bottom:4px;}
.nav-links a.has::after{content:"▾";font-size:9px;margin-left:5px;color:var(--ink-4);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .link{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- PAGE HERO (navy) ---------- */
.phero{background:var(--navy);color:#fff;padding:112px 0 96px;position:relative;overflow:hidden;}
.phero .wrap{position:relative;z-index:1;}
.phero h1{font-size:clamp(56px,8vw,104px);color:#fff;margin-top:22px;letter-spacing:-.035em;line-height:.98;font-weight:900;}
.phero h1 em{font-style:normal;font-weight:300;color:var(--tan);letter-spacing:-.02em;}
.phero p{font-size:20px;color:#B9C3DC;margin-top:26px;max-width:620px;line-height:1.55;font-weight:300;}
.phero .actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- SECTION HELPERS ---------- */
.sec{padding:96px 0;}
.sec.surface{background:var(--surface);}
.sec-head{max-width:760px;margin-bottom:56px;}
.sec-head h2{font-size:clamp(36px,4.8vw,56px);margin-top:18px;letter-spacing:-.028em;line-height:1.02;}
.sec-head h2 em{font-style:normal;font-weight:300;color:var(--tan-deep);letter-spacing:-.018em;}
.sec-head p{font-size:17px;line-height:1.6;color:var(--ink-3);margin-top:20px;}

/* card grid */
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.card{background:var(--white);border:1px solid var(--rule);border-radius:8px;padding:34px 30px;transition:border-color .2s ease, transform .2s ease;}
.card:hover{transform:translateY(-4px);border-color:var(--navy);}
.card .num{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tan-deep);margin-bottom:18px;}
.card .icon{width:60px;height:60px;border-radius:50%;background:var(--pale);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.card .icon svg{width:30px;height:30px;}
.card h3{font-size:24px;letter-spacing:-.02em;margin-bottom:12px;}
.card h4{font-size:19px;letter-spacing:-.018em;margin-bottom:10px;}
.card p{font-size:15px;line-height:1.6;color:var(--ink-3);}

/* feature list */
.feat{list-style:none;margin:0;padding:0;}
.feat li{font-size:14px;color:var(--ink-2);padding:11px 0;display:flex;gap:11px;border-top:1px solid var(--rule);}
.feat li:first-child{border-top:none;}
.feat li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tan-deep);margin-top:7px;flex:none;}

/* ---------- FINAL CTA (navy-dark) ---------- */
.cta{background:var(--navy-dark);color:#fff;padding:128px 0;text-align:center;position:relative;overflow:hidden;}
.cta .inner{position:relative;z-index:1;}
.cta h2{font-size:clamp(40px,5.6vw,72px);color:#fff;letter-spacing:-.032em;line-height:1.0;} .cta h2 em{font-style:normal;font-weight:300;color:var(--tan);letter-spacing:-.02em;}
.cta p{font-size:19px;color:#B9C3DC;margin:24px auto 38px;max-width:560px;line-height:1.55;}
.cta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer.site{background:var(--navy);color:#fff;padding:72px 0 36px;}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(225,229,242,.16);}
.f-brand .brand .bn{color:#fff;}
.f-brand p{font-size:14px;line-height:1.65;color:#9FAAC6;margin-top:18px;max-width:300px;}
.f-col h5{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);font-weight:700;margin-bottom:18px;}
.f-col a{display:block;font-size:14px;color:#C4CCE0;margin-bottom:11px;}
.f-col a:hover{color:#fff;}
.f-sub p{font-size:13.5px;color:#9FAAC6;line-height:1.6;margin-bottom:14px;}
.f-sub form{display:flex;gap:8px;flex-wrap:wrap;}
.f-sub input{flex:1;min-width:150px;padding:12px 14px;border:1.5px solid rgba(255,255,255,.22);border-radius:2px;background:rgba(255,255,255,.06);color:#fff;font-family:var(--f);font-size:14px;}
.f-sub input::placeholder{color:#8794B4;} .f-sub input:focus{outline:none;border-color:var(--tan);}
.f-contact a,.f-contact span{display:block;font-size:14px;color:#C4CCE0;margin-bottom:11px;}
.f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:12px;color:#8794B4;letter-spacing:.04em;flex-wrap:wrap;gap:14px;}
.f-bot .soc{display:flex;gap:12px;}
.f-bot .soc a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;}
.f-bot .soc a:hover{border-color:var(--tan);color:var(--tan);}

/* annotation banner (mockup only — remove in build) */
.anno{background:var(--tan-soft);color:var(--navy);font-size:13px;letter-spacing:.02em;text-align:center;padding:11px 20px;font-weight:500;}
.anno b{font-weight:700;}
.anno a{text-decoration:underline;}

/* breadcrumb */
.crumb{font-size:12px;letter-spacing:.06em;color:var(--tan-soft);text-transform:uppercase;}
.crumb a{color:var(--tan);}

@media(max-width:980px){
  .wrap{padding:0 24px;}
  .cols-3,.cols-2,.f-top{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .phero{padding:72px 0 64px;}
  .sec{padding:64px 0;}
  .cta{padding:88px 0;}
}

/* =========================================================================
   Taste-sample alignment — high-specificity overrides
   Beats inline <style> blocks in inner pages via the `html` prefix.
   References: Apple, Superpower, Vanmoof (see Taste Samples/*).
   ========================================================================= */
/* Hero — bigger, mixed case, scaled tracking */
html .phero h1{font-size:clamp(56px,8vw,104px);text-transform:none;letter-spacing:-.035em;line-height:.98;color:#fff;}
html .phero h1 em{font-style:normal;font-weight:300;color:var(--tan);letter-spacing:-.02em;}
html .phero p{font-size:19px;line-height:1.55;}
html .phero{padding:112px 0 96px;}
/* Kill decorative radial glows — none of the references use them */
html .phero::before,html .cta::before,html .hero-glow,html .aid::before,html .outcomes::before{display:none !important;}
/* Section headings — drop all-caps, scale up, tighten tracking */
html .sec-head h2,html .position h2,html .process .head h2,html .apart .lead h2,
html .aid .head h2,html .outcomes h2,html .insights .ins-top h2,html .guide h2,
html .testi h2,html .cta h2,html .feature h2{text-transform:none;letter-spacing:-.028em;line-height:1.02;}
html .cta h2{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.032em;}
/* Card / sub-heading titles — drop all-caps */
html .card h3,html .card h4,html .pillar h4,html .persona h4,html .step h3,
html .s-card h3,html .sauce h4,html .outcomes h4,html .ins-card h3,
html .t-card h3,html .sub-bar h3{text-transform:none;letter-spacing:-.018em;}
/* Cards — 8px radius, flat elevation on hover (Vanmoof/Apple discipline) */
html .card,html .s-card,html .step,html .t-card,html .persona,html .ins-card .thumb{border-radius:8px;}
html .card:hover,html .s-card:hover{box-shadow:none;border-color:var(--navy);}
/* Nav — Apple-style translucent */
html header.site{background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--rule);}