/* ============================================================
   PARK LANE ORTHODONTICS - reskin layer for the signed-off BAU
   landing-page layout. Loaded LAST (after colors_and_type.css,
   styles.css and template3.css).

   The layout, spacing and section rhythm are inherited untouched from
   the signed-off template. This file swaps the visual language only:
   heraldic navy + gold over warm cream, Bodoni Ferrara headlines,
   Inter body, pill buttons (the brand's signature shape), 14px cards.

   The legacy --as-* / --text-* token remap lives in an inline
   <style id="pl-tokens"> block in each page head so it parses reliably
   and overrides the template's own defaults. Brand tokens
   (--navy, --gold, --cream, --font-display, --font-body) come from
   the design system's colors_and_type.css.
   ============================================================ */

/* ============================================================
   SHARP EDGES - the client's brand uses right-angled corners.
   Everything squares off; only CTA buttons keep the pill shape.
   ============================================================ */
.icbtn, .header-callbtn, .hero__usps .tick, .treat__opt span::before,
.lead-form--success .tick-lg, .value__ic, .checklist__ic, .fstep__n,
.revcard__av, .imgstrip__play span, .faq__ic, .benefit__ic,
.t3-chip__ic, .t3-card--feat .t3-card__ic, .t3-card--sm .t3-card__ic,
.ty-check, .ty-check::after, .ty-facts__ic, .ty-contact__ic, .ty-step__dot,
.hero-dateline, .t3-card__val, .google-trust, .t3-gbox, .rev-note,
.photobreak__award, .spec, .spec__photo, .t3-showcase, .exam-band,
.plan, .benefit, .revcard, .fcard, .t3-card, .t3-formcard, .value, .imgstrip__item,
.field input, .lead-form input, .field__select, .t3-chip {
  border-radius: 0 !important;
}

/* CTA buttons (and the sticky-bar call button) stay pill-shaped */
.cta, .pill, .pill--navy, .mobile-cta__call, .mobile-cta .cta {
  border-radius: var(--radius-pill) !important;
}

/* Offer call-out: gold circle sitting proud of the hero photo's top-right corner */
.hero-blob {
  position: absolute; z-index: 20; top: clamp(-26px, -2vw, -16px); right: clamp(-20px, -1.6vw, -12px);
  width: clamp(126px, 13vw, 164px); aspect-ratio: 1; border-radius: 50% !important;
  display: grid; place-items: center; text-align: center; padding: 12px;
  background: var(--gold);
  border: 3px solid #fff;
  box-shadow: 0 14px 34px rgba(15,26,46,.5);
  pointer-events: none;
}
.hero-blob span {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.1; letter-spacing: -.005em;
  text-shadow: 0 1px 3px rgba(15,26,46,.3);
}
/* consolidated into the form's hero-dateline pill on mobile - see D4 below */
@media (max-width: 620px) { .hero-blob { display: none; } }

