/* One Dental Co. — shared stylesheet for FAQ pages (matches index.html design system) */
:root{
  --bg:#F6F3E7; --bg-panel:#EFEBD9; --cream:#FBF9F0; --sage:#E3E0C9;
  --ink:#16221A; --ink-soft:#45543E;
  --algae:#1F3B2C; --algae-2:#2E5238; --algae-3:#3E6B48;
  --olive:#7C7A3E; --olive-light:#B3AD6E;
  --line:rgba(31,59,43,0.14); --line-strong:rgba(31,59,43,0.28);
  --font-serif:'Fraunces',serif; --font-sans:'Work Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,.8,.24,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-sans); background:var(--bg); color:var(--ink); line-height:1.65; font-weight:300; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
section[id]{ scroll-margin-top:90px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

h1,h2,h3{ font-family:var(--font-serif); color:var(--algae); font-weight:500; line-height:1.15; }
em{ font-style:italic; color:var(--olive); font-family:var(--font-serif); }
p{ color:var(--ink-soft); }

.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--olive); display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--olive); }

.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; padding:15px 26px; border-radius:2px; transition:all .35s var(--ease); border:1px solid transparent; cursor:pointer; }
.btn-solid{ background:var(--algae); color:var(--cream); }
.btn-solid:hover{ background:var(--algae-3); transform:translateY(-2px); }
.btn-line{ border-color:var(--line-strong); color:var(--algae); }
.btn-line:hover{ border-color:var(--algae); background:rgba(31,59,43,0.05); transform:translateY(-2px); }

/* ============ NAV ============ */
header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(246,243,231,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s; }
nav{ display:flex; align-items:center; justify-content:space-between; padding:0 40px; height:76px; max-width:1180px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo .mark{ width:30px; height:30px; color:var(--algae); }
.logo .mark path{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.logo-text{ font-family:var(--font-serif); font-size:18px; color:var(--algae); font-weight:500; line-height:1.1; }
.nav-one{ color:var(--olive); font-weight:400; }
.logo-tag{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--olive); margin-top:2px; }
.nav-links{ display:flex; gap:30px; font-family:var(--font-mono); font-size:12.5px; }
.nav-links a{ color:var(--ink-soft); transition:color .25s; }
.nav-links a:hover, .nav-links a.active{ color:var(--algae); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); }

.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; }
.menu-toggle span{ display:block; height:1.5px; width:100%; background:var(--algae); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.menu-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-panel{ display:none; position:fixed; top:76px; left:0; right:0; z-index:99; background:var(--bg); border-bottom:1px solid var(--line-strong); max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.mobile-panel.open{ max-height:560px; }
.mobile-panel-inner{ padding:10px 22px 26px; display:flex; flex-direction:column; }
.mobile-panel a{ font-family:var(--font-mono); font-size:14px; color:var(--ink-soft); padding:16px 0; border-bottom:1px solid var(--line); }
.mobile-panel .btn{ margin-top:20px; justify-content:center; }
@media (max-width:960px){ .nav-links{ display:none; } .menu-toggle{ display:flex; } .mobile-panel{ display:block; } }
@media (min-width:961px){ .mobile-panel{ display:none !important; } }
@media (max-width:640px){ .nav-phone{ display:none; } .wrap{ padding:0 22px; } nav{ padding:0 22px; } }

/* ============ PAGE HEADER ============ */
.page-header{ padding:170px 0 66px; background:var(--bg-panel); }
.breadcrumb{ font-family:var(--font-mono); font-size:11px; color:var(--olive); letter-spacing:0.05em; margin-bottom:18px; }
.breadcrumb a{ color:var(--olive); border-bottom:1px solid var(--olive-light); }
.breadcrumb a:hover{ color:var(--algae); }
.page-header h1{ font-size:clamp(29px,4vw,44px); margin-top:12px; max-width:820px; }
.page-header p.lede{ color:var(--ink-soft); max-width:660px; margin-top:16px; font-size:16px; }
@media (max-width:640px){ .page-header{ padding:150px 0 54px; } }

/* ============ FAQ ACCORDION ============ */
.faq-section{ padding:64px 0 30px; }
.faq-list{ max-width:800px; margin-top:6px; }
.faq-item{ border-bottom:1px solid var(--line-strong); }
.faq-item summary{ list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-weight:500; font-size:16.5px; color:var(--algae); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family:var(--font-mono); font-size:20px; color:var(--olive); flex-shrink:0; transition:transform .3s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-answer{ padding:0 0 26px; color:var(--ink-soft); font-size:15.5px; line-height:1.75; max-width:720px; }

/* ============ RELATED / HUB GRID ============ */
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); margin-top:22px; }
.related-card{ background:var(--bg); padding:30px 26px; transition:background .3s var(--ease); }
.related-card:hover{ background:var(--sage); }
.related-card .related-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); margin-bottom:8px; }
.related-card h3{ font-size:18px; margin-bottom:8px; }
.related-card p{ font-size:13.5px; margin-bottom:16px; }
.related-card a.rc-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--algae); }
.related-card a.rc-link:hover{ color:var(--olive); }

/* ============ CTA STRIP ============ */
.cta-strip{ background:var(--algae); color:var(--cream); padding:60px 0; text-align:center; }
.cta-strip h2{ color:var(--cream); font-size:clamp(23px,3vw,30px); }
.cta-strip p{ color:var(--sage); margin:14px auto 26px; max-width:520px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-strip .btn-solid{ background:var(--cream); color:var(--algae); }
.cta-strip .btn-solid:hover{ background:var(--olive-light); }
.cta-strip .btn-line{ border-color:rgba(251,249,240,0.4); color:var(--cream); }
.cta-strip .btn-line:hover{ background:rgba(251,249,240,0.1); border-color:var(--cream); }

/* ============ FOOTER ============ */
footer{ background:var(--bg-panel); padding:34px 0; border-top:1px solid var(--line); }
.foot-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.brand-lockup-mini{ display:flex; align-items:center; gap:12px; }
.brand-icons{ display:flex; align-items:center; gap:6px; color:var(--algae); }
.brand-icons svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.brand-icons svg circle.icon-fill{ fill:currentColor; }
.brand-dot{ color:var(--olive-light); }
.brand-word{ font-family:var(--font-serif); font-size:16px; color:var(--algae); }
.brand-one{ color:var(--olive); font-weight:400; }
.fine{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); letter-spacing:0.03em; }