/* ==================================================================
   ABH • Step 7 v1.2.3 — Final combined luxury CSS
   Belmond Maroma × Soneva Fushi × One&Only editorial system.

   • Form rules apply globally to form[id^="basicForm-"] & .basicForm.
   • Page rules only activate inside .abh-lux-exp-step7 wrapper.
   • Card image + aspect-ratio hardening at bottom overrides
     theme-level img{height:auto} in the hoteller theme.

   Build: 2026-07-06 18:27
   ================================================================== */
/* ================================================================
   ABH • Step 7 – Full luxury editorial page CSS
   Root scope: .abh-lux-exp-step7
   Design refs: Belmond Maroma, Soneva Fushi, One&Only Reethi Rah
   Font stack: Playfair Display + Inter
   ================================================================ */

.abh-lux-exp-step7{
  --abh-ivory:      #fffaf3;
  --abh-warm:       #f3f0ea;
  --abh-sand:       #e8e2d8;
  --abh-ink:        #1f1f1f;
  --abh-ink-soft:   #3a3a37;
  --abh-muted:      #6f6a60;
  --abh-line:       rgba(31,31,31,.14);
  --abh-line-strong:rgba(31,31,31,.32);
  --abh-black:      #050505;
  --abh-accent:     #7a6a4f;
  --abh-serif:      "Playfair Display","Cormorant Garamond",Georgia,serif;
  --abh-sans:       "Inter","Helvetica Neue",Arial,sans-serif;
  --abh-radius:     2px;
  --abh-ease:       cubic-bezier(.2,.7,.2,1);

  color: var(--abh-ink);
  font-family: var(--abh-sans);
  background: var(--abh-warm);
  line-height: 1.55;
}

.abh-lux-exp-step7 *,
.abh-lux-exp-step7 *::before,
.abh-lux-exp-step7 *::after{ box-sizing: border-box; }

.abh-lux-exp-step7 img{ display: block; max-width: 100%; height: auto; }

.abh-lux-exp-step7 .container{
  width: min(1240px, 92vw);
  margin-inline: auto;
}

/* ============ Eyebrow + heading system ============ */
.abh-lux-exp-step7 .eyebrow{
  font-family: var(--abh-sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--abh-muted);
  font-weight: 500;
  margin: 0 0 14px;
}
.abh-lux-exp-step7 .h1,
.abh-lux-exp-step7 .h2,
.abh-lux-exp-step7 .h3{
  font-family: var(--abh-serif);
  font-weight: 400;
  color: var(--abh-black);
  margin: 0 0 18px;
  letter-spacing: .2px;
}
.abh-lux-exp-step7 .h1{ font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05; }
.abh-lux-exp-step7 .h2{ font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.abh-lux-exp-step7 .h3{ font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }

.abh-lux-exp-step7 .lede{
  font-family: var(--abh-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--abh-ink-soft);
  max-width: 60ch;
  margin: 0 0 22px;
}
.abh-lux-exp-step7 .body{
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--abh-ink-soft);
  max-width: 60ch;
  margin: 0 0 18px;
}

/* Editorial hairline used to open/close sections */
.abh-lux-exp-step7 .hairline{
  display: block;
  width: 56px;
  height: 1px;
  background: var(--abh-line-strong);
  margin: 0 0 26px;
}

