/* =============================================================
   Bowker Creek Dental — Production Site Styles
   Derived from the Brand Guide design system (Edition 01)
   ============================================================= */

:root{
  /* Brand palette */
  --ink:#2f3d30;
  --green:#4a6b4a;
  --sage:#7a8f7a;
  --cream:#f5efe4;
  --warm:#e8dcc4;
  --paper:#fbf7ee;
  --ink-soft:#475547;
  --border:rgba(47,61,48,0.18);
  --rule:rgba(47,61,48,0.28);
  --danger:#b04a3a;

  /* Type */
  --serif:"Cormorant Garamond", Georgia, serif;
  --text:Georgia, "Times New Roman", serif;

  /* Scale (tight, editorial) */
  --step--2: 10.5px;
  --step--1: 12.5px;
  --step-0:  16px;
  --step-1:  19px;
  --step-2:  22px;
  --step-3:  28px;
  --step-4:  36px;
  --step-5:  44px;
  --step-6:  56px;
  --step-7:  72px;
  --step-8:  96px;
  --step-9:  128px;

  /* Geometry */
  --container: 1180px;
  --container-gutter: 48px;
  --section-y: 112px;
  --section-y-sm: 80px;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* --------------------------------------------------------------
   TOP NAV  (sticky, tight, subdued)
-------------------------------------------------------------- */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,239,228,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topnav__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px var(--container-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  min-height:68px;
}
.topnav__brand{
  display:inline-flex; align-items:center;
  color:var(--ink); text-decoration:none;
  line-height:0;
  flex:0 0 auto;
}
.topnav__logo{
  display:block;
  height:36px !important;
  width:auto !important;
  max-width:none;
  max-height:36px;
  object-fit:contain;
}
@media (max-width:980px){
  .topnav__logo{ height:30px !important; max-height:30px; }
  .topnav__inner{ min-height:56px; padding:14px var(--container-gutter); }
}
.topnav__links{ display:flex; gap:26px; align-items:center; }
.topnav__links a{
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  transition:color 150ms ease;
  padding:6px 0;
}
.topnav__links a:hover{ color:var(--ink); }
.topnav__links a.is-current{ color:var(--ink); border-bottom:1px solid var(--green); }
.topnav__cta{
  background:var(--ink); color:var(--cream);
  padding:9px 18px;
  font-family:var(--text);
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer;
  transition:background 150ms ease;
}
.topnav__cta:hover{ background:var(--green); }
.topnav__menu-toggle{
  display:none; background:none; border:none; padding:6px; cursor:pointer;
  font-family:var(--text); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink);
}

/* --------------------------------------------------------------
   LAYOUT
-------------------------------------------------------------- */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-gutter);
}
.section{
  padding:var(--section-y) 0;
  border-bottom:1px solid var(--border);
}
.section:last-of-type{ border-bottom:none; }
.section--tight{ padding:var(--section-y-sm) 0; }
.section--paper{ background:var(--paper); }
.section--ink{ background:var(--ink); color:var(--cream); }
.section--ink .meta, .section--ink .eyebrow{ color:var(--warm); }
.section--ink .sub, .section--ink .lede{ color:rgba(245,239,228,0.78); }

/* --------------------------------------------------------------
   SECTION HEADER  (number + eyebrow + display title + lede)
-------------------------------------------------------------- */
.section-header{
  max-width:820px;
  margin-bottom:64px;
}
.section-header--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-header__meta{
  display:flex; align-items:center; gap:14px;
  margin-bottom:20px;
}
.section-header--center .section-header__meta{ justify-content:center; }
.section-header__number{
  font-family:var(--serif);
  font-size:15px;
  color:var(--sage);
  letter-spacing:0.05em;
}
.section-header__eyebrow, .eyebrow{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--green);
  position:relative;
  padding-left:20px;
}
.section-header__eyebrow::before, .eyebrow::before{
  content:""; position:absolute; left:0; top:50%;
  width:12px; height:1px; background:var(--sage);
}
.section-header__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--step-6);
  line-height:1.04;
  letter-spacing:-0.012em;
  margin:0 0 22px;
  text-wrap:balance;
}
.section-header__title em{ font-style:italic; font-weight:400; color:var(--green); }
.section-header__lede, .lede{
  font-size:var(--step-1);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:660px;
  margin:0;
  text-wrap:pretty;
}
.section-header--center .lede, .section-header--center .section-header__lede{
  margin-left:auto; margin-right:auto;
}

