/* Hallmark · shape: Photographic, after the client's references (potrancofamilydental.com, 7to7dental.com) · genre: modern-minimal · theme: Dose (deal 3/3, seed family-dental-practice-austin-17df·20ebebf9·2026-10-24·r0) · job: book · draw: by request
 * hero: Poster, a background video · nav: edge-aligned bar under a notice strip · footer: index columns with hours · imagery: video 1 and photographs 9, Wikimedia Commons, natural · signature: the week as a pill organiser of open chairs, kept as the booking close · dose: white
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R3 V3 · weakest: S, the reference structure is the category's own; kept the insurance-first promise, the timed first visit and the week organiser so it still belongs to one practice */
/* Hallmark · waive 83 · ten client-style photos and one video, every one on its subject · the client asked for an image-led page like their dental references */
@import url("./tokens.css");
@import url("./base.css");

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Notice strip and bar */
.notice { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.notice__row { display: flex; justify-content: center; gap: var(--space-2xl); padding-block: var(--space-xs); flex-wrap: wrap; }
.notice a { color: var(--color-accent-soft); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.bar__row { display: flex; align-items: center; gap: var(--space-xl); min-height: 76px; }
.wordmark { display: grid; text-decoration: none; font: var(--display-weight) var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.wordmark span { font: 500 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.bar nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.bar nav a { text-decoration: none; font-weight: 500; color: var(--color-ink-2); }
.bar nav a:hover { color: var(--color-accent-deep); text-decoration: underline; }
.bar__phone { font: 500 var(--text-md)/1 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-ink); text-decoration: none; }
.bar__phone:hover { color: var(--color-accent-deep); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--sm { min-height: 44px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 3px 0 var(--color-accent-deep); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--glass { background: color-mix(in oklab, var(--color-paper) 14%, transparent); color: var(--color-paper); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-paper) 60%, transparent); }
.btn--glass:hover { background: color-mix(in oklab, var(--color-paper) 26%, transparent); }
.btn--light { background: var(--color-paper); color: var(--color-ink); }
.btn--light:hover { background: var(--color-paper-2); }
.btn--line { color: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-paper); }
.btn--line:hover { background: color-mix(in oklab, var(--color-paper) 14%, transparent); }
.actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Hero: background video under an ink scrim */
.hero { position: relative; isolation: isolate; min-height: min(calc(100svh - 110px), 760px); display: grid; align-items: end; color: var(--color-paper); }
.hero__media { position: absolute; inset: 0; margin: 0; z-index: -1; background: var(--color-ink) url("media/hero-poster.jpg") center / cover; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 82%, transparent), color-mix(in oklab, var(--color-ink) 35%, transparent) 70%); }
.hero__pause { position: absolute; right: var(--gutter); bottom: var(--space-lg); z-index: 2; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-ink) 55%, transparent); color: var(--color-paper); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.hero__pause:hover { background: var(--color-ink); }
.hero__pause:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 2px; }
html:not(.js) .hero__pause { display: none; }
.hero__content { display: grid; gap: var(--space-lg); padding-block: var(--space-3xl) var(--space-3xl); }
.hero h1 { color: var(--color-paper); max-width: 14ch; }
.hero .lead { max-width: 40ch; color: var(--color-paper-2); }

/* Hours band */
.hours-band { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.hours-band__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); padding-block: var(--space-xl); flex-wrap: wrap; }
.hours-band__head { font: var(--display-weight) var(--text-xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); max-width: 22ch; }
.hours-band__list { display: flex; gap: var(--space-2xl); margin: 0; flex-wrap: wrap; }
.hours-band__list dt { font-size: var(--text-sm); color: var(--color-accent-soft); }
.hours-band__list dd { margin: 0; font: 500 var(--text-lg)/1.3 var(--font-outlier); font-variant-numeric: tabular-nums; }

/* Photos */
.photo { margin: 0; border-radius: var(--radius-card); }
.photo > img, .card__img > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* Why */
.why { padding-block: var(--section-gap) var(--section-gap-s); }
.why__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.why__photo { aspect-ratio: 4 / 3; }
.why h2 { margin-bottom: var(--space-xl); }
.reasons { margin: 0; border-top: 1px solid var(--color-rule); }
.reasons div { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.reasons dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.reasons dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }

