/* ============================================================
   Brookside Dental — design tokens, base, components
   Palette: deep teal primary + sage/cream surfaces (calm, clinical-warm)
   ============================================================ */

:root, [data-theme="light"] {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Surfaces — warm cream / soft white */
  --color-bg: #f6f4ef;
  --color-surface: #fbfaf6;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eef1ec;
  --color-border: #dde1da;
  --color-divider: #e7e9e2;

  /* Text */
  --color-text: #1f2a28;
  --color-text-muted: #5d6b67;
  --color-text-faint: #93a09b;
  --color-text-inverse: #f7faf7;

  /* Primary — deep teal */
  --color-primary: #0f766e;
  --color-primary-hover: #0c5e57;
  --color-primary-active: #0a4a45;
  --color-primary-soft: #d9ece9;

  /* Accent — warm sage / gold for stars */
  --color-sage: #6f9a7e;
  --color-gold: #c79a3c;

  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px;
  --transition: 200ms cubic-bezier(.16,1,.3,1);

  --shadow-sm: 0 1px 2px rgba(20,40,38,.06);
  --shadow-md: 0 6px 20px rgba(20,40,38,.08);
  --shadow-lg: 0 18px 44px rgba(20,40,38,.14);

  --content: 1180px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #11201e;
  --color-surface: #162825;
  --color-surface-2: #1b302c;
  --color-surface-offset: #1a2e2b;
  --color-border: #2c423e;
  --color-divider: #243a36;
  --color-text: #e4ebe8;
  --color-text-muted: #9fb0ab;
  --color-text-faint: #6c807b;
  --color-text-inverse: #0f1c1a;
  --color-primary: #4cb5a8;
  --color-primary-hover: #6cc6bb;
  --color-primary-active: #8ad6cc;
  --color-primary-soft: #173b37;
  --color-sage: #8ab79a;
  --color-gold: #e0bd6a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#11201e; --color-surface:#162825; --color-surface-2:#1b302c;
    --color-surface-offset:#1a2e2b; --color-border:#2c423e; --color-divider:#243a36;
    --color-text:#e4ebe8; --color-text-muted:#9fb0ab; --color-text-faint:#6c807b;
    --color-text-inverse:#0f1c1a; --color-primary:#4cb5a8; --color-primary-hover:#6cc6bb;
    --color-primary-active:#8ad6cc; --color-primary-soft:#173b37; --color-sage:#8ab79a; --color-gold:#e0bd6a;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:84px;}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);transition:background var(--transition),color var(--transition);}
img,svg{display:block;max-width:100%;height:auto;}
ul[role=list]{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{text-wrap:balance;line-height:1.12;font-family:var(--font-display);font-weight:500;}
p{text-wrap:pretty;}
a{color:inherit;}
::selection{background:rgba(15,118,110,.2);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
button{cursor:pointer;background:none;border:none;}
a,button,input,textarea,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition);}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

.container{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--space-6);}
.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;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--color-primary);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) 0;z-index:200;}
.skip-link:focus{left:0;}

.eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:var(--text-sm);font-weight:600;padding:.85rem 1.5rem;border-radius:var(--radius-full);text-decoration:none;white-space:nowrap;line-height:1;}
.btn--sm{padding:.6rem 1.1rem;}
.btn--block{width:100%;padding:1rem;}
.btn--primary{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--primary:active{transform:translateY(0);}
.btn--ghost{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border);}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary);}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transition),box-shadow var(--transition);}
.header.is-scrolled{border-color:var(--color-divider);box-shadow:var(--shadow-sm);}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--space-6);}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--color-primary);font-weight:700;}
.brand__mark{flex:none;}
.brand__name{font-family:var(--font-body);font-size:1.18rem;letter-spacing:-.01em;color:var(--color-text);}
.brand__accent{color:var(--color-primary);margin-left:.15em;}
.nav{display:flex;gap:var(--space-6);}
.nav a{text-decoration:none;font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);}
.nav a:hover{color:var(--color-primary);}
.header__actions{display:flex;align-items:center;gap:var(--space-3);}
.phone-link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:var(--text-sm);font-weight:600;color:var(--color-text);}
.phone-link:hover{color:var(--color-primary);}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text);border:1px solid var(--color-border);}
.icon-btn:hover{border-color:var(--color-primary);color:var(--color-primary);}
.nav-toggle{display:none;}
.mobile-nav{display:none;}

