/* Self-hosted fonts (SIL OFL) — no third-party requests */
@font-face{font-family:'Fraunces'; src:url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;}
@font-face{font-family:'Source Sans 3'; src:url('/assets/fonts/source-sans-3-var.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;}


/* ============================================================
   Terrell Advanced Dentistry — Design System
   Tokens + components per phase-4-design-system.md
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --tad-cream:#FBF9F4;
  --tad-beige:#F4EFE4;
  --tad-beige-deep:#E9E0CD;
  --tad-gold-light:#D2A843;
  --tad-gold:#B8913A;
  --tad-gold-deep:#8F6A26;
  --tad-gold-ink:#6F5320;
  --tad-ink:#332F2A;
  --tad-ink-soft:#5C564D;
  --tad-espresso:#2C2721;
  --tad-white:#FFFFFF;
  --tad-border:#EAE3D3;

  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Source Sans 3", "Segoe UI", Arial, sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --r-ctrl:8px; --r-card:16px; --r-pill:999px;
  --header-h:80px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
body{
  margin:0; background:var(--tad-cream); color:var(--tad-ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{font-size:18px} }

h1,h2{font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 var(--s-4); letter-spacing:-0.01em}
h1{font-size:clamp(34px,5vw,52px)}
h2{font-size:clamp(27px,3.4vw,38px); line-height:1.18}
h3{font-size:clamp(21px,2.2vw,25px); font-weight:600; line-height:1.3; margin:0 0 var(--s-3)}
h4{font-size:clamp(18px,1.8vw,20px); font-weight:600; margin:0 0 var(--s-2)}
p{margin:0 0 var(--s-4); max-width:65ch}
img,video{max-width:100%; display:block}
a{color:var(--tad-gold-ink)}
a:hover{color:var(--tad-gold-deep)}
:focus-visible{outline:3px solid var(--tad-gold); outline-offset:2px; border-radius:2px}

.eyebrow{
  font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tad-gold-ink); margin:0 0 var(--s-3);
}
.small{font-size:15px; line-height:1.5; color:var(--tad-ink-soft)}
.lede{font-size:clamp(18px,2vw,21px); color:var(--tad-ink-soft)}

/* ---------- Layout ---------- */
.wrap{width:min(1140px, 100% - 2*var(--s-5)); margin-inline:auto}
.section{padding-block:var(--s-8)}
@media (min-width:768px){ .section{padding-block:var(--s-9)} }
.section--beige{background:var(--tad-beige)}
.section--espresso{background:var(--tad-espresso); color:var(--tad-cream)}
.section--espresso p{color:var(--tad-cream)}
.section--hero{padding-block:var(--s-9)}
@media (min-width:768px){ .section--hero{padding-block:var(--s-10)} }
.grid{display:grid; gap:var(--s-5)}
@media (min-width:768px){
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* Facet pattern — the single signature background */
.facet{position:relative; overflow:hidden}
.facet::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23B8913A' stroke-width='1'%3E%3Cpath d='M0 40 L60 0 L180 0 L240 40 L120 160 Z'/%3E%3Cpath d='M60 0 L90 40 L120 160 M180 0 L150 40 L120 160 M0 40 L90 40 L150 40 L240 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 160px;
}
.facet > *{position:relative}

/* Diamond markers */
.dlist{list-style:none; padding:0; margin:0 0 var(--s-4)}
.dlist li{position:relative; padding-left:24px; margin-bottom:var(--s-3); max-width:65ch}
.dlist li::before{
  content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px;
  background:var(--tad-gold); transform:rotate(45deg);
}
.section--espresso .dlist li::before{background:var(--tad-gold-light)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 28px; border-radius:var(--r-ctrl);
  font-family:var(--font-body); font-size:16px; font-weight:600;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--tad-gold); color:var(--tad-ink)}
.btn-primary:hover{background:var(--tad-gold-deep); color:var(--tad-cream)}
.btn-secondary{background:transparent; border-color:var(--tad-ink); color:var(--tad-ink)}
.btn-secondary:hover{background:var(--tad-ink); color:var(--tad-cream)}
.btn-on-dark{background:var(--tad-cream); color:var(--tad-espresso)}
.btn-on-dark:hover{background:var(--tad-gold-light); color:var(--tad-espresso)}
.btn-text{
  background:none; border:none; padding:0; min-height:0; color:var(--tad-gold-ink);
  font-weight:600; text-decoration:none;
}
.btn-text::before{content:""; display:inline-block; width:7px; height:7px; background:var(--tad-gold); transform:rotate(45deg); margin-right:9px}
.btn-text:hover{text-decoration:underline; color:var(--tad-gold-deep)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center}

/* ---------- Chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:var(--s-3); padding:0; margin:var(--s-5) 0 0; list-style:none}
.chip{
  background:var(--tad-beige); color:var(--tad-gold-ink);
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--tad-border);
}
.section--beige .chip{background:var(--tad-white)}

/* ---------- Cards ---------- */
.card{
  background:var(--tad-white); border:1px solid var(--tad-border);
  border-radius:var(--r-card); padding:var(--s-6);
}
.card h3{margin-top:var(--s-2)}
.card .icon{
  width:40px; height:40px; border-radius:10px; background:var(--tad-beige);
  display:grid; place-items:center; color:var(--tad-gold-deep); font-size:18px;
}
.section--beige .card{background:var(--tad-white)}

/* Before/after facet card */
.ba-card{background:var(--tad-white); border:1px solid var(--tad-border); border-radius:0 0 var(--r-card) var(--r-card); overflow:hidden}
.ba-card .ba-top{height:6px; background:linear-gradient(105deg, var(--tad-gold-light), var(--tad-gold-deep)); clip-path:polygon(0 100%, 3% 0, 97% 0, 100% 100%)}
.ba-pair{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.ba-body{padding:var(--s-4) var(--s-5)}

/* Photo placeholder (replace with real library photos) */
.ph{
  background:repeating-linear-gradient(45deg, var(--tad-beige), var(--tad-beige) 12px, var(--tad-beige-deep) 12px, var(--tad-beige-deep) 24px);
  color:var(--tad-ink-soft); display:grid; place-items:center; text-align:center;
  font-size:13px; font-weight:600; padding:var(--s-4); min-height:180px; border-radius:var(--r-card);
}
.ph--tall{min-height:300px}
.ph--wide{min-height:220px}
.ba-pair .ph{border-radius:0; min-height:150px}

/* ---------- Header ---------- */
.utility{
  background:var(--tad-beige); font-size:13px; color:var(--tad-ink-soft);
  border-bottom:1px solid var(--tad-border);
}
.utility .wrap{display:flex; justify-content:center; align-items:center; gap:var(--s-6); padding-block:9px; flex-wrap:wrap}
.u-item{display:inline-flex; align-items:center; gap:9px; font-weight:600; letter-spacing:.02em}
.u-item::before{content:""; width:6px; height:6px; background:var(--tad-gold); transform:rotate(45deg); flex:none}
.u-lang{color:var(--tad-gold-ink)}
.utility a.u-item{text-decoration:none}
.utility a.u-item:hover{color:var(--tad-gold-deep); text-decoration:underline}
.utility a{color:var(--tad-gold-ink); text-decoration:none; font-weight:600}
@media (max-width:767px){ .utility{display:none} }

.site-header{
  position:sticky; top:0; z-index:50; background:var(--tad-cream);
  border-bottom:1px solid var(--tad-border);
}
.site-header .wrap{display:flex; align-items:center; gap:var(--s-5); min-height:var(--header-h)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tad-ink); margin-right:auto}
.logo .mark{height:42px; width:auto; flex:none}
.logo b{font-family:var(--font-display); font-size:17px; line-height:1.1; letter-spacing:.02em}
.logo span{display:block; font-size:10px; letter-spacing:.14em; color:var(--tad-gold-ink); font-weight:600}

.nav{display:flex; align-items:center; gap:var(--s-5)}
.nav a{color:var(--tad-ink); text-decoration:none; font-weight:600; font-size:16px}
.nav a:hover{color:var(--tad-gold-deep)}
.nav .tel{color:var(--tad-gold-ink)}
@media (max-width:920px){
  .nav{display:none; position:fixed; inset:var(--header-h) 0 0 0; background:var(--tad-cream);
    flex-direction:column; align-items:flex-start; padding:var(--s-6); gap:var(--s-5); overflow:auto; z-index:49}
  .nav.open{display:flex}
  .nav a{font-size:20px}
  .nav .btn{width:100%; justify-content:center; margin-top:auto}
}
.menu-btn{display:none; background:none; border:1.5px solid var(--tad-ink); border-radius:var(--r-ctrl);
  min-height:44px; min-width:44px; font-size:20px; color:var(--tad-ink); cursor:pointer}
@media (max-width:920px){ .menu-btn{display:inline-grid; place-items:center} }

/* ---------- Sticky mobile bar ---------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; grid-template-columns:1fr 1fr 1fr;
  background:var(--tad-espresso); box-shadow:0 -4px 16px rgba(0,0,0,.18);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-bar a{
  display:grid; place-items:center; gap:2px; min-height:56px; padding:8px 4px;
  color:var(--tad-cream); text-decoration:none; font-size:13px; font-weight:600;
}
.sticky-bar a + a{border-left:1px solid rgba(251,249,244,.15)}
.sticky-bar a:hover{background:rgba(184,145,58,.25)}
@media (max-width:920px){
  .sticky-bar{display:grid}
  body{padding-bottom:64px}
}

/* ---------- Hero ---------- */
.hero{min-height:min(72vh, 640px); min-height:min(72svh, 640px); display:grid; align-items:center}
.hero .lede{margin-top:var(--s-2)}
.hero .btn-row{margin-top:var(--s-6)}

/* ---------- Process steps ---------- */
.steps{counter-reset:step; display:grid; gap:var(--s-5); padding:0; margin:0; list-style:none}
@media (min-width:768px){ .steps{grid-template-columns:1fr 1fr} }
.steps li{counter-increment:step; background:var(--tad-white); border:1px solid var(--tad-border);
  border-radius:var(--r-card); padding:var(--s-6)}
.steps li::before{
  content:counter(step); display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:50%; background:var(--tad-gold); color:var(--tad-ink);
  font-weight:700; font-family:var(--font-display); margin-bottom:var(--s-3);
}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--tad-border)}
.faq details{border-bottom:1px solid var(--tad-border)}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding:var(--s-4) 4px; cursor:pointer; font-weight:600; font-size:17px; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:9px; height:9px; background:var(--tad-gold); transform:rotate(45deg); transition:transform .15s; flex:none}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .faq-a{padding:0 4px var(--s-5); color:var(--tad-ink-soft)}

