/* Book a Consultation hero — self-contained component, mirrors the pattern
   established by hero-revision.css: all selectors below are .chero-prefixed
   so they don't collide with style.css / park-lane.css (which already define
   plain .card / .media / .field etc.). Compiled from the Cloud Design canvas
   export "Park Lane Booking Page - Responsive.html". */
:root{
  --pl-navy:#16243F;--pl-navy-900:#0F1A2E;--pl-gold:#9C7A4E;--pl-gold-400:#B89A6B;
  --pl-cream:#F5F1E9;--pl-cream-deep:#DED4C2;--pl-line:#D8CFBF;
  --pl-ink:#1E2433;--pl-ink-muted:#5A6172;--pl-on-dark-muted:#B9C0CE;
  --pl-disp:'BodoniFerrara-Heavy',Georgia,serif;
  --pl-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --pl-ease:cubic-bezier(.4,0,.2,1);
  --pl-gutter:clamp(22px,5vw,72px);
  --pl-navspace:clamp(160px,18vh,240px);
  --pl-band-extra:48px;
  --pl-band:calc(var(--pl-navspace) + var(--pl-band-extra) + clamp(268px,24vw,360px));
  --pl-hero-pad-top:calc(var(--pl-navspace) + 48px);
}

/* ---------- SHELL ---------- */
.chero{position:relative;isolation:isolate;overflow:hidden;background:var(--pl-cream);padding:var(--pl-hero-pad-top) 0 clamp(72px,9vw,128px)}
.chero__band{position:absolute;top:0;left:0;right:0;height:var(--pl-band);background:var(--pl-navy);z-index:0;overflow:hidden}
.chero__texture{position:absolute;inset:0;width:100%;height:100%;opacity:.06;color:var(--pl-gold)}
.chero__wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(56px,7vw,120px);display:block}
.chero__wrap{position:relative;z-index:1;width:100%;max-width:1620px;margin:0 auto;padding:0 var(--pl-gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(32px,4vw,72px);row-gap:0;align-items:start}
.chero__lede{grid-column:1;grid-row:1}
.chero__media{grid-column:1;grid-row:2}
.chero__card{grid-column:2;grid-row:1/span 2}

/* ---------- LEFT COLUMN ---------- */
.chero__lede h1{font-family:var(--pl-disp);font-weight:700;font-size:clamp(34px,3.6vw,58px);line-height:1.05;letter-spacing:-.02em;color:var(--pl-cream);margin:0;text-wrap:balance}
.chero__lede p{font-size:clamp(16px,1.25vw,22px);line-height:1.6;color:var(--pl-cream);margin:clamp(16px,1.8vw,24px) 0 0;max-width:36em;text-wrap:pretty}
.chero__lede p strong{color:#fff;font-weight:700}
.chero__shot{margin:clamp(24px,2.6vw,40px) 0 0;border-radius:clamp(12px,1.2vw,18px);overflow:hidden;border:clamp(4px,.45vw,6px) solid #fff;box-shadow:0 24px 60px rgba(15,26,46,.18)}
.chero__shot img{width:100%;aspect-ratio:600/392;object-fit:cover;object-position:center 26%}
.chero__assure{display:flex;flex-wrap:wrap;gap:clamp(10px,1.5vw,16px);margin:clamp(18px,2vw,28px) 0 0;padding:0;list-style:none}
.chero__assure li{display:flex;align-items:center;gap:8px;font-size:clamp(12px,.85vw,14px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pl-navy);background:rgba(156,122,78,.12);border:1px solid rgba(156,122,78,.28);border-radius:999px;padding:8px 16px 8px 14px}
.chero__assure li::before{content:"";width:.95em;height:.95em;flex:none;background:var(--pl-gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- FORM CARD SHELL ---------- */
.chero__card{background:#fff;border-radius:clamp(14px,1.4vw,20px);box-shadow:0 30px 80px rgba(15,26,46,.22);padding:clamp(26px,3.2vw,52px) clamp(22px,3.4vw,56px)}

/* ---------- TABLET ---------- */
@media (max-width:1100px){
  :root{--pl-band:calc(var(--pl-navspace) + var(--pl-band-extra) + clamp(300px,40vw,430px))}
  .chero__wrap{grid-template-columns:minmax(0,1fr)}
  .chero__lede h1{font-size:clamp(38px,6.4vw,64px);max-width:14em}
  .chero__lede p{color:var(--pl-cream);margin-top:clamp(20px,3vw,32px);max-width:44em}
  .chero__lede p strong{color:#fff}
  .chero__lede,.chero__card,.chero__media{grid-column:1;grid-row:auto}
  .chero__card{margin-top:clamp(28px,4vw,44px)}
  .chero__media{margin-top:clamp(28px,4vw,44px)}
  .chero__shot{margin-top:0}
  .chero__shot img{aspect-ratio:16/9}
  .chero__assure{justify-content:flex-start}
}

/* ---------- MOBILE ---------- */
@media (max-width:640px){
  :root{--pl-navspace:clamp(120px,14vh,180px);--pl-band:calc(var(--pl-navspace) + var(--pl-band-extra) + clamp(330px,86vw,430px))}
  .chero__lede h1{font-size:clamp(34px,9vw,48px)}
  .chero__lede p{font-size:clamp(15px,4.2vw,18px)}
  .chero__assure{flex-direction:column;gap:10px;align-items:flex-start}
  .chero__assure li{font-size:12px}
  .chero__shot img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.chero *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- AWARDS STRIP (relocated below the hero) ---------- */
.chero-awards{background:var(--pl-cream);border-top:1px solid var(--pl-line)}

/* =========================================================================
   ActiveCampaign embed reskin — #pl-crm-form now lives inside .chero__card.
   These extend (don't replace) the pre-existing overrides already shipped
   inline on book-a-consultation.html targeting AC's real injected classes
   (._form_element, ._form-label, ._field-wrapper, ._form-fieldset). Kept
   deliberately light-touch: fieldsets and the submit button are left to
   AC's own native layout/styling rather than being reskinned, so the
   pre-existing compact spacing (driven by the site's own inline JS) isn't
   fought against.
   ========================================================================= */
#pl-crm-form{width:100%}
#pl-crm-form ._form-inner,
#pl-crm-form ._form{max-width:none!important;padding:0!important}
#pl-crm-form ._form_element{margin:0 0 clamp(12px,1.2vw,18px)!important}
#pl-crm-form ._field-wrapper{position:relative}
#pl-crm-form ._field-wrapper input,
#pl-crm-form ._field-wrapper textarea{
  width:100%;background:#FBF7EF;border:1px solid var(--pl-line);border-radius:10px;
  padding:clamp(30px,2.6vw,40px) clamp(16px,1.6vw,24px) clamp(12px,1.1vw,17px);
  font-family:var(--pl-body);font-size:clamp(16px,1.2vw,21px);font-weight:500;color:var(--pl-navy);
  outline:none;transition:border-color .2s var(--pl-ease),box-shadow .2s var(--pl-ease)}
#pl-crm-form ._field-wrapper input:focus,
#pl-crm-form ._field-wrapper textarea:focus{border-color:var(--pl-gold);box-shadow:0 0 0 3px rgba(156,122,78,.18)}
#pl-crm-form ._form-label{
  position:absolute!important;left:clamp(16px,1.6vw,24px);top:clamp(11px,1vw,15px);
  font-size:clamp(12px,.85vw,14px)!important;font-weight:600;letter-spacing:.02em;pointer-events:none}
#pl-crm-form ._form-fieldset{
  border:0;margin:clamp(14px,1.6vw,22px) 0 0!important;padding:0!important;min-width:0}
#pl-crm-form legend,
#pl-crm-form ._form-fieldset > label:first-child{
  font-family:var(--pl-disp);font-weight:700;font-size:clamp(21px,2vw,30px);color:var(--pl-navy);
  margin-bottom:clamp(8px,1vw,14px);line-height:1.15}
#pl-crm-form ._form-fieldset ._field-wrapper,
#pl-crm-form ._form-fieldset label{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:clamp(15px,1.15vw,21px);color:var(--pl-ink)}
#pl-crm-form ._form-fieldset input[type="radio"]{
  appearance:none;-webkit-appearance:none;margin:0;width:clamp(22px,1.6vw,26px);height:clamp(22px,1.6vw,26px);
  border-radius:50%;border:2px solid var(--pl-line);background:transparent;flex:none;
  transition:border-color .2s var(--pl-ease),background-color .2s var(--pl-ease),box-shadow .2s var(--pl-ease)}
#pl-crm-form ._form-fieldset input[type="radio"]:checked{
  border-color:var(--pl-gold);background:var(--pl-gold);box-shadow:inset 0 0 0 4px #fff}
#pl-crm-form ._form-fieldset input[type="radio"]:focus-visible{outline:2px solid var(--pl-gold);outline-offset:3px}
#pl-crm-form .p-disclaimer{font-size:clamp(14px,.95vw,18px)!important;color:var(--pl-ink-muted)!important;
  margin:clamp(20px,2.2vw,32px) 0 0!important;line-height:1.5}
#pl-crm-form .p-disclaimer a{color:var(--pl-navy)!important;font-weight:600;text-decoration:underline}

/* ---------- SURGERY HOURS CARD (leftover-section redesign) ---------- */
.pl-hours-card{background:var(--pl-cream);padding:clamp(28px,3vw,44px);height:100%}
.pl-hours-card__list{list-style:none;margin:0;padding:0}
.pl-hours-card__list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--pl-line);color:var(--pl-ink)}
.pl-hours-card__list li:first-child{border-top:0}
.pl-hours-card__list li strong{color:var(--pl-navy);font-weight:700}
.pl-hours-card__note{margin:clamp(14px,1.6vw,20px) 0 0;font-size:.85rem;color:var(--pl-ink-muted)}

/* ---------- IMAGE SIZING GUARD ---------- */
/* park-lane.css sets a global `img { width: 100% }` with no height. Without a
   matching `height: auto`, the width/height attributes now on this page's
   <img> tags would apply as a fixed pixel height and squash every image.
   Scoped to this stylesheet (loaded last, and only by book-a-consultation.html)
   so the rest of the site is untouched. */
img{height:auto}