/* Dutch Creek Dental. One stylesheet. Colors are named for where they were sampled (spec 4.1). */
:root {
  --logo-ink: #3C4880;      /* the ink printed in the current logo */
  --night-ink: #1F2540;     /* body text and the footer ground; a deeper step of the logo ink */
  --logo-slate: #626E99;    /* mid tint in the logo scan */
  --logo-mist: #E0E5EE;     /* palest tint in the logo scan */
  --paper: #FAFBFD;         /* the page; a cool white that sits under the cream of the art */
  --hogback: #B5543A;       /* red sandstone ridge in the art; the phone Call button only */
  --hogback-deep: #9C4630;  /* Call button on hover */
  --error-ink: #8A2A12;     /* form errors */
  --sand: #F5EFE4;          /* warm paper: the services and map bands */
  --blush: #F8E9E0;         /* a pale wash of the hogback red: the emergency callout */
  --slate-deep: #56628E;    /* the small print: notes and credits, readable on every ground */
  --gold: #D6A02A;          /* tape and small accents, never text */
  --radius-lg: 18px;
  --lift: 0 1px 2px rgba(31,37,64,.08), 0 14px 28px -14px rgba(31,37,64,.28);
  --display: "Young Serif", Georgia, serif;
  --body: "Figtree", system-ui, sans-serif;
  --hand: "Reenie Beanie", "Segoe Print", cursive;
  --radius: 6px;
  --wrap: 1240px;
  color-scheme: light;
}
@font-face { font-family: "Young Serif"; src: url("/assets/fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url("/assets/fonts/reenie-beanie-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--paper); color: var(--night-ink); font: 400 1.125rem/1.6 var(--body); overflow-x: clip; }
img, svg, picture { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
/* A link inside running text is bold and the deep red, with no underline until it is hovered or focused. */
p a, li a, dd a { color: var(--hogback-deep); font-weight: 700; }
:focus-visible { outline: 3px solid var(--logo-ink); outline-offset: 3px; }
.site-foot :focus-visible { outline-color: var(--paper); }
.band--hogback :focus-visible { outline-color: var(--paper); }
[hidden] { display: none !important; }
main:focus { outline: none; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--logo-ink); color: var(--paper); padding: 12px 16px; z-index: 70; }
.skip-link:focus { left: 8px; top: 8px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--logo-ink); text-wrap: balance; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.25rem, 1.2rem + 3.3vw, 3.8rem); line-height: 1.08; letter-spacing: -.012em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
h3 { font-size: 1.375rem; }
p { margin: 0 0 1em; max-width: 65ch; }
.note { color: var(--slate-deep); font-size: .9375rem; }
.todo { background: #FFF1B8; color: #3A2F00; padding: 0 .25em; border-radius: 3px; }
.tel { white-space: nowrap; }
.prose { padding-block: 40px; }
.prose ul { padding-left: 1.2em; max-width: 65ch; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 24px;
  border-radius: var(--radius); border: 2px solid transparent;
  font: 700 1.0625rem/1.2 var(--body); text-decoration: none; text-align: center; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-call { background: var(--hogback); color: var(--paper); }
.btn-call:hover { background: var(--hogback-deep); }
.btn-book { border-color: var(--logo-ink); color: var(--logo-ink); background: transparent; }
.btn-book:hover { background: var(--logo-mist); }
.btn[type="submit"] { background: var(--logo-ink); color: var(--paper); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

/* Header: a fixed bar over a placeholder of the same height, so the shrink never moves the page.
   At the top: a strip with the live hours, then the logo, the menu, and the Call button on one line.
   Scrolled: the strip goes, the logo becomes its mark, the menu sits between the mark and the one-word
   status, and the Call button stays at the right. */
:root { --head-h: 110px; }
.site-head { height: var(--head-h); }
.head-bar { position: fixed; inset: 0 0 auto 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--logo-mist); transition: box-shadow .2s; }
.site-head.is-stuck .head-bar { box-shadow: 0 6px 18px -10px rgba(31, 37, 64, .35); }
.head-strip { background: var(--logo-mist); max-height: 36px; overflow: hidden; transition: max-height .2s; }
.head-strip .wrap { display: flex; justify-content: flex-end; align-items: center; min-height: 34px; }
.head-strip .open-now { font-size: .875rem; }
.site-head.is-stuck .head-strip { max-height: 0; }
.head-main { display: flex; align-items: center; gap: 24px; padding-block: 12px; transition: padding .2s; }
.site-head.is-stuck .head-main { padding-block: 8px; }
.logo { display: block; flex: none; line-height: 0; }
.logo__full { display: block; height: 50px; width: auto; }
.logo__mark { display: none; height: 42px; width: auto; }
.site-head.is-stuck .logo__full { display: none; }
.site-head.is-stuck .logo__mark { display: block; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 36px); align-items: center; margin-inline: auto; }
.nav a { white-space: nowrap; text-decoration: none; font-weight: 500; padding: 8px 2px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--logo-ink); }
.head-right { display: flex; align-items: center; gap: 16px; }
.head-call { white-space: nowrap; min-height: 46px; padding: 10px 22px; }
.open-word { display: none; font-weight: 700; }
.site-head.is-stuck .open-word { display: inline; }