/* ============ Hero ============ */
.abh-lux-exp-step7 .hero{
  position: relative;
  min-height: min(720px, 88vh);
  color: #fffaf3;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.abh-lux-exp-step7 .hero__media{
  position: absolute; inset: 0; z-index: -2;
}
.abh-lux-exp-step7 .hero__media img{
  width: 100%; height: 100%; object-fit: cover;
}
.abh-lux-exp-step7 .hero::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,5,.05) 0%, rgba(5,5,5,.15) 45%, rgba(5,5,5,.7) 100%);
}
.abh-lux-exp-step7 .hero__inner{
  padding: clamp(40px, 6vw, 100px) 0 clamp(48px, 6vw, 96px);
  width: 100%;
}
.abh-lux-exp-step7 .hero .eyebrow{ color: rgba(255,250,243,.85); }
.abh-lux-exp-step7 .hero .h1{ color: #fffaf3; max-width: 22ch; }
.abh-lux-exp-step7 .hero__lede{
  font-family: var(--abh-serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: rgba(255,250,243,.9);
  max-width: 52ch;
  margin: 6px 0 0;
}
.abh-lux-exp-step7 .hero__meta{
  margin-top: clamp(28px, 4vw, 48px);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px);
  color: rgba(255,250,243,.7);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ============ Editorial split section ============ */
.abh-lux-exp-step7 .edit-split{
  padding: clamp(70px, 9vw, 140px) 0;
  background: var(--abh-warm);
}
.abh-lux-exp-step7 .edit-split + .edit-split{ padding-top: 0; }
.abh-lux-exp-step7 .edit-split__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.abh-lux-exp-step7 .edit-split--reverse .edit-split__media{ order: 2; }
.abh-lux-exp-step7 .edit-split__media{
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.abh-lux-exp-step7 .edit-split__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--abh-ease);
}
.abh-lux-exp-step7 .edit-split:hover .edit-split__media img{ transform: scale(1.03); }
.abh-lux-exp-step7 .edit-split__meta{
  display: flex; gap: 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--abh-line);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--abh-muted);
}
.abh-lux-exp-step7 .edit-split__meta strong{
  display: block;
  font-family: var(--abh-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--abh-ink);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 4px;
}

/* ============ Card grid (Soneva-style 3x3) ============ */
.abh-lux-exp-step7 .cards-section{
  padding: clamp(70px, 9vw, 130px) 0;
  background: var(--abh-ivory);
}
.abh-lux-exp-step7 .cards-header{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 68px);
}
.abh-lux-exp-step7 .cards-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
}
.abh-lux-exp-step7 .abh-card{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--abh-ink);
  color: #fffaf3;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  font-family: inherit;
}
.abh-lux-exp-step7 .abh-card__media{
  position: absolute; inset: 0; z-index: 0;
}
.abh-lux-exp-step7 .abh-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--abh-ease), filter .5s var(--abh-ease);
}
.abh-lux-exp-step7 .abh-card::before{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,5,5,.05) 0%, rgba(5,5,5,.1) 40%, rgba(5,5,5,.75) 100%);
  transition: opacity .4s var(--abh-ease);
}
.abh-lux-exp-step7 .abh-card__chip{
  position: absolute; top: 18px; left: 18px; z-index: 3;
  background: rgba(255,250,243,.92);
  color: var(--abh-ink);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
  backdrop-filter: blur(4px);
}
.abh-lux-exp-step7 .abh-card__caption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 6px;
}
.abh-lux-exp-step7 .abh-card__title{
  font-family: var(--abh-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.15;
  margin: 0;
  color: #fffaf3;
}
.abh-lux-exp-step7 .abh-card__cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,250,243,.85);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--abh-ease), transform .4s var(--abh-ease);
}
.abh-lux-exp-step7 .abh-card__cta::after{
  content: "→";
  transition: transform .35s var(--abh-ease);
}
.abh-lux-exp-step7 .abh-card:hover .abh-card__media img,
.abh-lux-exp-step7 .abh-card:focus-visible .abh-card__media img{ transform: scale(1.06); }
.abh-lux-exp-step7 .abh-card:hover::before,
.abh-lux-exp-step7 .abh-card:focus-visible::before{
  background: linear-gradient(180deg, rgba(5,5,5,.15) 0%, rgba(5,5,5,.3) 40%, rgba(5,5,5,.85) 100%);
}
.abh-lux-exp-step7 .abh-card:hover .abh-card__cta,
.abh-lux-exp-step7 .abh-card:focus-visible .abh-card__cta{
  opacity: 1; transform: translateY(0);
}
.abh-lux-exp-step7 .abh-card:hover .abh-card__cta::after{ transform: translateX(4px); }
.abh-lux-exp-step7 .abh-card:focus-visible{ outline: 2px solid var(--abh-ivory); outline-offset: -2px; }

