/* ── Meridian Design System ── shared across all pages ──────────── */ /* Fonts are loaded via in each page — no @import needed */ :root{ --navy-900:#0A0F1E;--navy-800:#0E1526;--navy-700:#141C31;--navy-600:#1E2845;--navy-500:#2B3655; --warm-50:#FDFBF6;--warm-100:#F9F7F2;--warm-200:#EEE9DD;--warm-300:#D9CFBC;--warm-400:#B8AD95; --gold-500:#C9A84C;--gold-600:#A88A35;--gold-400:#D9BE6E; --green-500:#2A7D4F;--green-600:#1F6040;--green-400:#3DAF6B;--green-100:rgba(42,125,79,0.10);--green-dark:#3DAF6B; --coral-500:#E8432D;--coral-600:#C5331F; --ink-900:#1A1A1A;--ink-700:#2E2E2E;--ink-500:#5C5C5C; --bg-dark:var(--navy-900); --bg-dark-alt:var(--navy-800); --bg-light:var(--warm-100); --bg-light-alt:var(--warm-50); --fg-on-dark:var(--warm-100); --fg-on-dark-2:#D4CDBD; --fg-on-dark-3:#A8A090; --fg-on-light:var(--ink-900); --fg-on-light-2:var(--ink-700); --fg-on-light-3:var(--ink-500); --accent:var(--gold-500); --accent-hover:var(--gold-600); --accent-alt:var(--coral-500); --rule-dark:rgba(245,240,232,0.14); --rule-light:rgba(10,15,30,0.12); --font-serif:"Roboto Slab", Georgia, serif; --font-sans:"Roboto", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono:"Roboto Mono", ui-monospace, monospace; --container-max:1320px; --container-pad:clamp(24px,5vw,56px); --section-y:clamp(80px,9vw,144px); --r-sm:4px; --r-md:6px; --r-lg:10px; --shadow-md:0 8px 24px -8px rgba(10,15,30,.18),0 2px 6px rgba(10,15,30,.06); --shadow-lift:0 16px 32px -12px rgba(10,15,30,.30); --shadow-dark-lift:0 24px 56px -16px rgba(0,0,0,.7); --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:180ms; --dur-med:320ms; --dur-slow:620ms; } *,*::before,*::after{box-sizing:border-box} img, video, iframe, embed, object{max-width:100%; height:auto} html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; } body{ margin:0; overflow-x:hidden; max-width:100%; width:100%; background:var(--bg-light); color:var(--fg-on-light); font-family:var(--font-sans); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; color:inherit; text-wrap:balance; margin:0; } h1{line-height:1.08; letter-spacing:-0.02em; font-weight:600} h2{line-height:1.1; letter-spacing:-0.015em} h3{line-height:1.2; letter-spacing:-0.008em} h4{line-height:1.3; letter-spacing:0} em{font-style:italic; color:var(--fg-on-light-3)} .bg-dark em, .bg-dark-alt em{color:var(--fg-on-dark-3)} p{margin:0; text-wrap:pretty} a{color:inherit; text-decoration:none} button{font:inherit; cursor:pointer} .container{max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); width:100%} .container-narrow{max-width:900px; margin:0 auto; padding:0 var(--container-pad); width:100%} section, header, footer, nav{max-width:100%; overflow-x:hidden} .section-pad{padding:var(--section-y) 0} .section-pad-sm{padding:clamp(56px,7vw,96px) 0} .bg-dark{background:var(--bg-dark); color:var(--fg-on-dark)} .bg-dark-alt{background:var(--bg-dark-alt); color:var(--fg-on-dark)} .bg-light{background:var(--bg-light)} .bg-light-alt{background:var(--bg-light-alt)} /* ── Eyebrow ─────────────────────────────────────────────────── */ .eyebrow{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); line-height:1.3; display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{content:""; width:22px; height:1px; background:var(--accent)} .eyebrow.muted{color:var(--fg-on-light-3)} .eyebrow.muted::before{background:var(--fg-on-light-3)} .eyebrow.green{color:var(--green-500)} .eyebrow.green::before{background:var(--green-500)} .bg-dark .eyebrow.muted, .bg-dark-alt .eyebrow.muted{color:var(--fg-on-dark-3)} .bg-dark .eyebrow.muted::before, .bg-dark-alt .eyebrow.muted::before{background:var(--fg-on-dark-3)} /* ── Buttons ─────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:18px 28px; border-radius:var(--r-md); border:1.5px solid transparent; font-family:var(--font-sans); font-size:16px; font-weight:500; letter-spacing:.005em; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); white-space:nowrap; } .btn-primary{background:var(--accent); color:var(--navy-900)} .btn-primary:hover{background:var(--gold-600); color:var(--warm-100); transform:translateY(-2px); box-shadow:var(--shadow-lift)} .btn-outline-light{color:var(--fg-on-dark); border-color:var(--fg-on-dark)} .btn-outline-light:hover{background:var(--warm-100); color:var(--navy-900); transform:translateY(-2px)} .btn-outline-dark{color:var(--fg-on-light); border-color:var(--ink-900)} .btn-outline-dark:hover{background:var(--ink-900); color:var(--warm-100); transform:translateY(-2px)} .btn-lg{padding:22px 34px; font-size:17px} /* ── Noise overlay ───────────────────────────────────────────── */ .noise{position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* ── NAV ─────────────────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:50; background:var(--bg-dark); color:var(--fg-on-dark); border-bottom:1px solid var(--rule-dark); height:76px; display:flex; align-items:center; } .nav .container{display:flex; align-items:center; justify-content:space-between; width:100%; gap:32px} .nav-mark{display:flex; align-items:center; gap:14px; color:var(--fg-on-dark)} .nav-mark svg{width:30px; height:30px; flex-shrink:0} .nav-mark .wm{font-family:var(--font-serif); font-size:20px; font-weight:500; letter-spacing:-.01em; line-height:1} .nav-mark .tag{display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-on-dark-3); margin-top:4px} .nav-links{display:flex; align-items:center; gap:36px} .nav-link{color:var(--fg-on-dark-2); font-size:15px; transition:color var(--dur-fast)} .nav-link:hover{color:var(--accent)} .nav-cta{padding:12px 20px; font-size:14px} /* ── Hamburger ───────────────────────────────────────────────── */ .nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; flex-shrink:0; background:none; border:none; cursor:pointer; padding:0; } .nav-toggle span{ display:block; width:22px; height:2px; background:#F9F7F2; border-radius:2px; transition:transform 220ms ease, opacity 160ms; pointer-events:none; } .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── Mobile drawer ───────────────────────────────────────────── */ .nav-drawer{ display:none; position:fixed; top:76px; left:0; right:0; z-index:48; width:100%; max-width:100vw; background:var(--bg-dark); border-bottom:1px solid var(--rule-dark); flex-direction:column; padding:8px var(--container-pad) 24px; overflow-x:hidden; } .nav-drawer.open{display:flex} .nav-drawer a{ display:block; padding:14px 0; border-bottom:1px solid var(--rule-dark); color:var(--fg-on-dark-2); font-size:16px; text-decoration:none; } .nav-drawer a:last-child{border-bottom:none} .nav-drawer a:hover{color:var(--accent)} .nav-drawer .btn-primary{ display:block; margin-top:12px; text-align:center; background:var(--gold-500); color:var(--navy-900); padding:14px 24px; border-radius:var(--r-md); font-weight:500; } @media(max-width:820px){ .nav-links{display:none} .nav-toggle{display:flex} } /* ── Page hero (subpages) ────────────────────────────────────── */ .page-hero{ background:var(--bg-dark); color:var(--fg-on-dark); position:relative; overflow:hidden; padding:clamp(72px,9vw,120px) 0 clamp(72px,9vw,120px); } .page-hero > *{position:relative; z-index:1} .crumb{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-on-dark-3); display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:24px; } .crumb a{color:var(--fg-on-dark-3); transition:color var(--dur-fast)} .crumb a:hover{color:var(--accent)} .crumb .sep{color:var(--fg-on-dark-3); opacity:.5} .crumb b{color:var(--fg-on-dark); font-weight:500} .page-h1{ margin-top:24px; font-size:clamp(2.2rem, 5.2vw, 4.25rem); letter-spacing:-0.02em; line-height:1.08; } .page-h1 em{color:var(--gold-400); font-style:italic} .page-lead{ margin-top:32px; font-size:clamp(1.125rem, 1.4vw, 1.375rem); line-height:1.55; color:var(--fg-on-dark-2); max-width:680px; } .page-hero-actions{margin-top:40px; display:flex; flex-wrap:wrap; gap:16px} /* ── Section header ──────────────────────────────────────────── */ .section-h2{ margin-top:24px; font-size:clamp(1.875rem, 3.8vw, 3.125rem); letter-spacing:-0.018em; line-height:1.08; } .section-h2 em{color:var(--fg-on-light-3)} .bg-dark .section-h2 em, .bg-dark-alt .section-h2 em{color:var(--fg-on-dark-3)} .section-lead{margin-top:24px; font-size:1.125rem; line-height:1.6; color:var(--fg-on-light-2); max-width:640px} .bg-dark .section-lead, .bg-dark-alt .section-lead{color:var(--fg-on-dark-2)} .section-head{max-width:780px} /* ── Bullet check list ───────────────────────────────────────── */ .checklist{padding:0; list-style:none; display:flex; flex-direction:column; gap:14px} .checklist li{ display:grid; grid-template-columns:28px 1fr; gap:16px; align-items:start; padding:18px 0; border-top:1px solid var(--rule-light); font-size:1.0625rem; line-height:1.5; color:var(--fg-on-light); } .checklist li:last-child{border-bottom:1px solid var(--rule-light)} .bg-dark .checklist li, .bg-dark-alt .checklist li{border-color:var(--rule-dark); color:var(--fg-on-dark)} .bg-dark .checklist li:last-child, .bg-dark-alt .checklist li:last-child{border-bottom-color:var(--rule-dark)} .checklist .ck{ width:28px; height:28px; border-radius:50%; background:rgba(201,168,76,.12); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; margin-top:-2px; } .bg-dark .checklist .ck, .bg-dark-alt .checklist .ck{background:rgba(201,168,76,.18)} .checklist li b{display:block; font-family:var(--font-serif); font-weight:600; font-size:1.1875rem; letter-spacing:-0.01em; margin-bottom:2px} .checklist li b em{color:var(--fg-on-light-3); font-style:italic} .bg-dark .checklist li b em, .bg-dark-alt .checklist li b em{color:var(--fg-on-dark-3)} /* ── Cards ───────────────────────────────────────────────────── */ .card{ background:var(--warm-50); border:1px solid var(--rule-light); border-radius:var(--r-md); padding:clamp(28px,3vw,40px); position:relative; transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med); } .card-stripe::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); border-radius:var(--r-md) var(--r-md) 0 0; } .card-stripe-green::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--green-500); border-radius:var(--r-md) var(--r-md) 0 0; } /* Green checkmark utility */ .ck-green{ width:28px; height:28px; border-radius:50%; background:rgba(42,125,79,.12); display:flex; align-items:center; justify-content:center; color:var(--green-500); flex-shrink:0; margin-top:-2px; } .bg-dark .ck-green{background:rgba(42,125,79,.22); color:var(--green-400)} .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:rgba(201,168,76,.4)} .bg-dark .card, .bg-dark-alt .card{ background:rgba(255,255,255,0.025); border-color:var(--rule-dark); color:var(--fg-on-dark); } /* ── FAQ ─────────────────────────────────────────────────────── */ .faq-list{display:flex; flex-direction:column; border-top:1px solid var(--rule-light)} .faq-item{border-bottom:1px solid var(--rule-light)} .faq-q{ width:100%; text-align:left; padding:26px 0; background:none; border:0; display:flex; align-items:center; justify-content:space-between; gap:24px; font-family:var(--font-serif); font-size:clamp(1.125rem,1.55vw,1.4375rem); font-weight:500; letter-spacing:-0.012em; color:var(--fg-on-light); line-height:1.25; transition:color var(--dur-fast); cursor:pointer; list-style:none; } .faq-q::-webkit-details-marker{display:none} .faq-q:hover{color:var(--accent)} .faq-chev{flex-shrink:0; color:var(--accent); transition:transform var(--dur-med) var(--ease-out)} .faq-item[open] .faq-chev{transform:rotate(180deg)} .faq-a{padding:0 0 28px; font-size:1.0625rem; line-height:1.65; color:var(--fg-on-light-2); max-width:760px} .faq-a b{color:var(--fg-on-light); font-weight:600} /* ── CTA block ───────────────────────────────────────────────── */ .cta-block{position:relative; overflow:hidden} .cta-inner{position:relative; z-index:1; text-align:center; max-width:880px; margin:0 auto} .cta-h{font-size:clamp(2rem, 4vw, 3.5rem); letter-spacing:-0.018em; line-height:1.08; color:var(--fg-on-dark)} .cta-h em{color:var(--gold-400)} .cta-sub{margin-top:28px; font-size:clamp(1.0625rem,1.3vw,1.25rem); line-height:1.55; color:var(--fg-on-dark-2); max-width:620px; margin-left:auto; margin-right:auto} .cta-actions{margin-top:44px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap} /* ── FOOTER ──────────────────────────────────────────────────── */ .foot{background:var(--navy-900); color:var(--fg-on-dark-2); padding:48px 0 36px; border-top:1px solid var(--rule-dark)} .foot .container{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap} .foot-meta{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-on-dark-3); line-height:1.6} .foot-meta span{color:var(--fg-on-dark-2)} .foot-nav{display:flex; gap:24px; flex-wrap:wrap} .foot-nav a{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-on-dark-3); transition:color var(--dur-fast)} .foot-nav a:hover{color:var(--accent)} /* ── Form fields ─────────────────────────────────────────────── */ .field{display:flex; flex-direction:column; gap:8px} .field label, .field-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-on-light-3); font-weight:500} .bg-dark .field label, .bg-dark-alt .field label, .bg-dark .field-label, .bg-dark-alt .field-label{color:var(--fg-on-dark-3)} .field input, .field select, .field textarea{ width:100%; padding:14px 16px; border:1px solid var(--rule-light); background:#fff; color:var(--fg-on-light); font-family:var(--font-sans); font-size:15.5px; line-height:1.5; border-radius:var(--r-md); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,168,76,.18); } .field input::placeholder, .field textarea::placeholder{color:var(--ink-500)} .field select{ -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; } .field textarea{min-height:120px; resize:vertical} .field-help{font-size:13px; color:var(--fg-on-light-3); line-height:1.5; margin-top:4px} .bg-dark .field-help, .bg-dark-alt .field-help{color:var(--fg-on-dark-3)} /* ── Pills / tags ────────────────────────────────────────────── */ .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--rule-light); color:var(--fg-on-light-2); background:var(--warm-50); } .pill.gold{background:rgba(201,168,76,.10); border-color:rgba(201,168,76,.30); color:var(--gold-600)} .pill.coral{background:rgba(232,67,45,.08); border-color:rgba(232,67,45,.25); color:var(--coral-600)} .pill.green{background:rgba(42,125,79,.10); border-color:rgba(42,125,79,.30); color:var(--green-600)} .bg-dark .pill, .bg-dark-alt .pill{background:rgba(255,255,255,0.04); border-color:var(--rule-dark); color:var(--fg-on-dark-2)} .bg-dark .pill.gold, .bg-dark-alt .pill.gold{background:rgba(201,168,76,.14); border-color:rgba(201,168,76,.35); color:var(--gold-400)}