.eyebrow--plain{ padding-left:0; }
.eyebrow--plain::before{ display:none; }

.tiny-label{
  font-family:var(--text);
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--sage);
  display:inline-block;
}

.rule{ height:1px; background:var(--rule); margin:80px 0; border:none; }
.rule--narrow{ margin:48px 0; }

/* --------------------------------------------------------------
   DISPLAY HEADINGS, BODY PROSE
-------------------------------------------------------------- */
.display{
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--step-7);
  line-height:0.98;
  letter-spacing:-0.015em;
  margin:0;
  text-wrap:balance;
}
.display em{ font-style:italic; font-weight:400; color:var(--green); }
.display--xl{ font-size:var(--step-8); line-height:0.96; }

h2.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--step-5);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 24px;
  text-wrap:balance;
}
h2.section-title em{ font-style:italic; font-weight:400; color:var(--green); }

h3.sub-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--step-3);
  line-height:1.15;
  letter-spacing:-0.005em;
  margin:0 0 14px;
}

.prose{
  max-width:680px;
  font-size:17px;
  line-height:1.72;
  color:var(--ink-soft);
}
.prose p{ margin:0 0 18px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:500; font-family:var(--serif); font-size:19px; }
.prose em{ font-style:italic; color:var(--green); }
/* Scope prose-link styling to links in paragraphs, lists, and
   spans only — so buttons (.btn, .text-link, etc.) placed
   inside .prose keep their own styles. */
.prose p a, .prose li a, .prose span a{
  color:var(--ink); border-bottom:1px solid var(--sage);
  text-decoration:none; padding-bottom:1px;
}
.prose p a:hover, .prose li a:hover, .prose span a:hover{
  border-bottom-color:var(--green); color:var(--green);
}
.prose--wide{ max-width:820px; }

/* --------------------------------------------------------------
   BUTTONS
-------------------------------------------------------------- */
/* =======================================================
   BUTTON SYSTEM
   Variants:
     .btn             — Primary (filled ink, on light bg)
     .btn--ghost      — Secondary outline (on light bg)
     .btn--cream      — Inverse primary (for use on ink/dark bg)
   All variants use explicit color rules at BOTH states to
   prevent cascade collisions. Focus ring added for a11y.
   ======================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--text);
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  padding:14px 26px;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--cream);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn:hover{
  background:var(--green); color:var(--cream); border-color:var(--green);
}
.btn:focus-visible{
  outline:2px solid var(--green); outline-offset:3px;
}

.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--sage);
}
.btn--ghost:hover{
  background:var(--ink); color:var(--cream); border-color:var(--ink);
}

.btn--cream{
  background:var(--cream); color:var(--ink); border-color:var(--cream);
}
.btn--cream:hover{
  background:var(--warm); color:var(--ink); border-color:var(--warm);
}
.btn--cream:focus-visible{
  outline:2px solid var(--warm); outline-offset:3px;
}

.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:16px; }

/* Text-link: inline call-to-action on a prose line */
.text-link{
  font-family:var(--text); font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--sage); padding-bottom:3px;
  transition:border-color 150ms ease, color 150ms ease;
}
.text-link:hover{ border-bottom-color:var(--green); color:var(--green); }
.text-link:focus-visible{ outline:2px solid var(--green); outline-offset:4px; border-radius:2px; }
.text-link::after{ content:" →"; letter-spacing:0; color:var(--green); }

/* On-dark variant (for use inside .cta-strip, .footer, .section--ink) */
.section--ink .text-link, .cta-strip .text-link, .footer .text-link{
  color:var(--cream); border-bottom-color:rgba(245,239,228,0.4);
}
.section--ink .text-link:hover, .cta-strip .text-link:hover, .footer .text-link:hover{
  color:var(--warm); border-bottom-color:var(--warm);
}

/* --------------------------------------------------------------
   HERO  (homepage)
-------------------------------------------------------------- */
.hero{
  min-height:700px;
  padding:var(--section-y) 0 var(--section-y-sm);
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
}
.hero__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--green);
  margin-bottom:48px;
}
.hero__eyebrow-dot{ width:4px; height:4px; background:var(--sage); border-radius:50%; }

.hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(56px, 9.5vw, 128px);
  line-height:0.96;
  letter-spacing:-0.02em;
  margin:0;
  text-wrap:balance;
  max-width:14ch;
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--green); }

