/* =====================================================================
   css/about.css — About / Bio page body ONLY.
   Namespaced under .gv-about so it never touches the shared shell.
   Brand: cream page, gold accent / large only, warm-dark element-scale
   gradients ONLY, NO blue, calm motion, 65+ a11y (large type, 48px taps).
   Uses tokens from css/styles.css (:root --gv-*).
   ===================================================================== */

.gv-about {
  --about-maxw: 1140px;
}

/* ---- Section rhythm -------------------------------------------------- */
/* Mobile rhythm tightened (was 64px) to cut the exhausting thumb-scroll on
   the long bio page without losing the editorial breathing room on desktop. */
.gv-about__section {
  padding-block: 44px;
}
@media (min-width: 768px) {
  .gv-about__section { padding-block: 96px; }
}
.gv-about__inner {
  width: 100%;
  max-width: var(--about-maxw);
  margin-inline: auto;
  padding-inline: 20px;
}
.gv-about__divider {
  width: min(70%, 720px);
  margin: 0 auto;
  height: 2px;
  border: 0;
  background: var(--gv-accent-line);
}

.gv-about__eyebrow { margin-bottom: 16px; }

.gv-about__h2 {
  font-family: var(--gv-font-display);
  font-size: 30px;
  line-height: 1.12;
  color: var(--gv-text);
  margin: 0;
}
@media (min-width: 768px) {
  .gv-about__h2 { font-size: 40px; }
}

.gv-about__lead {
  font-family: var(--gv-font-body);
  font-size: 19px;
  line-height: var(--gv-body-lh);
  color: var(--gv-text-body);
  max-width: 62ch;
}

/* ---- Scroll reveal (IntersectionObserver-driven) --------------------- */
.gv-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--gv-dur-reveal) var(--gv-ease-out),
    transform var(--gv-dur-reveal) var(--gv-ease-out);
  will-change: opacity, transform;
}
.gv-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .gv-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   1. WARM INTRO
   ===================================================================== */
.gv-intro__grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .gv-intro__grid {
    grid-template-columns: 46% 1fr;
    gap: 64px;
    align-items: start;
  }
}

/* Double-bezel portrait frame */
.gv-portrait {
  position: relative;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius-lg);
  padding: 10px;
  box-shadow: var(--gv-shadow-lg);
}
.gv-portrait__inner {
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  overflow: hidden;
}
.gv-portrait__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.gv-intro__h1 {
  font-family: var(--gv-font-display);
  font-size: 42px;
  line-height: 1.05;
  color: var(--gv-text);
  margin: 16px 0 0;
}
@media (min-width: 768px) {
  .gv-intro__h1 { font-size: 60px; }
}
.gv-intro__promise {
  font-family: var(--gv-font-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--gv-text-body);
  margin: 16px 0 0;
  max-width: 32ch;
}
.gv-intro__story > p {
  font-family: var(--gv-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--gv-text-body);
  max-width: 60ch;
  margin: 20px 0 0;
}

/* Trust chips */
.gv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.gv-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: 999px;
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gv-text-muted);
}
.gv-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gv-gold);
  margin-right: 10px;
}

/* =====================================================================
   2. VIDEO — a standalone, prominent, centered focal element
   ===================================================================== */

/* Centered heading over the standalone video. */
.gv-video__head { text-align: center; max-width: 34ch; margin-inline: auto; }
.gv-video__head .gv-about__lead { margin-inline: auto; }

/* The video frame: centered + larger/cinematic — the one thing to watch. */
.gv-video__frame {
  margin: 32px auto 0;
  width: 100%;
  max-width: 880px;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius-lg);
  padding: 10px;
  box-shadow: var(--gv-shadow-lg);
}
@media (max-width: 560px) {
  .gv-video__frame { padding: 8px; }
}

