/* Full Proof Beverage Group — fullproofbeverage.com
   Design tokens copied verbatim from the design handoff (tokens/*.css). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
/* Base — navy scale */
--navy-950:#080F26;--navy-900:#0A1633;--navy-800:#10214A;--navy-700:#14295C;--navy-600:#1B3A7A;--navy-500:#24479A;
/* Base — blue accent scale */
--blue-600:#1E5BC6;--blue-500:#2E6BD6;--blue-400:#4C84E4;--blue-300:#7FA8E8;--blue-200:#B4CBF2;--blue-100:#DDE7FA;
/* Base — gold (from logo) */
--gold-600:#8F6E2A;--gold-500:#B08D3E;--gold-300:#D4B878;--gold-100:#F3E9D3;
/* Base — neutrals */
--white:#FFFFFF;--gray-50:#F5F7FB;--gray-100:#EEF1F6;--gray-200:#DDE2EB;--gray-300:#C2C9D6;--gray-500:#6B7385;--gray-700:#3A4256;--gray-900:#171C2B;
/* Semantic — surfaces */
--surface-page:var(--white);--surface-section:var(--gray-100);--surface-card:var(--white);--surface-card-dark:var(--navy-700);--surface-inset:var(--gray-50);
/* Semantic — text */
--text-display:var(--navy-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-on-dark:var(--white);--text-on-dark-muted:var(--blue-200);--text-link:var(--blue-500);--text-link-hover:var(--blue-600);
/* Semantic — interactive */
--accent-gold:var(--gold-500);--action-primary:var(--blue-500);--action-primary-hover:var(--blue-600);--action-primary-text:var(--white);--focus-ring:0 0 0 3px rgba(46,107,214,.35);
/* Borders */
--border-subtle:var(--gray-200);--border-strong:var(--gray-300);--border-on-dark:rgba(255,255,255,.18);
/* Type */
--font-serif-display:'Source Serif 4',Georgia,serif;
--font-sans:'Public Sans',system-ui,sans-serif;
--text-hero:clamp(40px,5vw,56px);--text-h1:40px;--text-h2:30px;--text-h3:22px;
--leading-display:1.15;--leading-body:1.6;--tracking-caps:.08em;
/* Space / radii / shadows */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-sm:3px;--radius-md:6px;--radius-lg:10px;--radius-pill:999px;
--shadow-card:0 1px 3px rgba(10,22,51,.08),0 8px 24px rgba(10,22,51,.08);
--shadow-card-hover:0 2px 6px rgba(10,22,51,.10),0 16px 40px rgba(10,22,51,.14);
--container-max:1160px;--gutter:24px;
--ease-standard:cubic-bezier(.4,0,.2,1);--dur-fast:120ms;--dur-med:220ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text-body);font-size:15px;line-height:var(--leading-body);margin:0;background:var(--surface-page)}
h1,h2,h3{font-family:var(--font-serif-display);color:var(--text-display);line-height:var(--leading-display);margin:0;font-weight:600}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- Icons (inline Lucide SVGs) ---------- */
.icon{display:inline-block;flex:none}
.icon svg{width:100%;height:100%;display:block}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-sans);font-weight:600;font-size:14px;padding:10px 20px;border-radius:4px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1.2;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-lg{font-size:15px;padding:13px 26px}
.btn-primary{background:var(--action-primary);color:var(--action-primary-text)}
.btn-primary:hover{background:var(--action-primary-hover);color:var(--action-primary-text)}
.btn-secondary{background:transparent;color:var(--action-primary);border-color:var(--action-primary)}
.btn-secondary:hover{background:var(--blue-100);color:var(--action-primary)}
.btn-ghost-dark{background:transparent;color:#fff;border-color:var(--border-on-dark)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px;flex-wrap:wrap}
.nav-brand{display:inline-flex;align-items:center;gap:12px}
.nav-brand img{height:44px;display:block}
.nav-brand span{font-family:var(--font-serif-display);font-weight:600;font-size:20px;color:#fff;letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-on-dark-muted);border-bottom:2px solid transparent;padding-bottom:4px}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff;border-bottom-color:#fff}
.nav-links .btn{margin-left:0}

/* ---------- Eyebrow ---------- */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-600);margin-bottom:14px}
.eyebrow--dark{color:var(--gold-300)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 45%,var(--navy-600) 100%);color:#fff}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:72px}
.hero h1{color:#fff;font-size:var(--text-hero)}
.hero-lede{color:var(--text-on-dark-muted);font-size:16px;margin:20px 0 28px;max-width:480px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.photo-slot{background:linear-gradient(135deg,var(--navy-800),var(--blue-400));border-radius:var(--radius-md);overflow:hidden}
.photo-slot img{width:100%;height:100%;object-fit:cover;display:block}
.hero .photo-slot{height:320px}

/* ---------- Math band ---------- */
.band-gray{background:var(--surface-section)}
.math-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{border-top:2px solid var(--gold-500);padding-top:16px}
.stat-num{font-family:var(--font-serif-display);font-size:30px;font-weight:600;color:var(--text-display);white-space:nowrap}
.stat-label{font-size:13px;color:var(--text-muted);margin-top:6px}
.math-note{font-size:14px;color:var(--text-muted);max-width:720px;margin:24px 0 0}

/* ---------- Service cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-dark{background:var(--surface-card-dark);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--dur-med) var(--ease-standard),transform var(--dur-med) var(--ease-standard)}
.card-dark:hover{transform:translateY(-2px)}
.card-media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy-800),var(--blue-400))}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:var(--space-5)}
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.card-kicker{display:block;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-300);margin-bottom:4px}
.card-title{font-family:var(--font-serif-display);font-size:18px;font-weight:600;color:#fff}
.card-blurb{font-size:13px;color:var(--text-on-dark-muted);line-height:1.6;margin:0}

/* ---------- Why now ---------- */
.band-navy{background:var(--navy-900)}
.whynow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8px}
.whynow-num{font-family:var(--font-serif-display);font-size:40px;font-weight:600;color:var(--gold-500)}
.whynow-grid h3{color:#fff;font-size:var(--text-h3);margin:10px 0}
.whynow-grid p{color:var(--text-on-dark-muted);font-size:14px;margin:0}

/* ---------- Why Full Proof ---------- */
.whyus-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px;margin-top:8px}
.whyus-item{display:flex;gap:16px}
.whyus-item .icon{color:var(--gold-600)}
.whyus-item h3{font-family:var(--font-sans);font-size:18px;font-weight:600;color:var(--text-display);margin:0 0 6px}
.whyus-item p{font-size:14px;color:var(--text-body);margin:0}

/* ---------- Leaders ---------- */
.leaders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.leader-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-med) var(--ease-standard),transform var(--dur-med) var(--ease-standard)}
.leader-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.leader-photo{aspect-ratio:4/5}
.leader-photo img{width:100%;height:100%;object-fit:cover;display:block}
.leader-body{padding:var(--space-5)}
.leader-body h3{font-size:20px;margin:0}
.leader-title{font-size:13px;font-weight:600;color:var(--gold-600);margin:4px 0 10px}
.leader-body p{font-size:14px;color:var(--text-body);margin:0}