@media (max-width: 1279px){
  .abh-lux-exp-step7 .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .abh-lux-exp-step7 .cards-grid{ grid-template-columns: 1fr; gap: 16px; }
  .abh-lux-exp-step7 .cards-header{ grid-template-columns: 1fr; }
  .abh-lux-exp-step7 .edit-split__grid{ grid-template-columns: 1fr; gap: 30px; }
  .abh-lux-exp-step7 .edit-split--reverse .edit-split__media{ order: 0; }
}

/* ============ Suggested Rhythms (2x2) ============ */
.abh-lux-exp-step7 .rhythms{
  padding: clamp(70px, 9vw, 130px) 0;
  background: var(--abh-warm);
}
.abh-lux-exp-step7 .rhythms-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(36px, 4vw, 52px);
}
.abh-lux-exp-step7 .rhythm{
  background: var(--abh-ivory);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--abh-line);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: transform .5s var(--abh-ease), box-shadow .5s var(--abh-ease);
}
.abh-lux-exp-step7 .rhythm:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -40px rgba(31,31,31,.25);
}
.abh-lux-exp-step7 .rhythm__num{
  font-family: var(--abh-serif);
  font-style: italic;
  color: var(--abh-accent);
  font-size: 14px;
  letter-spacing: .06em;
}
.abh-lux-exp-step7 .rhythm__title{
  font-family: var(--abh-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  color: var(--abh-black);
  margin: 4px 0 6px;
  line-height: 1.15;
}
.abh-lux-exp-step7 .rhythm__body{
  color: var(--abh-ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.abh-lux-exp-step7 .rhythm__meta{
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--abh-line);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--abh-muted);
}
@media (max-width: 640px){
  .abh-lux-exp-step7 .rhythms-grid{ grid-template-columns: 1fr; }
}

/* ============ Final CTA (inquiry panel + form) ============ */
.abh-lux-exp-step7 .cta{
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--abh-ink);
  color: #fffaf3;
  position: relative;
  overflow: hidden;
}
.abh-lux-exp-step7 .cta::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 500px at 10% 10%, rgba(122,106,79,.18), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, rgba(122,106,79,.12), transparent 60%);
  z-index: 0;
}
.abh-lux-exp-step7 .cta > .container{ position: relative; z-index: 1; }
.abh-lux-exp-step7 .cta__head{
  text-align: center; max-width: 700px; margin: 0 auto clamp(40px, 5vw, 64px);
}
.abh-lux-exp-step7 .cta .eyebrow{ color: rgba(255,250,243,.7); }
.abh-lux-exp-step7 .cta .h2{ color: #fffaf3; }
.abh-lux-exp-step7 .cta .lede{ color: rgba(255,250,243,.75); margin: 0 auto; }

/* Form on dark backdrop – recolor the ivory card to feel like an inset panel */
.abh-lux-exp-step7 .cta form[id^="basicForm-"],
.abh-lux-exp-step7 .cta .basicForm{
  max-width: 780px;
  margin: 0 auto;
  background: var(--abh-ivory);
  border-color: rgba(255,250,243,.14);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.55);
}

