/* ==========================================================================
   A Million Visions 2026 — campaign skin (v3)
   Loaded ON TOP of the v2 design system for the event landing page only.
   Everything is scoped to .amv-* so the shared v2 components and the legacy
   event page are never touched.
   Palette sampled from the client's official "A Million Visions" key visual:
   bright sky blue, warm cream, campaign orange, IAPB navy, balloon gold.
   ========================================================================== */
:root {
  --amv-sky:        #33bcf3;
  --amv-sky-deep:   #0b96d8;
  --amv-sky-soft:   #dff2fd;
  --amv-sky-mist:   #eef9fe;
  --amv-cream:      #fef2dc;
  --amv-cream-deep: #f7e6c6;
  --amv-orange:     #e8801f;
  --amv-orange-deep:#c96a12;
  --amv-navy:       #1f4c9e;
  --amv-gold:       #f2be46;
  --amv-ink:        #14315f;
}

/* --------------------------------------------------------------------------
   Standing up to the shared 0844 chrome
   Since 29 Sep this page also draws the shared header and footer, which bring
   site-0844/css/style-wp.css with them. EVERY rule in that file is anchored
   with `:root:root:root body …` (specificity 0,3,2), so it outranks every
   plain class selector in this file no matter what order the two load in:

     body h1/h2/h3 { font-size: --fs-hN; color: var(--blue); margin: 0 0 --s4 }
     body p        { margin: 0 0 --s4; max-width: 45.384em }

   which painted every campaign heading blue at the chrome's size, and took the
   `margin: 0 auto` and the narrow measures off the paragraphs — that last one
   is what pushed the closing CTA band's copy off centre.

   So the campaign's own values are restated here behind the same anchor. The
   design rules further down are left exactly as authored, so this file still
   reads as one design; this block is only the armour.
   -------------------------------------------------------------------------- */
:root:root:root body .amv-hero__title { color: var(--amv-navy); font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.03; letter-spacing: -.01em; margin: 0 0 1.1rem; }
:root:root:root body .amv-sectionhead h2 { color: var(--amv-ink); font-size: var(--fs-h2); margin: 0 0 .8rem; }
:root:root:root body .amv-checks h3 { color: var(--amv-ink); font-size: 1.1rem; margin: 0 0 .25rem; }
:root:root:root body .amv-step h3 { color: var(--amv-ink); font-size: 1.12rem; margin: 0 0 .4rem; }
:root:root:root body .amv-cta h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 .8rem; }

:root:root:root body .amv-eyebrow { margin: 0 0 var(--eyebrow-gap); max-width: none; }
:root:root:root body .amv-sectionhead p:not(.amv-eyebrow) { margin: 0; max-width: none; }
:root:root:root body .amv-hero__lead { margin: 0 0 1.6rem; max-width: 46ch; }
:root:root:root body .amv-hero__note { margin: 0; max-width: none; }
:root:root:root body .amv-hero__terms { margin: .55rem 0 0; max-width: none; }
:root:root:root body .amv-about__copy p:not(.amv-eyebrow) { margin: 0 0 1rem; max-width: none; }
:root:root:root body .amv-checks p { margin: 0; max-width: none; }
:root:root:root body .amv-included__note { margin: 1.6rem 0 0; max-width: none; }
:root:root:root body .amv-step p { margin: 0; max-width: none; }
:root:root:root body .amv-quote p { margin: 0; max-width: none; }
:root:root:root body .amv-quotes__disclaimer { margin: 1.6rem 0 0; max-width: none; }
/* The closing CTA band is centred copy: auto side margins on a capped measure. */
:root:root:root body .amv-cta p { margin: 0 auto 1.7rem; max-width: 64ch; }
:root:root:root body .amv-cta p.amv-cta__fine { margin: 1.1rem auto 0; max-width: 40ch; }

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */
.amv-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--amv-orange-deep);
  margin: 0 0 var(--eyebrow-gap);
}
.amv-eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--amv-orange), var(--amv-gold));
}

