/*
 * VGS — Dunlap Family Dentistry brand polish (Common Good direction).
 *
 * Warm layered palette (Bone / Honey / Cocoa / Charcoal), editorial numbering,
 * script accents, polaroid photo frames, alternating light/dark sections.
 */

/* -----------------------------------------------------------------------
   Baseline.
   ----------------------------------------------------------------------- */
body {
  background: var(--dunlap-ivory);
  color: var(--dunlap-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Function-style fluid container: gutters scale with the viewport via
   two clamps instead of jumping at breakpoints; content caps at a 90rem
   viewport scale. */
:root {
  --max-viewport: 90;
  --main: calc(var(--max-viewport) * 1rem);
  --site-margin: clamp(1.25rem, 4.1353vw + 0.2782rem, 4rem);
  --s7: clamp(1.5rem, 0.7519vw + 1.3233rem, 2rem);
  --content-inset-x: var(--s7);
  --content-main: calc(var(--main) - var(--content-inset-x) * 2);
  --content-width: calc(100% - ((var(--site-margin) + var(--content-inset-x)) * 2));
}
.container {
  width: var(--content-width);
  max-width: var(--content-main);
  margin: 0 auto;
  padding-inline: 0;
}
.container--narrow { max-width: 780px; }

::selection { background: var(--dunlap-honey); color: var(--dunlap-white); }

/* -----------------------------------------------------------------------
   Section grounds — alternating light/dark editorial rhythm.
   ----------------------------------------------------------------------- */
.vgs-section {
  padding-block: var(--space-24);
  position: relative;
}
.vgs-pad-md  { padding-block: var(--space-16); }
.vgs-pad-lg  { padding-block: var(--space-24); }
.vgs-pad-xl  { padding-block: 128px; }
.vgs-pad-2xl { padding-block: 160px; }

.vgs-ground-page    { background: var(--dunlap-ivory); color: var(--dunlap-ink); }
.vgs-ground-surface { background: var(--dunlap-cream); color: var(--dunlap-ink); }
.vgs-ground-subtle  { background: var(--dunlap-bone);  color: var(--dunlap-ink); }
.vgs-ground-inverse { background: var(--dunlap-charcoal); color: var(--dunlap-bone); }

/* Hero + CTA bands upgrade to COCOA (warmer than charcoal, dominant brand color). */
.vgs-hero.vgs-ground-inverse,
.vgs-hero.vgs-ground-page,
.vgs-cta.vgs-ground-inverse {
  background: var(--dunlap-cocoa);
  color: var(--dunlap-bone);
}

/* Section transition softening — a hairline of honey between sections adds warmth. */
.vgs-section + .vgs-section { position: relative; }

/* -----------------------------------------------------------------------
   Editorial section numbering (01 / 02 / 03).
   Every section gets an optional big Very Vogue number badge in honey.
   ----------------------------------------------------------------------- */
.vgs-section[data-number]::before {
  content: attr(data-number);
  position: absolute;
  top: 40px;
  right: 72px;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(3rem, 4vw + 1rem, 6rem);
  line-height: 1;
  color: var(--dunlap-honey);
  opacity: 0.75;
  pointer-events: none;
}
.vgs-ground-inverse[data-number]::before { color: var(--dunlap-honey); opacity: 0.9; }

/* Also render the number if the JSON provides it as a class-hooked span */
.vgs-section__number {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 4vw + 1rem, 6rem);
  line-height: 1;
  color: var(--dunlap-honey);
  margin-bottom: var(--space-4);
}

/* -----------------------------------------------------------------------
   Display serif (Very Vogue).
   ----------------------------------------------------------------------- */
.vgs-display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: inherit;
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.vgs-display--hero, h1 {
  font-size: var(--fs-display-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-hero);
}

.vgs-display--section, h2 {
  font-size: var(--fs-display-section);
}

h3 { font-size: var(--fs-h3); }

/* Italic emphasis inside display headings — HONEY color for the italic phrase */
.vgs-display em, h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--dunlap-honey);
}
.vgs-hero.vgs-ground-inverse .vgs-display em,
.vgs-hero.vgs-ground-page .vgs-display em,
.vgs-cta.vgs-ground-inverse .vgs-display em {
  color: var(--dunlap-honey);
}

/* H1 on cocoa hero → bone */
.vgs-hero.vgs-ground-inverse .vgs-display--hero,
.vgs-hero.vgs-ground-page .vgs-display--hero {
  color: var(--dunlap-white);
}

