/* ==========================================================================
   crown-hero.v3.0.0.css
   Crown Concierge — SHARED HERO STYLESHEET
   Single source of truth for ALL hero sections: homepage + 27 city/airport
   pages. Replaces the per-page inline <style> blocks that previously
   duplicated this CSS across 28 separate WordPress Custom HTML blocks.

   LOAD ORDER (in each page's HTML block, before the section markup):
     <link rel="stylesheet" href="/wp-content/uploads/crown/crown-hero.v3.0.0.css?v=300">

   Each page's HTML block should now contain ONLY:
     - the background image URL (.ch-bg background-image)
     - H1 / subhead copy
     - review count
     - the init script's `source` string
   Everything else — layout, components, states, mobile breakpoints — lives
   here.

   CHANGELOG
     3.0.0 (2026-07-11)
       - Extracted from crown-hero-homepage v6 inline <style> (canonical
         source — city pages were on an older, drifted pattern and are
         being migrated UP to this file, not the reverse).
       - MOVE 1: New .ch-value-strip component — reassurance strip
         answering "why this costs what it costs," positioned between
         .ch-trip-row and .ch-vwrap in markup. Same visual register as
         .ch-micropromise (gold checkmark + inline phrase, no card chrome).
       - MOVE 2: .ch-vpamt reduced from 40px → 22px to de-emphasize price
         (mirrors #cb-rec-price treatment on /check-availability/).
         .ch-vpamt.calc reduced proportionally to stay visually distinct
         from the settled state. .ch-vspecs weight increased so specs
         carry equal/greater visual weight than the price.
       - MOVE 3: New .ch-promise-relocated component — Crown Promise
         copy restyled for placement beside/after .ch-vwrap instead of
         after the contact fields. Original .ch-promise (inside
         .ch-subrow) left intact and still usable if the "duplicate at
         bottom too" question resolves that way — see open question in
         handoff doc §3, Move 3.
       - Promo-price render path (state.promoPrice branch in
         renderQuote()) uses em-relative sizing inside #chPrice, so it
         automatically scales with the new .ch-vpamt base size — no
         separate promo-specific resize needed.

   CONTRACTS PRESERVED (do not rename — read/written by JS)
     IDs:    chSumPickup, chSumDropoff, chSumDate, chSumTime, chPrice,
             chExp, chConf, chPickup, chDropoff, chPickupLat/Lng,
             chDropoffLat/Lng, chDate, chTime, chCtaBtn, chSlim, chMicro,
             chBanner, chName, chPhone, chPhoneE164, chEmail, chConsent,
             chSubBtn, chRet, chCCBtn, chCCFlag, chCCCode, chCCDropdown,
             chCCSearch, chCCList, chCCWrap, chOptinModal,
             chOptinModalBack, chOptinModalContinue,
             chConfBodySms, chConfBodyEmail
     Classes: .calc toggle on #chPrice (distinct dimmer/smaller state
             during "Calculating…") — preserved below, resized but still
             visually distinct from settled state.
   ========================================================================== */

/* ── SCOPED RESET ── */
.crown-hero-section,
.crown-hero-section *,
.crown-hero-section *::before,
.crown-hero-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── TOKENS ── */
.crown-hero-section {
  --gold:        #c9a84c;
  --gold-lt:     #e2c97e;
  --gold-dim:    rgba(201,168,76,0.11);
  --gold-bdr:    rgba(201,168,76,0.22);
  --gold-strong: rgba(201,168,76,0.55);
  --surface-exp: rgba(8,8,8,0.96);
  --bdr:         rgba(255,255,255,0.08);
  --bdr-mid:     rgba(255,255,255,0.14);
  --bdr-hi:      rgba(255,255,255,0.22);
  --text:        #f5f0e8;
  --t76:         rgba(245,240,232,0.76);
  --t60:         rgba(245,240,232,0.60);
  --t38:         rgba(245,240,232,0.38);
  --t22:         rgba(245,240,232,0.22);
  --inp-bg:      rgba(255,255,255,0.06);
  --inp-hov:     rgba(255,255,255,0.10);
  --inp-foc:     rgba(201,168,76,0.07);
  --inp-bdr:     rgba(255,255,255,0.11);
  --inp-fbdr:    rgba(201,168,76,0.50);
  --success:     #4ade80;
  --success-bg:  rgba(74,222,128,0.06);
  --success-bdr: rgba(74,222,128,0.55);
  --err:         #f08080;

  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 88px 48px 0px;
  overflow: hidden;
}