/* ---------- hero ---------- */
.hero{padding-block:clamp(var(--space-12),6vw,var(--space-24));}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--space-8),5vw,var(--space-20));align-items:center;}
.hero__title{font-size:var(--text-2xl);font-weight:400;letter-spacing:-.02em;margin-bottom:var(--space-5);}
.hero__title em{font-style:italic;color:var(--color-primary);}
.hero__lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:46ch;margin-bottom:var(--space-8);}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8);}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);}
.hero__trust strong{color:var(--color-text);}
.hero__trust li{position:relative;padding-right:var(--space-5);}
.hero__trust li:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:1.1em;background:var(--color-border);}
.hero__media{position:relative;}
.hero__media img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);object-fit:cover;aspect-ratio:16/11;}
.hero__badge{position:absolute;left:-12px;bottom:24px;display:flex;align-items:center;gap:.7rem;background:var(--color-surface-2);padding:.85rem 1.1rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-divider);}
.hero__badge svg{color:var(--color-gold);flex:none;}
.hero__badge strong{display:block;font-size:var(--text-sm);}
.hero__badge span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);}

/* ---------- trust strip ---------- */
.strip{background:var(--color-primary);color:var(--color-text-inverse);}
[data-theme="dark"] .strip{background:var(--color-surface-2);color:var(--color-text);}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .strip{background:var(--color-surface-2);color:var(--color-text);}}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);padding-block:var(--space-10);}
.strip__item{display:flex;gap:.85rem;align-items:flex-start;}
.strip__item svg{width:30px;height:30px;flex:none;opacity:.9;}
.strip__item h3{font-family:var(--font-body);font-size:var(--text-base);font-weight:700;margin-bottom:.2rem;}
.strip__item p{font-size:var(--text-sm);opacity:.85;line-height:1.45;}

/* ---------- sections ---------- */
.section{padding-block:clamp(var(--space-16),8vw,var(--space-32));}
.section--alt{background:var(--color-surface);}
.section__head{max-width:62ch;margin:0 auto var(--space-12);text-align:center;}
.section__title{font-size:var(--text-xl);letter-spacing:-.01em;}
.section__sub{font-size:var(--text-lg);color:var(--color-text-muted);margin-top:var(--space-3);}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.card{background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary-soft);}
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-5);}
.card__icon svg{width:26px;height:26px;}
.card h3{font-family:var(--font-body);font-size:var(--text-lg);font-weight:700;margin-bottom:.4rem;}
.card p{font-size:var(--text-base);color:var(--color-text-muted);}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-20));align-items:center;}
.about__media img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);object-fit:cover;aspect-ratio:4/3;}
.about__copy p{color:var(--color-text-muted);margin-bottom:var(--space-4);}
.checklist{display:flex;flex-direction:column;gap:.7rem;margin:var(--space-6) 0 var(--space-8);}
.checklist li{position:relative;padding-left:1.9rem;font-size:var(--text-sm);}
.checklist li::before{content:"";position:absolute;left:0;top:.1em;width:1.25rem;height:1.25rem;border-radius:var(--radius-full);background:var(--color-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/14px no-repeat;}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.review{background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm);}
.stars{color:var(--color-gold);letter-spacing:.15em;font-size:1.05rem;margin-bottom:var(--space-4);}
.review blockquote{font-size:var(--text-base);line-height:1.6;margin-bottom:var(--space-5);}
.review figcaption{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start;}
.info-list{display:flex;flex-direction:column;gap:var(--space-5);margin:var(--space-8) 0;}
.info-list li{display:flex;gap:var(--space-4);}
.info-list__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);}
.info-list__icon svg{width:22px;height:22px;}
.info-list strong{display:block;font-size:var(--text-sm);margin-bottom:.15rem;}
.info-list a{color:var(--color-text-muted);text-decoration:none;}
.info-list a:hover{color:var(--color-primary);}
.hours{background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);}
.hours h3{font-family:var(--font-body);font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-4);}
.hours dl{display:flex;flex-direction:column;gap:.6rem;}
.hours dl div{display:flex;justify-content:space-between;font-size:var(--text-sm);}
.hours dt{color:var(--color-text-muted);}
.hours dd{font-weight:600;}
.hours__note{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-muted);}