.hero__sub{
  font-size:var(--step-2);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:560px;
  margin:32px 0 40px;
  text-wrap:pretty;
}
.hero__sub em{ font-style:italic; color:var(--green); }

.hero__meta{
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
  align-items:end;
}
.hero__meta-item{ display:flex; flex-direction:column; gap:4px; }
.hero__meta-k{
  font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--sage);
}
.hero__meta-v{
  font-family:var(--serif); font-weight:500; font-size:19px;
  letter-spacing:0.01em;
}
.hero__meta-v em{ font-style:italic; font-weight:400; color:var(--green); }

/* --------------------------------------------------------------
   PAGE HEAD  (inner pages)
-------------------------------------------------------------- */
.pagehead{
  padding:96px 0 64px;
  border-bottom:1px solid var(--border);
}
.pagehead__meta{
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.pagehead__number{
  font-family:var(--serif); font-size:15px; color:var(--sage); letter-spacing:0.05em;
}
.pagehead__eyebrow{
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--green);
  position:relative;
  padding-left:20px;
}
.pagehead__eyebrow::before{
  content:""; position:absolute; left:0; top:50%;
  width:12px; height:1px; background:var(--sage);
}
.pagehead__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(44px, 7vw, 88px);
  line-height:0.98;
  letter-spacing:-0.015em;
  margin:0 0 24px;
  text-wrap:balance;
  max-width:22ch;
}
.pagehead__title em{ font-style:italic; font-weight:400; color:var(--green); }
.pagehead__lede{
  font-size:var(--step-2);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:680px;
  margin:0;
  text-wrap:pretty;
}

/* Breadcrumbs */
.crumbs{
  display:flex; gap:10px; align-items:center;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--sage);
  margin-bottom:36px;
}
.crumbs a{ color:var(--ink-soft); text-decoration:none; transition:color 150ms ease; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ opacity:0.6; }

/* --------------------------------------------------------------
   TWO-COLUMN TEXT LAYOUT
-------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:96px;
  align-items:start;
}
.split--even{ grid-template-columns:1fr 1fr; }
.split--reverse{ grid-template-columns:1fr 1.2fr; }
.split--narrow-gap{ gap:56px; }

.aside{
  border-left:1px solid var(--border);
  padding-left:32px;
  display:flex; flex-direction:column; gap:28px;
}
.aside__block-num{
  font-family:var(--serif); font-size:15px; color:var(--sage); letter-spacing:0.05em;
}
.aside__block-label{
  font-family:var(--serif); font-weight:500; font-size:22px;
  margin:4px 0 8px; line-height:1.2;
}
.aside__block-label em{ font-style:italic; font-weight:400; color:var(--green); }
.aside__block-body{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
}

/* --------------------------------------------------------------
   PILLARS  (four values grid)
-------------------------------------------------------------- */
.pillars{
  display:grid; gap:0;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.pillar{
  padding:40px 32px 48px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:14px;
}
.pillar:last-child{ border-right:none; }
.pillar__num{
  font-family:var(--serif); font-size:14px; color:var(--sage); letter-spacing:0.05em;
}
.pillar__label{
  font-family:var(--serif); font-weight:500; font-size:26px;
  margin:0; line-height:1.1;
}
.pillar__label em{ font-style:italic; font-weight:400; color:var(--green); }
.pillar__body{
  font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0;
}

/* --------------------------------------------------------------
   TICK LISTS  (we sound like / not like)
-------------------------------------------------------------- */
.tick-list{ list-style:none; padding:0; margin:0; }
.tick-list li{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.4;
  padding:16px 0 16px 32px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.tick-list li:last-child{ border-bottom:none; }
.tick-list li::before{
  position:absolute; left:0; top:18px;
  font-family:var(--text); font-size:14px; line-height:1;
}
.tick-list--yes li::before{ content:"✓"; color:var(--green); }
.tick-list--no li{ color:var(--ink-soft); font-style:italic; }
.tick-list--no li::before{ content:"✗"; color:var(--danger); }

/* --------------------------------------------------------------
   SERVICES GRID
-------------------------------------------------------------- */
.services{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.service{
  padding:32px 28px 36px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:var(--ink);
  transition:background 150ms ease;
  min-height:220px;
}
.service:hover{ background:var(--paper); }
.service__num{
  font-family:var(--serif); font-size:13px; color:var(--sage); letter-spacing:0.05em;
}
.service__name{
  font-family:var(--serif); font-weight:500; font-size:28px;
  line-height:1.1; letter-spacing:-0.005em; margin:0;
}
.service__name em{ font-style:italic; font-weight:400; color:var(--green); }
.service__desc{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
  margin:6px 0 0;
}
.service__more{
  margin-top:auto;
  padding-top:20px;
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-soft);
}
.service__more::after{ content:" →"; letter-spacing:0; color:var(--green); }

/* --------------------------------------------------------------
   TEAM GRID  (dentists + staff)
-------------------------------------------------------------- */
.dentists{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
}
.dentist{
  display:flex; flex-direction:column; gap:14px;
  text-decoration:none; color:var(--ink);
}
.dentist__plate{
  background:var(--paper);
  border:1px solid var(--border);
  aspect-ratio:1/1.1;
  overflow:hidden;
  position:relative;
}
.dentist__plate img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms ease;
  filter:saturate(0.92) contrast(1.02);
}
.dentist:hover .dentist__plate img{ transform:scale(1.03); }
.dentist__num{
  font-family:var(--serif); font-size:13px; color:var(--sage); letter-spacing:0.05em;
}
.dentist__name{
  font-family:var(--serif); font-weight:500; font-size:24px;
  line-height:1.15; letter-spacing:-0.005em; margin:0;
}
.dentist__name em{ font-style:italic; font-weight:400; color:var(--green); }
.dentist__role{
  font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-top:2px;
}

.staff-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px 28px;
}
.staff{
  display:flex; flex-direction:column; gap:10px;
}
.staff__plate{
  background:var(--paper);
  border:1px solid var(--border);
  aspect-ratio:1/1;
  overflow:hidden;
}
.staff__plate img{ width:100%; height:100%; object-fit:cover; }
.staff__name{
  font-family:var(--serif); font-weight:500; font-size:20px;
  line-height:1.15; margin:6px 0 0;
}
.staff__role{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--sage);
}
.staff__bio{
  font-size:14px; line-height:1.55; color:var(--ink-soft); margin:6px 0 0;
  font-style:italic;
}