/* ---------- CTA band ---------- */
.band-gradient{background:linear-gradient(120deg,var(--navy-900),var(--navy-700))}
.cta-center{text-align:center}
.cta-center h2{color:#fff;font-size:var(--text-h2)}
.cta-center .cta-line{color:var(--text-on-dark-muted);font-size:15px;margin:14px 0 26px}

/* ---------- Pricing hero ---------- */
.pricing-hero-inner{max-width:760px;margin:0 auto;text-align:center;padding-top:40px;padding-bottom:160px}
.pricing-hero-inner h1{color:#fff;font-size:44px}
.pricing-hero-inner p{color:var(--text-on-dark-muted);font-size:16px;margin:16px 0 0}

/* ---------- Tier cards ---------- */
.tiers-grid{margin-top:-120px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:16px}
.tier{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-6);display:flex;flex-direction:column;position:relative}
.tier-name{font-size:13px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-600)}
.tier-price{font-family:var(--font-serif-display);font-size:38px;font-weight:600;color:var(--text-display);margin:10px 0 2px}
.tier-price span{font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--text-muted)}
.tier-desc{font-size:14px;color:var(--text-body);margin:8px 0 18px}
.tier ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.tier li{display:flex;gap:10px;font-size:14px;color:var(--text-body)}
.tier li::before{content:"—";color:var(--gold-500);font-weight:700}
.tier--featured{background:var(--navy-800);border:1px solid var(--gold-500);box-shadow:var(--shadow-card-hover)}
.tier--featured .tier-name{color:var(--gold-300)}
.tier--featured .tier-price{color:#fff}
.tier--featured .tier-price span{color:var(--text-on-dark-muted)}
.tier--featured .tier-desc{color:var(--text-on-dark-muted)}
.tier--featured li{color:#fff}
.tier-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold-500);color:var(--navy-950);font-size:11px;font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:4px 14px;border-radius:var(--radius-pill);white-space:nowrap}