/* form */
.contact__form-wrap{background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:clamp(var(--space-6),3vw,var(--space-10));box-shadow:var(--shadow-md);}
.form__intro{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-6);}
.form__fieldset{border:none;margin-bottom:var(--space-6);}
.form__fieldset legend{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary);margin-bottom:var(--space-4);padding:0;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.field{display:flex;flex-direction:column;margin-bottom:var(--space-4);}
.field label,.field__label{font-size:var(--text-sm);font-weight:600;margin-bottom:.4rem;}
.req{color:var(--color-primary);}
.field input,.field select,.field textarea{width:100%;padding:.75rem .9rem;font-size:var(--text-sm);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-faint);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);}
.field textarea{resize:vertical;min-height:96px;}
.field.is-invalid input,.field.is-invalid select{border-color:#c0392b;}
.field__error{color:#c0392b;font-size:var(--text-xs);margin-top:.35rem;min-height:1em;}
[data-theme="dark"] .field__error{color:#ff8a7a;}
.field__hint{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:.35rem;text-align:right;}
.radio-row{display:flex;flex-wrap:wrap;gap:var(--space-4);}
.radio,.checkbox{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--text-sm);font-weight:500;cursor:pointer;}
.radio input,.checkbox input{width:auto;accent-color:var(--color-primary);margin-top:.15rem;}
.checkbox{align-items:flex-start;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__assure{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;margin-top:var(--space-4);}
.form__success{text-align:center;padding:var(--space-8) var(--space-4);}
.form__success svg{margin:0 auto var(--space-4);color:var(--color-primary);}
.form__success h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-lg);margin-bottom:.5rem;}
.form__success p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* ---------- footer ---------- */
.footer{background:var(--color-surface-offset);border-top:1px solid var(--color-divider);padding-top:var(--space-16);}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--space-8);padding-bottom:var(--space-12);}
.brand--footer{margin-bottom:var(--space-4);}
.footer__brand p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:34ch;}
.footer__col h4{font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-4);}
.footer__col ul{display:flex;flex-direction:column;gap:.6rem;}
.footer__col a{text-decoration:none;font-size:var(--text-sm);color:var(--color-text-muted);}
.footer__col a:hover{color:var(--color-primary);}
.footer__contact li{font-size:var(--text-sm);color:var(--color-text-muted);}
.footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-6);border-top:1px solid var(--color-divider);}
.footer__bar p{font-size:var(--text-xs);color:var(--color-text-faint);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .strip__grid{grid-template-columns:repeat(2,1fr);}
  .services,.reviews{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .nav,.phone-link{display:none;}
  .nav-toggle{display:inline-flex;}
  .header__cta{display:none;}
  .hero__grid,.about,.contact{grid-template-columns:1fr;}
  .hero__media{order:-1;}
  .about__media{order:-1;}
  .mobile-nav{display:none;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-6) var(--space-6);border-top:1px solid var(--color-divider);background:var(--color-surface);}
  .mobile-nav.is-open{display:flex;}
  .mobile-nav a{text-decoration:none;padding:.7rem 0;font-weight:500;color:var(--color-text);border-bottom:1px solid var(--color-divider);}
  .mobile-nav__phone{color:var(--color-primary)!important;font-weight:700!important;border-bottom:none!important;}
}
@media (max-width:560px){
  .services,.reviews,.strip__grid,.footer__grid{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .hero__badge{left:0;}
}