/* Open-now line */
.open-now { margin: 0; font-weight: 500; font-size: .9375rem; color: var(--night-ink); }
.open-now::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .5em; background: var(--logo-slate); }
.open-now[data-state="open"]::before { background: #3F7A4D; }

/* Menu below 1200 px: a details element, so it works without JavaScript */
.menu { display: none; }
.menu summary { white-space: nowrap; list-style: none; cursor: pointer; font: 700 1.0625rem var(--body); color: var(--logo-ink); padding: 10px 4px; min-height: 44px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.menu[open] summary::after { transform: translateY(.05em) rotate(-135deg); }
.menu nav { position: absolute; inset: 100% 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--logo-mist); padding: 8px 16px 20px; display: grid; gap: 4px; z-index: 40; }
.menu nav a { padding: 12px 4px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--logo-mist); }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
  padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px);
}
.lede { margin: 0 0 28px; max-width: 34em; font-size: 1.1875rem; }
.hero .cta { margin-bottom: 24px; }
.trust, .accepting { margin: 0 0 6px; }
.trust a { font-weight: 700; }

/* Prints on a table: the creek drawing at the back, with the photo of Dr. Mike and Nella and the photo of the
   sign each tucked over one bottom corner of it. The creek's caption sits in the gap between them, and each
   print has a strip of tape. tools/check_hero.mjs checks at every width that no caption or text is covered. */
.prints { position: relative; aspect-ratio: 1 / 1.04; }
.print {
  position: absolute; margin: 0; background: #fff;
  padding: 10px 10px 0;
  box-shadow: 0 1px 2px rgba(31,37,64,.20), 0 8px 16px -6px rgba(31,37,64,.22), 0 24px 40px -20px rgba(31,37,64,.28);
}
.print picture, .print img { display: block; width: 100%; height: auto; }
.print figcaption { padding: 4px 6px 8px; font: 400 1.9rem/1.1 var(--hand); color: var(--logo-ink); }
.print--art figcaption { text-align: center; }
.print--art { top: 0; left: 3%; width: 78%; z-index: 1; transform: rotate(-2.2deg); }
.print--doc { left: -4%; top: 45%; width: 38%; z-index: 2; transform: rotate(-6deg); }
.print--sign { right: -3%; top: 52%; width: 44%; z-index: 2; transform: rotate(5deg); }
.print--doc img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 20%; }
/* tape */
.print--art::before, .print--art::after, .print--doc::before, .print--sign::before {
  content: ""; position: absolute; z-index: 3; width: 86px; height: 24px;
  background: rgba(214, 160, 42, .38); box-shadow: 0 1px 2px rgba(31,37,64,.12);
}
.print--art::before { top: -11px; left: 9%; transform: rotate(-9deg); }
.print--art::after { top: -9px; right: 8%; transform: rotate(7deg); }
.print--doc::before { top: -12px; left: 38%; transform: rotate(4deg); width: 70px; }
.print--sign::before { top: -12px; right: 16%; transform: rotate(-5deg); width: 70px; }
.print--static, .print--meet { position: relative; display: block; }
.print--meet { width: min(100%, 346px); transform: rotate(-2deg); }
.print--static { width: min(100%, 420px); transform: rotate(1.6deg); }