.team-subhead{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule);
  margin:72px 0 40px;
}
.team-subhead:first-of-type{ margin-top:0; }
.team-subhead h3{
  font-family:var(--serif); font-weight:500;
  font-size:34px; line-height:1.1; letter-spacing:-0.005em;
  margin:0;
}
.team-subhead h3 em{ font-style:italic; font-weight:400; color:var(--green); }
.team-subhead__count{
  font-family:var(--serif); font-style:italic; font-size:15px; color:var(--sage);
}

/* --------------------------------------------------------------
   PORTRAIT + BIO  (dentist detail pages)
-------------------------------------------------------------- */
.portrait{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:72px;
  align-items:start;
  margin-bottom:96px;
}
.portrait__plate{
  background:var(--paper);
  border:1px solid var(--border);
  aspect-ratio:4/5;
  overflow:hidden;
  position:sticky; top:96px;
}
.portrait__plate img{ width:100%; height:100%; object-fit:cover; }
.portrait__body .display{
  font-size:var(--step-6);
  line-height:1.02;
  margin-bottom:8px;
}
.portrait__role{
  font-family:var(--serif); font-style:italic; font-size:19px; color:var(--sage);
  margin:0 0 40px;
}
.portrait__bio h3{
  font-family:var(--serif); font-weight:500;
  font-size:26px; line-height:1.15;
  margin:36px 0 16px;
  letter-spacing:-0.005em;
}
.portrait__bio h3 em{ font-style:italic; font-weight:400; color:var(--green); }
.portrait__bio p{
  font-size:17px; line-height:1.72; color:var(--ink-soft);
  margin:0 0 18px;
  max-width:60ch;
}
.portrait__bio p strong{
  color:var(--ink); font-weight:500; font-family:var(--serif); font-size:19px;
}
.portrait__bio p em{ font-style:italic; color:var(--green); }

.pullquote{
  margin:56px 0;
  padding:32px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:28px; line-height:1.35;
  color:var(--ink);
  text-wrap:balance;
}
.pullquote__cite{
  display:block; margin-top:18px;
  font-family:var(--text); font-style:normal;
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--sage);
}