/* Reused by the casual portrait in the credentials lede (§3). */
.gv-portrait__img--square {
  aspect-ratio: 5 / 6;
  object-position: center 15%;
}
.gv-video__stage {
  position: relative;
  border-radius: var(--gv-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--gv-grad-cardback);
  border: 1px solid var(--gv-rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* On narrow phones the 16:9 stage is too short for the placeholder copy —
   let it grow so the last caption line isn't clipped. */
@media (max-width: 560px) {
  .gv-video__stage { aspect-ratio: auto; min-height: 300px; }
}
/* Placeholder "video coming" treatment — warm-dark element surface */
.gv-video__placeholder {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}
.gv-video__playbtn {
  position: relative;       /* anchor the breathing ring */
  width: 72px;
  height: 72px;
  min-height: 72px; /* guard: don't collapse to SVG height in column flex */
  flex-shrink: 0;   /* column-flex child must not shrink to 30px */
  border-radius: 50%;
  border: 0;
  background: var(--gv-grad-gold);
  color: var(--gv-ink-deepest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(42, 31, 18, 0.35);
  cursor: pointer;
  transition: transform var(--gv-dur) var(--gv-ease);
}
.gv-video__playbtn:active { transform: scale(0.97); }
.gv-video__playbtn[disabled] { cursor: default; opacity: 0.92; }
.gv-video__playbtn[disabled]:active { transform: none; }
.gv-video__playbtn svg { width: 30px; height: 30px; margin-left: 4px; }

/* Slow gold "breathing" ring — marks where play will live; calm, not busy. */
.gv-video__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--gv-gold);
  opacity: 0;
  pointer-events: none;
  animation: gv-video-breathe 3.2s var(--gv-ease) infinite;
}
@keyframes gv-video-breathe {
  0%, 100% { opacity: 0; transform: scale(0.96); }
  50%      { opacity: 0.5; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .gv-video__ring { animation: none; opacity: 0; }
}

/* §3 — Portrait + credentials card as one calm 2-col trust composition.
   Portrait FIRST in DOM → on mobile the face sits above the NPN card. */
.gv-cred__lede {
  margin-top: 32px;
  display: grid;
  gap: 28px;
  justify-items: center;
}
.gv-cred__lede .gv-credcard { margin-top: 0; width: 100%; }
.gv-cred__portrait {
  width: 100%;
  max-width: 320px;          /* mobile: present, not looming */
}
@media (min-width: 768px) {
  .gv-cred__portrait { max-width: 420px; }
}
@media (min-width: 1024px) {
  .gv-cred__lede {
    grid-template-columns: 38% 1fr;
    gap: 56px;
    align-items: center;     /* face eye-line meets the NPN */
    justify-items: stretch;
  }
  .gv-cred__portrait { max-width: none; }
}
.gv-video__playlabel {
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: var(--gv-label-tracking);
  font-size: var(--gv-font-size-label);
  font-weight: 700;
  color: var(--gv-on-dark);
}
.gv-video__soon {
  font-family: var(--gv-font-body);
  font-size: 15px;
  color: var(--gv-on-dark-muted);
  max-width: 36ch;
  margin: 0;
}
.gv-video__chip {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--gv-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gv-on-dark);
  background: rgba(42, 31, 18, 0.55);
  border: 1px solid rgba(212, 168, 91, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
}
.gv-video__el { width: 100%; height: 100%; display: block; }

.gv-video__transcript {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 20px auto 0;
  font-family: var(--gv-font-body);
  font-size: 17px;
  color: var(--gv-text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gv-video__transcript-wrap { text-align: center; }

/* Transcript disclosure */
.gv-transcript-body {
  max-width: 70ch;
  margin: 16px auto 0;
  text-align: left;
}
.gv-transcript-body p {
  font-family: var(--gv-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--gv-text-body);
  margin: 0 0 16px;
}

/* =====================================================================
   3. LICENSED & VERIFIED
   ===================================================================== */
.gv-cred__head { max-width: 62ch; }

/* Double-bezel credentials card (HTML/CSS, on-brand cream/gold) */
.gv-credcard {
  position: relative;
  margin: 32px 0 0;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius-lg);
  padding: 8px;
  box-shadow: var(--gv-shadow-lg);
}
.gv-credcard__inner {
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  padding: 32px 24px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(196, 140, 60, 0.05), transparent 60%),
    var(--gv-card);
}
@media (min-width: 768px) {
  .gv-credcard__inner { padding: 44px 40px; }
}
.gv-credcard__seal {
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: var(--gv-label-tracking);
  font-size: var(--gv-font-size-label);
  font-weight: 700;
  color: var(--gv-gold-text); /* #8A5A18 — 5.8:1 on cream card (AA) */
}
.gv-credcard__title {
  font-family: var(--gv-font-display);
  font-size: 28px;
  line-height: 1.15;
  color: var(--gv-text);
  margin: 12px 0 0;
}
@media (min-width: 768px) {
  .gv-credcard__title { font-size: 34px; }
}
.gv-credcard__line {
  width: 200px;
  height: 2px;
  border: 0;
  margin: 22px auto;
  background: var(--gv-accent-line);
  opacity: 0.85;
}
.gv-credcard__npn-label {
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: var(--gv-label-tracking);
  font-size: var(--gv-font-size-label);
  font-weight: 600;
  color: var(--gv-text-muted);
}
.gv-credcard__npn {
  font-family: var(--gv-font-display);
  font-size: 38px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--gv-text);
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .gv-credcard__npn { font-size: 48px; }
}
.gv-credcard__reassure {
  font-family: var(--gv-font-body);
  font-size: 18px;
  line-height: var(--gv-body-lh);
  color: var(--gv-text-body);
  max-width: 54ch;
  margin: 22px auto 0;
}

/* License gallery — 2-up from mobile (lightbox handles full view) so the 8
   certificates don't become 8 full-bleed stacked images (~3,000px of scroll). */
.gv-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 32px 0 0;
}
@media (min-width: 560px) {
  .gv-gallery { gap: 20px; }
}
@media (min-width: 1024px) {
  .gv-gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.gv-tile {
  display: flex;
  flex-direction: column;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  padding: 8px;
  box-shadow: var(--gv-shadow);
  text-align: left;
}
.gv-tile__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius-sm);
  overflow: hidden;
  /* #fff (true white) is intentional here: license scans are photographed on
     white paper, so a pure-white matte avoids a cream cast tinting the document. */
  background: #fff;
  cursor: pointer;
  transition: transform var(--gv-dur) var(--gv-ease), box-shadow var(--gv-dur) var(--gv-ease);
}
.gv-tile__btn:hover { box-shadow: var(--gv-shadow-lg); }
.gv-tile__btn:active { transform: scale(0.97); }
.gv-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff; /* license-rendering exception (see .gv-tile__btn) — true white */
  padding: 6px;
}
.gv-tile__zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(42, 31, 18, 0.78);
  color: var(--gv-on-dark);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--gv-font-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gv-tile__zoom svg { width: 14px; height: 14px; }