@media (prefers-reduced-motion: no-preference) {
  .hero .print { animation: settle .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero .print--sign { animation-delay: .12s; }
  .hero .print--doc { animation-delay: .24s; }
  @keyframes settle { from { opacity: 0; translate: 0 14px; rotate: 2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
}

/* Dividers and ornaments */
.ridge { display: block; width: 100%; height: 56px; }
.creek-rule { display: block; width: min(100%, 360px); height: 14px; margin-block: 28px; }
.culvert { display: block; width: 160px; height: 80px; margin-block: 24px; }
section.block { padding-block: clamp(40px, 6vw, 80px); }
section.block + section.block { border-top: 1px solid var(--logo-mist); }

/* Footer */
.site-foot { background: var(--night-ink); color: var(--paper); }
.site-foot .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 48px 32px; }
.foot-logo { display: block; width: min(100%, 300px); height: auto; margin-bottom: 20px; }
.site-foot h2 { font-size: 1.125rem; color: var(--paper); margin-bottom: .6em; }
.site-foot a { color: var(--paper); font-weight: 500; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-foot p { max-width: none; }
.site-foot .legal { grid-column: 1 / -1; border-top: 1px solid rgba(250, 251, 253, .25); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9375rem; margin: 0; list-style: none; padding-inline: 0; }

/* Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field__optional { font-weight: 400; color: var(--logo-slate); }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 12px; border: 2px solid var(--logo-slate); border-radius: var(--radius); background: #fff; color: var(--night-ink); }
.field__error { color: var(--error-ink); font-weight: 500; margin: 6px 0 0; }
.field [aria-invalid="true"] { border-color: var(--error-ink); }
.hp { display: none; }
.contact__notice { background: #fff; border: 2px solid var(--hogback); border-radius: 12px; padding: 14px 16px; }
.contact__notice .tel { color: var(--hogback); font-weight: 700; }
.contact__notice .tel:hover { text-decoration: none; color: var(--hogback-deep); }
.contact__status { min-height: 1.6em; margin-top: 12px; }
.cf-turnstile { margin-bottom: 14px; }

/* Sticky phone bar */
.bar { display: none; }


/* Bands: full-width sections in different grounds, each rising into the one above with a ridge edge */
.band { position: relative; padding-block: clamp(52px, 7vw, 88px); }
.band--paper { background: var(--paper); }
.band--sand { background: var(--sand); }
.band--mist { background: var(--logo-mist); }
.band--hogback { background: var(--hogback); color: var(--paper); }
.band--ridge::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: clamp(34px, 5vw, 56px); transform: translateY(-100%); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.band--sand.band--ridge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23F5EFE4' d='M0 56V30C120 12 240 36 400 24S660 4 820 22 1040 38 1200 14V56Z'/%3E%3C/svg%3E"); }
.band--sand.band--ridge.alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23F5EFE4' d='M0 56V20C160 38 300 30 460 14S760 6 900 24 1100 40 1200 22V56Z'/%3E%3C/svg%3E"); }
.band--mist.band--ridge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23E0E5EE' d='M0 56V30C120 12 240 36 400 24S660 4 820 22 1040 38 1200 14V56Z'/%3E%3C/svg%3E"); }
.band--mist.band--ridge.alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23E0E5EE' d='M0 56V20C160 38 300 30 460 14S760 6 900 24 1100 40 1200 22V56Z'/%3E%3C/svg%3E"); }
.band--paper.band--ridge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FAFBFD' d='M0 56V30C120 12 240 36 400 24S660 4 820 22 1040 38 1200 14V56Z'/%3E%3C/svg%3E"); }
.band--paper.band--ridge.alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FAFBFD' d='M0 56V20C160 38 300 30 460 14S760 6 900 24 1100 40 1200 22V56Z'/%3E%3C/svg%3E"); }
.band--hogback.band--ridge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23B5543A' d='M0 56V30C120 12 240 36 400 24S660 4 820 22 1040 38 1200 14V56Z'/%3E%3C/svg%3E"); }
.band--hogback.band--ridge.alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath fill='%23B5543A' d='M0 56V20C160 38 300 30 460 14S760 6 900 24 1100 40 1200 22V56Z'/%3E%3C/svg%3E"); }
.band--hogback h2, .band--hogback p { color: var(--paper); }
.band--hogback a { color: var(--paper); }
.band--hogback .btn-light { color: var(--hogback-deep); }
.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px); }
.page-head h1 { margin-bottom: .3em; }
.section-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { margin-bottom: 0; }
.kicker { margin: 0 0 .1em; font: 400 2.1rem/1 var(--hand); color: var(--hogback-deep); transform: rotate(-1.5deg); transform-origin: left center; }
.card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--lift); padding: clamp(24px, 3vw, 36px); }
.icon { width: 52px; height: 52px; fill: none; stroke: var(--logo-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-light { background: var(--paper); color: var(--hogback-deep); border-color: var(--paper); }
.btn-light:hover { background: #fff; text-decoration: none; }

/* Hours, address, and payment, as three cards on the mist band */
.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.fact-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--lift); padding: 28px; border-top: 4px solid var(--hogback); }
.fact-card h2 { margin: 12px 0 8px; font-size: 1.375rem; }
.fact-card p { margin: 0 0 .5em; }

/* The emergency callout */
.callout-emergency { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.6vw, 32px); align-items: center; margin-bottom: clamp(40px, 5vw, 64px); padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 36px); background: var(--blush); border-radius: var(--radius-lg); border: 2px solid var(--hogback); box-shadow: var(--lift); }
.callout-emergency__spot { width: 112px; height: 112px; mix-blend-mode: multiply; }
.callout-emergency__kicker { margin: 0 0 .1em; font: 700 .9375rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--hogback-deep); }
.callout-emergency__title { margin: 0 0 .25em; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
.callout-emergency__side { display: grid; justify-items: end; gap: 2px; text-align: right; }
.callout-emergency__call { margin: 0; }
.callout-emergency__phone { font: 400 clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem)/1.05 var(--display); color: var(--hogback); letter-spacing: -.01em; }
.callout-emergency__phone:hover { text-decoration: none; color: var(--hogback-deep); }
.callout-emergency .callout-emergency__phone { font: 400 clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem)/1.1 var(--display); white-space: nowrap; }
.callout-emergency__note { margin: 0; max-width: 40em; }
.callout-emergency__more { white-space: nowrap; font-weight: 700; color: var(--logo-ink); }