/* ── BACKGROUND IMAGE ──
   .ch-bg itself is shared; only the background-image URL is page-specific.
   Set per-page via an inline style attribute on the .ch-bg div:
   <div class="ch-bg" style="background-image:url('...');"></div>
*/
.ch-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  z-index: 0;
}
.ch-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4,4,4,0.68) 0%, rgba(4,4,4,0.32) 52%, rgba(4,4,4,0.08) 100%);
}
.ch-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 28% at 18% 0%, rgba(201,168,76,0.05) 0%, transparent 70%),
    linear-gradient(0deg, rgba(4,4,4,0.48) 0%, transparent 32%);
}

/* ── CONTENT ── */
.ch-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
}
.ch-inner > * { opacity: 0; animation: chUp .52s ease forwards; }
.ch-eyebrow { animation-delay: .06s; }
.ch-h1      { animation-delay: .15s; }
.ch-sub     { animation-delay: .24s; }
.ch-book    { animation-delay: .33s; }
.ch-ret     { animation-delay: .50s; }

@keyframes chUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── CROWN MARK (mobile-only by default) ── */
.ch-crown-mark { display: none; }

/* ── TRUST LINE (mobile-only by default) ── */
.ch-trust-line { display: none; }

/* ── EYEBROW ── */
.ch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.11);
  border: 0.5px solid rgba(201,168,76,0.22);
  border-radius: 100px;
  padding: 5px 15px;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #e2c97e;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ch-eyebrow .stars { color: var(--gold); letter-spacing: 2px; font-size: 10px; margin-right: 4px; }

/* ── H1 ── */
.ch-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  text-align: left;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
  max-width: 720px;
}
.ch-h1 em { font-style:italic; color:var(--gold-lt); }

/* ── SUBHEADLINE ── */
.ch-sub {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245,240,232,0.78);
  max-width: 760px;
  margin: 0 0 32px 0;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0,0,0,0.48);
}
.ch-sub-extra { }

/* ── BOOKING WRAP ── */
.ch-book {
  width: 100%;
  max-width: 960px;
  margin-left: 0;
  margin-right: auto;
}

/* ── SLIM BAR ── */
.ch-slim {
  background: rgba(8,8,8,0.62);
  border: 0.5px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(190px,1.3fr) 56px minmax(190px,1.3fr) minmax(175px,0.95fr) minmax(162px,0.8fr) auto;
  align-items: stretch;
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  overflow: visible;
  box-shadow:
    0 12px 45px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.20);
  position: relative;
  transition: opacity .25s;
  margin-bottom: 20px;
}
.ch-slim.gone { opacity:0; pointer-events:none; position:absolute; width:100%; }

/* ── FIELD CELL ── */
.ch-bf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 18px;
  border-right: 0.5px solid rgba(255,255,255,0.18);
  position: relative;
  min-width: 0;
  transition: background .25s;
}
.ch-bf:last-of-type { border-right: none; }
.ch-bf.valid { background: transparent; }
.ch-bf.valid input {
  border-color: var(--success-bdr);
  background: var(--success-bg);
}
.ch-bf.valid input:hover,
.ch-bf.valid input:focus {
  border-color: var(--success);
  background: var(--success-bg);
}

.ch-bf-lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--gold);
  margin-bottom: 9px;
  white-space: nowrap;
}