.gv-tile__caption {
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gv-text-muted);
  padding: 12px 6px 6px;
}

/* Verify links */
.gv-verify {
  margin: 40px 0 0;
}
.gv-verify__heading {
  font-family: var(--gv-font-body);
  font-weight: 600;
  font-size: 19px;
  color: var(--gv-text);
  margin: 0 0 12px;
}
.gv-verify__list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--gv-rule);
}
@media (min-width: 768px) {
  .gv-verify__list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
.gv-verify__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--gv-rule);
  font-family: var(--gv-font-body);
  font-size: 17px;
  color: var(--gv-text-body);
  text-decoration: none;
}
.gv-verify__link:hover { color: var(--gv-text); text-decoration: underline; text-underline-offset: 3px; }
.gv-verify__link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--gv-gold);
}
.gv-verify__link span { flex: 1 1 auto; }
.gv-verify__note {
  font-family: var(--gv-font-body);
  font-size: 14.5px;
  color: var(--gv-text-muted);
  margin: 16px 0 0;
  max-width: 62ch;
}

/* =====================================================================
   4. SAVE-MY-CONTACT
   ===================================================================== */
.gv-save__head { text-align: center; }
.gv-save__head .gv-about__lead { margin-inline: auto; }

.gv-savecard {
  margin: 32px auto 0;
  max-width: 640px;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--gv-shadow-lg);
}
@media (min-width: 768px) {
  .gv-savecard { padding: 36px 40px; }
}
/* Save-card buttons are SCOPED to .gv-savecard so they never override the
   global home.css .gv-btn-primary / .gv-btn-ghost definitions. */