/* -----------------------------------------------------------------------
   .vgs-script legacy hook — now renders as inline Very Vogue italic
   in honey. No script font. Kept for backwards-compatible page JSON.
   ----------------------------------------------------------------------- */
.vgs-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--dunlap-honey);
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------
   Syncopate eyebrows.
   ----------------------------------------------------------------------- */
.vgs-eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--dunlap-ink);
  line-height: 1;
  margin: 0 0 var(--space-4);
}
.vgs-hero.vgs-ground-inverse .vgs-eyebrow,
.vgs-hero.vgs-ground-page .vgs-eyebrow,
.vgs-cta.vgs-ground-inverse .vgs-eyebrow,
.vgs-ground-inverse .vgs-eyebrow,
.vgs-eyebrow--on-inverse {
  color: var(--dunlap-honey);
}

/* -----------------------------------------------------------------------
   Body copy.
   ----------------------------------------------------------------------- */
p, li, dd, dt {
  font-family: var(--font-body);
  color: inherit;
  max-width: 65ch;
  margin: 0 0 var(--space-4);
}
.vgs-tagline,
.vgs-prose p,
.vgs-hero .vgs-tagline {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 62ch;
}

/* -----------------------------------------------------------------------
   Pill buttons.
   ----------------------------------------------------------------------- */
.vgs-btn, .vgs-btn--primary, .vgs-btn--secondary, .vgs-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
  border: 1.5px solid transparent;
  cursor: pointer;
}

/* Primary on ivory — COCOA */
.vgs-btn--primary {
  background: var(--dunlap-cocoa);
  color: var(--dunlap-bone);
}
.vgs-btn--primary:hover, .vgs-btn--primary:focus-visible {
  background: var(--dunlap-honey);
  color: var(--dunlap-white);
}
/* base.css `.vgs-prose a` outranks `.vgs-btn--primary`; restore button text
   color for CTA buttons placed inside prose bodies. */
.vgs-prose a.vgs-btn--primary { color: var(--dunlap-bone); }
.vgs-prose a.vgs-btn--primary:hover,
.vgs-prose a.vgs-btn--primary:focus-visible { color: var(--dunlap-white); }

.vgs-btn--secondary {
  background: transparent;
  color: var(--dunlap-cocoa);
  border-color: var(--dunlap-cocoa);
}
.vgs-btn--secondary:hover, .vgs-btn--secondary:focus-visible {
  background: var(--dunlap-cocoa);
  color: var(--dunlap-bone);
}

/* On cocoa hero + cta — invert */
.vgs-hero.vgs-ground-inverse .vgs-btn--primary,
.vgs-hero.vgs-ground-page .vgs-btn--primary,
.vgs-cta.vgs-ground-inverse .vgs-btn--primary {
  background: var(--dunlap-bone);
  color: var(--dunlap-cocoa);
}
.vgs-hero.vgs-ground-inverse .vgs-btn--primary:hover,
.vgs-cta.vgs-ground-inverse .vgs-btn--primary:hover {
  background: var(--dunlap-honey);
  color: var(--dunlap-white);
}
.vgs-hero.vgs-ground-inverse .vgs-btn--secondary,
.vgs-hero.vgs-ground-page .vgs-btn--secondary,
.vgs-cta.vgs-ground-inverse .vgs-btn--secondary {
  color: var(--dunlap-bone);
  border-color: var(--dunlap-bone);
}
.vgs-hero.vgs-ground-inverse .vgs-btn--secondary:hover,
.vgs-cta.vgs-ground-inverse .vgs-btn--secondary:hover {
  background: var(--dunlap-honey);
  color: var(--dunlap-white);
  border-color: var(--dunlap-honey);
}

.vgs-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* -----------------------------------------------------------------------
   Hero — center by default, split when image is present.
   ----------------------------------------------------------------------- */
.vgs-hero { text-align: center; }
.vgs-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  max-width: 940px;
  margin-inline: auto;
}
.vgs-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.vgs-hero__body .vgs-cta-row { justify-content: center; }
.vgs-hero__body .vgs-tagline {
  color: var(--dunlap-bone);
  opacity: 0.9;
  max-width: 640px;
}

/* Split hero — full-bleed background image with left-aligned copy overlay.
   Riverwoods-style: photo lives behind the copy with a moss-tinted scrim. */
.vgs-hero--split {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 12vw, 160px);
}
.vgs-hero--split .vgs-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.vgs-hero--split .vgs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
/* Opt-in mirror (hero JSON image_flip) for photos whose subject sits
   on the left, under the text scrim. */