/* ---------- Compare table ---------- */
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;margin-top:8px}
.table-scroll{overflow-x:auto}
.compare{width:100%;border-collapse:collapse;font-size:14px}
.compare thead tr{background:var(--navy-900);color:#fff}
.compare th{padding:14px 16px;font-weight:600;text-align:center;width:110px}
.compare th:first-child{text-align:left;padding:14px 20px;width:auto}
.compare tbody tr{border-top:1px solid var(--border-subtle)}
.compare tbody tr:nth-child(even){background:var(--gray-50)}
.compare td{padding:12px 20px;color:var(--text-body)}
.compare td.yes,.compare td.no{text-align:center;font-weight:700;padding:12px 16px}
.compare td.yes{color:var(--gold-600)}
.compare td.no{color:var(--gray-300)}

/* ---------- Contact ---------- */
#contact{scroll-margin-top:40px}
.contact-inner{max-width:640px;margin:0 auto;text-align:center}
.contact-inner .contact-logo{height:110px;border-radius:8px;margin-bottom:20px}
.contact-inner h2{color:#fff;font-size:var(--text-h2)}
.contact-inner .cta-line{color:var(--text-on-dark-muted);font-size:15px;margin:14px 0 26px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;max-width:560px;margin:0 auto}
.contact-form label{display:block;font-size:12px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-300);margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;font-family:var(--font-sans);font-size:14px;color:var(--text-display);background:#fff;border:1px solid transparent;border-radius:4px;padding:11px 12px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:var(--focus-ring)}
.contact-form textarea{resize:vertical;min-height:96px}
.form-field--full{grid-column:1 / -1}
.form-submit{grid-column:1 / -1;text-align:center;margin-top:6px}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950);color:var(--text-on-dark-muted);padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;font-size:13px;flex-wrap:wrap;gap:12px}
.footer-brand{font-family:var(--font-serif-display);font-weight:600;font-size:16px;color:#fff}

/* ---------- Section padding helpers ---------- */
.pad-56{padding-top:56px;padding-bottom:56px}
.pad-64{padding-top:64px;padding-bottom:64px}
.pad-72{padding-top:72px;padding-bottom:72px}
.section-h2{font-size:var(--text-h2);max-width:640px;margin-bottom:36px}

/* ---------- Responsive (mobile stacking — not part of the desktop design) ---------- */
@media (max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:32px;padding-top:24px;padding-bottom:48px}
.hero .photo-slot{height:240px}
.cards-3,.whynow-grid,.leaders-grid,.tiers-grid{grid-template-columns:1fr}
.whyus-grid{grid-template-columns:1fr;gap:28px}
.math-grid{grid-template-columns:1fr 1fr}
.stat-num{white-space:normal}
.tiers-grid{margin-top:-100px}
.tier--featured{order:-1}
.pricing-hero-inner{padding-bottom:140px}
.pricing-hero-inner h1{font-size:34px}
.nav{justify-content:center}
.nav-links{gap:20px;flex-wrap:wrap;justify-content:center}
.footer-inner{justify-content:center;text-align:center}
.contact-form{grid-template-columns:1fr}
}
@media (max-width:520px){
.math-grid{grid-template-columns:1fr}
}