/* ---------- Eyebrow: Inter, uppercase, wide gold tracking (brand label) ---------- */
.eyebrow {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  gap: .75em; font-family: var(--font-body); font-weight: 700; font-size: var(--text-13);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.eyebrow::before { content: ""; width: 1.9rem; height: 1px; background: currentColor; opacity: .8; flex: none; }
.eyebrow.on-dark { color: var(--gold-400); }

/* ---------- Buttons: the signature pill. Navy on light, gold on navy ---------- */
.cta {
  border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600;
  letter-spacing: .01em; justify-content: center; text-align: center;
  transition: background var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft), box-shadow var(--dur);
}
.cta--teal { background: var(--navy); color: var(--cream-light); box-shadow: var(--shadow-sm); }
.cta--teal:hover { background: var(--navy-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cta--gold { background: var(--gold); color: var(--cream-light); }
.cta--gold:hover { background: var(--gold-600); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }

/* On every navy band the primary action switches to gold so it still carries */
.section.ink .cta--teal, .final .cta--teal, .band .cta--teal, .imgstrip.ink .cta--teal,
.section.teal .cta--teal, .footer .cta--teal {
  background: var(--gold); color: var(--cream-light);
}
.section.ink .cta--teal:hover, .final .cta--teal:hover, .band .cta--teal:hover,
.imgstrip.ink .cta--teal:hover, .section.teal .cta--teal:hover, .footer .cta--teal:hover {
  background: var(--gold-600);
}
/* Outline pill on navy = 1.5px gold stroke (brand) */
.cta--outline.on-dark, .final .cta--outline, .band .cta--outline {
  border: 1.5px solid var(--gold-400); color: var(--cream-light); background: transparent;
}
.cta--outline.on-dark:hover, .final .cta--outline:hover, .band .cta--outline:hover {
  background: rgba(156,122,78,.16); border-color: var(--gold);
}
.pill--navy { background: var(--navy); color: var(--cream-light); border-radius: var(--radius-pill); }
.pill--navy:hover { background: var(--navy-600); }
.tlink { color: var(--gold); }
.tlink:hover { color: var(--gold-600); }
.ink .tlink, .teal .tlink { color: var(--gold-400); }

/* ---------- Headlines: Bodoni Ferrara, Title Case, generous ---------- */
.h1, .h2, .h3, .hero h1, .t3-showcase__copy h1 { font-family: var(--font-display); letter-spacing: -.01em; }
.h2 { font-weight: 700; color: var(--navy); }
.lead { font-family: var(--font-body); color: var(--ink-muted); font-weight: 400; }
.ink .lead, .teal .lead { color: var(--on-dark-muted); }

/* ---------- Remove template-only textures ---------- */
.barcode { display: none !important; }
.hero__mono, .exam-band__mono, .final__mono { background-image: none !important; }

/* ---------- Header: warm cream bar so the navy+gold logo reads clearly ---------- */
/* The supplied lockup is a JPG on a solid white field, so the header bar behind
   it is white - no visible box. (A transparent/vector logo is still preferred.) */
.site-header, .site-header.header-dark { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.site-header.header-dark::before { display: none !important; }
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header .site-nav a, .site-header.header-dark .site-nav a {
  font-family: var(--font-body); color: var(--navy); font-weight: 500;
}
.site-header .site-nav a:hover, .site-header.header-dark .site-nav a:hover { color: var(--gold); }
.site-header .header-phone, .site-header.header-dark .header-phone { color: var(--navy); font-family: var(--font-body); font-weight: 600; }
.site-header .header-phone svg, .site-header.header-dark .header-phone svg { color: var(--gold); }
.site-header.header-dark .header-callbtn { color: var(--navy); border-color: var(--line); }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { height: 46px; width: auto; display: block; }
.site-header.is-stuck .brand img { height: 40px; }
.brand-wm { display: none; }   /* the supplied lockup already carries the wordmark */

/* ---------- Accessible-only labels (placeholders act as visible labels) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Form: warm fill, gold focus ring, 8px corners ---------- */
.field input, .lead-form input, .field__select {
  background: #FBF9F5; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); color: var(--ink);
}
.field input::placeholder { color: #8B8578; opacity: 1; }
.field input:hover, .field__select:hover { border-color: var(--gold-400); }
.field input:focus, .field__select:focus {
  background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(156,122,78,.22); outline: none;
}
.field__select {
  width: 100%; font-size: var(--text-16); padding: 13px 40px 13px 15px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7A4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
}
.field__select:invalid { color: #8B8578; }
.lead-form__title { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.lead-form__note, .lead-form__foot span { font-family: var(--font-body); }
.lead-form__foot svg { color: var(--gold); }

/* ---------- Cards / surfaces: 14px, warm hairline, soft navy-tinted shadow ---------- */
.plan, .benefit, .revcard, .fcard, .t3-card, .t3-formcard, .value, .imgstrip__item, .spec {
  border-radius: var(--radius-lg);
}
.plan--feat { border: 1.5px solid var(--gold); box-shadow: var(--shadow-md); }
.revcard__av { background: var(--gold); color: var(--cream-light); font-family: var(--font-body); font-weight: 700; }
.checklist__ic, .value__ic, .benefit__ic { background: #EFE7D9; color: var(--gold-600); }
.value__t, .benefit__t, .plan__name, .fstep__t, .faq__q, .revcard__n { font-family: var(--font-display); color: var(--navy); }
.value__s, .benefit__d, .plan__desc, .fstep__s, .revcard__q { font-family: var(--font-body); }

/* ---------- Footer: deepest navy, cream wordmark (no reversed logo supplied) ---------- */
.footer .footer__wood { background: var(--navy-900) !important; }
.footer .footer__wood::after { background: none !important; }
.footer-wm { text-align: left; line-height: 1; }
.footer-wm__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--cream-light); letter-spacing: .01em; }
.footer-wm__sub { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--gold-400); margin-top: 4px; }
.footer__legal, .footer__legal span { font-family: var(--font-body); }

/* ---------- Hero: navy protection gradient (never warm/brown) ---------- */
.t3-showcase { border-radius: var(--radius-lg); overflow: visible !important; }
/* the hero photo is portrait, so bias the crop up to keep both faces in frame */
.t3-showcase > img { object-position: center 39%; }
/* the package photo is portrait too - keep the child's face clear of the caption,
   but low enough that the mouth/chin aren't cropped out of the frame */
#package .t3-card--media img { object-position: center 38%; }
/* the headline value on the package photo card carries the offer, so scale it up */
#package .t3-card--media .t3-card__label h3 {
  font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.015em;
}
#package .t3-card--media .t3-card__label p { font-size: var(--text-16); max-width: 400px; margin-top: 12px; }
.t3-showcase__grad { background: linear-gradient(180deg, rgba(15,26,46,.28) 0%, rgba(15,26,46,0) 34%, rgba(15,26,46,0) 56%, rgba(15,26,46,.5) 78%, rgba(15,26,46,.92) 100%) !important; }
.t3-showcase__copy {
  background: none;
  padding-top: clamp(56px, 7vw, 92px) !important;
  /* copy sits lower and slightly further left in the frame */
  padding-bottom: clamp(4px, 0.6vw, 8px) !important;
  padding-left: clamp(14px, 1.8vw, 26px) !important;
}
.t3-showcase__copy h1 { max-width: 448px; }
.t3-showcase__copy h1 { font-family: var(--font-display); font-weight: 700; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.t3-showcase__copy h1 .hl-accent { font-style: normal; }
.t3-showcase__copy p { font-family: var(--font-body); text-shadow: 0 2px 14px rgba(0,0,0,.5); }

/* Desktop only: darker legibility gradient, and more breathing room around
   the headline block (tighter H1-to-paragraph gap, more room off the bottom edge) */
@media (min-width: 981px) {
  .t3-showcase__grad { background: linear-gradient(180deg, rgba(15,26,46,.15) 0%, rgba(15,26,46,.55) 100%) !important; }
  .t3-showcase__copy { padding-bottom: clamp(28px, 3vw, 40px) !important; }
  .t3-showcase__copy p { margin-top: 8px; }
}

/* Offer date line - now sits at the top of the enquiry form */
.hero-dateline {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-12);
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  background: var(--gold-200); padding: 9px 16px; border-radius: var(--radius-pill);
  line-height: 1.35; text-wrap: pretty;
}
.hero-dateline svg { width: 15px; height: 15px; color: var(--gold-600); flex: none; }
.hero-dateline__date { display: inline-flex; align-items: center; gap: 9px; }
/* the "Limited time offer" line only appears once stacked on mobile - see D4 below */
.hero-dateline__flash { display: none; }

/* Hero glass chips + the roundel brand mark */
/* credential chip sits top-left, clear of the ribbon on the right */
.t3-chip--apex { top: 22px !important; left: 22px !important; right: auto !important; }
.t3-chip--apex .t3-chip__t, .t3-chip--apex .t3-chip__s { white-space: nowrap; }
.t3-chip--apex .t3-chip__ic svg { color: var(--gold-400); }
/* moved inside the copy block so it stacks above the headline, clear of the
   faces higher in the photo, instead of floating pinned to the top-left */
.t3-showcase__copy .t3-chip--apex {
  position: static !important; top: auto !important; left: auto !important;
  margin: 0 0 14px;
}
/* scoped to a range that can't collide with the max-width:620px hide rule below,
   so specificity never has to fight it for the `display` property */
@media (min-width: 621px) { .t3-showcase__copy .t3-chip--apex { display: inline-flex; } }

/* the credential chip sits below the ribbon on the left */
.t3-chip--rating { display: none; }
.t3-roundel {
  position: absolute; right: 22px; bottom: 26px; z-index: 3; width: 78px; height: 78px;
  border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.34); pointer-events: none;
}
.t3-roundel img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) { .t3-chip--apex, .t3-roundel { display: none; } }

/* ---------- Mobile Google box under the form ---------- */
.t3-gbox { display: none; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.t3-gbox__top { display: flex; align-items: center; gap: 8px; }
.t3-gbox__top .stars { color: var(--gold); }
.t3-gbox__top b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-16); color: var(--navy); }
.t3-gbox__sub { font-family: var(--font-body); font-size: var(--text-12); color: var(--ink-muted); margin-top: 2px; }