.vgs-hero--flip .vgs-hero__media img { transform: scaleX(-1); }
.vgs-hero--split .vgs-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Heavy on the text column, nearly clear on the right so the
     photo subject stays visible instead of fading into the green. */
  background:
    linear-gradient(90deg,
      rgba(48, 57, 33, 0.94) 0%,
      rgba(48, 57, 33, 0.82) 38%,
      rgba(48, 57, 33, 0.38) 62%,
      rgba(48, 57, 33, 0.10) 82%,
      rgba(48, 57, 33, 0.02) 100%);
  pointer-events: none;
}
.vgs-hero--split .vgs-hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  /* Sizing comes from the parent .container — cancel the centered
     hero's 940px cap above. */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
.vgs-hero--split .vgs-hero__body {
  align-items: flex-start;
  text-align: left;
  gap: var(--space-5);
  max-width: 640px;
}
/* Calmer tagline scale + solid eyebrow contrast over the photo. */
.vgs-hero--split .vgs-hero__body .vgs-tagline {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 560px;
}
.vgs-hero--split .vgs-eyebrow {
  color: var(--dunlap-honey);
  text-shadow: 0 1px 2px rgba(30, 36, 21, 0.45);
}
.vgs-hero--split .vgs-hero__body .vgs-cta-row { justify-content: flex-start; }

@media (max-width: 720px) {
  .vgs-hero--split .vgs-hero__media::after {
    background: rgba(48, 57, 33, 0.85);
  }
  .vgs-hero--split { padding-block: 96px; }
}

/* -----------------------------------------------------------------------
   Hero service-chip row — quick-jump pills below the hero tagline.
   ----------------------------------------------------------------------- */
.vgs-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  max-width: 640px;
}
/* Function-style hero layout: copy + CTAs stay left; the service-chip
   row moves to the bottom-right corner of the hero, opposite the CTAs. */
@media (min-width: 880px) {
  .vgs-hero--split .vgs-hero-chips {
    position: absolute;
    right: 0;
    bottom: 6px;
    margin: 0;
    max-width: 44%;
    justify-content: flex-end;
  }
}
.vgs-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(245, 240, 222, 0.10);
  border: 1px solid rgba(245, 240, 222, 0.35);
  color: var(--dunlap-bone);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  line-height: 1;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.vgs-hero-chip:hover,
.vgs-hero-chip:focus-visible {
  background: rgba(245, 240, 222, 0.22);
  border-color: var(--dunlap-honey);
  color: var(--dunlap-honey);
}

/* -----------------------------------------------------------------------
   Utility top bar — address · hours · phone above the header.
   ----------------------------------------------------------------------- */
.vgs-topbar {
  background: var(--dunlap-moss-800);
  color: var(--dunlap-bone);
  padding-block: 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(245, 240, 222, 0.08);
}
.vgs-topbar__inner {
  width: var(--content-width);
  max-width: var(--content-main);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.vgs-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dunlap-bone);
  text-decoration: none;
}
.vgs-topbar__item svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--dunlap-honey);
}
.vgs-topbar a { color: var(--dunlap-bone); text-decoration: none; }
.vgs-topbar a:hover { color: var(--dunlap-honey); }

@media (max-width: 720px) {
  .vgs-topbar__inner { flex-direction: column; gap: 6px; text-align: center; }
}

/* -----------------------------------------------------------------------
   Stats band — Riverwoods-style figures-and-labels strip under hero.
   Rendered via prose section body: <div class="vgs-stats-band"><div class="vgs-stat">…</div></div>
   ----------------------------------------------------------------------- */
.vgs-stats-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-inline: auto;
  text-align: center;
}
/* Hairlines run full-bleed across the section, Riverwoods-style. */
.vgs-prose-section:has(.vgs-stats-band) {
  border-block: 1px solid var(--dunlap-hairline);
}
@media (max-width: 720px) {
  .vgs-stats-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
.vgs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.vgs-stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  line-height: 1;
  color: var(--dunlap-moss);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.vgs-stat__label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--dunlap-ink-muted);
  line-height: 1.3;
}

/* Centered editorial headers for standard prose sections (Riverwoods
   style): eyebrow + section headline center; body copy keeps its
   left-aligned reading measure. Split image sections stay left. */
.vgs-prose-section:not(.vgs-prose-section--split) .container--narrow > .vgs-eyebrow,
.vgs-prose-section:not(.vgs-prose-section--split) .container--narrow > .vgs-display--section {
  text-align: center;
}