.ch-bf input,
.ch-bf select {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  width: 100%;
  cursor: text;
  padding: 11px 13px;
  transition: border-color .2s, background .2s;
  caret-color: var(--gold);
}
.ch-bf input:hover,
.ch-bf select:hover {
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.06);
}
.ch-bf input:focus,
.ch-bf select:focus {
  border-color: var(--gold-strong);
  background: rgba(201,168,76,0.06);
}
.ch-bf input::placeholder { color: rgba(245,240,232,0.42); font-weight:300; }
.ch-bf select option { background: #1a1a1a; color: #f5f0e8; }
.ch-bf select { -webkit-appearance: none; appearance: none; }

.ch-bf input[type="date"],
.ch-bf input[type="time"] {
  color: #f5f0e8;
  -webkit-text-fill-color: #f5f0e8;
  padding-right: 8px;
}
.ch-bf input[type="date"]::-webkit-calendar-picker-indicator,
.ch-bf input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.55);
  cursor: pointer;
}

.ch-bf-hint {
  display: block;
  font-size: 9.5px;
  color: rgba(245,240,232,0.38);
  letter-spacing: .03em;
  margin-top: 6px;
  font-style: normal;
  line-height: 1.3;
  transition: opacity .2s;
}
.ch-bf.valid .ch-bf-hint { display: none; }

.ch-bf-valid {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.ch-bf.valid .ch-bf-valid { display: flex; }
.ch-bf-valid-icon { color: var(--success); font-size: 13px; font-weight: 700; line-height: 1; }
.ch-bf-valid-text { font-size: 11px; color: var(--success); letter-spacing: .03em; font-weight: 600; }

/* Quick fill pills — DFW / DAL */
.ch-field-pills { display: flex; gap: 6px; margin-top: 9px; }
.ch-fp {
  background: transparent;
  border: 0.5px solid rgba(201,168,76,0.32);
  color: var(--gold);
  border-radius: 100px;
  padding: 3px 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ch-fp:hover { background: rgba(201,168,76,0.12); border-color: var(--gold); color: var(--gold-lt); }

/* Swap cell */
.ch-spacer,
.ch-swap-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.5px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
  padding: 0 10px;
}
.ch-swap-btn {
  width: 32px; height: 32px;
  background: var(--gold-dim);
  border: 0.5px solid var(--gold-bdr);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .35s ease;
  flex-shrink: 0;
}
.ch-swap-btn:hover {
  background: rgba(201,168,76,0.20);
  border-color: var(--gold);
  color: var(--gold-lt);
  transform: rotate(180deg);
}

/* CTA button cell */
.ch-bar-last {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px 0 4px;
  position: relative;
  z-index: 2;
}
.ch-bar-btn {
  background: #c9a84c;
  background-image: linear-gradient(135deg, #d4b557 0%, #c9a84c 50%, #b8973f 100%);
  color: #0a0a0a;
  border: none;
  border-radius: 100px;
  padding: 13px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  isolation: isolate;
  box-shadow:
    0 4px 14px rgba(201,168,76,0.45),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  transition: background .2s, transform .12s, box-shadow .2s, opacity .25s;
}
.ch-bar-btn:hover:not(:disabled) {
  background-image: linear-gradient(135deg, #e2c97e 0%, #d4b557 50%, #c9a84c 100%);
  box-shadow:
    0 6px 20px rgba(201,168,76,0.6),
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transform: translateY(-1px);
}
.ch-bar-btn:active:not(:disabled) {
  transform: translateY(0) scale(.98);
  box-shadow:
    0 2px 8px rgba(201,168,76,0.4),
    inset 0 1px 3px rgba(0,0,0,0.2);
}
.ch-bar-btn:disabled {
  cursor: not-allowed;
  background: #a8893d;
  background-image: linear-gradient(135deg, #b8973f 0%, #a8893d 50%, #97793a 100%);
  color: rgba(10,10,10,0.85);
  box-shadow:
    0 3px 10px rgba(201,168,76,0.28),
    0 1px 2px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
  animation: chCtaPulse 2.4s ease-in-out infinite;
}
@keyframes chCtaPulse {
  0%, 100% {
    box-shadow:
      0 3px 10px rgba(201,168,76,0.28),
      0 1px 2px rgba(0,0,0,0.25),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }
  50% {
    box-shadow:
      0 4px 16px rgba(201,168,76,0.5),
      0 2px 4px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
}
.ch-bar-btn:hover:disabled { transform: none; }

/* Input wrapper — anchors dropdown to input */
.ch-input-wrap { position: relative; width: 100%; }

/* Suggestions dropdown */
.ch-sugs {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: rgba(10,10,10,0.97);
  border: 0.5px solid var(--bdr-mid);
  border-radius: 10px;
  overflow: hidden;
  z-index: 999;
  display: none;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.ch-sug-item {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--t60);
  cursor: pointer;
  border-bottom: 0.5px solid var(--bdr);
  text-align: left;
}
.ch-sug-item:last-child { border-bottom: none; }
.ch-sug-item:hover { background: rgba(201,168,76,0.08); color: var(--text); }
.ch-sug-item strong { color: var(--text); font-weight:500; }
.ch-sug-item small  { font-size:11px; color:var(--t38); }

/* ── MICRO-PROMISE — pre-expansion reassurance (why there's no risk) ── */
.ch-micropromise {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  transition: opacity .25s;
}
.ch-micropromise.gone { opacity:0; pointer-events:none; height:0; margin:0; overflow:hidden; }

.ch-mp-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--gold-lt);
  font-weight: 400;
  letter-spacing: .015em;
}
.ch-mp-item .ck { color: var(--gold); font-size: 13px; font-weight: 700; line-height: 1; }

/* ── VALUE STRIP — MOVE 1 ──
   New reassurance strip: same visual register as .ch-micropromise, but
   answers "why this costs what it costs" rather than "why there's no
   risk." Position in markup: after .ch-trip-row, before .ch-vwrap —
   first thing visible after expansion, ahead of the vehicle card/price.
*/
.ch-value-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  flex-wrap: wrap;
  padding: 14px 26px;
  background: rgba(255,255,255,0.02);
  border-bottom: 0.5px solid var(--bdr);
}
.ch-vs-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--t76);
  font-weight: 400;
  letter-spacing: .01em;
}
.ch-vs-item .ck { color: var(--gold); font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0; }

