/* Design tokens — Oakland Family Dental / Waterford */
:root {
  --ink: #0f2c54;
  --ink-2: #143664;
  --panel: #1a3f72;
  --navy-grad-1: #1d4a82;
  --cream: #f3f8fc;
  --gold: #31b8e0;
  --gold-2: #1f9ec9;
  --teal: #1488b0;
  --muted: #aebfd3;
  --line: rgba(255,255,255,.14);
  --txt: #1b2c3e;
  --radius: 16px;
  --maxw: 1280px;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Archivo", sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5.25rem;
  --shadow-card: 0 20px 44px -36px rgba(12,26,46,.5);
  --shadow-mega: 0 30px 60px -24px rgba(12,26,46,.35);
  --transition: 0.2s ease;
  --bp-sm: 560px;
  --bp-md: 920px;
  --bp-lg: 1080px;
  --bp-xl: 1280px;
  --focus: 0 0 0 3px rgba(49,184,224,.45);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Base */
body {
  font-family: var(--font-body);
  color: var(--txt);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--gold); color: #06283d; padding: 0.75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


html{scroll-behavior:smooth}






.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.85rem 1.6rem;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.2s;white-space:nowrap}
.btn-gold{background:var(--gold);color:#06283d;box-shadow:0 8px 20px -8px rgba(49,184,224,.55)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{border-color:var(--line);color:var(--cream)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--ink-2)}
.btn-light{background:#fff;color:var(--ink);border-color:#e0e6ee}
.btn-light:hover{background:#eef2f7}
.arrow{font-size:1.05em;line-height:1}

/* Utility bar */
.util{background:var(--ink);color:#dbe5f0;font-size:.82rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px}
.util .left{display:flex;align-items:center;gap:22px}
.util .star{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:7px}
.util .sep{opacity:.7}
.util .right{display:flex;align-items:center;gap:22px}
.util a{color:#dbe5f0}
.util a:hover{color:#fff}
.util .phone{color:var(--gold);font-weight:700}

/* Nav */
header.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e7ecf2;box-shadow:0 1px 0 rgba(12,26,46,.03)}
.nav .wrap{display:flex;align-items:center;height:78px;gap:26px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,var(--gold),var(--teal));display:grid;place-items:center;color:#fff;font-weight:900;font-size:.95rem;font-family:var(--font-display)}
.brand .name{font-family:var(--font-display);font-weight:900;font-size:1.28rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.brand .name b{color:var(--gold-2)}
.brand .name small{display:block;font-weight:600;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-top:3px;font-family:var(--font-body)}
nav.menu{display:flex;align-items:stretch;gap:4px;height:100%;margin-left:8px}
.menu-item{position:relative;display:flex;align-items:center}
.menu-item > a.top{display:flex;align-items:center;gap:8px;height:100%;padding:0 16px;font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#2b3e52;line-height:1.08;cursor:pointer;border-bottom:3px solid transparent;transition:.15s}
.menu-item > a.top .caret{font-size:.7rem;color:#9aa9b8;transition:.2s}
.menu-item:hover > a.top{color:var(--gold-2);border-bottom-color:var(--gold)}
.menu-item:hover > a.top .caret{transform:rotate(180deg);color:var(--gold-2)}
.nav .right-cta{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.mega{position:absolute;top:100%;left:0;width:760px;background:#fff;border:1px solid #e7ecf2;border-radius:18px;box-shadow:0 30px 60px -24px rgba(12,26,46,.35);padding:24px;display:grid;grid-template-columns:240px 1fr;gap:22px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.18s;z-index:120}
.menu-item:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.menu-item.align-right .mega{left:auto;right:0}
.mega-left{display:flex;flex-direction:column}
.mega-left .explore{display:flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9aa9b8;margin-bottom:14px}
.mega-left .explore::before{content:"";width:20px;height:2px;background:var(--gold)}
.mega-left a.lnk{font-size:.96rem;font-weight:500;color:#33485c;padding:9px 0;border-bottom:1px solid #f0f3f7;transition:.15s}
.mega-left a.lnk:hover{color:var(--gold-2);padding-left:5px}
.mega-left .all{margin-top:16px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:#f3f6fa;border:1px solid #e7ecf2;padding:.6rem 1rem;border-radius:999px}
.mega-left .all:hover{background:var(--gold);color:#06283d;border-color:var(--gold)}
.mega-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mcard{position:relative;height:118px;border-radius:13px;overflow:hidden;display:flex;align-items:flex-end}
.mcard .bg{position:absolute;inset:0;background-color:#1c3550;background-size:cover;background-position:center;transition:.4s}
.mcard .ov{position:relative;z-index:2;width:100%;padding:12px 14px;background:linear-gradient(transparent,rgba(8,18,32,.9));color:#fff}
.mcard .ov b{display:block;font-family:var(--font-display);font-weight:800;font-size:.96rem}
.mcard .ov span{font-size:.74rem;color:#cfdcea}
.mcard:hover .bg{transform:scale(1.06)}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.7rem;color:var(--ink);cursor:pointer}

/* Home hero */
.hero{background:radial-gradient(130% 120% at 78% -10%,var(--navy-grad-1) 0%,var(--ink) 58%);color:var(--cream);position:relative;overflow:hidden}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:54px 54px;opacity:.7}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding:64px 30px 78px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold)}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.5rem);color:#fff;font-weight:900;letter-spacing:-.02em}
.hero h1 em{display:block;font-style:italic;color:var(--gold);font-weight:800}
.hero .lede{margin:22px 0 0;font-size:1.12rem;color:#c4d2e2;max-width:30rem}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.hero .actions .call{display:inline-flex;align-items:center;gap:9px;color:#dce6f1;font-weight:600;font-size:.96rem}
.hero .actions .call .ic{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold)}
.trust{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:36px}
.trust span{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#b9c8d8}
.trust span i{color:var(--gold);font-style:normal}
.doc-wrap{position:relative}
.doc-card{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#13273e;min-height:560px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.doc-card .photo{position:absolute;inset:0;background-size:cover;background-position:center}
.doc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(8,16,30,.55));z-index:1}
.rating{position:absolute;top:18px;left:18px;z-index:5;background:#fff;color:var(--ink);border-radius:999px;padding:.45rem .85rem;display:flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.rating .stars{color:var(--gold);letter-spacing:1px}
.rating .g{color:#7a8aa0;font-weight:600;font-size:.78rem}
.video{position:absolute;left:26px;bottom:118px;right:60px;z-index:5;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.3);background-size:cover;background-position:center;height:150px;display:flex;align-items:flex-end;padding:14px}
.video::before{content:"";position:absolute;inset:0;background:rgba(8,16,30,.32)}
.video .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#06283d;font-size:1.2rem;box-shadow:0 10px 28px -8px rgba(0,0,0,.6);z-index:2}
.video .label{position:relative;z-index:2;color:#fff;font-size:.82rem;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.nameplate{position:absolute;left:18px;right:18px;bottom:18px;z-index:5;background:rgba(11,22,38,.62);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.nameplate b{font-family:var(--font-display);font-weight:800;font-size:1.45rem;color:#fff;display:block}
.nameplate span{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* Page banner (interior) */
.page-hero{background:radial-gradient(130% 130% at 80% -20%,var(--navy-grad-1),var(--ink));color:var(--cream);position:relative;overflow:hidden}
.page-hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:54px 54px;opacity:.6}
.page-hero .wrap{position:relative;z-index:2;padding:62px 30px 66px}
.crumb{font-size:.8rem;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);color:#fff;max-width:20ch}
.page-hero p{margin-top:16px;color:#c4d2e2;font-size:1.12rem;max-width:46rem}
.page-hero .actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px}

/* Stats */
.stats{background:var(--ink-2);border-top:1px solid var(--line);color:var(--cream)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:30px}
.stat{text-align:center}
.stat b{font-family:var(--font-display);font-weight:900;font-size:1.9rem;color:var(--gold);display:block}
.stat span{font-size:.82rem;color:var(--muted)}

/* Sections */
section{padding:84px 0}
.kicker{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.sec-head{max-width:46rem}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--ink)}
.sec-head p{margin-top:14px;color:#4d6175;font-size:1.06rem}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* Prose + split layout for interior pages */
.split{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);margin:0 0 14px}
.prose h3{font-size:1.3rem;color:var(--ink);margin:34px 0 10px}
.prose p{color:#3f5366;margin:0 0 16px;font-size:1.04rem}
.prose ul,.prose ol{margin:0 0 18px 2px;padding-left:20px;color:#3f5366}
.prose li{margin-bottom:9px;font-size:1.02rem}
.prose .lead{font-size:1.18rem;color:#2b3e52;font-weight:500}
.prose img,.prose .figure{border-radius:16px;margin:24px 0;box-shadow:0 24px 50px -34px rgba(12,26,46,.5)}
.figure{height:340px;background-size:cover;background-position:center}
.callout{background:#eef2f7;border-left:4px solid var(--gold);border-radius:12px;padding:20px 22px;margin:24px 0;color:#33485c}
.callout b{color:var(--ink)}

/* Sidebar */
.sidebar{position:sticky;top:96px;display:grid;gap:18px}
.side-card{background:#fff;border:1px solid #e7ecf2;border-radius:16px;padding:24px;box-shadow:0 20px 44px -38px rgba(12,26,46,.5)}
.side-card.dark{background:linear-gradient(180deg,var(--panel),#0f2138);border-color:var(--line);color:var(--cream)}
.side-card h4{font-size:1.15rem;color:var(--ink);margin-bottom:8px}
.side-card.dark h4{color:#fff}
.side-card p{font-size:.92rem;color:#54687b;margin-bottom:14px}
.side-card.dark p{color:var(--muted)}
.side-card .btn{width:100%;justify-content:center}
.side-list{list-style:none;display:grid;gap:2px}
.side-list a{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid #f0f3f7;font-size:.95rem;font-weight:600;color:#33485c}
.side-list a:hover{color:var(--gold-2)}
.side-list a:last-child{border-bottom:0}
.side-list a span{color:#c2ccd8}
.hours-row{display:flex;justify-content:space-between;font-size:.9rem;padding:6px 0;border-bottom:1px solid var(--line);color:var(--cream)}
.hours-row:last-child{border-bottom:0}
.hours-row span:last-child{color:var(--gold);font-weight:600}

/* Cards (treatments/services) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid #e7ecf2;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s;box-shadow:0 20px 44px -36px rgba(12,26,46,.5)}
.card:hover{transform:translateY(-6px);box-shadow:0 34px 56px -32px rgba(12,26,46,.42)}
.card .top{height:170px;position:relative;background-size:cover;background-position:center;background-color:#15293f}
.card .top::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(8,16,30,.35))}
.card .top .tier{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.96);color:var(--ink);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .72rem;border-radius:999px}
.card .top .pop{position:absolute;top:12px;right:12px;z-index:2;background:var(--gold);color:#06283d;font-size:.66rem;font-weight:800;padding:.35rem .68rem;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.card .body{padding:24px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.3rem;color:var(--ink)}
.card .price{margin:7px 0 2px;font-family:var(--font-display);font-weight:800;font-size:1.28rem;color:var(--gold-2)}
.card .price small{display:block;font-family:var(--font-body);font-size:.74rem;color:#7a8a9a;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.card p.desc{color:#54687b;font-size:.95rem;margin-top:8px}
.card ul{list-style:none;margin:16px 0 0;display:grid;gap:10px}
.card ul li{position:relative;padding-left:25px;font-size:.93rem;color:#475c6f}
.card ul li::before{content:"✓";position:absolute;left:0;top:1px;color:var(--teal);font-weight:800}
.card .body .btn{margin-top:22px;align-self:flex-start}

/* Steps */
.steps-sec{background:var(--ink);color:var(--cream)}
.steps-sec .kicker{color:var(--gold)}
.steps-sec h2{color:#fff}
.steps-sec .sec-head p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{background:linear-gradient(180deg,var(--panel),#0f2138);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px}
.step .num{width:46px;height:46px;border-radius:50%;background:var(--gold);color:#06283d;font-family:var(--font-display);font-weight:900;font-size:1.3rem;display:grid;place-items:center;margin-bottom:18px}
.step h3{color:#fff;font-size:1.22rem;margin-bottom:9px}
.step p{color:var(--muted);font-size:.94rem}

/* Credentials band */
.band{background:#eef2f7}
.band .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.feature-list{display:grid;gap:20px;margin-top:28px}
.feature{display:flex;gap:16px;align-items:flex-start}
.feature .ic{flex:none;width:48px;height:48px;border-radius:13px;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-size:1.2rem;font-family:var(--font-display);font-weight:800}
.feature h4{font-size:1.1rem;color:var(--ink);margin-bottom:3px;font-weight:800}
.feature p{font-size:.93rem;color:#54687b}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.creds span{background:#fff;border:1px solid #e0e6ee;border-radius:999px;padding:.5rem .95rem;font-size:.78rem;font-weight:700;color:#34485c}
.tech-card{background:var(--ink);color:var(--cream);border-radius:22px;padding:36px;box-shadow:0 34px 64px -36px rgba(0,0,0,.5)}
.tech-card h3{color:#fff;font-size:1.5rem;margin-bottom:20px}
.tech-row{display:flex;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.tech-row:last-child{border-bottom:0}
.tech-row span:first-child{color:var(--cream);font-weight:600}
.tech-row span:last-child{color:var(--gold);font-weight:600;text-align:right}

/* Financing */
.fin-sec{background:radial-gradient(130% 120% at 20% 0,var(--navy-grad-1),var(--ink));color:var(--cream)}
.fin-sec .kicker{color:var(--gold)}
.fin-sec h2{color:#fff}
.fin-sec .sec-head p{color:var(--muted)}
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px;align-items:center}
.fin-points{display:grid;gap:14px}
.fin-point{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:17px 19px}
.fin-point b{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--gold);flex:none;min-width:72px}
.fin-point span{color:#c4d2e2;font-size:.96rem}
.calc{background:linear-gradient(180deg,var(--panel),#0f2138);border:1px solid var(--line);border-radius:20px;padding:32px}
.calc label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.calc .amt{font-family:var(--font-display);font-weight:900;font-size:2.4rem;color:#fff;margin:6px 0 18px}
input[type=range]{width:100%;accent-color:var(--gold);height:6px}
.calc .mo{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.calc .mo b{font-family:var(--font-display);font-weight:900;font-size:2.1rem;color:var(--gold)}
.calc .mo span{color:var(--muted);font-size:.84rem}
.calc .fineprint{font-size:.75rem;color:var(--muted);margin-top:14px}

/* Reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.rev{background:#fff;border:1px solid #e7ecf2;border-radius:var(--radius);padding:30px;box-shadow:0 20px 44px -38px rgba(12,26,46,.5)}
.rev .stars{color:var(--gold);letter-spacing:2px;margin-bottom:13px}
.rev p{font-size:1rem;color:#33475a;font-style:italic}
.rev .who{margin-top:17px;font-weight:800;color:var(--ink);font-size:.95rem}
.rev .who span{display:block;font-weight:500;color:#7a8a9a;font-size:.8rem;font-style:normal}
.rating-top{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #e0e6ee;border-radius:999px;padding:.5rem 1.1rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.rating-top b{color:var(--gold-2)}

/* Quote */
.quote-sec{background:#eef2f7}
.quote-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;align-items:center}
.quote-photo{height:440px;border-radius:22px;background:#16283f;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 30px 60px -34px rgba(12,26,46,.5)}
.quote-grid blockquote{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.24;color:var(--ink);letter-spacing:-.01em}
.quote-grid .sig{margin-top:24px;font-weight:800;color:var(--ink)}
.quote-grid .sig span{display:block;font-weight:600;color:var(--teal);font-size:.92rem;margin-top:3px}
.quote-grid .actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}

/* FAQ */
.faq{max-width:860px;margin:40px auto 0}
.faq.left{margin-left:0}
details{background:#fff;border:1px solid #e7ecf2;border-radius:13px;margin-bottom:14px;overflow:hidden}
details summary{list-style:none;cursor:pointer;padding:21px 24px;font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.6rem;color:var(--gold-2);font-weight:400;transition:.2s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details .ans{padding:0 24px 22px;color:#4d6072;font-size:.98rem}

/* CTA */
.cta-sec{background:var(--ink);color:var(--cream)}
.cta-card{background:linear-gradient(180deg,var(--panel),#0f2138);border:1px solid var(--line);border-radius:24px;padding:48px;max-width:820px;margin:0 auto;text-align:center}
.cta-card .kicker{color:var(--gold);display:flex;justify-content:center}
.cta-card h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.6rem)}
.cta-card p{color:var(--muted);margin:14px auto 30px;max-width:36rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;max-width:600px;margin:0 auto}
.form-row .full{grid-column:1/-1}
.form-row label{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;display:block;margin-bottom:6px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:.82rem .9rem;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;font-size:.95rem;font-family:inherit}
.form-row input::placeholder,.form-row textarea::placeholder{color:#6f8298}
.cta-card form > .btn{margin-top:22px;width:100%;max-width:600px;justify-content:center}
.cta-card .micro{margin-top:14px;font-size:.78rem;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.info-block{display:grid;gap:18px}
.info-item{display:flex;gap:14px;align-items:flex-start}
.info-item .ic{flex:none;width:46px;height:46px;border-radius:12px;background:#eef2f7;color:var(--gold-2);display:grid;place-items:center;font-size:1.15rem;font-family:var(--font-display);font-weight:800}
.info-item h4{font-size:1.05rem;color:var(--ink)}
.info-item p,.info-item a{color:#54687b;font-size:.96rem}
.map{height:300px;border-radius:16px;overflow:hidden;border:1px solid #e0e6ee;margin-top:24px}
.map iframe{width:100%;height:100%;border:0}
.contact-form{background:#fff;border:1px solid #e7ecf2;border-radius:18px;padding:30px;box-shadow:0 24px 50px -38px rgba(12,26,46,.5)}
.contact-form label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#6c7e90;font-weight:700;display:block;margin:0 0 6px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:.8rem .9rem;border:1px solid #e0e6ee;border-radius:10px;font-family:inherit;font-size:.95rem;margin-bottom:16px;background:#fbfcfe}
.contact-form .btn{width:100%;justify-content:center}

/* Footer */
footer{background:#081120;color:var(--cream);padding:66px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot-grid h5{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:16px;font-family:var(--font-display);font-weight:800}
.foot-grid a,.foot-grid p{color:var(--muted);font-size:.92rem;display:block;margin-bottom:9px}
.foot-grid a:hover{color:#fff}
.foot-brand .brand{margin-bottom:14px}
.foot-brand .name{color:#fff}
.foot-brand p{max-width:25rem}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center;color:var(--cream);margin:0}
.socials a:hover{background:var(--gold);color:#06283d}
.foot-bottom{border-top:1px solid var(--line);margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--muted)}
.foot-bottom a{color:var(--muted)}

@media(max-width:1080px){
  nav.menu{display:none !important}
  .menu-toggle{display:inline-flex !important}
}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding:46px 30px 58px}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .cards,.cards.two,.steps,.steps.four,.revs{grid-template-columns:1fr}
  .band .grid2,.fin-grid,.quote-grid,.split,.contact-grid{grid-template-columns:1fr;gap:34px}
  .sidebar{position:static}
  .quote-photo{height:330px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .form-row{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-card{padding:32px 20px}
}

/* Accessibility & PW enhancements */
.menu-item.is-open > a.top { color: var(--gold-2); border-bottom-color: var(--gold); }
.menu-item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item > a.top:focus-visible { color: var(--gold-2); border-bottom-color: var(--gold); }
body.nav-open { overflow: hidden; }
.mobile-nav {
  display: none; position: fixed; inset: 0; top: 0; z-index: 200;
  background: #fff; overflow-y: auto; padding: 90px 20px 40px;
}
body.nav-open .mobile-nav { display: block; }
.mobile-nav .m-item { border-bottom: 1px solid #e7ecf2; }
.mobile-nav .m-item > button,
.mobile-nav .m-item > a {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 1rem 0.25rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.mobile-nav .m-sub { display: none; padding: 0 0 1rem 0.75rem; }
.mobile-nav .m-item.is-open .m-sub { display: block; }
.mobile-nav .m-sub a { display: block; padding: 0.55rem 0; color: #33485c; font-weight: 500; }
.mobile-nav-close {
  position: absolute; top: 1rem; right: 1rem; border: 0; background: #eef2f7;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; color: var(--ink);
}
.gravity-form-placeholder {
  background: rgba(255,255,255,.05); border: 1px dashed var(--line); border-radius: 14px;
  padding: 2rem 1.25rem; min-height: 280px; display: grid; place-content: center; gap: 0.5rem;
  text-align: center; color: var(--muted);
}
.gravity-form-placeholder strong { color: #fff; font-family: var(--font-display); font-size: 1.1rem; }
.contact-form .gravity-form-placeholder,
.contact-form .gfiframe-wrap {
  background: #f3f6fa; border-color: #d0d8e2; color: #54687b; min-height: 420px;
}
.contact-form .gravity-form-placeholder strong { color: var(--ink); }
.gfiframe-wrap { width: 100%; }
.gfiframe { width: 100%; border: 0; display: block; background: transparent; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.video-item { background: #fff; border: 1px solid #e7ecf2; border-radius: 16px; overflow: hidden; }
.video-embed { position: relative; aspect-ratio: 16/9; background: #0f2138; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed .play-btn {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  border: 0; background: var(--gold); color: #06283d; font-size: 1.3rem; cursor: pointer;
  display: grid; place-items: center;
}
.vcap { padding: 14px 16px; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.http-error { padding: 100px 0 80px; text-align: center; }
.http-error h1 { font-size: clamp(2rem,4vw,3rem); color: var(--ink); margin-bottom: 1rem; }
.http-error p { color: #54687b; margin-bottom: 1.5rem; max-width: 36rem; margin-inline: auto; }
/* Keep forms out — ensure cta uses iframe */
.cta-card .gfiframe-wrap, .cta-card .gravity-form-placeholder { text-align: center; max-width: 600px; margin: 0 auto; }
@media (max-width: 920px) {
  .video-grid { grid-template-columns: 1fr; }
  .mega { width: min(760px, 92vw); }
}


/* Empty / missing figure fallback */
.figure-placeholder,
.prose .figure:not([style*="background-image"]) {
  background: linear-gradient(135deg, #1a3f72 0%, #0f2138 100%);
  position: relative;
}
.figure-placeholder::after,
.prose .figure:not([style*="background-image"])::after {
  content: "Image";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.55);
  font-family: var(--font-display, Archivo, sans-serif);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

/* Lead forms (native PHP) */
.lead-form .form-errors {
  text-align: left;
  background: rgba(180,40,40,.12);
  border: 1px solid rgba(180,40,40,.35);
  color: #ffd6d6;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: .92rem;
}
.contact-form .lead-form .form-errors {
  background: #fdecec;
  border-color: #f0b4b4;
  color: #7a1f1f;
}
.lead-form .hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.cta-card .lead-form > .btn {
  margin-top: 22px;
  width: 100%;
  max-width: 600px;
  justify-content: center;
}
.contact-form .lead-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}


/* ==========================================================================
   Mobile header / utility bar (best-practice responsive nav)
   ========================================================================== */

/* Base nav flex hardening */
.nav .wrap.nav-bar,
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 78px;
  height: auto;
  box-sizing: border-box;
}
.brand {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.brand .name {
  white-space: nowrap;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}
.nav .right-cta {
  margin-left: 0;
  flex: 0 0 auto;
}
.cta-label-short { display: none; }
.cta-label-full { display: inline; }

/* Hamburger button — always a fixed tap target when visible */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0;
  padding: 0;
  border: 1px solid #e0e6ee;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  z-index: 110;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  border-color: var(--gold);
  background: #f7fbfd;
}
.menu-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}
.menu-toggle-bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
body.nav-open .menu-toggle-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .menu-toggle-bars span:nth-child(2) {
  opacity: 0;
}
body.nav-open .menu-toggle-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer above sticky header */
.mobile-nav {
  z-index: 300;
}
.mobile-nav[hidden] {
  display: none !important;
}
body.nav-open .mobile-nav:not([hidden]) {
  display: block !important;
}

/* —— Tablet / hamburger mode —— */
@media (max-width: 1080px) {
  nav.menu {
    display: none !important;
  }
  .menu-toggle {
    display: inline-flex !important;
  }
  .nav .wrap.nav-bar,
  .nav .wrap {
    gap: 12px;
    min-height: 70px;
  }
  .brand .mark {
    width: 36px;
    height: 36px;
    font-size: .88rem;
    border-radius: 10px;
  }
  .brand .name {
    font-size: 1.1rem;
  }
  .brand .name small {
    font-size: .52rem;
    letter-spacing: .16em;
  }
  .btn-nav-cta {
    padding: .7rem 1.15rem;
    font-size: .88rem;
    white-space: nowrap;
  }
}

/* —— Utility bar: forms + phone only —— */
@media (max-width: 920px) {
  .util {
    font-size: .8rem;
  }
  .util .wrap {
    height: auto;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: flex-end;
  }
  .util-announce,
  .util .left {
    display: none !important;
  }
  .util-addr,
  .util .addr {
    display: none !important;
  }
  .util-actions,
  .util .right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .util-forms,
  .util-phone {
    font-weight: 600;
  }
}

/* —— Phone / small tablet —— */
@media (max-width: 768px) {
  .nav .wrap.nav-bar,
  .nav .wrap {
    gap: 8px;
    min-height: 64px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .brand {
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .brand .mark {
    width: 34px;
    height: 34px;
    font-size: .82rem;
    flex-shrink: 0;
  }
  .brand .name {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand .name small {
    display: none; /* drop location line on phone */
  }
  .nav-actions {
    gap: 8px;
    flex-shrink: 0;
  }
  .btn-nav-cta {
    padding: .62rem .9rem;
    font-size: .82rem;
    gap: .35rem;
  }
  .btn-nav-cta .arrow {
    display: none; /* save horizontal space */
  }
}

/* —— Narrow phones (<600px): compact CTA + guaranteed hamburger —— */
@media (max-width: 600px) {
  .util {
    font-size: .78rem;
  }
  .util .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .nav .wrap.nav-bar,
  .nav .wrap {
    gap: 6px;
    min-height: 58px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .brand .mark {
    width: 32px;
    height: 32px;
    font-size: .78rem;
    border-radius: 9px;
  }
  .brand .name {
    font-size: .92rem;
    letter-spacing: -.02em;
  }
  /* Shorten Book Consult → Book */
  .cta-label-full { display: none; }
  .cta-label-short { display: inline; }
  .btn-nav-cta {
    padding: .55rem .75rem;
    font-size: .8rem;
    min-height: 40px;
  }
  .menu-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;
  }
  /* Prevent header children from overflowing off-screen */
  header.nav {
    overflow: visible;
  }
  header.nav .wrap {
    overflow: visible;
  }
}

/* —— Extra small —— */
@media (max-width: 380px) {
  .brand .name {
    font-size: .85rem;
  }
  .btn-nav-cta {
    padding: .5rem .65rem;
    font-size: .76rem;
  }
  .util-actions {
    gap: 8px;
  }
}

/* Mobile drawer polish */
@media (max-width: 1080px) {
  .mobile-nav {
    padding: 72px 18px 32px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
  .mobile-nav .m-item > button,
  .mobile-nav .m-item > a {
    min-height: 48px;
    font-size: 1.05rem;
  }
  .mobile-nav .m-sub a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.65rem 0;
  }
}


/* Safe right/left edge padding — util phone + hamburger not flush to viewport */
.util .wrap,
.nav .wrap.nav-bar,
.nav .wrap {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.util-actions,
.util .right {
  padding-right: 2px; /* optical gap after last link */
}
.nav-actions {
  padding-right: 2px;
  margin-right: 0;
}
@media (max-width: 920px) {
  .util .wrap {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 768px) {
  .util .wrap,
  .nav .wrap.nav-bar,
  .nav .wrap {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 600px) {
  .util .wrap,
  .nav .wrap.nav-bar,
  .nav .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .nav-actions {
    gap: 10px;
    margin-right: 2px;
  }
  .menu-toggle {
    margin-right: 2px;
  }
  .util-phone {
    padding-right: 2px;
  }
}
@media (max-width: 380px) {
  .util .wrap,
  .nav .wrap.nav-bar,
  .nav .wrap {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}