/* When the stats live inside a prose section, lift the narrow container
   cap AND the .vgs-prose reading measure so the band spans the full
   container width. */
.vgs-prose-section:has(.vgs-stats-band) .container--narrow { max-width: var(--content-main); }
.vgs-prose-section .vgs-prose:has(> .vgs-stats-band) {
  max-width: none;
  margin-inline: 0;
}

/* -----------------------------------------------------------------------
   Fluent Forms — brand overrides.
   Maps FF's default component classes to Dunlap tokens.
   ----------------------------------------------------------------------- */
.fluentform,
.ff-el-form-top,
.frm-fluent-form {
  font-family: var(--font-body);
  color: var(--dunlap-ink);
  max-width: 640px;
}

/* Labels — small-caps eyebrow style for consistency with section labels */
.ff-el-input--label label,
.fluentform label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--dunlap-ink);
  font-weight: 400;
  margin-bottom: var(--space-2);
  display: block;
}
.ff-el-is-required.asterisk-right label:after,
.ff-el-is-required label:after {
  color: var(--dunlap-honey);
  font-weight: 500;
}

/* Field wrapper spacing */
.ff-el-group { margin-bottom: var(--space-5); }

/* Text-like inputs */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform textarea,
.fluentform select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--dunlap-ink);
  background: var(--dunlap-bone);
  border: 1px solid var(--dunlap-hairline);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.fluentform textarea {
  min-height: 128px;
  resize: vertical;
}
.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: var(--dunlap-ink-muted);
  opacity: 0.7;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
  outline: none;
  border-color: var(--dunlap-honey);
  background: var(--dunlap-white);
  box-shadow: 0 0 0 3px rgba(192, 137, 87, 0.18);
}

/* Multi-input rows (Name field with first/last) */
.ff-name-field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .ff-name-field-wrapper { grid-template-columns: 1fr; } }

/* Radios + Checkboxes — pill-style toggle buttons */
.ff-el-form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--dunlap-bone);
  border: 1px solid var(--dunlap-hairline);
  margin: 4px 6px 4px 0;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.ff-el-form-check:hover { border-color: var(--dunlap-honey); }
.ff-el-form-check input[type="radio"],
.ff-el-form-check input[type="checkbox"] {
  accent-color: var(--dunlap-moss);
  cursor: pointer;
  margin: 0;
}
.ff-el-form-check label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dunlap-ink);
  margin: 0;
  cursor: pointer;
}
.ff-el-form-check:has(input:checked) {
  background: var(--dunlap-moss);
  border-color: var(--dunlap-moss);
}
.ff-el-form-check:has(input:checked) label { color: var(--dunlap-bone); }

/* Consent checkbox row — full width, more like a paragraph than a chip */
.ff_list_check .ff-el-form-check {
  display: flex;
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: transparent;
  border: 1px dashed var(--dunlap-hairline);
  margin: 0 0 var(--space-4);
  align-items: flex-start;
}
.ff_list_check .ff-el-form-check label {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Submit button — pill, moss, honey hover */
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  background: var(--dunlap-moss);
  color: var(--dunlap-bone);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  margin-top: var(--space-4);
  text-decoration: none;
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--dunlap-honey);
  color: var(--dunlap-white);
}

/* Validation error styling */
.ff-el-form-control-wrap .error,
.fluentform .error {
  color: #7C2E2E;
  font-size: 0.8125rem;
  margin-top: 4px;
}
.fluentform .ff-el-form-control-wrap.has-error input,
.fluentform .ff-el-form-control-wrap.has-error textarea {
  border-color: #7C2E2E;
}

/* Success message after submit */
.ff-message-success,
.ff_submit_success {
  padding: var(--space-6);
  background: var(--dunlap-cream);
  border-radius: var(--radius-card);
  color: var(--dunlap-ink);
  font-family: var(--font-body);
  border-left: 3px solid var(--dunlap-moss);
}

/* Form wrapper spacing inside our prose section */
.vgs-form-embed { margin-top: var(--space-6); }

/* -----------------------------------------------------------------------
   Radial glow on dark CTA sections (Riverwoods bottom-CTA move).
   ----------------------------------------------------------------------- */
.vgs-cta.vgs-ground-inverse {
  position: relative;
  overflow: hidden;
}
.vgs-cta.vgs-ground-inverse::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 30%,
    rgba(192, 137, 87, 0.22) 0%,
    rgba(192, 137, 87, 0.08) 40%,
    transparent 70%);
  pointer-events: none;
}
.vgs-cta.vgs-ground-inverse > .container { position: relative; z-index: 1; }