@media (max-width: 720px) {
  .ch-value-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 14px 18px;
  }
}

/* ── RETURNING CLIENT ── */
.ch-ret { font-size: 12px; color: var(--t38); text-align: left; }
.ch-ret a {
  color: var(--t60);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(245,240,232,0.18);
  transition: color .16s;
}
.ch-ret a:hover { color: var(--gold-lt); }

/* ── EXPANDED PANEL ── */
.ch-exp {
  background: var(--surface-exp);
  border: 0.5px solid var(--gold-bdr);
  border-radius: 16px;
  overflow: hidden;
  display: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.7);
  animation: chPanelIn .3s ease forwards;
  margin-bottom: 12px;
}
.ch-exp.on { display: block; }
@keyframes chPanelIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.ch-trip-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,0.025);
  border-bottom: 0.5px solid var(--bdr);
}
.ch-tc-full { grid-column: 1 / -1; border-right: none; border-bottom: 0.5px solid var(--bdr); }
.ch-tc { padding: 12px 18px; border-right: 0.5px solid var(--bdr); }
.ch-tc:last-child { border-right: none; }
.ch-tc-lbl { font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--t38); margin-bottom:3px; }
.ch-tc-val { font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ch-vwrap { padding: 22px 26px 18px; }
.ch-vcard {
  background: var(--gold-dim);
  border: 1px solid var(--gold-bdr);
  border-radius: 12px;
  padding: 19px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 9px;
}
.ch-vbadge {
  display: inline-flex; align-items: center; gap:5px;
  background: rgba(201,168,76,0.09);
  border: 0.5px solid var(--gold-bdr);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold-lt);
  margin-bottom: 9px;
}
.ch-vname { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; letter-spacing:.01em; margin-bottom:8px; }