/* --------------------------------------------------------------
   SERVICE DETAIL  (content formatter)
-------------------------------------------------------------- */
.service-body{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:96px;
  align-items:start;
}
.service-body__main h3{
  font-family:var(--serif); font-weight:500;
  font-size:28px; line-height:1.15;
  margin:42px 0 14px;
  letter-spacing:-0.005em;
}
.service-body__main h3 em{ font-style:italic; font-weight:400; color:var(--green); }
.service-body__main p{
  font-size:17px; line-height:1.72; color:var(--ink-soft); margin:0 0 18px;
  max-width:60ch;
}
.service-body__main p strong{
  color:var(--ink); font-weight:500; font-family:var(--serif); font-size:19px;
}

.service-body__side{
  position:sticky; top:96px;
  padding:28px 32px;
  background:var(--paper);
  border:1px solid var(--border);
  display:flex; flex-direction:column; gap:24px;
}
.service-body__side h4{
  font-family:var(--serif); font-weight:500; font-size:21px; margin:0 0 8px;
}
.service-body__side p{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0;
}
.service-body__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.service-body__list li{
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-family:var(--serif); font-size:17px; line-height:1.3;
}
.service-body__list li:last-child{ border-bottom:none; }
.service-body__list li em{ font-style:italic; color:var(--green); }

.fact-row{
  display:grid; grid-template-columns:auto 1fr; gap:16px 18px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.fact-row:last-child{ border-bottom:none; }
.fact-row__k{
  font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--sage);
}
.fact-row__v{
  font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink);
}
.fact-row__v em{ font-style:italic; font-weight:400; color:var(--green); }

/* --------------------------------------------------------------
   FEATURE ROW  (image + text row, editorial)
-------------------------------------------------------------- */
.feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
}
.feature--reverse{ grid-template-columns:1fr 1.1fr; }
.feature__plate{
  border:1px solid var(--border);
  background:var(--paper);
  overflow:hidden;
  aspect-ratio:4/5;
}
.feature__plate img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------
   CONTACT BLOCK
-------------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
}
.contact-card{
  padding:40px;
  background:var(--paper);
  border:1px solid var(--border);
}
.contact-card__row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:16px 28px;
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--border);
}
.contact-card__row:last-child{ border-bottom:none; }
.contact-card__k{
  font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--sage);
}
.contact-card__v{
  font-family:var(--serif); font-weight:500; font-size:22px;
  letter-spacing:-0.005em;
}
.contact-card__v em{ font-style:italic; font-weight:400; color:var(--green); }
.contact-card__v a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--sage); }
.contact-card__v a:hover{ border-bottom-color:var(--green); }
.contact-card__sub{
  font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:6px 0 0;
}

.hours-list{
  list-style:none; padding:0; margin:0;
}
.hours-list li{
  display:flex; justify-content:space-between;
  padding:10px 0;
  font-family:var(--serif); font-size:18px;
  border-bottom:1px solid var(--border);
}
.hours-list li:last-child{ border-bottom:none; }
.hours-list li em{ font-style:italic; color:var(--green); font-weight:400; }
.hours-list__day{ color:var(--ink-soft); }

/* --------------------------------------------------------------
   PATIENT RESOURCES
-------------------------------------------------------------- */
.resources{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.resource{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:28px 32px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--ink);
  gap:24px;
  transition:background 150ms ease;
}
.resource:hover{ background:var(--paper); }
.resource__name{
  font-family:var(--serif); font-weight:500; font-size:22px;
  line-height:1.2; letter-spacing:-0.005em;
}
.resource__name em{ font-style:italic; font-weight:400; color:var(--green); }
.resource__dl{
  font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--sage); white-space:nowrap;
}
.resource__dl::after{ content:" ↓"; letter-spacing:0; color:var(--green); }

/* --------------------------------------------------------------
   CTA STRIP  (pre-footer book an appointment)
-------------------------------------------------------------- */
.cta-strip{
  background:var(--ink);
  color:var(--cream);
  padding:88px 0 80px;
  margin-top:0;
  text-align:center;
}
.cta-strip__eyebrow{
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--warm); margin-bottom:18px;
}
.cta-strip__headline{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(44px, 6vw, 72px);
  line-height:1.02;
  letter-spacing:-0.015em;
  margin:0 auto 12px;
  max-width:18ch;
  text-wrap:balance;
}
.cta-strip__headline em{ font-style:italic; font-weight:400; color:var(--warm); }
.cta-strip__sub{
  font-family:var(--serif); font-style:italic; font-size:19px;
  color:rgba(245,239,228,0.75); max-width:540px; margin:0 auto 36px;
}
.cta-strip__actions{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; align-items:center; }
.cta-strip__phone{
  font-family:var(--serif); font-size:22px; letter-spacing:0.04em;
  color:var(--warm); text-decoration:none;
  border-bottom:1px solid rgba(232,220,196,0.3); padding-bottom:4px;
}