/* Editorial media section — full-width feature photo with caption. */
.vgs-media { text-align: center; }
.vgs-media__figure {
  margin: 0;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(46, 29, 20, 0.18);
  background: var(--dunlap-cream);
  max-width: 1080px;
  margin-inline: auto;
}
.vgs-media__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.vgs-media__figure figcaption {
  padding: var(--space-5) var(--space-8);
  background: var(--dunlap-bone);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
  line-height: 1.4;
  color: var(--dunlap-ink);
}

/* -----------------------------------------------------------------------
   Editorial photo frame — clean rectangular, soft warm shadow.
   No tilt, no polaroid border. Real photography does the work.
   Use via <figure class="vgs-photo-frame"><img …></figure>.
   ----------------------------------------------------------------------- */
.vgs-photo-frame {
  display: block;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(46, 29, 20, 0.14);
  background: var(--dunlap-cream);
}
.vgs-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;   /* Landscape source; portrait via .vgs-photo-frame--portrait */
  object-fit: cover;
}
.vgs-photo-frame--portrait img { aspect-ratio: 4/5; }

/* Offset stack — two photos overlapping cleanly (Kayla Skye / Amanda pattern) */
.vgs-photo-stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.vgs-photo-stack .vgs-photo-frame:first-child {
  grid-row: 1 / 3;
  grid-column: 1;
  z-index: 1;
  margin-top: var(--space-12);
}
.vgs-photo-stack .vgs-photo-frame:nth-child(2) {
  grid-column: 2;
  margin-left: calc(var(--space-12) * -1);
  margin-bottom: var(--space-12);
}

/* -----------------------------------------------------------------------
   Prose section — editorial two-column when body is long.
   ----------------------------------------------------------------------- */
.vgs-prose-section { text-align: left; }
.vgs-prose-section .container--narrow { text-align: left; }

/* -----------------------------------------------------------------------
   Services grid.
   ----------------------------------------------------------------------- */
.vgs-services { text-align: center; }
.vgs-services .vgs-section-intro {
  max-width: 640px;
  margin: 0 auto var(--space-12);
  font-size: var(--fs-lead);
}
.vgs-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 560px) { .vgs-grid--cards { grid-template-columns: 1fr; } }

/* Home services: fixed 3x2 grid so six cards sit two even rows. */
#services .vgs-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  #services .vgs-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #services .vgs-grid--cards { grid-template-columns: minmax(0, 1fr); }
}

/* Filled moss "explore everything" card — the sixth doorway.
   Doubled class beats the later base .vgs-card background. */
.vgs-card.vgs-card--cta {
  background: var(--dunlap-moss);
  color: var(--dunlap-bone);
}
.vgs-card--cta .vgs-card__title { color: var(--dunlap-white); }
.vgs-card--cta .vgs-card__summary { color: var(--dunlap-bone); }
.vgs-card--cta .vgs-card__link {
  color: var(--dunlap-honey);
  border-bottom-color: var(--dunlap-honey);
}
.vgs-card--cta .vgs-card__link:hover { color: var(--dunlap-white); }

/* -----------------------------------------------------------------------
   Motion layer word masks (motion.js splits headlines into these).
   Padding + negative margin keep descenders and italic overhangs
   outside the clip while the mask stays visually tight.
   ----------------------------------------------------------------------- */
.vgs-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.08em 0.14em;
  margin: -0.06em -0.08em -0.14em;
}
.vgs-w__i {
  display: inline-block;
  will-change: transform;
}

/* -----------------------------------------------------------------------
   Process cards — Function-style numbered steps with animated vignettes.
   Markup lives in the home "experience" section body.
   ----------------------------------------------------------------------- */
.vgs-prose-section:has(.vgs-process) .container--narrow { max-width: var(--content-main); }
.vgs-prose-section .vgs-prose:has(> .vgs-process) { max-width: none; margin-inline: 0; }

.vgs-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
  text-align: center;
}
@media (max-width: 900px) {
  .vgs-process { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; }
}
.vgs-process__card {
  background: var(--dunlap-bone);
  border: 1px solid var(--dunlap-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.vgs-process__num {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--dunlap-honey-600);
}
.vgs-process__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  color: var(--dunlap-ink);
  margin: 0;
  max-width: 300px;
}
.vgs-process__title em {
  font-style: italic;
  color: var(--dunlap-honey-600);
}
.vgs-process__sub {
  font-size: 0.9375rem;
  color: var(--dunlap-ink-muted);
  max-width: 300px;
  margin: 0;
}
.vgs-process__art {
  margin-top: auto;
  padding-top: var(--space-6);
  width: 100%;
  min-height: 185px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.vgs-process__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  /* Escape the .vgs-prose p reading measure so the row centers on the
     full container, not inside a left-pinned text column. */
  max-width: none;
  margin: var(--space-10) auto 0;
}

