/* ============================================================
   Sammamish Pediatric Dentistry — design system v4
   Premium coastal. Wordmark header. Exact logo figures.
   Editorial single-image layouts, full-bleed bands (no collage).
   Flat. Light-teal footer. Fraunces + Bricolage Grotesque.
   ============================================================ */

:root {
  --teal:#5E828E; --teal-deep:#3C5963; --teal-tint:#DCE7E9;
  --terra:#C0552F; --terra-deep:#A6471F; --sage:#94A25B; --sage-tint:#E6EBD8;
  --paper:#F8FBFB; --paper-deep:#ECF3F4; --shell:#FFFFFF;
  --ink:#20313A; --ink-soft:#586A72; --line:#E0EAEC;
  --footer-bg:#BFD5D8; --footer-ink:#2B474F; --footer-soft:#557078; --footer-line:#A6C3C7;
  --display:"Fraunces", Georgia, serif;
  --body:"Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --step--1:clamp(0.84rem,0.8rem + 0.2vw,0.92rem);
  --step-0:clamp(1rem,0.96rem + 0.25vw,1.1rem);
  --step-1:clamp(1.18rem,1.08rem + 0.45vw,1.4rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2rem);
  --step-3:clamp(2rem,1.6rem + 1.9vw,2.95rem);
  --step-4:clamp(2.6rem,1.9rem + 3.3vw,4.4rem);
  --gut:clamp(1.1rem,4vw,2.2rem); --bay:clamp(4.5rem,8vw,8rem);
  --radius:12px; --radius-lg:22px; --maxw:1180px;
}
*{box-sizing:border-box;} html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important;transition:none!important;}}
body{margin:0;font-family:var(--body);font-size:var(--step-0);line-height:1.66;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:var(--display);font-weight:520;line-height:1.08;letter-spacing:-0.02em;margin:0;color:var(--teal-deep);}
h2{font-size:var(--step-3);} h3{font-size:var(--step-1);letter-spacing:-0.012em;font-weight:540;}
p{margin:0 0 1rem;}
a{color:var(--terra-deep);text-underline-offset:3px;}
img{max-width:100%;display:block;}
.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto;}
.eyebrow{font-family:var(--body);font-weight:600;font-size:var(--step--1);letter-spacing:0.2em;text-transform:uppercase;color:var(--terra);display:inline-flex;align-items:center;gap:0.65rem;margin:0 0 1.2rem;}
.eyebrow::before{content:"";width:1.9rem;height:1.5px;background:currentColor;}
.eyebrow.light{color:#fff;} .eyebrow.center{justify-content:center;}

.btn{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--body);font-weight:600;font-size:var(--step-0);padding:0.85rem 1.6rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;}
.btn-primary{background:var(--terra);color:#fff;}
.btn-primary:hover{background:var(--terra-deep);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--teal-deep);border-color:var(--teal);}
.btn-ghost:hover{background:var(--teal);color:#fff;transform:translateY(-2px);}
.textlink{font-family:var(--body);font-weight:600;font-size:var(--step-0);color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,0.55);padding-bottom:2px;transition:border-color .18s;}
.textlink:hover{border-color:#fff;}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0.75rem 0;}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand img{height:48px;width:auto;}
.nav-links{display:flex;align-items:center;gap:0.2rem;list-style:none;margin:0;padding:0;}
.nav-links>li{position:relative;}
.nav-links a{font-family:var(--body);color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--step--1);padding:0.6rem 0.7rem;border-radius:8px;display:inline-flex;align-items:center;gap:0.35rem;}
.nav-links a:hover{color:var(--teal-deep);}
.has-menu>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;}
.submenu{position:absolute;top:calc(100% + 4px);left:0;min-width:232px;background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);padding:0.5rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;}
.nav-links>li:hover .submenu,.nav-links>li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu a{display:block;padding:0.55rem 0.7rem;font-size:var(--step--1);border-radius:7px;}
.submenu a:hover{background:var(--paper-deep);}
.nav-cta{display:flex;align-items:center;gap:0.9rem;flex-shrink:0;}
.nav-tel{font-family:var(--body);font-weight:600;color:var(--teal-deep);text-decoration:none;font-size:var(--step--1);white-space:nowrap;}
.nav-tel:hover{color:var(--terra);}
.burger{display:none;background:none;border:0;cursor:pointer;padding:0.4rem;}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.25s;}
.mobile-panel{display:none;}
.mobile-panel.open{display:block;padding:0.5rem 0 1.3rem;border-top:1px solid var(--line);}
.mobile-panel ul{list-style:none;margin:0;padding:0;}
.mobile-panel>ul>li>a{display:block;padding:0.85rem 0.4rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.mobile-panel .sub a{display:block;padding:0.5rem 0.4rem 0.5rem 1.4rem;color:var(--ink-soft);text-decoration:none;font-size:0.9rem;}
.mobile-panel .btn{margin:1.1rem 0.4rem 0;}

/* Hero */
.hero{position:relative;min-height:clamp(560px,82vh,800px);display:grid;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-color:#2C4750;background-size:cover;background-position:center;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,40,46,0.8) 0%,rgba(20,40,46,0.5) 50%,rgba(20,40,46,0.22) 100%),linear-gradient(180deg,rgba(20,40,46,0) 50%,rgba(20,40,46,0.55) 100%);}
.hero-content{position:relative;color:#fff;max-width:660px;padding-block:clamp(3rem,7vw,5.5rem);}
.hero-content h1{color:#fff;font-size:var(--step-4);font-weight:500;letter-spacing:-0.025em;}
.hero-content h1 .swash{font-style:italic;font-weight:400;}
.hero-lead{font-size:var(--step-1);color:rgba(255,255,255,0.88);max-width:40ch;margin:1.4rem 0 2.1rem;line-height:1.5;font-weight:400;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center;}

.horizon{height:1px;background:linear-gradient(90deg,transparent,var(--teal) 18%,var(--sage) 50%,var(--terra) 82%,transparent);opacity:.5;border:0;margin:0;}

/* Trust */
.trust{background:var(--shell);border-bottom:1px solid var(--line);}
.trust .wrap{display:flex;flex-wrap:wrap;gap:0.8rem 2.8rem;justify-content:center;padding:1.15rem 0;}
.trust span{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.78rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--teal-deep);}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra);}

section{padding:var(--bay) 0;}
.section-head{max-width:50ch;margin-bottom:clamp(2.4rem,4vw,3.4rem);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head p{color:var(--ink-soft);font-size:var(--step-1);margin-top:0.9rem;line-height:1.5;}

/* Editorial feature: single large image + copy */
.feature.shell{background:var(--shell);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.feature.reverse .feature-media{order:-1;}
.feature-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);display:block;}
.feature-media.wide img{aspect-ratio:3/2;}
.feature-cap{font-size:0.82rem;color:var(--ink-soft);font-style:italic;margin:1.1rem 0 0;}

/* Full-bleed image band */
.band{position:relative;min-height:clamp(360px,54vh,560px);display:grid;align-items:center;background-color:#2C4750;background-size:cover;background-position:center;}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,40,46,0.6) 0%,rgba(20,40,46,0.25) 55%,rgba(20,40,46,0.05) 100%);}
.band-inner{position:relative;}
.band-quote{font-family:var(--display);color:#fff;font-size:var(--step-3);max-width:18ch;line-height:1.12;font-weight:500;margin:0;}
.band-quote span{font-style:italic;}

/* Age-stage band — exact logo figures */
.stages{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.stage{padding:clamp(1.8rem,3vw,2.8rem) clamp(1.4rem,2.6vw,2.4rem);border-left:1px solid var(--line);}
.stage:first-child{border-left:0;}
.stage .agefig{height:104px;display:flex;align-items:flex-end;margin-bottom:1.1rem;}
.stage .agefig img{height:100%;width:auto;display:block;}
.stage .age{font-family:var(--body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:0.7rem;color:var(--ink-soft);}
.stage h3{margin:0.25rem 0 0.7rem;}
.stage p{font-size:var(--step--1);color:var(--ink-soft);margin:0;line-height:1.6;}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.svc{background:var(--shell);padding:1.7rem 1.5rem 1.5rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:0.55rem;transition:background .2s ease;}
.svc:hover{background:var(--paper-deep);}
.svc .ic{width:40px;height:40px;color:var(--teal);display:grid;place-items:center;margin-bottom:0.5rem;}
.svc .ic svg{width:26px;height:26px;}
.svc h3{font-size:var(--step-1);}
.svc p{font-size:var(--step--1);color:var(--ink-soft);margin:0;line-height:1.55;}
.svc .go{margin-top:auto;font-weight:600;font-size:0.8rem;color:var(--terra);letter-spacing:.04em;padding-top:0.5rem;}

.feature-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem;}
.feature-list li{display:flex;gap:0.85rem;font-size:var(--step-0);color:var(--ink-soft);}
.feature-list li::before{content:"";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--teal-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C5963' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center;margin-top:2px;}

/* Testimonials */
.reviews{background:var(--paper-deep);}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.review{background:var(--shell);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;}
.review .stars{color:var(--terra);letter-spacing:2px;margin-bottom:0.8rem;font-size:0.9rem;}
.review p{font-size:var(--step-0);line-height:1.62;color:var(--ink);margin:0 0 1.2rem;}
.review .who{margin-top:auto;font-family:var(--display);color:var(--teal-deep);font-weight:600;}
.review .who small{display:block;font-family:var(--body);font-weight:400;color:var(--ink-soft);font-size:0.76rem;letter-spacing:.04em;}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(1.6rem,4vw,4rem);align-items:start;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:var(--step-1);color:var(--teal-deep);padding:1.1rem 2.5rem 1.1rem 0;position:relative;font-weight:540;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:0.3rem;top:50%;transform:translateY(-50%);font-family:var(--body);font-size:1.5rem;color:var(--terra);transition:transform .2s;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{color:var(--ink-soft);padding:0 0 1.2rem;margin:0;font-size:var(--step-0);line-height:1.6;}

/* CTA */
.cta{background:linear-gradient(135deg,rgba(34,56,63,0.9),rgba(34,56,63,0.82)),url('photos/hero-coast.jpg') center/cover;color:#EAF1F1;border-radius:var(--radius-lg);padding:clamp(2.6rem,5vw,4.2rem);position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 92% 0%,rgba(192,85,47,.3),transparent 58%);}
.cta-inner{position:relative;display:grid;grid-template-columns:1fr 0.9fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;}
.cta h2{color:#fff;} .cta p{color:#CFE0E0;font-size:var(--step-1);}
.cta .form-slot{background:rgba(255,255,255,0.07);border:1px dashed rgba(255,255,255,0.45);border-radius:var(--radius);padding:1.7rem;text-align:center;}
.cta .form-slot strong{font-family:var(--display);font-size:var(--step-1);color:#fff;display:block;margin-bottom:0.4rem;font-weight:540;}
.cta .form-slot span{font-size:0.8rem;color:#B6CCCC;}
.cta .form-slot .btn{margin-top:1.2rem;}

/* Footer — light teal */
.site-footer{background:var(--footer-bg);color:var(--footer-soft);padding:var(--bay) 0 2rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:2.2rem;}
.site-footer h4{font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;font-size:0.7rem;color:var(--teal-deep);margin:0 0 1rem;}
.site-footer a{color:var(--footer-ink);text-decoration:none;font-size:var(--step--1);}
.site-footer a:hover{color:var(--terra-deep);}
.foot-links{list-style:none;padding:0;margin:0;display:grid;gap:0.6rem;}
.foot-brand img{height:104px;margin-bottom:1.1rem;}
.foot-nap{font-size:var(--step--1);line-height:1.7;color:var(--footer-ink);}
.foot-nap a{font-weight:600;}
.foot-map{border:0;width:100%;height:170px;border-radius:var(--radius);}
.foot-bottom{border-top:1px solid var(--footer-line);margin-top:2.6rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:0.6rem 1.6rem;justify-content:space-between;font-size:0.76rem;color:var(--footer-soft);}
.foot-bottom a{font-size:0.76rem;color:var(--footer-ink);}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

@media (max-width:960px){
  .feature-grid,.faq-grid,.cta-inner{grid-template-columns:1fr;}
  .feature-media{order:-1;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .review-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .nav-links,.nav-tel{display:none;} .burger{display:block;} .brand img{height:40px;}
}
@media (max-width:560px){
  .stage-grid{grid-template-columns:1fr;}
  .stage{border-left:0;border-top:1px solid var(--line);}
  .stage:first-child{border-top:0;}
  .svc-grid,.foot-grid{grid-template-columns:1fr;}
}