.gv-savecard .gv-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: var(--gv-radius);
  background: var(--gv-grad-gold);
  color: var(--gv-ink-deepest);
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(196, 140, 60, 0.28);
  transition: transform var(--gv-dur) var(--gv-ease), filter var(--gv-dur) var(--gv-ease);
}
.gv-savecard .gv-btn-primary:hover { filter: brightness(1.04); }
.gv-savecard .gv-btn-primary:active { transform: scale(0.97); }
.gv-savecard .gv-btn-primary svg { width: 20px; height: 20px; }

.gv-save__secondary {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
}
@media (min-width: 480px) {
  .gv-save__secondary { grid-template-columns: 1fr 1fr; }
}
.gv-savecard .gv-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--gv-gold);
  border-radius: var(--gv-radius-sm);
  background: transparent;
  color: var(--gv-gold-text);
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--gv-dur) var(--gv-ease);
}
.gv-savecard .gv-btn-ghost:hover { background-color: rgba(196, 140, 60, 0.08); }
.gv-savecard .gv-btn-ghost svg { width: 17px; height: 17px; }

/* Quiet always-visible next-step hint directly under the Save button. */
.gv-save__nextstep {
  margin: 10px 0 0;
  font-family: var(--gv-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gv-text-muted);
  text-align: center;
}
.gv-save__nextstep strong { color: var(--gv-text-body); font-weight: 600; }

.gv-save__status {
  margin: 16px 0 0;
  font-family: var(--gv-font-body);
  font-size: 16px;
  color: var(--gv-text-muted);
  min-height: 1.2em;
  text-align: center;
}

/* Per-device accordion */
.gv-save__accordion {
  margin: 20px 0 0;
  border-top: 1px solid var(--gv-rule);
  padding-top: 12px;
}
.gv-save__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--gv-font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--gv-text);
  text-align: left;
}
.gv-save__toggle svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  transition: transform var(--gv-dur) var(--gv-ease);
}
.gv-save__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.gv-save__panel { padding: 4px 2px 8px; }
.gv-save__panel[hidden] { display: none; }
.gv-instructions__steps {
  counter-reset: step;
  margin: 8px 0 0;
  padding: 0;
}
.gv-instructions__steps li {
  position: relative;
  list-style: none;
  padding: 6px 0 6px 38px;
  font-family: var(--gv-font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--gv-text-body);
}
.gv-instructions__steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(196, 140, 60, 0.14);
  color: var(--gv-gold-text);
  font-family: var(--gv-font-label);
  font-weight: 700;
  font-size: var(--gv-font-size-label);
}

/* Desktop QR — INJECTED by contact-save.js into .gv-savecard (the About markup
   ships no QR host). Dark-on-cream for brand + high contrast; scannability is
   non-negotiable. Mirrors the Connect QR styling but scoped here so About need
   not load connect.css. Hidden on phones (no scanning your own screen). */
.gv-savecard .gv-connect-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.gv-savecard .gv-connect-qr[hidden] { display: none; }
.gv-savecard .gv-connect-qr__frame {
  width: 240px;
  height: 240px;
  padding: 16px;
  background: #fffdf6; /* QR background must stay light for contrast */
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  box-shadow: var(--gv-shadow);
  box-sizing: content-box;
}
.gv-savecard .gv-connect-qr__frame svg { display: block; width: 240px; height: 240px; }
.gv-savecard .gv-connect-qr__caption {
  font-family: var(--gv-font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--gv-text-muted);
  text-align: center;
  max-width: 30ch;
  margin: 0;
}