/* ---------- Callout ---------- */
.callout{background:var(--tad-beige); border-radius:var(--r-card); padding:var(--s-6)}
.callout h3{color:var(--tad-ink)}

/* ---------- Forms ---------- */
.form{display:grid; gap:var(--s-5); max-width:640px}
.field label{display:block; font-weight:600; font-size:15px; margin-bottom:6px}
.field .req{color:var(--tad-gold-ink); font-weight:400; font-size:13px}
.field input[type=text], .field input[type=tel], .field input[type=email],
.field select, .field textarea{
  width:100%; font:inherit; color:var(--tad-ink); background:var(--tad-white);
  border:1.5px solid var(--tad-border); border-radius:var(--r-ctrl); padding:12px 14px; min-height:48px;
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--tad-gold); outline:none}
.field .error{display:none; color:#8a3b1e; font-size:14px; margin-top:6px}
.field.invalid input{border-color:#8a3b1e}
.field.invalid .error{display:block}
.chip-group{display:flex; flex-wrap:wrap; gap:var(--s-2)}
.chip-check{position:relative}
.chip-check input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chip-check span{
  display:inline-block; padding:10px 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--tad-border); background:var(--tad-white); font-weight:600; font-size:15px;
}
.chip-check input:checked + span{background:var(--tad-gold); border-color:var(--tad-gold); color:var(--tad-ink)}
.chip-check input:focus-visible + span{outline:3px solid var(--tad-gold); outline-offset:2px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--tad-ink-soft); max-width:65ch}
.consent input{width:20px; height:20px; margin-top:2px; flex:none}