/* Services: photo cards */
.services { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.card { display: grid; gap: var(--space-xs); align-content: start; }
.card__img { margin: 0 0 var(--space-sm); aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
.card p { color: var(--color-ink-2); }

/* Urgent band */
.urgent { background: var(--color-ink); color: var(--color-paper); }
.urgent__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); padding-block: var(--space-2xl); flex-wrap: wrap; }
.urgent h2 { color: var(--color-paper); font-size: var(--text-2xl); max-width: none; }

/* First visit */
.first { padding-block: var(--section-gap); }
.first__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.first h2 { margin-bottom: var(--space-xl); }
.first__photo { aspect-ratio: 3 / 2; }
.hour { margin: 0; border-top: 1px solid var(--color-rule); }
.hour div { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.hour dt { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-accent-deep); }
.hour dd { margin: 0; font-size: var(--text-lg); }

/* Insurance */
.insurance { padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.ins__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.ins__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
.ins__cols h3 { margin-bottom: var(--space-sm); }
.ins__cols p { color: var(--color-ink-2); }

/* Visit */
.visit { padding-block: var(--section-gap); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.visit__photo { aspect-ratio: 16 / 10; }
.visit__text { display: grid; gap: var(--space-md); }
.visit__text a { font: 500 var(--text-xl)/1 var(--font-outlier); color: var(--color-accent-deep); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Book: the week organiser */
.book { padding-block: var(--section-gap-s) var(--section-gap); }
.book__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.book h2 { margin-bottom: var(--space-xl); }
.plastic { --t: var(--p-thu); border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 32%, transparent), transparent 18%), color-mix(in oklab, var(--t) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }
.week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); min-height: 280px; }
.day { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md) var(--space-xs); }
.day__name { font: var(--display-weight) var(--text-lg)/1 var(--font-display); text-align: center; margin-bottom: var(--space-xs); }
.key { min-height: 44px; border: 0; border-radius: var(--radius-input); background: color-mix(in oklab, var(--color-paper) 88%, transparent); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-outlier); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: inset 0 1px 0 var(--glint), 0 2px 0 color-mix(in oklab, var(--t) 70%, var(--color-ink)); transition: transform var(--dur-micro) var(--ease-out); }
.key:hover { background: var(--color-paper); }
.key:active { transform: translateY(2px); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.key[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 2px 0 var(--color-accent-deep); }
.tray { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-lift); }
.tray__when { font: 500 var(--text-2xl)/1.1 var(--font-outlier); font-variant-numeric: tabular-nums; padding-bottom: var(--space-sm); border-bottom: 1px dashed var(--color-rule); }
.field { display: grid; gap: var(--space-xs); }
.field label, .seg legend { font-size: var(--text-sm); font-weight: 500; }
.field input { min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.field input:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.seg { display: flex; gap: var(--space-xs); flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.seg legend { margin-bottom: var(--space-xs); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); cursor: pointer; box-shadow: 0 0 0 1px var(--color-rule); }
.seg label:hover { background: var(--color-paper-3); }
.seg input:checked + label { background: var(--color-accent-soft); box-shadow: 0 0 0 1px var(--color-accent); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tray .btn { justify-self: start; }
.help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }

/* Footer */
.foot { background: var(--color-ink); color: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-xl); }
.foot a { color: var(--color-paper); }
.foot a:hover { color: var(--color-accent-soft); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gap-columns); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-ink-2); }
.foot__grid > div { display: grid; gap: var(--space-xs); align-content: start; }
.foot__name { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-paper); margin-bottom: var(--space-sm); }
.foot__hours { margin: 0; }
.foot__hours div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-2xs); }
.foot__hours dd { margin: 0; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); align-content: start; }
.foot__small { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-paper-3); }
.foot .fill { color: var(--color-paper-3); }

@media (max-width: 60rem) {
  .bar nav, .bar__phone { display: none; }
  .bar .btn { margin-left: auto; }
  .notice__row { gap: var(--space-md); justify-content: flex-start; }
  .notice__row p:nth-child(2) { display: none; }
  .why__grid, .first__grid, .visit__grid, .book__grid, .head, .ins__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first__photo { order: -1; }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .cards, .ins__cols { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 640px; }
  .hero__pause { top: var(--space-md); bottom: auto; }
  .hours-band__list { gap: var(--space-lg); }
  .week { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 7rem; overflow-x: auto; scroll-snap-type: x mandatory; min-height: 0; }
  .day { scroll-snap-align: start; }
  .tray { padding: var(--space-lg); }
}