/* On desktop the QR is the primary path: it comes first, the .vcf Save button is
   demoted below it. .gv-savecard is a column flexbox via this rule so `order`
   controls vertical position. The text/email row is hidden by JS on desktop. */
.gv-savecard[data-gv-platform="desktop"] {
  display: flex;
  flex-direction: column;
}
.gv-savecard[data-gv-platform="desktop"] .gv-connect-qr { order: 1; }
.gv-savecard[data-gv-platform="desktop"] .gv-btn-primary { order: 2; }
.gv-savecard[data-gv-platform="desktop"] .gv-save__status { order: 4; }
.gv-savecard[data-gv-platform="desktop"] .gv-save__accordion { order: 5; }

/* On desktop the QR is the primary "get the card on your phone" path, so the
   .vcf Save button is demoted to a QUIET OUTLINE (matching Connect's desktop
   treatment) instead of the loud filled gold that would outshout the QR.
   Base class stays gv-btn-primary; this only retones it for desktop. Mobile
   (no platform attr / phone) keeps the filled primary. Mirrors .gv-btn-ghost. */
html[data-gv-platform="desktop"] .gv-savecard .gv-btn-primary,
.gv-savecard[data-gv-platform="desktop"] .gv-btn-primary {
  background: transparent;
  color: var(--gv-gold-text);
  border: 1.5px solid var(--gv-gold);
  box-shadow: none;
  min-height: 48px;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 14px;
}
html[data-gv-platform="desktop"] .gv-savecard .gv-btn-primary:hover,
.gv-savecard[data-gv-platform="desktop"] .gv-btn-primary:hover {
  filter: none;
  background-color: rgba(196, 140, 60, 0.08);
}

/* Desktop backstop (flicker-free, deterministic): on desktop the QR is the path,
   so the text/email row AND the phone-oriented "tap Add to Contacts" line are
   wrong here. Hide them in CSS the instant the platform attr lands — no reliance
   on JS having run hideAltActions(), and the gv-reveal observer can never re-show
   them because display:none wins over opacity/transform.

   The html[data-gv-platform="desktop"] selector is set by an inline <head>
   script BEFORE first paint, so the row never renders-then-vanishes. The
   .gv-savecard[...] selector is the JS-set attribute (set on mount) — kept as a
   second line of defense in case the head script is stripped. */
html[data-gv-platform="desktop"] .gv-save__secondary,
html[data-gv-platform="desktop"] .gv-save__nextstep,
.gv-savecard[data-gv-platform="desktop"] .gv-save__secondary,
.gv-savecard[data-gv-platform="desktop"] .gv-save__nextstep {
  display: none !important;
}

/* =====================================================================
   5. SCHEDULE CTA — element-scale warm-dark band (contained, cream margin)
   ===================================================================== */