/* 01 — conversation: patient bubble, typing dots, practice reply. */
.vgs-bubble {
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 0.875rem;
  line-height: 1.35;
  max-width: 220px;
}
.vgs-bubble--patient,
.vgs-bubble--typing {
  background: var(--dunlap-ivory);
  border: 1px solid var(--dunlap-hairline);
  color: var(--dunlap-ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  text-align: left;
}
.vgs-bubble--typing { display: inline-flex; gap: 5px; align-items: center; padding-block: 13px; }
.vgs-bubble--typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dunlap-ink-muted);
  animation: vgs-dot 1.2s ease-in-out infinite;
}
.vgs-bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.vgs-bubble--typing span:nth-child(3) { animation-delay: 0.3s; }
.vgs-bubble--reply {
  background: var(--dunlap-moss);
  color: var(--dunlap-bone);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  opacity: 0;
  animation: vgs-reply 6s ease infinite;
}
@keyframes vgs-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes vgs-reply {
  0%, 28% { opacity: 0; transform: translateY(6px); }
  40%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* 02 — the look together: tooth line art + sweeping scan + findings. */
.vgs-scan {
  position: relative;
  width: min(250px, 100%);
  height: 170px;
  background: var(--dunlap-ivory);
  border: 1px solid var(--dunlap-hairline);
  border-radius: 12px;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%233F4A32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 16 C10 6 21 6 24 10 C27 6 38 6 38 16 C38 23 34 26 33 33 C32 40 28.5 41 28 35 C27.6 30.5 26.5 28 24 28 C21.5 28 20.4 30.5 20 35 C19.5 41 16 40 15 33 C14 26 10 23 10 16 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 96px;
}
.vgs-scan::before {
  content: "";
  position: absolute;
  top: 10px; bottom: 10px;
  left: 0;
  width: 36px;
  background: linear-gradient(90deg, transparent, rgba(192, 137, 87, 0.35), transparent);
  animation: vgs-sweep 3.2s ease-in-out infinite alternate;
}
.vgs-scan__dot {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dunlap-honey);
  animation: vgs-ping 2.4s ease-out infinite;
}
.vgs-scan__dot--a { top: 34%; left: 38%; }
.vgs-scan__dot--b { top: 58%; left: 58%; animation-delay: 1.2s; }
@keyframes vgs-sweep {
  from { left: 4%; }
  to   { left: 82%; }
}
@keyframes vgs-ping {
  0% { box-shadow: 0 0 0 0 rgba(192, 137, 87, 0.45); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(192, 137, 87, 0); }
}

/* 03 — the plan: checklist rows tick themselves in order. */
.vgs-planlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(250px, 100%);
}
.vgs-planrow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dunlap-ivory);
  border: 1px solid var(--dunlap-hairline);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: var(--dunlap-ink);
  text-align: left;
}
.vgs-planrow__check {
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--dunlap-honey);
  border-radius: 50%;
  position: relative;
}
.vgs-planrow__check::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--dunlap-honey-600);
  border-bottom: 2px solid var(--dunlap-honey-600);
  transform: rotate(45deg);
  opacity: 0;
  animation: vgs-tick 6s ease infinite;
}
.vgs-planrow:nth-child(2) .vgs-planrow__check::after { animation-delay: 0.9s; }
.vgs-planrow:nth-child(3) .vgs-planrow__check::after { animation-delay: 1.8s; }
@keyframes vgs-tick {
  0%, 12% { opacity: 0; transform: rotate(45deg) scale(0.4); }
  20%, 88% { opacity: 1; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vgs-process *, .vgs-process *::after, .vgs-process *::before { animation: none !important; }
  .vgs-bubble--reply { opacity: 1; }
  .vgs-planrow__check::after { opacity: 1; }
}

/* Pillar prose block — inline 3-column pillars inside a prose section. */
.vgs-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
  text-align: left;
}
.vgs-pillars > div h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-display-mid);
  color: var(--dunlap-honey);
  margin: 0 0 var(--space-3);
}
.vgs-pillars > div p {
  font-size: var(--fs-body);
  color: inherit;
  margin: 0;
}