/* Playful pill buttons — the poster's CTA language, only on this page */
.amv-btn, .amv-btn-ghost {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.amv-btn { background: var(--amv-orange); color: #fff; box-shadow: 0 14px 30px rgba(201,106,18,.34); }
.amv-btn:hover, .amv-btn:focus-visible { background: var(--amv-orange-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(201,106,18,.42); }
.amv-btn svg { width: 20px; height: 20px; }
.amv-btn-ghost { background: rgba(255,255,255,.9); color: var(--amv-navy); border-color: rgba(31,76,158,.18); }
.amv-btn-ghost:hover, .amv-btn-ghost:focus-visible { background: #fff; color: var(--amv-navy); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* No underline on the pill buttons. The shared 0844 chrome puts the browser's
   default underline back on body links with `:root:root:root body a` — which
   outranks the `text-decoration: none` above — so match its anchor here. */
:root:root:root body .amv-btn,
:root:root:root body .amv-btn-ghost { text-decoration: none; }

.amv-sectionhead { max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.amv-sectionhead h2 { color: var(--amv-ink); font-size: var(--fs-h2); margin: 0 0 .8rem; }
.amv-sectionhead p:not(.amv-eyebrow) { color: var(--ink-60); font-size: var(--fs-lead); margin: 0; text-wrap: balance; }
.amv-sectionhead--center { margin-inline: auto; text-align: center; }

/* Typographic niceties across the campaign sections: balanced headings (even
   line lengths) and "pretty" body text (no orphans / awkward last-line breaks). */
.amv-hero, .amv-about, .amv-included, .amv-steps, .amv-faq, .amv-quotes, .amv-cta, .amv-book {
  --_x: 0; /* anchor for the scoped rules below */
}
:is(.amv-hero, .amv-about, .amv-included, .amv-steps, .amv-faq, .amv-quotes, .amv-cta, .amv-book) :is(h1, h2, h3) {
  text-wrap: balance;
}
:is(.amv-hero, .amv-about, .amv-included, .amv-steps, .amv-faq, .amv-quotes, .amv-cta, .amv-book) :is(p, li, figcaption, .amv-stat__label) {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Header — the WP theme adds 16px top/bottom padding to .site-header (making it
   ~111px vs the design's ~79px). Strip it so the bar matches the rest of the
   HOYA site. Scoped: campaign.css only loads on this page.
   -------------------------------------------------------------------------- */
.site-header { padding: 0 !important; }
/* The site-wide reset.css paints every <button> magenta on hover/focus; the nav
   dropdown chevrons and the hamburger are buttons, so kill that fill here too. */
.site-header button,
.site-header button:hover,
.site-header button:focus,
.site-header button:active {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Hero — sky wash + clouds + the campaign key visual
   -------------------------------------------------------------------------- */
.amv-hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(120% 90% at 12% -10%, #eafaff 0%, rgba(234,250,255,0) 45%),
    linear-gradient(180deg, rgba(51,188,243,.5) 0%, rgba(111,208,246,.4) 42%, rgba(223,242,253,.6) 100%),
    #fff;
}
/* soft cloud puffs, pure CSS */
.amv-hero__clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.amv-hero__clouds span {
  position: absolute; display: block; border-radius: 999px;
  background: radial-gradient(closest-side, #ffffff 68%, rgba(255,255,255,0) 100%);
  opacity: .9; filter: blur(1px);
}
.amv-hero__clouds span:nth-child(1) { width: 260px; height: 90px;  top: 12%; left: 6%; }
.amv-hero__clouds span:nth-child(2) { width: 190px; height: 66px;  top: 30%; left: 40%; opacity: .7; }
.amv-hero__clouds span:nth-child(3) { width: 320px; height: 110px; bottom: 8%; left: -4%; opacity: .85; }
.amv-hero__clouds span:nth-child(4) { width: 150px; height: 54px;  top: 16%; right: 8%; opacity: .75; }

.amv-hero__wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.amv-hero__copy { color: var(--amv-ink); }
.amv-hero__title {
  font-family: var(--font-display); font-weight: 800; color: var(--amv-navy);
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.03; letter-spacing: -.01em;
  margin: 0 0 1.1rem; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.amv-hero__title span { color: var(--amv-orange); }
.amv-hero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: #1c3a68;
  max-width: 46ch; margin: 0 0 1.6rem;
}
.amv-dates {
  list-style: none; margin: 0 0 1.7rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .8rem;
}
.amv-dates li {
  background: rgba(255,255,255,.82); border: 1px solid rgba(31,76,158,.12);
  border-radius: 16px; padding: .7rem 1.05rem; backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm); display: grid; gap: .1rem;
}
.amv-dates__k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amv-orange-deep); }
.amv-dates__v { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--amv-ink); }
.amv-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 1.1rem; }
.amv-hero__note { font-size: .92rem; color: #285089; margin: 0; font-weight: 600; }
.amv-hero__terms { font-size: .8rem; color: #3a6296; margin: .55rem 0 0; opacity: .85; }

.amv-hero__media { position: relative; }
.amv-hero__media img {
  display: block; width: 100%; height: auto; border-radius: 26px;
  box-shadow: 0 40px 80px rgba(9,53,110,.34); border: 5px solid #fff;
}
.amv-hero__badge {
  position: absolute; top: -14px; left: -14px; z-index: 2;
  background: var(--amv-orange); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  padding: .7rem 1.1rem; border-radius: 999px; box-shadow: 0 12px 26px rgba(201,106,18,.4);
  transform: rotate(-6deg);
}

/* --------------------------------------------------------------------------
   About — global mission + campaign stats
   -------------------------------------------------------------------------- */
.amv-about { background: #fff; padding: var(--section-y) 0; }
.amv-about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.amv-about__copy p:not(.amv-eyebrow) { color: var(--ink-80); font-size: var(--fs-lead); line-height: 1.7; margin: 0 0 1rem; }
.amv-about__logos { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.amv-tag {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display);
  font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--amv-navy);
  background: var(--amv-sky-soft); border: 1px solid rgba(31,76,158,.14);
  border-radius: 999px; padding: .5rem .95rem;
}
/* Bento stats: "1M" is the headline stat, so it gets a wide filled feature tile
   across the top; "6" and "100%" sit side by side underneath as light tiles.
   Number on top, description below. */
.amv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.amv-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: .55rem;
  background: linear-gradient(160deg, #fff, var(--amv-sky-mist));
  border: 1px solid var(--line-soft); border-radius: 22px; padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.amv-stat__num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 3.4vw, 2.9rem);
  color: var(--amv-orange); line-height: 1;
}
.amv-stat__label { color: var(--ink-80); font-size: .95rem; line-height: 1.45; }

/* Feature tile */
.amv-stat:first-child {
  grid-column: 1 / -1; min-height: 11rem; padding: 1.8rem 2rem; justify-content: center;
  background: linear-gradient(135deg, var(--amv-navy) 0%, #1a5bb8 60%, var(--amv-sky-deep) 100%);
  border-color: transparent; box-shadow: 0 22px 48px rgba(31,76,158,.28);
}
.amv-stat:first-child::after {
  /* soft decorative rings, echoing the campaign's playful shapes */
  content: ""; position: absolute; right: -60px; top: -60px; width: 210px; height: 210px;
  border-radius: 50%; border: 28px solid rgba(255,255,255,.08); pointer-events: none;
}
.amv-stat:first-child .amv-stat__num { font-size: clamp(3.2rem, 5vw, 4.4rem); color: var(--amv-gold); }
.amv-stat:first-child .amv-stat__label { color: rgba(255,255,255,.9); font-size: 1.02rem; max-width: 30ch; }

/* --------------------------------------------------------------------------
   What's included — checklist on cream
   -------------------------------------------------------------------------- */
.amv-included { background: var(--amv-cream); padding: var(--section-y) 0; }
.amv-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.amv-checks li {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--amv-cream-deep); border-radius: 18px;
  padding: 1.15rem 1.3rem; box-shadow: var(--shadow-sm);
}
.amv-checks svg { width: 26px; height: 26px; flex: none; color: #fff; background: var(--amv-orange); border-radius: 50%; padding: 5px; margin-top: 2px; }
.amv-checks h3 { margin: 0 0 .25rem; font-size: 1.1rem; color: var(--amv-ink); }
.amv-checks p { margin: 0; color: var(--ink-60); font-size: .96rem; line-height: 1.5; }
.amv-included__note { margin: 1.6rem 0 0; font-weight: 700; color: var(--amv-orange-deep); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Steps — how it works (4 numbered cards)
   -------------------------------------------------------------------------- */
.amv-steps { background: var(--amv-sky-mist); padding: var(--section-y) 0; }
/* Bring the cards a little closer to the intro. */
.amv-steps .amv-sectionhead { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.amv-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.amv-step {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: 22px; padding: 1.5rem 1.4rem 1.6rem; box-shadow: var(--shadow-sm);
}
/* Icon tile with the step number as a small badge on its corner. */
.amv-step__ico {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px;
  margin-bottom: 1.05rem; border-radius: 16px; background: var(--amv-sky-soft); color: var(--amv-navy);
}
.amv-step__ico svg { width: 28px; height: 28px; }
.amv-step__num {
  position: absolute; top: -9px; left: -9px;
  display: grid; place-items: center; width: 25px; height: 25px;
  background: var(--amv-navy); color: #fff; border-radius: 50%; border: 2px solid #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  box-shadow: 0 4px 10px rgba(31,76,158,.35);
}
.amv-step h3 { margin: 0 0 .4rem; font-size: 1.12rem; color: var(--amv-ink); }
.amv-step p { margin: 0; color: var(--ink-60); font-size: .95rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   FAQ — reuse the v2 .faq accordion, just tint the wrapper
   -------------------------------------------------------------------------- */
.amv-faq { background: #fff; padding: var(--section-y) 0; }
.amv-faq .faq { max-width: 60rem; }
/* A site-wide reset.css styles every <button> with a magenta hover/focus fill
   and border; the FAQ toggles are the first buttons on this page, so undo it. */
.amv-faq .faq__q,
.amv-faq .faq__q:hover,
.amv-faq .faq__q:focus,
.amv-faq .faq__q:focus-visible,
.amv-faq .faq__q:active {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--blue) !important;
}
.amv-faq .faq__q:hover { color: var(--blue-deep) !important; }
/* Keep the +/- icon pinned to the right edge and let a long question wrap to the
   next line instead of pushing the icon out of alignment. */
.amv-faq .faq__q { align-items: center; gap: 1rem; white-space: normal; }
.amv-faq .faq__q-text { flex: 1 1 auto; min-width: 0; white-space: normal; }
.amv-faq .faq__icon { flex: none; }

/* Land on the booking form (not the band top) when "Reserve your spot" is tapped,
   clearing the header. */
#event-form { scroll-margin-top: 100px; }

/* --------------------------------------------------------------------------
   Testimonials — parent quotes on sky
   -------------------------------------------------------------------------- */
.amv-quotes { background: linear-gradient(180deg, var(--amv-sky-soft), #fff); padding: var(--section-y) 0; }
.amv-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.amv-quote {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 22px;
  padding: 1.7rem 1.6rem; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 1rem;
}
.amv-quote__mark { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: .6; color: var(--amv-gold); }
.amv-quote p { margin: 0; color: var(--amv-ink); font-size: 1.02rem; line-height: 1.55; flex: 1; }
.amv-quote__by { font-size: .88rem; color: var(--ink-60); font-weight: 600; }
.amv-quotes__disclaimer { text-align: center; margin: 1.6rem 0 0; font-size: .82rem; color: var(--ink-40); }

/* --------------------------------------------------------------------------
   Closing CTA band — sky + clouds, orange button
   -------------------------------------------------------------------------- */
.amv-cta { position: relative; overflow: hidden; padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.25rem); text-align: center;
  background: linear-gradient(180deg, var(--amv-sky) 0%, var(--amv-sky-deep) 100%); }
.amv-cta__clouds { position: absolute; inset: 0; pointer-events: none; }
.amv-cta__clouds span { position: absolute; display: block; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.9) 68%, rgba(255,255,255,0) 100%); }
.amv-cta__clouds span:nth-child(1) { width: 240px; height: 84px; top: 14%; left: 8%; opacity: .5; }
.amv-cta__clouds span:nth-child(2) { width: 300px; height: 100px; bottom: 10%; right: 4%; opacity: .45; }
.amv-cta__inner { position: relative; z-index: 1; }
.amv-cta h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 .8rem; text-shadow: 0 2px 8px rgba(6,44,96,.28); }
.amv-cta p { color: rgba(255,255,255,.94); font-size: var(--fs-lead); margin: 0 auto 1.7rem; max-width: 46ch; }
/* Lead: wide enough for two lines, balanced so they split evenly. */
.amv-cta p:not(.amv-cta__fine) { max-width: 64ch; text-wrap: balance; }
.amv-cta .amv-btn { font-size: 1.1rem; padding: 1.05rem 2rem; }
/* Higher specificity than `.amv-cta p` so the fine print is genuinely smaller
   than the lead above the button. */
.amv-cta p.amv-cta__fine { margin: 1.1rem auto 0; max-width: 40ch; font-size: .82rem; color: rgba(255,255,255,.8); }

/* --------------------------------------------------------------------------
   Book band — recolour the reused v2 booking band to the campaign sky.
   The mu-plugin paints .hpe-book with --blue; override to the sky gradient
   and give the intro copy the campaign voice.
   -------------------------------------------------------------------------- */
.hpe-book.amv-book { background: linear-gradient(160deg, var(--amv-navy) 0%, #123b7e 55%, var(--amv-sky-deep) 100%) !important; }
.amv-book .hpe-book__pill { background: var(--amv-orange); color: #fff; }
.amv-book .hpe-book__list svg { color: var(--amv-gold); }
/* A little breathing room between each field's label and its input. */
.amv-book .elementor-field-group > label,
.amv-book .elementor-field-label { margin-bottom: 9px; display: block; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .amv-hero__wrap { grid-template-columns: 1fr; }
  .amv-hero__media { order: -1; max-width: 460px; }
  .amv-about__grid { grid-template-columns: 1fr; }
  .amv-steps__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .amv-quotes__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .amv-checks { grid-template-columns: 1fr; }
  .amv-steps__grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .amv-dates li { flex: 1 1 100%; }
  .amv-stats { grid-template-columns: 1fr; }
  .amv-stat:first-child { min-height: 0; }
}