/* The service cards, three groups of three */
.svc-groups { display: grid; gap: clamp(36px, 5vw, 60px); }
.svc-group__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 18px; display: flex; align-items: center; gap: 16px; }
.svc-group__title::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .7; border-radius: 2px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.svc-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; background: #fff; border: 1px solid #E6E0D2; border-radius: var(--radius-lg); padding: 26px 26px 20px; box-shadow: var(--lift); transition: transform .18s, box-shadow .18s; }
.svc-card:hover, .svc-card:focus-within { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(31,37,64,.08), 0 22px 34px -16px rgba(31,37,64,.34); }
.svc-card__badge { display: grid; place-items: center; width: 116px; height: 116px; margin: -2px 0 8px -2px; border-radius: 24px; background: var(--tint, var(--blush)); isolation: isolate; }
.svc-card__spot { width: 96px; height: 96px; mix-blend-mode: multiply; }
.svc-group:nth-child(1) { --tint: var(--blush); }
.svc-group:nth-child(2) { --tint: var(--logo-mist); }
.svc-group:nth-child(3) { --tint: #EFE6D2; }
.svc-card__title { margin: 0; font-size: 1.5rem; line-height: 1.15; color: var(--hogback); }
.svc-card a { color: var(--hogback); text-decoration: none; }
.svc-card a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.svc-card__summary { margin: 0; color: var(--night-ink); font-size: 1rem; line-height: 1.5; }
.svc-card__more { justify-self: end; margin-top: 10px; font-weight: 700; font-size: .9375rem; color: var(--hogback-deep); }
.svc-card__arrow { display: inline-block; transition: transform .18s; }
.svc-card:hover .svc-card__arrow, .svc-card:focus-within .svc-card__arrow { transform: translateX(4px); }
.svc-card:focus-within { outline: 3px solid var(--logo-ink); outline-offset: 3px; }
.svc-card a:focus-visible { outline: none; }
.services-pay { margin-top: clamp(32px, 4vw, 48px); }
.footnote { max-width: 40em; margin: 20px 0 0; font-size: .9375rem; color: var(--slate-deep); }
/* Memberships: each logo on its own white tile */
.affil { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 24px); }
.affil__tile { display: grid; place-items: center; min-height: 92px; padding: 16px 24px; background: #fff; border-radius: 18px; box-shadow: var(--lift); max-width: 100%; }
.affil__tile img { display: block; height: 56px; width: auto; max-width: 100%; }

/* Paying and the first visit */
.pay-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 20px 0 20px; display: grid; gap: 18px; }
.steps li { position: relative; padding-left: 64px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--hogback); color: var(--paper); font: 400 1.5rem/1 var(--display); }