.vgs-card {
  background: var(--dunlap-cream);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}
.vgs-card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--dunlap-ink);
  margin: 0;
}
.vgs-card__summary {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dunlap-ink);
  margin: 0;
}
.vgs-card__link {
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--dunlap-cocoa);
  text-decoration: none;
  border-bottom: 1px solid var(--dunlap-honey);
  padding-bottom: 2px;
  align-self: flex-start;
}

/* On inverse (cocoa) sections cards flip to bone bg — text must flip back to ink */
.vgs-ground-inverse .vgs-card { background: var(--dunlap-bone); }
.vgs-ground-inverse .vgs-card .vgs-card__title { color: var(--dunlap-cocoa-800, var(--dunlap-ink)); }
.vgs-ground-inverse .vgs-card .vgs-card__summary { color: var(--dunlap-ink); }
.vgs-ground-inverse .vgs-card .vgs-card__link { color: var(--dunlap-cocoa); }

/* -----------------------------------------------------------------------
   Trust band.
   ----------------------------------------------------------------------- */
.vgs-trust { text-align: center; }
.vgs-trust__title {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-8);
  color: var(--dunlap-ink);
}
.vgs-ground-inverse .vgs-trust__title { color: var(--dunlap-honey); }
.vgs-trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
}
@media (max-width: 900px) { .vgs-trust__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vgs-trust__row { grid-template-columns: 1fr; } }
.vgs-trust__item--text p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: inherit;
  margin: 0;
}

/* -----------------------------------------------------------------------
   CTA band.
   ----------------------------------------------------------------------- */
.vgs-cta { text-align: center; }
.vgs-cta .vgs-cta-row { justify-content: center; margin-top: var(--space-8); }
.vgs-cta .vgs-tagline {
  color: var(--dunlap-bone);
  opacity: 0.9;
  max-width: 640px;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------
   Location.
   ----------------------------------------------------------------------- */
.vgs-location__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-10);
}
@media (max-width: 720px) { .vgs-location__inner { grid-template-columns: 1fr; } }
.vgs-hours__row {
  display: flex; justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--dunlap-hairline);
}
.vgs-hours__row dt { font-weight: 400; margin: 0; }
.vgs-hours__row dd { font-weight: 500; margin: 0; color: var(--dunlap-cocoa); }

/* -----------------------------------------------------------------------
   FAQ.
   ----------------------------------------------------------------------- */
.vgs-faq__item {
  border-bottom: 1px solid var(--dunlap-hairline);
  padding: var(--space-5) 0;
}
.vgs-faq__item summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--dunlap-ink);
  list-style: none;
}
.vgs-faq__item summary::-webkit-details-marker { display: none; }
.vgs-faq__toggle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--dunlap-honey);
}
.vgs-faq__item[open] .vgs-faq__toggle::before { content: '−'; }
.vgs-faq__a { margin-top: var(--space-3); color: var(--dunlap-ink); }

/* -----------------------------------------------------------------------
   Focus ring.
   ----------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--dunlap-honey);
  outline-offset: 2px;
}
.vgs-ground-inverse :focus-visible,
.vgs-hero.vgs-ground-page :focus-visible {
  outline-color: var(--dunlap-honey);
}

/* -----------------------------------------------------------------------
   Header + footer.
   ----------------------------------------------------------------------- */
.site-header, .vgs-header {
  background: var(--dunlap-ivory);
  border-bottom: 1px solid var(--dunlap-hairline);
}
.site-header a, .vgs-header a { color: var(--dunlap-ink); text-decoration: none; }

/* Slim single-row nav: compact padding, small logo, CTA pill on the right. */
.vgs-header .vgs-header__inner { padding-block: 10px; }
.vgs-header__brand { display: inline-flex; align-items: center; }
.vgs-header__brand .vgs-logo {
  display: block;
  height: 40px;
  width: auto;
}
.vgs-header__cta.vgs-btn--primary {
  padding: 12px 24px;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--dunlap-bone); /* .vgs-header a would ink it out */
}
.vgs-header__cta.vgs-btn--primary:hover,
.vgs-header__cta.vgs-btn--primary:focus-visible {
  color: var(--dunlap-white);
}
/* True-center the nav: 1fr | auto | 1fr grid, so the link row centers on
   the container regardless of logo/CTA widths. Below 961px the CTA is
   hidden and the flex fallback takes over. */