.gv-cta__band {
  max-width: 960px;
  margin: 0 auto;
  background: var(--gv-grad-cta);
  border-radius: var(--gv-radius-lg);
  padding: 44px 28px;
  text-align: center;
  box-shadow: var(--gv-shadow-lg);
}
@media (min-width: 768px) {
  .gv-cta__band { padding: 64px 48px; }
}
.gv-cta__eyebrow {
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: var(--gv-label-tracking);
  font-size: var(--gv-font-size-label);
  font-weight: 700;
  color: var(--gv-gold-light);
}
.gv-cta__h2 {
  font-family: var(--gv-font-display);
  font-size: 30px;
  line-height: 1.12;
  color: var(--gv-on-dark);
  margin: 14px auto 0;
  max-width: 22ch;
}
@media (min-width: 768px) {
  .gv-cta__h2 { font-size: 42px; }
}
.gv-cta__sub {
  font-family: var(--gv-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--gv-on-dark);
  margin: 16px auto 0;
  max-width: 48ch;
}
.gv-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
}
@media (min-width: 600px) {
  .gv-cta__actions { flex-direction: row; justify-content: center; }
}
.gv-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--gv-grad-gold);
  color: var(--gv-ink-deepest);
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: filter var(--gv-dur) var(--gv-ease), transform var(--gv-dur) var(--gv-ease);
}
.gv-cta__btn:hover { filter: brightness(1.05); }
.gv-cta__btn:active { transform: scale(0.97); }
.gv-cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  color: var(--gv-on-dark);
  font-family: var(--gv-font-body);
  font-size: 18px;
  text-decoration: none;
}
.gv-cta__tel:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.gv-lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  /* respect safe areas (notch / home indicator) so controls stay reachable */
  padding: calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px);
  background: rgba(42, 31, 18, 0.92);
}
.gv-lightbox[hidden] { display: none; }
.gv-lightbox__figure {
  position: relative;
  /* near-fullscreen so a 68-yo can actually read the license fine print */
  width: 100%;
  max-width: min(98vw, 1100px);
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gv-lightbox__matte {
  width: 100%;
  background: var(--gv-card);
  border: 1px solid var(--gv-rule);
  border-radius: var(--gv-radius);
  padding: 8px;
  /* warm shadow only — NO cold black */
  box-shadow: 0 20px 60px rgba(58, 42, 26, 0.45);
  /* the matte itself scrolls so a zoomed-in image can be panned */
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.gv-lightbox__img {
  display: block;
  /* Fit state: constrain both axes so portrait licenses never overflow the
     viewport in landscape orientation (short viewport). The ~140px subtracts
     the fixed chrome: lightbox padding (16px) + matte padding (16px) +
     caption + margin (33px) + nav + margin (60px) + matte border (2px) +
     a small buffer (13px). dvh accounts for retractable browser chrome. */
  width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  height: auto;
  object-fit: contain;
  border-radius: var(--gv-radius-sm);
  /* allow native pinch-zoom on the image (do NOT trap it) */
  touch-action: pinch-zoom;
  cursor: zoom-in;
  opacity: 0;
  transform: scale(0.98);
  transform-origin: center top;
  transition: opacity 240ms var(--gv-ease-out), transform 240ms var(--gv-ease-out);
}
.gv-lightbox__img.is-loaded { opacity: 1; transform: none; }
/* tap-to-zoom toggle (JS adds .is-zoomed): scale the image up for closer reading.
   Zoomed state intentionally removes the max-height so fine print is readable. */
.gv-lightbox__img.is-zoomed {
  width: 175%;
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
@media (min-width: 768px) {
  .gv-lightbox__img.is-zoomed { width: 150%; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-lightbox__img { transition: none; opacity: 1; transform: none; }
}
.gv-lightbox__caption {
  margin: 12px 0 0;
  font-family: var(--gv-font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--gv-font-size-label);
  font-weight: 600;
  color: var(--gv-on-dark);
  text-align: center;
  flex: 0 0 auto;
}

.gv-lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(212, 168, 91, 0.4);
  border-radius: 999px;
  background: rgba(42, 31, 18, 0.6);
  color: var(--gv-on-dark);
  font-family: var(--gv-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0 16px;
  transition: background-color var(--gv-dur) var(--gv-ease);
}
.gv-lightbox__btn:hover { background: rgba(92, 62, 31, 0.85); }
.gv-lightbox__btn svg { width: 18px; height: 18px; }
.gv-lightbox__close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  /* stronger backdrop so Close stays readable over a zoomed/scrolled image */
  background: rgba(42, 31, 18, 0.82);
}
.gv-lightbox__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: min(98vw, 1100px);
  margin: 12px 0 0;
  flex: 0 0 auto;
}


/* ── Trust-chip single-row on desktop (Fix 4) ── */
@media (min-width: 768px) {
  .gv-chips {
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
  }
}