/* --------------------------------------------------------------
   FOOTER
-------------------------------------------------------------- */
.footer{
  background:var(--ink);
  color:var(--cream);
  padding:96px 0 48px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:48px;
  align-items:start;
  padding-bottom:64px;
  border-bottom:1px solid rgba(245,239,228,0.16);
}
.footer__wordmark{
  display:flex; flex-direction:column; gap:18px;
}
.footer__wordmark img{ max-width:200px; width:100%; }
.footer__kicker{
  font-family:var(--serif); font-style:italic;
  font-size:17px; line-height:1.5;
  color:rgba(245,239,228,0.7); max-width:30ch;
}
.footer__col-title{
  font-family:var(--text);
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--warm); margin:0 0 18px;
}
.footer__links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer__links a{
  font-family:var(--serif); font-size:17px; color:rgba(245,239,228,0.85);
  text-decoration:none; transition:color 150ms ease;
}
.footer__links a:hover{ color:var(--cream); }
.footer__contact{ display:flex; flex-direction:column; gap:14px; }
.footer__contact-k{
  font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--sage); margin-bottom:3px;
}
.footer__contact-v{
  font-family:var(--serif); font-size:17px; color:var(--cream);
  text-decoration:none;
}
.footer__contact-v em{ font-style:italic; color:var(--warm); }
.footer__meta{
  margin-top:36px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(245,239,228,0.55);
}
.footer__meta em{ font-family:var(--serif); font-style:italic; color:var(--warm); text-transform:none; letter-spacing:0.02em; font-size:13px; }