/* ============ Small utilities ============ */
.abh-lux-exp-step7 .btn-ghost{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--abh-ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--abh-ink);
  background: transparent;
  border-radius: 0;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
  transition: gap .35s var(--abh-ease), letter-spacing .35s var(--abh-ease);
}
.abh-lux-exp-step7 .btn-ghost:hover{ gap: 18px; letter-spacing: .32em; }
.abh-lux-exp-step7 .btn-ghost::after{ content: "→"; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce){
  .abh-lux-exp-step7 *{
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   ABH • Luxury editorial form upgrade (Step 7)
   Scope: any .basicForm / .form-row / .form-group inside the
          Experiences / Our Travel Guide booking widget.
   Reference: Belmond Maroma inquiry form, Soneva form
   Paste into: WP Admin → Appearance → Customize → Additional CSS
   Safe to load globally – all selectors are scoped to .form-row
   / [id^="basicForm-"] patterns already emitted by the booking
   widget, so nothing else on the site is touched.
   ============================================================ */

/* --- 0. Design tokens ---------------------------------------- */
:root{
  --abh-ivory:      #fffaf3;
  --abh-warm:       #f3f0ea;
  --abh-sand:       #e8e2d8;
  --abh-ink:        #1f1f1f;
  --abh-ink-soft:   #3a3a37;
  --abh-muted:      #6f6a60;
  --abh-line:       rgba(31,31,31,.14);
  --abh-line-strong:rgba(31,31,31,.32);
  --abh-black:      #050505;
  --abh-accent:     #7a6a4f;        /* warm brass */
  --abh-focus:      #050505;
  --abh-serif:      "Playfair Display","Cormorant Garamond",Georgia,serif;
  --abh-sans:       "Inter","Helvetica Neue",Arial,sans-serif;
  --abh-radius:     2px;
  --abh-ease:       cubic-bezier(.2,.7,.2,1);
}

/* --- 1. Form container --------------------------------------- */
form[id^="basicForm-"],
.basicForm,
.abh-lux-form{
  background: var(--abh-ivory);
  padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 60px);
  border: 1px solid var(--abh-line);
  border-radius: var(--abh-radius);
  font-family: var(--abh-sans);
  color: var(--abh-ink);
  max-width: 880px;
  margin: 0 auto;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 30px 60px -40px rgba(31,31,31,.18);
}

/* Optional heading if the widget renders one */
form[id^="basicForm-"] h2,
form[id^="basicForm-"] h3,
.abh-lux-form .form-title{
  font-family: var(--abh-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: .2px;
  color: var(--abh-ink);
  margin: 0 0 6px;
}
form[id^="basicForm-"] .form-subtitle,
.abh-lux-form .form-subtitle{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--abh-muted);
  margin: 0 0 28px;
}

/* --- 2. Row / grid layout ------------------------------------ */
form[id^="basicForm-"] .form-row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: clamp(18px, 2.2vw, 26px);
  margin: 0;
}

/* Default: half width on desktop, full on mobile */
form[id^="basicForm-"] .form-group{
  grid-column: span 6;
  min-width: 0;
  margin: 0;
  position: relative;
}

/* Title dropdown → narrow */
form[id^="basicForm-"] .form-group:has(select[name="title"]){
  grid-column: span 4;
}
form[id^="basicForm-"] .form-group:has(input[name="first_name"]),
form[id^="basicForm-"] .form-group:has(input[name="last_name"]){
  grid-column: span 4;
}
form[id^="basicForm-"] .form-group:has(input[name="email"]){
  grid-column: span 6;
}
form[id^="basicForm-"] .form-group.form-intl-phone{
  grid-column: span 6;
}

/* Fallback for browsers without :has() – keep readable */
@supports not selector(:has(*)){
  form[id^="basicForm-"] .form-group{ grid-column: span 6; }
}

@media (max-width: 820px){
  form[id^="basicForm-"] .form-row{
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 20px;
    row-gap: 22px;
  }
  form[id^="basicForm-"] .form-group,
  form[id^="basicForm-"] .form-group:has(select[name="title"]),
  form[id^="basicForm-"] .form-group:has(input[name="first_name"]),
  form[id^="basicForm-"] .form-group:has(input[name="last_name"]),
  form[id^="basicForm-"] .form-group:has(input[name="email"]),
  form[id^="basicForm-"] .form-group.form-intl-phone{
    grid-column: span 2 !important;
  }
  /* First + Last stay side-by-side on tablets */
  form[id^="basicForm-"] .form-group:has(input[name="first_name"]),
  form[id^="basicForm-"] .form-group:has(input[name="last_name"]){
    grid-column: span 1 !important;
  }
  form[id^="basicForm-"] .form-check,
  form[id^="basicForm-"] .checkbox,
  form[id^="basicForm-"] .consent{
    grid-column: 1 / -1 !important;
  }
}