/* Meet Dr. Mike and Nella */
.meet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.meet__prints { display: flex; justify-content: center; align-items: flex-start; padding: 16px 0 24px; }
.print--tape { position: relative; width: min(46%, 250px); margin: 0; }
.print--tape + .print--tape { margin-left: -2%; margin-top: 52px; }
.print--tape:first-child { transform: rotate(-4deg); z-index: 2; }
.print--tape:last-child { transform: rotate(3.5deg); }
.print--tape:last-child figcaption { text-align: right; }
.print--tape::before { content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 24px; margin-left: -38px; background: rgba(214, 160, 42, .4); box-shadow: 0 1px 2px rgba(31,37,64,.12); transform: rotate(-3deg); z-index: 3; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-band h2 { margin: 0 0 .15em; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.cta-band p { margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.cta-band__phone { font: 400 clamp(2rem, 1.3rem + 3vw, 3.25rem)/1 var(--display); color: var(--paper); }
.cta-band__phone:hover { text-decoration: none; opacity: .9; }

@media (max-width: 960px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-grid { grid-template-columns: 1fr; }
  .pay-visit, .meet { grid-template-columns: 1fr; }
  .callout-emergency { grid-template-columns: auto minmax(0, 1fr); }
  .callout-emergency__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; text-align: left; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
  /* On a phone each card is a row: the drawing on the left, the words on the right. */
  .svc-card { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; padding: 16px 16px 12px; align-items: start; }
  .svc-card__badge { grid-row: 1 / span 3; width: 92px; height: 92px; margin: 0; border-radius: 20px; }
  .svc-card__spot { width: 76px; height: 76px; }
  .svc-card__title { grid-column: 2; font-size: 1.3rem; }
  .svc-card__summary { grid-column: 2; font-size: .9375rem; }
  .svc-card__more { grid-column: 2; margin-top: 4px; }
  .callout-emergency { grid-template-columns: 1fr; text-align: left; }
  .callout-emergency__spot { width: 80px; height: 80px; }
  .callout-emergency__side { display: grid; justify-items: start; gap: 2px; }
  .callout-emergency__more { white-space: normal; }
}

@media (max-width: 1200px) {
  .nav { display: none; }
  .menu { display: block; }
  .head-right { margin-left: auto; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .prints { max-width: 640px; }
}
@media (max-width: 860px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  :root { --head-h: 99px; }
  /* The sticky bar at the bottom carries the Call button, so the header keeps the logo, the hours, and the menu. */
  .head-strip .wrap { justify-content: flex-start; }
  .head-main { gap: 12px; padding-block: 10px; }
  .logo__full { height: 28px; }
  .logo__mark { height: 34px; }
  .head-call { display: none; }
  .hero { padding-top: 20px; gap: 32px; }
  .print figcaption { font-size: 1.4rem; }
  .print--art figcaption { font-size: 1.25rem; }
  .print--sign figcaption { font-size: 1.25rem; }
  .cta .btn { flex: 1 1 100%; }
  body { padding-bottom: 84px; }
  .bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; inset: auto 0 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--logo-mist); z-index: 30;
  }
  .bar .btn { min-height: 48px; padding-inline: 10px; }
}
/* Service pages */
.service { padding-block: clamp(32px, 5vw, 64px) 48px; }
.service__head { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 32px; align-items: start; }
.service__spot { width: 160px; height: 160px; mix-blend-mode: multiply; }
.service__section { margin-top: 40px; }
.service__section h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.service__section h3 { font-size: 1.2rem; margin-top: 1.4em; }
.service__section ul { padding-left: 1.2em; max-width: 65ch; }
.service__section li { margin-bottom: .6em; }
.btn-call--big { min-height: 64px; font-size: 1.5rem; padding-inline: 32px; }
.cta--end { margin-top: 48px; }
@media (max-width: 720px) {
  .service__head { grid-template-columns: 1fr; }
  .service__spot { order: -1; width: 96px; height: 96px; }
}

/* The painted map */
.visit { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: 24px; }
.visit__map { max-width: 1240px; }
.paint-crop { overflow: hidden; }
.paint-wrap { position: relative; width: 100%; border: 1px solid var(--logo-mist); background: var(--logo-mist); }
.paint-wrap picture, .paint-wrap img { display: block; width: 100%; height: 100%; }
.paint { position: absolute; inset: 0; width: 100%; height: 100%; }
.paint__label { font-family: var(--body); font-weight: 700; fill: var(--night-ink); stroke: var(--paper); stroke-width: 14; paint-order: stroke; stroke-linejoin: round; }
.paint__label--italic { font-style: italic; font-weight: 600; fill: var(--logo-ink); }
.paint__label--phone-only { display: none; }
@media (max-width: 720px) { .paint__label--phone-only { display: inline; } .paint__label--desktop-only { display: none; } }
.paint__pin { fill: var(--logo-ink); stroke: var(--paper); stroke-width: 7; }
/* The arrows are drawn with a pen in the same ink-blue as the old creek highlight: a stroke, then two strokes for the head. */
.paint__arrow { stroke: var(--logo-ink); stroke-opacity: .88; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.paint__arrow--door { stroke-width: 7; }
.paint__note { font-family: var(--hand); fill: var(--logo-ink); stroke: var(--paper); stroke-width: 12; paint-order: stroke; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .paint__arrow-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s ease-in-out; }
  .paint__arrow--door .paint__arrow-line { transition-delay: 2.2s; transition-duration: .9s; }
  .paint__arrow-head { opacity: 0; transition: opacity .3s 2.4s; }
  .paint__arrow--door .paint__arrow-head { transition-delay: 3s; }
  .paint.is-drawn .paint__arrow-line { stroke-dashoffset: 0; }
  .paint.is-drawn .paint__arrow-head { opacity: 1; }
}
.visit__text h3 { font-size: 1.6rem; }
.route-steps { counter-reset: route; list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.route-steps li { counter-increment: route; position: relative; background: #fff; border-radius: 16px; box-shadow: var(--lift); padding: 56px 20px 18px; font-size: 1rem; line-height: 1.5; }
.route-steps li::before { content: counter(route); position: absolute; top: 14px; left: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--logo-ink); color: var(--paper); font: 400 1.25rem/1 var(--display); }
.visit__live iframe { display: block; width: 100%; height: 360px; border: 1px solid var(--logo-mist); }

@media (max-width: 960px) {
  .route-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .route-steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* On a phone the map is cropped to a window around the entrance, the lot, the office, and Wadsworth (map.phone), so the labels stay readable. */
  .paint-crop { aspect-ratio: var(--crop-aspect); }
  .paint-crop .paint-wrap { width: calc(100% / var(--pw)); margin-left: calc(-100% * var(--px) / var(--pw)); margin-top: calc(-100% * var(--py) * var(--ratio) / var(--pw)); }
}
@media (max-width: 560px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* About, doctor, and contact pages */
.contact-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-bottom: 48px; }
.contact-page__phone { font: 400 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1.1 var(--display); margin-bottom: .4em; }
.contact-page__phone a { color: var(--hogback); font-weight: 400; }
.contact-page__phone a:hover { text-decoration: none; color: var(--hogback-deep); }
address { font-style: normal; margin-bottom: 1.25em; }
.hours-table { border-collapse: collapse; margin-bottom: 1em; }
.hours-table caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.hours-table th, .hours-table td { text-align: left; padding: 4px 24px 4px 0; font-weight: 400; }
.contact-page .block .print--static { margin: 32px 0 0; }
@media (max-width: 860px) {
  .contact-page__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pages with drawings: a two-column split, the drawings blended into the band so their white paper disappears */
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split--text-art { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.split--art-text { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.art--branch { margin-right: -4%; }
.art--heron { max-width: 380px; justify-self: center; }
.art--oak { width: 112px; margin-top: 12px; }
.art--hogback { max-width: 920px; margin-inline: auto; }
.horizon { padding-block: clamp(32px, 5vw, 56px) clamp(48px, 6vw, 72px); }
.horizon__note { margin: 4px auto 0; text-align: center; font: 400 1.6rem/1.2 var(--hand); color: var(--logo-ink); max-width: none; }
.print--tape-plain { position: relative; width: 100%; max-width: 520px; transform: rotate(-1.8deg); }
.print--tape-plain::before { content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: rgba(214, 160, 42, .4); box-shadow: 0 1px 2px rgba(31,37,64,.12); transform: rotate(2deg); z-index: 3; }
.print--tape-plain figcaption { text-align: center; }
.about-text > :last-child { margin-bottom: 0; }
.about-people { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-people__prints { display: flex; justify-content: center; padding: 12px 0 16px; }
.people { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .9em; }
.head-print { display: flex; justify-content: center; padding: 8px 0 16px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.info-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-grid--one { grid-template-columns: minmax(0, 40rem); }
@media (max-width: 960px) { .info-grid--three { grid-template-columns: 1fr; } }
.info-card h2 { font-size: 1.6rem; margin-bottom: .4em; }
.info-card p:last-child { margin-bottom: 0; }
@media (max-width: 960px) {
  .split--head, .split--text-art, .split--art-text, .about-people { grid-template-columns: 1fr; }
  .art--branch { max-width: 480px; margin-right: 0; }
  .art--heron { max-width: 300px; }
  .split--text-art .art { order: -1; }
}
@media (max-width: 640px) {
  .info-grid { grid-template-columns: 1fr; }
}


/* Reviews: the live widget in a white card, then the Google review button and a dated note */
.reviews-card { padding: clamp(16px, 2.4vw, 28px); }
.reviews-slot__frame { min-height: 440px; }
.reviews-slot__placeholder { display: grid; place-items: center; align-content: center; min-height: 440px; text-align: center; gap: 4px; }
.reviews-slot__placeholder p { margin: 0 0 .5em; }
.lc_reviews_widget { display: none; width: 100%; min-width: 100%; min-height: 320px; border: 0; background: transparent; }
.is-loaded .lc_reviews_widget { display: block; }
.is-loaded .reviews-slot__placeholder { display: none; }
.reviews-slot__actions { margin: 20px 0 0; display: flex; justify-content: center; }
.reviews-slot__note { margin: 14px 0 0; text-align: center; max-width: none; }

/* New patients: step cards, then white rounded boxes */
.step-cards { list-style: none; padding: 0; margin: 0; counter-reset: card; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.step-cards li { position: relative; padding-top: 52px; counter-increment: card; }
.step-cards li::before { content: counter(card); position: absolute; top: -18px; left: 28px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--hogback); color: var(--paper); font: 400 1.6rem/1 var(--display); box-shadow: 0 6px 12px -6px rgba(31,37,64,.5); }
.step-cards h3 { margin-bottom: .3em; }
.step-cards p:last-child { margin-bottom: 0; }
.box-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
.box { background: #fff; border-radius: 22px; padding: clamp(24px, 3vw, 34px); box-shadow: var(--lift); border: 1px solid #fff; }
.box h2 { font-size: 1.75rem; margin: 12px 0 10px; }
.box > p:last-child, .box > ul:last-child { margin-bottom: 0; }
.check-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before { content: ""; position: absolute; left: 4px; top: .35em; width: 12px; height: 7px; border-left: 3px solid var(--hogback); border-bottom: 3px solid var(--hogback); transform: rotate(-45deg); }

/* Contact: cards for the phone and the visit, and the form in a white card */
.contact-page__side { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.contact-card .kicker { margin-bottom: .2em; }
.contact-card .contact-page__phone { margin-bottom: .3em; }
.form-card h2 { font-size: 1.75rem; }

.prose h2 { margin-top: 1.6em; }
.prose h1 + h2, .prose .culvert + h2 { margin-top: .4em; }

/* Blog posts: the layout is ready, and no post or index is published yet. */
.author-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; margin: 40px 0 24px; padding: 20px; background: var(--logo-mist); border-radius: var(--radius); }
.author-box img { width: 96px; height: 96px; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
.author-box p { margin-bottom: .5em; }

@media (max-width: 480px) { .print--art::before, .print--art::after, .print--doc::before, .print--sign::before { width: 60px; height: 20px; } }
@media (max-width: 360px) { .print figcaption { font-size: 1.15rem; } .print--sign figcaption { font-size: 1.05rem; } }

@media (max-width: 960px) {
  .step-cards, .box-grid { grid-template-columns: 1fr; }
  .step-cards li { margin-top: 18px; }
}

/* Service pages: a head band with the drawing on a tinted badge, the text with a card beside it, then related care */
.service-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.service-head__badge { width: 190px; height: 190px; border-radius: 40px; --tint: var(--blush); margin: 0; }
.service-head__spot { width: 160px; height: 160px; mix-blend-mode: multiply; }
.service-head__call { margin: 0 0 .2em; }
.service-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.service-main { max-width: 46rem; }
.service__section { margin-top: 0; margin-bottom: clamp(32px, 4vw, 48px); }
.service__section h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); display: flex; align-items: center; gap: 14px; }
.service__section h2::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .7; border-radius: 2px; }
.service-aside { position: sticky; top: calc(var(--head-h) - 30px); }
.service-aside__card h2 { font-size: 1.5rem; }
.service-aside__card h3 { font-size: 1.15rem; margin-top: .6em; }
.service-aside__card hr { border: 0; border-top: 1px solid var(--logo-mist); margin: 1.2em 0; }
.service-aside__phone { font-size: 2.1rem; display: inline-block; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--logo-mist); border-radius: 14px; padding: 0 20px; box-shadow: 0 1px 2px rgba(31,37,64,.06); }
.faq-item[open] { box-shadow: var(--lift); border-color: #fff; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font: 400 1.2rem/1.3 var(--display); color: var(--logo-ink); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 3px solid var(--hogback); border-bottom: 3px solid var(--hogback); transform: rotate(45deg); transition: transform .15s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item p { margin: 0 0 16px; }
.faq-wrap { max-width: 52rem; }
.related-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.related-card { grid-template-rows: auto 1fr auto; }
.related-all { margin: 24px 0 0; }
.thanks-card { max-width: 40rem; text-align: center; margin-inline: auto; }
.thanks-card .callout-emergency__phone { font-size: 2.6rem; }
.prose--card { max-width: 52rem; }
.policy-page .policy { max-width: 52rem; }
@media (max-width: 960px) {
  .service-body { grid-template-columns: 1fr; }
  .service-aside { position: static; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service-head__grid { grid-template-columns: 1fr; }
  .service-head__badge { order: -1; width: 120px; height: 120px; border-radius: 28px; }
  .service-head__spot { width: 100px; height: 100px; }
}
.contact-page__side > * { min-width: 0; }
.contact-page__phone a { white-space: normal; }
.contact-page__phone { font-size: clamp(1.6rem, 8.5vw, 2.5rem); }
.thanks-card .callout-emergency__phone { font-size: clamp(1.7rem, 9vw, 2.6rem); }
.callout-emergency__phone, .cta-band__phone { max-width: 100%; }
/* On phones and tablets the small prints sit flush with the wrap's edges, so their tilted corners stay inside the page gutter instead of past the screen. */
@media (max-width: 960px) { .print--doc { left: 0; } .print--sign { right: 0; } }
/* The bot check is a fixed 300 px wide, so on the narrowest phones the form card gives up padding and the widget shrinks to fit. */
@media (max-width: 380px) {
  .form-card { padding: 16px; }
  .cf-turnstile { transform: scale(.82); transform-origin: 0 0; height: 54px; }
}
@media (max-width: 360px) {
  .print--doc { width: 30%; }
  .print--sign { width: 41%; }
  .logo__full { height: 24px; }
  .head-main { gap: 8px; }
}