/* ---------- Google review credibility ---------- */
.google-trust {
  display: flex; width: max-content; align-items: center; gap: 14px; margin: 30px auto 0;
  padding: 13px 22px 13px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.google-trust__top { display: flex; align-items: center; gap: 9px; }
.google-trust__top b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-19); color: var(--navy); }
.google-trust__top .stars, .revcard__stars .stars { color: var(--gold); }
.google-trust__sub { font-family: var(--font-body); font-size: var(--text-13); color: var(--ink-muted); margin-top: 1px; }
.rev-grid { align-items: stretch; }
@media (min-width: 981px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
.revcard__src { display: flex; align-items: center; gap: 8px; }
.revcard__src span { font-family: var(--font-body); font-weight: 500; font-size: var(--text-12); color: var(--ink-faint); }
.revcard__stars { margin-left: auto; }
.revcard--feat { grid-column: 1 / -1; }
.revcard--feat .revcard__q { font-size: var(--text-19); }
/* a lone second review shouldn't leave a half-empty row */
.rev-grid .revcard:nth-child(2):last-child { grid-column: 1 / -1; }
@media (max-width: 720px) { .revcard--feat { grid-column: auto; } }

/* Placeholder note for the real Google reviews still to be pasted in */
.rev-note {
  display: flex; gap: 10px; align-items: flex-start; max-width: 62ch; margin: 26px auto 0;
  padding: 13px 18px; border: 1px dashed var(--gold-400); border-radius: var(--radius-sm);
  background: #FBF7F0; font-family: var(--font-body); font-size: var(--text-13); color: var(--ink-muted);
}
.rev-note svg { width: 17px; height: 17px; color: var(--gold-600); flex: none; margin-top: 2px; }

/* ---------- Showcase feature card on navy ---------- */
.t3-card--feat { background: var(--navy) !important; border: 1px solid rgba(156,122,78,.42) !important; box-shadow: var(--shadow-md); }
.t3-card--feat h3 { color: var(--cream-light) !important; font-family: var(--font-display); }
.t3-card--feat p { color: var(--on-dark-muted) !important; }
.t3-card--feat .t3-card__ic { background: rgba(156,122,78,.2); color: var(--gold-400); }
.t3-card--media { border-radius: var(--radius-lg); }
.t3-card h3 { font-family: var(--font-display); }
.t3-card p { font-family: var(--font-body); }
.t3-card__ic { background: #EFE7D9; color: var(--gold-600); }

/* Value chip on a package card */.t3-card__val {
  display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-12);
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  background: var(--gold-200); padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.t3-card--feat .t3-card__val { background: var(--gold); color: var(--cream-light); }

/* The package grid has only two small cards, so they split the full row */
@media (min-width: 981px) { #package .t3-card--sm { grid-column: span 6; } }
.package__cta { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Benefits grid ---------- */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.benefit {
  background: #fff; border: 1px solid var(--line); padding: 32px 30px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur);
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.benefit__ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; }
.benefit__ic svg { width: 25px; height: 25px; }
.benefit__t { font-weight: 600; font-size: var(--text-19); margin: 0 0 9px; letter-spacing: -.01em; }
.benefit__d { font-size: var(--text-16); line-height: 1.6; color: var(--ink-muted); margin: 0; }
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .benefits-grid { grid-template-columns: 1fr; } }

/* "Why families choose us" has 8 cards, so centre the orphan pair on the last row */
@media (min-width: 901px) {
  #benefits .benefits-grid { grid-template-columns: repeat(6, 1fr); }
  #benefits .benefit { grid-column: span 2; }
  #benefits .benefit:nth-child(7) { grid-column: 2 / span 2; }
  #benefits .benefit:nth-child(8) { grid-column: 4 / span 2; }
}

/* ---------- Specialist orthodontist cards ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 52px; }
.spec { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.spec__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.spec__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.spec__body { padding: 30px 30px 32px; }
.spec__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-24); color: var(--navy); margin: 0; }
.spec__role { font-family: var(--font-body); font-weight: 600; font-size: var(--text-13); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 8px 0 14px; }
.spec__d { font-family: var(--font-body); font-size: var(--text-16); line-height: 1.65; color: var(--ink-muted); margin: 0; }
@media (max-width: 820px) { .spec-grid { grid-template-columns: 1fr; } }
/* small stagger between the two clinical team cards' scroll-in reveal */
.spec-grid .spec:nth-child(2) { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .spec-grid .spec:nth-child(2) { transition-delay: 0ms; } }

/* ---------- Prose block + pull-quote (why parents / the cost) ---------- */
.worth-prose { max-width: 66ch; margin: 40px auto 0; }
.worth-prose p { font-family: var(--font-body); font-size: var(--text-17); line-height: 1.7; color: var(--ink-muted); margin: 0 0 20px; text-wrap: pretty; }
.worth-prose p:last-child { margin-bottom: 0; }
.worth-prose p strong, .worth-prose b { color: var(--navy); font-weight: 600; }
.worth-prose .wq { font-family: var(--font-display); font-weight: 600; font-size: var(--text-19); color: var(--navy); display: block; margin-bottom: 4px; }
.worth-quote { max-width: 56ch; margin: 44px auto 0; padding-top: 36px; border-top: 1px solid var(--line); text-align: center; }
.worth-quote__mark { display: block; font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: .4; color: var(--gold); height: 30px; }
.worth-quote p { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.4; color: var(--navy); margin: 0 0 16px; }
.worth-quote cite { font-family: var(--font-body); font-weight: 700; font-style: normal; font-size: var(--text-13); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* ---------- Steps band (navy) ---------- */
.section.teal { background: var(--navy) !important; }
.section.teal .h2, .section.ink .h2, .final .h2, .imgstrip.ink .h2, .band__h { color: var(--cream-light) !important; }
.section.teal .fstep__t { color: var(--cream-light); }
.section.teal .fstep__s { color: var(--on-dark-muted); }
.section.teal .fstep__n {
  background: var(--gold); color: var(--cream-light); font-family: var(--font-display); font-weight: 700;
}
.section.ink { background: var(--navy) !important; }
.section.ink .lead, .imgstrip.ink .lead, .section.teal .lead { color: var(--on-dark-muted) !important; }

/* ---------- Exam band (the offer headline) ---------- */
.exam-band { background: var(--navy) !important; border-radius: var(--radius-lg); }
.exam-band .h3 { font-family: var(--font-display); color: var(--cream-light) !important; }
.exam-band__l p { font-family: var(--font-body); color: var(--on-dark-muted) !important; }
.exam-band__price b { font-family: var(--font-display); color: var(--gold-400) !important; }
.exam-band__price > span { font-family: var(--font-body); color: var(--on-dark-muted) !important; }

/* ---------- Full-bleed image band ---------- */
.band { position: relative; overflow: hidden; min-height: clamp(380px, 46vw, 560px); display: flex; align-items: center; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 42%; }
.band__grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,26,46,.94) 0%, rgba(15,26,46,.78) 42%, rgba(15,26,46,.3) 100%); }
.band__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 64px 40px; width: 100%; }
.band .eyebrow { color: var(--gold-400) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.band__h { font-family: var(--font-display); font-weight: 700; max-width: 18ch; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; margin: 16px 0 0; }
.band__p { font-family: var(--font-body); color: var(--on-dark-muted); font-size: var(--text-17); line-height: 1.65; max-width: 48ch; margin: 18px 0 30px; }
@media (max-width: 720px) {
  .band__grad { background: linear-gradient(180deg, rgba(15,26,46,.5) 0%, rgba(15,26,46,.88) 100%); }
  .band__inner { padding: 48px 22px; }
}

/* ---------- Full-bleed photo break ---------- */
.photobreak { position: relative; width: 100%; height: clamp(280px, 34vw, 440px); overflow: hidden; }
.photobreak img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
/* shows the middle two-thirds of a 3:2 photo's height (3/2 ÷ 2/3 = 2.25) */
.photobreak--twothirds { height: auto; aspect-ratio: 2.25; }
/* award badge, sat on a white panel so the black-and-red mark stays legible */
.photobreak__award {
  position: absolute; top: 50%; left: clamp(20px, 5vw, 64px); transform: translateY(-50%); z-index: 2;
  background: #fff; padding: 20px 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: clamp(180px, 22vw, 250px);
}
.photobreak__award img { width: 100%; height: auto; object-fit: contain; display: block; }
@media (max-width: 600px) {
  /* taller so the award badge has clear space at the bottom, off the three faces */
  .photobreak { height: 340px; }
  .photobreak__award { top: auto; bottom: 14px; left: 14px; transform: none; width: 150px; padding: 12px 14px; }
}

/* ---------- Footer cards: white surface, legible navy text ---------- */
.fcard { background: #fff !important; border: 1px solid rgba(255,255,255,.08); }
.fcard .fc-name { font-family: var(--font-display); color: var(--navy) !important; }
.fcard h4 { font-family: var(--font-display); color: var(--navy) !important; }
.fcard .fc-contact-rows .fc-label { color: var(--navy) !important; font-family: var(--font-body); font-weight: 600; }
.fcard p, .fcard a, .fcard li, .fcard span { color: var(--ink-muted) !important; font-family: var(--font-body); }
.fcard a:hover { color: var(--gold) !important; }
.fcard .fc-pills .pill { color: var(--cream-light) !important; }

/* ---------- FAQ ---------- */
.faq__q { font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.faq__ic { color: var(--gold); }
.faq__a-inner { font-family: var(--font-body); color: var(--ink-muted); }

/* ---------- Heading size bumps (+1rem over each element's own size, both
   breakpoints - calc() keeps every element's relative hierarchy intact) ---------- */
.worth-prose .wq { font-size: calc(var(--text-19) + 1rem); line-height: 1.25; }
#how .fstep__t { font-size: calc(var(--text-19) + 1rem); line-height: 1.3; }
#treatments .h2 { font-size: calc(clamp(30px, 3.6vw, 48px) + 1rem); }
#faq .h2 { font-size: calc(clamp(30px, 3.6vw, 48px) + 1rem); }

/* ---------- Links ---------- */
a { color: var(--gold); }
a:hover { color: var(--gold-600); }
.final a, .footer a, .band a { color: var(--gold-400); }
.final a:hover, .footer a:hover, .band a:hover { color: var(--cream-light); }

/* ---------- Mobile: form above the fold, image + chips below ---------- */
@media (max-width: 980px) {
  .t3-showcase { order: 1; }
  .t3-formcard { order: 2; display: flex; flex-direction: column; }
  .t3-formcard .lead-form { order: 1; }
  .t3-formcard .t3-gbox { order: 2; display: flex; }
  .t3-chip--rating { display: none; }
  .mobile-cta__call { border-radius: var(--radius-pill); }
}

/* Sticky bar: the "Call" label was too small to read */
@media (max-width: 620px) {
  .mobile-cta__call {
    min-width: 76px; padding: 0 16px; gap: 3px;
    font-family: var(--font-body); font-weight: 700; font-size: var(--text-14);
    letter-spacing: .02em; color: var(--navy); border-color: var(--gold-400);
  }
  .mobile-cta__call svg { width: 22px; height: 22px; color: var(--gold); }
}

/* ---------- Mobile feedback pass (D1-D9) ---------- */
.mobile-break { display: none; }
@media (max-width: 620px) {
  /* D1: the header Book button renders as .cta, not .pill, so the existing
     .site-header__cta .pill downsize rule (styles.css) never matched it */
  .site-header__cta .cta { padding: 11px 18px; font-size: var(--text-13); min-height: 44px; }

  /* D2: swap the icon+text phone link for the (already-built but unused)
     icon-only circular call button, gold outline, no fill */
  .header-phone { display: none; }
  .site-header.header-dark .header-callbtn {
    display: inline-flex; width: 44px; height: 44px;
    border-radius: 50% !important; border: 1.5px solid var(--gold);
    background: transparent; color: var(--gold);
  }

  /* D3: the hero grid had no mobile gutter override at all (fixed 40px each
     side), unlike .wrap - reuse the same 22px mobile gutter for consistency */
  .t3-hero__inner { padding-inline: 22px; }

  /* D4: hide the oversized circular sticker, and stack "Limited time offer"
     above the existing date line inside the form card instead */
  .hero-dateline {
    flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 8px 14px; margin-bottom: 12px;
  }
  .hero-dateline__flash { display: block; font-size: var(--text-12); opacity: .85; }
  .hero-dateline__date { font-size: var(--text-12); }

  /* D5: smaller supporting copy; hide the callback note (desktop keeps it) */
  .t3-showcase__copy p { font-size: var(--text-14); }
  .lead-form__note { display: none; }

  /* D7: break after the question mark, narrower and smaller on mobile */
  .mobile-break { display: inline; }
  .final__alt { max-width: 90%; margin-inline: auto; font-size: var(--text-13); }

  /* D8: same fixed 40px-per-side gutter bug as D3, on the footer wrapper */
  .footer__inner { padding-inline: 22px; }

  /* D9: bracketed Saturday qualifier reads as supplementary, not primary hours */
  .hours-row__note { display: block; font-size: var(--text-12); opacity: .65; margin-top: 2px; }
}

/* Narrow desktop: the two top chips would meet, so drop the rating one */
@media (max-width: 1080px) and (min-width: 981px) { .t3-chip--rating { display: none; } }

/* Thank-you page: ty-hero--showcase's built-in top padding assumes an
   absolutely-positioned overlay header (thankyou.css's own ty-head). Our
   real site-header already reserves its own height in normal flow, so
   reduce the hero's padding to avoid a doubled-up gap. */
.ty-hero--showcase .ty-hero__inner { padding-top: clamp(56px, 6vw, 96px); }