/* Mobile stack: 1 column, tighter paddings, full-width submit */
@media (max-width: 520px){
  form[id^="basicForm-"] .form-row{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 18px !important;
  }
  form[id^="basicForm-"] .form-group,
  form[id^="basicForm-"] .form-group:has(select[name="title"]),
  form[id^="basicForm-"] .form-group:has(input[name="first_name"]),
  form[id^="basicForm-"] .form-group:has(input[name="last_name"]),
  form[id^="basicForm-"] .form-group:has(input[name="email"]),
  form[id^="basicForm-"] .form-group.form-intl-phone,
  form[id^="basicForm-"] .form-check,
  form[id^="basicForm-"] .checkbox,
  form[id^="basicForm-"] .consent{
    grid-column: 1 / -1 !important;
    min-width: 0;
    width: 100%;
  }
  form[id^="basicForm-"]{
    padding: 26px 20px 28px;
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -30px rgba(31,31,31,.14);
  }
  form[id^="basicForm-"] .control-label{
    font-size: 10.5px;
    letter-spacing: .2em;
    margin-bottom: 6px;
    white-space: nowrap;
  }
  form[id^="basicForm-"] .form-control{
    height: 48px;
    font-size: 17px;
    padding: 12px 0 10px;
  }
  form[id^="basicForm-"] .iti input[type="tel"]{
    padding-left: 58px !important;
  }
  form[id^="basicForm-"] .btn,
  form[id^="basicForm-"] button[type="submit"]{
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    font-size: 11px;
    letter-spacing: .22em;
  }
  form[id^="basicForm-"] .btn:hover,
  form[id^="basicForm-"] button[type="submit"]:hover{
    letter-spacing: .26em;
  }
  form[id^="basicForm-"] .form-check,
  form[id^="basicForm-"] .checkbox{
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* --- 3. Labels ----------------------------------------------- */
form[id^="basicForm-"] .control-label{
  display: block;
  font-family: var(--abh-sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--abh-muted);
  margin: 0 0 8px;
  font-weight: 500;
  line-height: 1.2;
}

/* Required marker – replace the raw asterisk with a subtle mark */
form[id^="basicForm-"] .control-label:has(+ [required])::after,
form[id^="basicForm-"] label[for] .required{
  content: "";
}
form[id^="basicForm-"] .control-label{
  /* keep the *: user-side label text may already end with * — restyle it */
}
form[id^="basicForm-"] .control-label > *{ vertical-align: baseline; }

/* Turn any trailing "*" into a small accent dot */
form[id^="basicForm-"] .control-label{
  position: relative;
}

/* Hidden offset label used by intl-tel-input remains visually hidden */
form[id^="basicForm-"] .jqv-offset-label{
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  white-space: nowrap;
}
/* But if user wants label visible above phone: */
form[id^="basicForm-"] .form-intl-phone > .control-label{
  position: static;
  clip: auto; clip-path: none;
  height: auto; width: auto;
  overflow: visible;
  white-space: normal;
}

/* --- 4. Inputs / selects (base) ------------------------------ */
form[id^="basicForm-"] .form-control,
form[id^="basicForm-"] input[type="text"],
form[id^="basicForm-"] input[type="email"],
form[id^="basicForm-"] input[type="tel"],
form[id^="basicForm-"] select{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 52px;
  padding: 14px 0 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--abh-line-strong);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--abh-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .2px;
  line-height: 1.3;
  color: var(--abh-ink);
  transition:
    border-color .35s var(--abh-ease),
    color .3s var(--abh-ease),
    background .3s var(--abh-ease);
}

form[id^="basicForm-"] .form-control::placeholder{
  color: rgba(111,106,96,.7);
  font-style: italic;
}

/* Hover */
form[id^="basicForm-"] .form-control:hover:not(:focus){
  border-bottom-color: var(--abh-ink-soft);
}

/* Focus – editorial: thicken bottom rule + subtle background wash */
form[id^="basicForm-"] .form-control:focus,
form[id^="basicForm-"] select:focus{
  outline: none;
  border-bottom-color: var(--abh-black);
  box-shadow: 0 1px 0 0 var(--abh-black);
  background: linear-gradient(to bottom, transparent 0 90%, rgba(122,106,79,.05) 100%);
}

/* Autofill polish */
form[id^="basicForm-"] .form-control:-webkit-autofill{
  -webkit-text-fill-color: var(--abh-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--abh-ivory) inset;
  caret-color: var(--abh-ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* --- 5. Select (Title) --------------------------------------- */
form[id^="basicForm-"] select.form-control{
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--abh-ink) 50%),
    linear-gradient(135deg, var(--abh-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 10px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
form[id^="basicForm-"] select.form-control:focus{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--abh-black) 50%),
    linear-gradient(135deg, var(--abh-black) 50%, transparent 50%);
}

/* Placeholder-like empty state used by the widget */
form[id^="basicForm-"] select.jqv-select-empty-default:invalid,
form[id^="basicForm-"] select.jqv-select-empty-default option[value=""]{
  color: var(--abh-muted);
}

/* Native option list (best we can do cross-browser) */
form[id^="basicForm-"] select option{
  color: var(--abh-ink);
  background: var(--abh-ivory);
  font-family: var(--abh-sans);
  font-size: 15px;
}

/* --- 6. intl-tel-input phone widget -------------------------- */
form[id^="basicForm-"] .form-intl-phone .iti{
  width: 100%;
  display: block;
}
form[id^="basicForm-"] .iti__flag-container{
  border-right: 1px solid var(--abh-line);
}
form[id^="basicForm-"] .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
form[id^="basicForm-"] .iti__selected-flag{
  background: transparent;
  padding: 0 14px 0 4px;
  transition: background .3s var(--abh-ease);
}
form[id^="basicForm-"] .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background: rgba(31,31,31,.03);
}
form[id^="basicForm-"] .iti__selected-flag:focus{
  outline: none;
  box-shadow: 0 1px 0 0 var(--abh-black);
}
form[id^="basicForm-"] .iti__arrow{
  border-top-color: var(--abh-ink);
  margin-left: 8px;
}
form[id^="basicForm-"] .iti__arrow--up{
  border-bottom-color: var(--abh-ink);
}
form[id^="basicForm-"] .iti input[type="tel"],
form[id^="basicForm-"] .iti input[type="text"]{
  padding-left: 62px !important;   /* room for flag + code */
}

/* Country dropdown – luxury restyle */
form[id^="basicForm-"] .iti__country-list{
  background: var(--abh-ivory);
  border: 1px solid var(--abh-line);
  border-radius: var(--abh-radius);
  box-shadow: 0 20px 40px -20px rgba(31,31,31,.25);
  padding: 6px 0;
  max-height: 320px;
  font-family: var(--abh-sans);
  font-size: 14px;
}
form[id^="basicForm-"] .iti__country{
  padding: 8px 14px;
  color: var(--abh-ink);
  transition: background .2s var(--abh-ease), color .2s var(--abh-ease);
}
form[id^="basicForm-"] .iti__country:hover,
form[id^="basicForm-"] .iti__country.iti__highlight{
  background: var(--abh-warm);
  color: var(--abh-black);
}
form[id^="basicForm-"] .iti__country-name{
  color: inherit;
  margin-right: 8px;
}
form[id^="basicForm-"] .iti__dial-code{
  color: var(--abh-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
form[id^="basicForm-"] .iti__divider{
  border-bottom: 1px solid var(--abh-line);
  margin: 4px 0;
}

/* --- 7. Validation states ------------------------------------ */
form[id^="basicForm-"] .form-control[aria-invalid="true"],
form[id^="basicForm-"] .has-error .form-control,
form[id^="basicForm-"] .form-group.has-error .form-control{
  border-bottom-color: #8b3a2b;
  box-shadow: 0 1px 0 0 #8b3a2b;
}
form[id^="basicForm-"] .help-block,
form[id^="basicForm-"] .invalid-feedback,
form[id^="basicForm-"] [data-jqv-error-message]:not(input):not(select):not(textarea){
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  color: #8b3a2b;
  font-style: italic;
}

/* Success (optional if the widget adds .has-success) */
form[id^="basicForm-"] .has-success .form-control{
  border-bottom-color: var(--abh-accent);
}

/* --- 8. Submit button ---------------------------------------- */
form[id^="basicForm-"] .btn,
form[id^="basicForm-"] button[type="submit"],
form[id^="basicForm-"] input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 16px 40px;
  margin-top: 12px;
  background: var(--abh-black);
  color: var(--abh-ivory);
  border: 1px solid var(--abh-black);
  border-radius: var(--abh-radius);
  font-family: var(--abh-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background .35s var(--abh-ease),
    color .35s var(--abh-ease),
    transform .3s var(--abh-ease),
    letter-spacing .4s var(--abh-ease);
}
form[id^="basicForm-"] .btn::after,
form[id^="basicForm-"] button[type="submit"]::after,
form[id^="basicForm-"] input[type="submit"]::after{
  content: "→";
  font-size: 14px;
  letter-spacing: 0;
  transform: translateX(0);
  transition: transform .35s var(--abh-ease);
}
form[id^="basicForm-"] .btn:hover,
form[id^="basicForm-"] button[type="submit"]:hover,
form[id^="basicForm-"] input[type="submit"]:hover{
  background: var(--abh-ivory);
  color: var(--abh-black);
  letter-spacing: .34em;
}
form[id^="basicForm-"] .btn:hover::after,
form[id^="basicForm-"] button[type="submit"]:hover::after{
  transform: translateX(6px);
}
form[id^="basicForm-"] .btn:focus-visible,
form[id^="basicForm-"] button[type="submit"]:focus-visible{
  outline: 2px solid var(--abh-black);
  outline-offset: 3px;
}
form[id^="basicForm-"] .btn[disabled],
form[id^="basicForm-"] button[type="submit"][disabled]{
  opacity: .5;
  cursor: not-allowed;
  letter-spacing: .28em;
}

/* --- 9. Consent / small print rows --------------------------- */
form[id^="basicForm-"] .form-check,
form[id^="basicForm-"] .checkbox,
form[id^="basicForm-"] .consent{
  grid-column: span 12;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--abh-muted);
}
form[id^="basicForm-"] .form-check input[type="checkbox"],
form[id^="basicForm-"] .checkbox input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: 3px;
  border: 1px solid var(--abh-line-strong);
  border-radius: var(--abh-radius);
  background: var(--abh-ivory);
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  transition: border-color .25s var(--abh-ease), background .25s var(--abh-ease);
}
form[id^="basicForm-"] .form-check input[type="checkbox"]:hover,
form[id^="basicForm-"] .checkbox input[type="checkbox"]:hover{
  border-color: var(--abh-ink);
}
form[id^="basicForm-"] .form-check input[type="checkbox"]:checked,
form[id^="basicForm-"] .checkbox input[type="checkbox"]:checked{
  background: var(--abh-black);
  border-color: var(--abh-black);
}
form[id^="basicForm-"] .form-check input[type="checkbox"]:checked::after,
form[id^="basicForm-"] .checkbox input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  inset: 2px 4px 4px 3px;
  border-right: 1.5px solid var(--abh-ivory);
  border-bottom: 1.5px solid var(--abh-ivory);
  transform: rotate(42deg);
}
form[id^="basicForm-"] .form-check a,
form[id^="basicForm-"] .checkbox a{
  color: var(--abh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
form[id^="basicForm-"] .form-check a:hover,
form[id^="basicForm-"] .checkbox a:hover{
  color: var(--abh-black);
}

/* --- 10. Row divider / section rhythm ------------------------ */
form[id^="basicForm-"] .form-row + .form-row{
  margin-top: clamp(18px, 2vw, 26px);
}
form[id^="basicForm-"] hr,
form[id^="basicForm-"] .form-divider{
  border: 0;
  border-top: 1px solid var(--abh-line);
  margin: 32px 0 24px;
  grid-column: 1 / -1;
}

/* --- 11. Motion / accessibility ------------------------------ */
@media (prefers-reduced-motion: reduce){
  form[id^="basicForm-"] *{
    transition: none !important;
    animation: none !important;
  }
}

/* High-contrast / Windows HCM safety */
@media (forced-colors: active){
  form[id^="basicForm-"] .form-control{
    border-bottom-color: CanvasText;
  }
  form[id^="basicForm-"] .btn,
  form[id^="basicForm-"] button[type="submit"]{
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* --- 12. Edge-to-edge on very small screens ------------------ */
@media (max-width: 420px){
  form[id^="basicForm-"]{
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}


/* ================================================================
   Step 7 v1.2.3 — FIXES for card image height/aspect + fallback
   theme override protection
   ================================================================ */

/* Grid: force uniform row height, images cannot expand rows */
.abh-lux-exp-step7 .cards-grid{
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}

/* Card: enforce aspect ratio with modern + fallback path */
.abh-lux-exp-step7 .abh-card{
  aspect-ratio: 4 / 5 !important;
  min-height: 380px;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  background: #1f1f1f !important;
}

/* Older browsers without aspect-ratio: padding-top fallback */
@supports not (aspect-ratio: 1 / 1) {
  .abh-lux-exp-step7 .abh-card{
    aspect-ratio: auto !important;
    height: 0 !important;
    padding-top: 125% !important;
    min-height: 0;
  }
}

/* Media wrapper fills the card */
.abh-lux-exp-step7 .abh-card__media{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Image fills the media wrapper — overrides theme's img{height:auto} */
.abh-lux-exp-step7 .abh-card__media img{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1) !important;
}

/* Stronger gradient overlay — title always readable */
.abh-lux-exp-step7 .abh-card::before{
  background: linear-gradient(180deg, rgba(5,5,5,.15) 0%, rgba(5,5,5,.25) 45%, rgba(5,5,5,.85) 100%) !important;
}

/* Caption/chip layering — above image and overlay */
.abh-lux-exp-step7 .abh-card__chip,
.abh-lux-exp-step7 .abh-card__caption{
  z-index: 3 !important;
}

/* Dark CTA — form slot */
.abh-lux-exp-step7 .cta__form-slot{
  max-width: 720px;
  margin: 40px auto 0;
}
.abh-lux-exp-step7 .abh-lux-fallback{
  color: rgba(255,250,243,.9);
  text-align: center;
  padding: 24px 20px;
  border: 1px solid rgba(255,250,243,.18);
  border-radius: 2px;
  background: rgba(255,250,243,.04);
  margin-top: 24px;
}
.abh-lux-exp-step7 .abh-lux-fallback p{
  margin: 0 0 18px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255,250,243,.85);
}
.abh-lux-exp-step7 .abh-lux-fallback__btn{
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid rgba(255,250,243,.9);
  color: #fffaf3 !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease;
}
.abh-lux-exp-step7 .abh-lux-fallback__btn:hover,
.abh-lux-exp-step7 .abh-lux-fallback__btn:focus{
  background: #fffaf3;
  color: #050505 !important;
}
/* ================================================================
   Step 7 v1.2.5 — Responsive card CTA + touch-device support
   • On touch devices (mobile/tablet) the "Discover the experience"
     CTA is ALWAYS visible (no hover state possible).
   • On desktop hover it slides up as before.
   • Chip and title stay readable at all sizes.
   ================================================================ */

/* Touch devices: no hover → always show CTA + stronger overlay */
@media (hover: none) {
  .abh-lux-exp-step7 .abh-card__cta{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .abh-lux-exp-step7 .abh-card::before{
    background: linear-gradient(180deg, rgba(5,5,5,.15) 0%, rgba(5,5,5,.35) 45%, rgba(5,5,5,.85) 100%) !important;
  }
}

/* Small viewports (≤820px): show CTA regardless of hover capability */
@media (max-width: 820px) {
  .abh-lux-exp-step7 .abh-card__cta{
    opacity: 1 !important;
    transform: translateY(0) !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
  }
  .abh-lux-exp-step7 .abh-card__title{
    font-size: clamp(15px, 4vw, 19px) !important;
    line-height: 1.2 !important;
  }
  .abh-lux-exp-step7 .abh-card__caption{
    padding: 16px 18px !important;
    gap: 8px !important;
  }
  .abh-lux-exp-step7 .abh-card__chip{
    top: 14px !important;
    left: 14px !important;
    font-size: 9.5px !important;
    padding: 5px 10px !important;
  }
  .abh-lux-exp-step7 .abh-card::before{
    background: linear-gradient(180deg, rgba(5,5,5,.15) 0%, rgba(5,5,5,.4) 40%, rgba(5,5,5,.9) 100%) !important;
  }
}

/* Extra-small viewports (≤480px): tighter card sizing */
@media (max-width: 480px) {
  .abh-lux-exp-step7 .abh-card{
    aspect-ratio: 3 / 4 !important;
    min-height: 320px !important;
  }
  .abh-lux-exp-step7 .abh-card__title{
    font-size: 16px !important;
  }
  .abh-lux-exp-step7 .abh-card__cta{
    font-size: 10.5px !important;
  }
}