/* MOVE 2 — specs carry equal/greater visual weight than price */
.ch-vspecs { display:flex; flex-wrap:wrap; gap:6px 13px; }
.ch-vspec  { font-size:13px; font-weight:500; color:var(--t76); display:flex; align-items:center; gap:6px; }
.ch-vsd    { width:3px; height:3px; border-radius:50%; background:var(--gold); flex-shrink:0; }

.ch-vprice { text-align:right; }
.ch-vplbl  { font-size:11.5px; color:#d4cdb8; letter-spacing:.08em; text-transform:uppercase; font-weight:500; margin-bottom:4px; }

/* MOVE 2 — price de-emphasized: 40px → 22px, reads as confirmation
   detail rather than headline. Mirrors #cb-rec-price on
   /check-availability/ (22px, warm white-gold, deliberately subordinate). */
.ch-vpamt  { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; color:var(--gold-lt); line-height:1; transition: all .28s ease; }
.ch-vpamt.calc { color:var(--t38); font-size:15px; font-weight:300; padding-top:4px; }
.ch-vpnote { font-size:12px; color:#b8b0a0; margin-top:5px; }

/* ── PROMO PRICE RENDER —
   em-relative sizing means this automatically scales with the new
   22px .ch-vpamt base; no separate resize needed. */
.ch-vpamt .ch-promo-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 8px;
  line-height: 1.2;
}
.ch-vpamt .ch-promo-prices { display: inline-flex; align-items: baseline; gap: 8px; }
.ch-vpamt .ch-promo-strike {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7em;
  font-weight: 300;
  color: var(--t38);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
  line-height: 1;
}
.ch-vpamt .ch-promo-gold {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1em;
  font-weight: 400;
  color: var(--gold-lt);
  line-height: 1;
  letter-spacing: -.01em;
}
.ch-vprice .ch-promo-label,
.ch-vprice .ch-promo-prices { text-align: right; justify-content: flex-end; }
@media (max-width: 720px){
  .ch-vprice .ch-promo-label,
  .ch-vprice .ch-promo-prices { text-align: left; justify-content: flex-start; }
}

.ch-valt {
  font-size:14px;
  color:var(--gold-lt);
  line-height:1.5;
  padding:4px 0 4px 12px;
  border-left: 2px solid var(--gold);
  margin-top: 4px;
}

/* ── PROMISE — RELOCATED — MOVE 3 ──
   Compact treatment for placement beside/after .ch-vwrap (inside or
   immediately after .ch-vcard's container, before/beside .ch-valt),
   instead of after the contact fields. See handoff doc §3 Move 3 open
   question re: duplicate-at-bottom vs. fully relocated — leaning
   relocated; this class supports that placement. Original .ch-promise
   (below, inside .ch-subrow) is left in place and still functions if
   the decision lands on "keep both."
*/
.ch-promise-relocated {
  font-size: 12.5px;
  color: var(--t76);
  line-height: 1.55;
  padding: 10px 14px;
  margin-top: 9px;
  background: rgba(201,168,76,0.05);
  border: 0.5px solid var(--gold-bdr);
  border-radius: 8px;
}
.ch-promise-relocated strong { color: var(--gold-lt); font-weight: 600; }

.ch-cwrap { padding: 20px 26px 26px; border-top: 0.5px solid var(--bdr); }
.ch-clbl { font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#e2c97e; margin-bottom:14px; }
.ch-ci { display:flex; flex-direction:column; gap:4px; }
.ch-ci-lbl { font-size:13px; color:#e8e1d0; letter-spacing:.02em; font-weight:500; margin-bottom:5px; }
.ch-ci input {
  background: var(--inp-bg) !important;
  border: 0.5px solid var(--inp-bdr);
  border-radius: 8px;
  padding: 10px 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  outline: none;
  transition: border-color .16s, background .16s;
  width: 100%;
}
.ch-ci input:focus,
.ch-ci input:hover { color: var(--text) !important; background: var(--inp-hov) !important; }
.ch-ci input::placeholder { color:var(--t38); }
.ch-ci input:hover  { background:var(--inp-hov); border-color:var(--bdr-mid); }
.ch-ci input:focus  { border-color:var(--inp-fbdr); background:var(--inp-foc); }

.ch-consent { display:flex; align-items:flex-start; gap:8px; margin-bottom: 14px; }
.ch-consent input[type=checkbox] { margin-top:2px; flex-shrink:0; accent-color:var(--gold); }
.ch-consent label { font-size:12.5px; color:#b8b0a0; line-height:1.55; text-align:left; cursor:pointer; }

.ch-banner { display:none; padding:9px 16px; font-size:13px; border-radius:7px; margin-bottom:12px; text-align:left; }
.ch-banner.err { display:block; background:rgba(200,50,50,.10); border:0.5px solid rgba(200,50,50,.22); color:var(--err); }
.ch-banner.ok  { display:block; background:rgba(50,180,100,.08); border:0.5px solid rgba(50,180,100,.18); color:#6fda9e; }

.ch-subrow { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ch-promise { font-size:13px; color:#c5beac; line-height:1.6; flex:1; text-align:left; }
.ch-promise strong { color:#e2c97e; font-weight:600; }

.ch-subbtn {
  background: var(--gold); color:#0a0a0a;
  border:none; border-radius:10px; padding:13px 28px;
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500; letter-spacing:.02em;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition: background .16s, transform .12s, opacity .16s;
}
.ch-subbtn:hover   { background:var(--gold-lt); transform:translateY(-1px); }
.ch-subbtn:active  { transform:scale(.98); }
.ch-subbtn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* CONFIRMATION */
.ch-conf {
  background: var(--surface-exp);
  border: 0.5px solid var(--gold-bdr);
  border-radius: 16px;
  padding: 52px 40px;
  text-align: center;
  display: none;
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.7);
  animation: chPanelIn .3s ease forwards;
}
.ch-conf.on { display:block; }
.ch-conf-icon { width:52px; height:52px; background:var(--gold-dim); border:0.5px solid var(--gold-bdr); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:20px; color:var(--gold-lt); }
.ch-conf-title { font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:300; margin-bottom:10px; }
.ch-conf-body  { font-size:14px; color:var(--t60); line-height:1.65; max-width:400px; margin:0 auto 22px; }
.ch-conf-note  { font-size:11.5px; color:var(--t38); line-height:1.6; max-width:380px; margin:0 auto 26px; padding-top:18px; border-top:0.5px solid var(--bdr); }
.ch-conf-acts { display:flex; align-items:center; justify-content:center; gap:10px; }
.ch-cbtn-pri { background:var(--gold); color:#0a0a0a; border:none; border-radius:10px; padding:11px 22px; font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; transition:background .16s; }
.ch-cbtn-pri:hover { background:var(--gold-lt); }
.ch-cbtn-sec { background:transparent; color:var(--t60); border:0.5px solid var(--bdr-mid); border-radius:10px; padding:11px 22px; font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:400; cursor:pointer; text-decoration:none; display:inline-block; transition: border-color .16s, color .16s; }
.ch-cbtn-sec:hover { border-color:var(--bdr-hi); color:var(--text); }

/* SCROLL HINT */
.ch-scroll {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--t22);
  z-index:1; opacity:0; animation:chUp .5s ease 1.2s forwards;
}
.ch-scroll-line { width:1px; height:26px; background:linear-gradient(180deg,rgba(201,168,76,.35) 0%,transparent 100%); animation:chPulse 2s ease-in-out infinite; }
@keyframes chPulse { 0%,100%{opacity:.35} 50%{opacity:.9} }

/* ── TEXT ALT — secondary path under the form (desktop base) ── */
.ch-text-alt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: -4px 0 22px 0;
  font-size: 13px;
  line-height: 1.5;
  flex-wrap: wrap;
}
.ch-text-alt-label { color: var(--t60); font-weight: 300; letter-spacing: .01em; }
.ch-text-alt-link {
  color: var(--gold-lt);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(201,168,76,0.35);
  padding-bottom: 1px;
  transition: color .18s, border-color .18s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ch-text-alt-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.ch-text-alt-arrow { font-size: 12px; transition: transform .18s; }
.ch-text-alt-link:hover .ch-text-alt-arrow { transform: translateX(2px); }

/* ── COUNTRY SELECTOR (phone) —
   Consolidated from crown-hero-contact.v1.js's injected CSS so it no
   longer needs to be injected via JS on every page load. ── */
.ch-phone-row { display:flex; align-items:stretch; gap:0; position:relative; }
.ch-phone-row input[type=tel] { flex:1; border-top-left-radius:0; border-bottom-left-radius:0; border-left:none; }

.ch-cc-btn {
  display:flex; align-items:center; gap:5px;
  background:var(--inp-bg); border:0.5px solid var(--inp-bdr); border-right:none;
  border-radius:8px 0 0 8px; padding:0 10px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text);
  white-space:nowrap; transition:background .16s,border-color .16s; flex-shrink:0;
}
.ch-cc-btn:hover { background:var(--inp-hov); border-color:var(--bdr-mid); }
.ch-cc-btn[aria-expanded=true] { border-color:var(--inp-fbdr); background:var(--inp-foc); }
#chCCFlag { font-size:16px; line-height:1; }
#chCCCode { font-size:12px; color:var(--t60); letter-spacing:.02em; }
.ch-cc-caret { font-size:9px; color:var(--t38); margin-left:2px; }

.ch-cc-dropdown {
  display:none; position:absolute; top:calc(100% + 4px); left:0; width:320px; max-height:340px;
  background:rgba(10,10,10,0.97); border:0.5px solid var(--bdr-mid); border-radius:10px;
  overflow:hidden; z-index:9999; backdrop-filter:blur(20px); box-shadow:0 8px 24px rgba(0,0,0,0.6);
  flex-direction:column;
}
.ch-cc-dropdown.ch-cc-open { display:flex; }

.ch-cc-search {
  background:rgba(255,255,255,0.04) !important; border:none !important;
  border-bottom:0.5px solid var(--bdr) !important; border-radius:0 !important;
  padding:10px 14px !important; font-family:'DM Sans',sans-serif !important; font-size:13px !important;
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important;
  outline:none !important; width:100% !important;
}
.ch-cc-search::placeholder { color:var(--t38); }

.ch-cc-list { overflow-y:auto; flex:1; max-height:280px; }
.ch-cc-opt { display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer; transition:background .12s; font-size:13px; color:var(--t60); }
.ch-cc-opt:hover,.ch-cc-opt.ch-cc-highlighted { background:rgba(201,168,76,0.08); color:var(--text); }
.ch-cc-opt.ch-cc-selected { color:var(--gold-lt); }
.ch-cc-opt-flag { font-size:16px; flex-shrink:0; }
.ch-cc-opt-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-cc-opt-code { font-size:11px; color:var(--t38); flex-shrink:0; }
.ch-cc-divider { height:0; border-top:0.5px solid var(--bdr); margin:2px 0; }

@media (max-width:720px) {
  .ch-phone-row { flex-direction:row; }
  .ch-cc-dropdown { width:calc(100vw - 36px); left:-1px; }
  .ch-cc-btn { padding:0 8px; }
}

/* ── SMS OPT-IN REMINDER MODAL ── */
.ch-optin-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,4,4,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ch-optin-modal.on { display: flex; }
.ch-optin-modal-card {
  background: rgba(8,8,8,0.97);
  border: 1px solid var(--gold-strong);
  border-radius: 16px;
  padding: 36px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.85),
    0 0 0 1px rgba(201,168,76,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: chOptinIn .25s ease forwards;
}
@keyframes chOptinIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ch-optin-modal-icon {
  width: 52px; height: 52px;
  background: rgba(201,168,76,0.14);
  border: 1px solid var(--gold-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 22px;
  color: var(--gold-lt);
  box-shadow: 0 0 24px rgba(201,168,76,0.25);
}
.ch-optin-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px; font-weight: 500;
  color: var(--text);
  margin-bottom: 12px;
}
.ch-optin-modal-body {
  font-size: 14px;
  color: var(--t76);
  line-height: 1.65;
  margin-bottom: 28px;
}
.ch-optin-modal-acts { display: flex; gap: 10px; flex-direction: column; }
.ch-optin-modal-back {
  background: var(--gold);
  background-image: linear-gradient(135deg, #d4b557 0%, #c9a84c 50%, #b8973f 100%);
  color: #0a0a0a;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,168,76,0.4);
  transition: transform .12s, box-shadow .2s;
}
.ch-optin-modal-back:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,0.55); }
.ch-optin-modal-continue {
  background: transparent;
  color: var(--t60);
  border: 0.5px solid var(--bdr-mid);
  border-radius: 10px;
  padding: 13px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s, color .16s;
}
.ch-optin-modal-continue:hover { border-color: var(--bdr-hi); color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — single breakpoint, applies to every hero using this file
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .crown-hero-section { padding: 4px 18px 24px; }

  .ch-inner { display: flex; flex-direction: column; align-items: center; }

  .ch-crown-mark {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 6px;
    opacity: 0;
    animation: chUp .52s ease forwards;
    animation-delay: .02s;
    filter: drop-shadow(0 2px 12px rgba(201,168,76,0.25));
  }

  .ch-eyebrow { display: none; }

  .ch-h1 {
    text-align: center;
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin-bottom: 8px;
    max-width: 100%;
  }

  .ch-sub {
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 16px;
    max-width: 480px;
  }

  .ch-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-lt);
    margin-bottom: 24px;
    opacity: 0;
    animation: chUp .52s ease forwards;
    animation-delay: .28s;
  }
  .ch-trust-line .stars { color: var(--gold); letter-spacing: 2px; font-size: 9.5px; }

  .ch-sub-extra { display: none; }

  .ch-slim {
    grid-template-columns: 1fr;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .ch-bf {
    border-right: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.14);
    padding: 14px 18px;
  }
  .ch-bf-lbl { margin-bottom: 6px; }
  .ch-bf-hint { margin-top: 4px; margin-bottom: 2px; }
  .ch-bf-valid { margin-top: 5px; }

  .ch-field-pills { display: none; }

  .ch-spacer,
  .ch-swap-cell {
    display: none !important;
    visibility: hidden;
    height: 0;
    padding: 0;
    border: none;
  }

  .ch-bar-last { padding: 16px 18px; }
  .ch-bar-btn { width: 100%; text-align: center; padding: 15px 24px; font-size: 13px; }

  .ch-text-alt {
    justify-content: center;
    text-align: center;
    margin: 0 0 18px 0;
    font-size: 12.5px;
  }

  .ch-micropromise { flex-direction: column; align-items: flex-start; gap: 9px; margin-bottom: 18px; }
  .ch-mp-item { font-size: 12px; }

  .ch-vcard   { grid-template-columns:1fr; }
  .ch-vprice  { text-align:left; }
  .ch-cgrid   { grid-template-columns:1fr; }
  .ch-subrow  { flex-direction:column; }
  .ch-subbtn  { width:100%; text-align:center; padding:14px; }
  .ch-conf    { padding:36px 20px; }
  .ch-conf-acts { flex-direction:column; }
  .ch-cbtn-pri,.ch-cbtn-sec { width:100%; text-align:center; }
  .ch-ret     { text-align:center; }
}