/* ---------- Review card ---------- */
.review{background:var(--tad-white); border:1px solid var(--tad-border); border-radius:var(--r-card); padding:var(--s-6)}
.review .stars{color:var(--tad-gold); letter-spacing:2px; font-size:15px; margin-bottom:var(--s-3)}
.review cite{display:block; margin-top:var(--s-3); font-style:normal; font-weight:600; font-size:15px}
.review .src{font-size:13px; color:var(--tad-ink-soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--tad-espresso); color:var(--tad-cream); font-size:15px}
.site-footer .wrap{padding-block:var(--s-8)}
.site-footer h4{color:var(--tad-gold-light); font-size:14px; letter-spacing:.08em; text-transform:uppercase}
.site-footer a{color:var(--tad-cream); text-decoration:none}
.site-footer a:hover{color:var(--tad-gold-light)}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.site-footer .legal{border-top:1px solid rgba(251,249,244,.15); padding-block:var(--s-4); font-size:13px; color:rgba(251,249,244,.7)}
.site-footer .legal .wrap{display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; padding-block:0}

/* ---------- Utility ---------- */
.center{text-align:center}
.center p{margin-inline:auto}
.mt-0{margin-top:0}
.stat{font-family:var(--font-display); font-size:clamp(30px,4vw,44px); color:var(--tad-gold-deep); font-weight:600}
.skip{position:absolute; left:-9999px; top:0; background:var(--tad-gold); color:var(--tad-ink); padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; z-index:100}
.skip:focus{left:0}

@media (max-width:920px){ body.menu-open .sticky-bar{display:none} .nav.open{padding-bottom:calc(40px + env(safe-area-inset-bottom))} }
.social{display:flex; gap:12px; margin-top:12px}
.social a{width:42px; height:42px; border:1px solid rgba(251,249,244,.35); border-radius:10px; display:grid; place-items:center; color:var(--tad-cream)}
.social a:hover{color:var(--tad-gold-light); border-color:var(--tad-gold-light)}

/* audit fixes */
.field.invalid select, .field.invalid textarea{border-color:#8a3b1e}

/* fieldset groups styled identically to labeled fields */
fieldset.field{border:0; padding:0; margin:0; min-inline-size:auto}
fieldset.field legend{display:block; font-weight:600; font-size:15px; margin-bottom:6px; padding:0}

/* Map embed (contact) — restored after centralization regression */
.map-embed{border-radius:var(--r-card); overflow:hidden; border:1px solid var(--tad-border); min-height:340px; height:100%}
.map-embed iframe{width:100%; height:100%; min-height:340px; border:0; display:block}
/* Compact tooth chips (referral chart) — restored */
.chip-check.tooth span{padding:7px 11px; font-size:14px}
/* Screen-reader-only text */
.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}
/* Lock background scroll while menu open */
body.menu-open{overflow:hidden}

.text-md{font-size:19px}

.photo{width:100%; height:auto; border-radius:var(--r-card); display:block; object-fit:cover}