@media (min-width: 961px) {
  .vgs-header .vgs-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .vgs-header .vgs-header__brand { justify-self: start; }
  .vgs-header .vgs-header__cta { justify-self: end; }
}
.vgs-header .vgs-nav__list { gap: var(--space-6); align-items: center; }
/* Inline anchors baseline-align ~7px high vs the flex-centered logo/CTA;
   inline-flex makes their padding box the alignment box. */
@media (min-width: 801px) {
  .vgs-header .vgs-nav__list li { display: flex; align-items: center; }
  .vgs-header .vgs-nav__list a { display: inline-flex; align-items: center; }
}
@media (max-width: 960px) {
  .vgs-header__cta { display: none; }
}
@media (max-width: 720px) {
  .vgs-header__brand .vgs-logo { height: 34px; }
  .vgs-header .vgs-header__inner { padding-block: 8px; }
}

.site-footer, .vgs-footer {
  background: var(--dunlap-charcoal);
  color: var(--dunlap-bone);
  margin-top: 0; /* kill base.css's 64px gap above the footer */
  padding-block: 80px 0;
}
.site-footer a, .vgs-footer a { color: var(--dunlap-bone); text-decoration: none; }
.site-footer a:hover, .vgs-footer a:hover { color: var(--dunlap-honey); }

/* 4-column footer: brand block + link columns + visit details. */
.vgs-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  padding-bottom: 64px;
}
@media (max-width: 980px) {
  .vgs-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vgs-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
.vgs-footer__logo-link { display: inline-block; margin-bottom: var(--space-4); }
.vgs-footer__logo {
  display: block;
  height: 52px;
  width: auto;
  filter: brightness(0) invert(0.96);
}
.vgs-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--dunlap-white);
  margin: 0 0 var(--space-3);
}
.vgs-footer__blurb {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(242, 234, 211, 0.72);
  max-width: 320px;
  margin: 0;
}
.vgs-footer .vgs-footer__heading {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--dunlap-honey);
  margin: 0 0 var(--space-4);
}
.vgs-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9375rem;
}
.vgs-footer__body { font-size: 0.9375rem; line-height: 1.6; }
.vgs-footer__body address { font-style: normal; margin: 0 0 var(--space-3); }
.vgs-footer__body p { margin: 0 0 var(--space-3); max-width: none; }
.vgs-footer__hours { color: rgba(242, 234, 211, 0.72); }

.vgs-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-top: 1px solid rgba(242, 234, 211, 0.14);
  padding-block: 24px;
}
.vgs-footer__meta {
  font-size: 0.8125rem;
  color: rgba(242, 234, 211, 0.6);
  margin: 0;
  border: 0;
  padding: 0;
}
.vgs-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-5);
  font-size: 0.8125rem;
}

/* -----------------------------------------------------------------------
   Marquee band — "TURN YOUR DREAMS INTO REALITY" style horizontal scroller.
   Add via <div class="vgs-marquee"><span>...</span></div>
   ----------------------------------------------------------------------- */
.vgs-marquee {
  background: var(--dunlap-honey);
  color: var(--dunlap-cocoa);
  padding-block: var(--space-6);
  overflow: hidden;
  white-space: nowrap;
}
.vgs-marquee__track {
  display: inline-flex;
  gap: 48px;
  animation: vgs-marquee 30s linear infinite;
}
.vgs-marquee span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  letter-spacing: 0.02em;
}
@keyframes vgs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vgs-marquee__track { animation: none; }
}

/* -----------------------------------------------------------------------
   Split prose — text column + lifestyle image side by side.
   ----------------------------------------------------------------------- */
.vgs-prose-section--split .container { max-width: var(--content-main); }
.vgs-prose-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.vgs-prose-split--left { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.vgs-prose-split--left .vgs-prose-split__media { order: -1; }
.vgs-prose-split__media { margin: 0; }
.vgs-prose-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
@media (max-width: 820px) {
  .vgs-prose-split,
  .vgs-prose-split--left { grid-template-columns: minmax(0, 1fr); }
  .vgs-prose-split--left .vgs-prose-split__media { order: 0; }
}

/* -----------------------------------------------------------------------
   Lifestyle mosaic — staggered strip of small candid photos.
   ----------------------------------------------------------------------- */
.vgs-media-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
  padding-bottom: clamp(12px, 2vw, 28px); /* room for the staggered offset */
}
.vgs-media-mosaic__item { margin: 0; }
.vgs-media-mosaic__item:nth-child(even) { transform: translateY(clamp(12px, 2vw, 28px)); }
.vgs-media-mosaic__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
@media (max-width: 820px) {
  .vgs-media-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}