/* --------------------------------------------------------------
   PANELS / INLINE CARDS
-------------------------------------------------------------- */
.panel{
  background:var(--paper);
  border:1px solid var(--border);
  padding:40px;
}
.panel--warm{ background:var(--warm); }
.panel--ink{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.panel--center{ text-align:center; }

.stat-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-row--three{ grid-template-columns:repeat(3, 1fr); }
.stat{
  padding:32px 28px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.stat:last-child{ border-right:none; }
.stat__figure{
  font-family:var(--serif); font-weight:500; font-size:60px;
  line-height:0.95; letter-spacing:-0.015em;
}
.stat__figure em{ font-style:italic; font-weight:400; color:var(--green); }
.stat__label{
  font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.35;
}

/* --------------------------------------------------------------
   BRIDGE MOTIF  (decorative divider)
-------------------------------------------------------------- */
.motif-divider{
  display:flex; justify-content:center; align-items:center; gap:18px;
  margin:72px 0;
  color:var(--sage);
}
.motif-divider__line{
  flex:1; height:1px; background:var(--border);
}
.motif-divider__mark{ width:36px; height:36px; opacity:0.7; }

/* --------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------- */
@media (max-width:980px){
  :root{
    --section-y:80px;
    --section-y-sm:56px;
    --container-gutter:28px;
  }
  .topnav__links, .topnav__cta{ display:none; }
  .topnav__menu-toggle{ display:inline-flex; }
  .section-header__title{ font-size:var(--step-5); }
  .split, .split--even, .split--reverse, .feature, .feature--reverse,
  .portrait, .service-body, .contact-grid{
    grid-template-columns:1fr; gap:40px;
  }
  .portrait__plate, .service-body__side{ position:static; }
  .pillars{ grid-template-columns:repeat(2, 1fr); }
  .pillar{ border-bottom:1px solid var(--border); }
  .pillar:nth-child(2n){ border-right:none; }
  .pillar:nth-last-child(-n+2){ border-bottom:none; }
  .services{ grid-template-columns:repeat(2, 1fr); }
  .dentists, .staff-grid, .stat-row{ grid-template-columns:repeat(2, 1fr); }
  .resources{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .hero__meta{ grid-template-columns:1fr; gap:20px; }
  .aside{ padding-left:0; border-left:none; border-top:1px solid var(--border); padding-top:28px; }
}
@media (max-width:640px){
  .services, .dentists, .staff-grid, .stat-row, .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:none; }
  .stat{ border-right:none; border-bottom:1px solid var(--border); }
  .stat:last-child{ border-bottom:none; }
  .footer__grid{ grid-template-columns:1fr; }
  .contact-card__row{ grid-template-columns:1fr; gap:4px; }
  .hero{ min-height:auto; }
}

@media print{
  .topnav, .cta-strip, .footer{ display:none; }
  body{ background:white; color:black; }
}

/* --------------------------------------------------------------
   MOBILE NAV  (editorial overlay — toggle lives in .topnav)
-------------------------------------------------------------- */
.mobilenav{
  position:fixed; inset:0; z-index:49;
  padding-top:57px; /* clears the 56px mobile topnav + hairline */
  background:var(--cream);
  display:none;
}
body.nav-open .mobilenav{ display:block; }
body.nav-open{ overflow:hidden; }
@media (min-width:981px){ .mobilenav{ display:none !important; } }

.mobilenav__inner{
  height:100%; overflow-y:auto;
  padding:20px var(--container-gutter) 40px;
  display:flex; flex-direction:column;
}
.mobilenav__list{ list-style:none; margin:0; padding:0; }
.mobilenav__list li{ border-bottom:1px solid var(--border); }
.mobilenav__list a{
  display:flex; align-items:baseline; gap:16px;
  padding:20px 2px;
  text-decoration:none; color:var(--ink);
}
.mobilenav__num{
  font-family:var(--serif); font-style:italic;
  font-size:16px; color:var(--sage); min-width:30px;
}
.mobilenav__name{
  font-family:var(--serif); font-weight:500;
  font-size:34px; line-height:1;
  letter-spacing:-0.01em;
}
.mobilenav__list a.is-current .mobilenav__name{ font-style:italic; }
.mobilenav__list a.is-current .mobilenav__num::before{ content:""; }

.mobilenav__secondary{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  padding:22px 2px 0;
}
.mobilenav__secondary a{
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:4px 0;
}
.mobilenav__secondary a.is-current{ color:var(--ink); border-bottom:1px solid var(--green); }

.mobilenav__cta{ margin-top:28px; text-align:center; display:block; }

.mobilenav__meta{
  margin-top:auto; padding-top:28px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px;
  font-size:13.5px; color:var(--ink-soft);
}
.mobilenav__meta a{ color:var(--ink); text-decoration:none; }
.mobilenav__meta em{ font-family:var(--serif); }

@media (prefers-reduced-motion:no-preference){
  body.nav-open .mobilenav{ animation:mnav-fade .22s ease both; }
  body.nav-open .mobilenav__list li,
  body.nav-open .mobilenav__secondary,
  body.nav-open .mobilenav__cta,
  body.nav-open .mobilenav__meta{
    animation:mnav-rise .45s cubic-bezier(.2,.7,.2,1) both;
  }
  body.nav-open .mobilenav__list li:nth-child(1){ animation-delay:.03s; }
  body.nav-open .mobilenav__list li:nth-child(2){ animation-delay:.07s; }
  body.nav-open .mobilenav__list li:nth-child(3){ animation-delay:.11s; }
  body.nav-open .mobilenav__list li:nth-child(4){ animation-delay:.15s; }
  body.nav-open .mobilenav__list li:nth-child(5){ animation-delay:.19s; }
  body.nav-open .mobilenav__secondary{ animation-delay:.24s; }
  body.nav-open .mobilenav__cta{ animation-delay:.28s; }
  body.nav-open .mobilenav__meta{ animation-delay:.32s; }
  @keyframes mnav-fade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes mnav-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
}

/* ---------------------------------------------------------------
   STAFF WRITE-UPS  (expandable Q&A under each team card)
   --------------------------------------------------------------- */
.staff__more{ margin-top:8px; }
.staff__more summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--rule); padding-bottom:2px;
}
.staff__more summary::-webkit-details-marker{ display:none; }
.staff__more summary::after{
  content:"+"; font-family:var(--serif); font-size:17px; line-height:1;
}
.staff__more[open] summary{ color:var(--sage); }
.staff__more[open] summary::after{ content:"–"; }
.staff:has(.staff__more[open]) .staff__bio{ display:none; }
.staff__qa{ margin:14px 0 0; padding:0; }
.staff__qa dt{
  font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.25;
  color:var(--ink); margin:14px 0 4px;
}
.staff__qa dt:first-child{ margin-top:0; }
.staff__qa dd{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.staff__qa dd p{ margin:0 0 6px; }
.staff__qa dd p:last-child{ margin-bottom:0; }