/* ==========================================================================
   hardiefinancegroup.com.au — booking funnel (/lp/booking, /booking,
   /booking-confirmed)

   Loaded AFTER /styles.css and /lp/lp.css. Only holds what the booking pages
   add on top of the existing landing-page kit — the header, trust strip,
   tiles, steps, FAQ, closing CTA, footer and sticky bar all come from lp.css
   unchanged.

   Written mobile-first, matching lp.css: base rules are the phone layout and
   the media queries only add complexity upward. Around 99% of this traffic
   arrives from Meta on a phone, so the phone layout is the design, not a
   fallback.
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------
   The fold is the whole game. On a 375x667 screen the sticky header takes
   ~64px, leaving ~600px, and that has to hold eyebrow + H1 + sub + BUTTON.
   It will not also hold the three bullets, so on mobile the CTA is pulled
   above them and the bullets become supporting detail you scroll to. Above
   900px there is room for everything, so normal reading order is restored. */
.lp-hero__copy { display: flex; flex-direction: column; }
.lp-hero__copy .lp-eyebrow  { order: 1; }
.lp-hero__copy h1           { order: 2; }
.lp-hero__copy .lp-sub      { order: 3; }
.lp-hero__copy .lp-cta-wrap { order: 4; }
.lp-hero__copy .lp-props    { order: 5; }
.lp-hero__copy .lp-broker   { order: 6; }

.lp-eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #D4B26B;
}

/* Tighter than the lp.css default so the H1 never runs past three lines at
   360px, which is what pushes the button under the fold. */
.lp-hero__copy h1 {
  font-size: clamp(1.7rem, 6.4vw, 2.75rem);
  text-wrap: balance;
}

.lp-hero__copy .lp-sub { margin-bottom: 1.25rem; }
.lp-hero__copy .lp-props { margin: 1.5rem 0 1.25rem; }

/* ---- Call to action ------------------------------------------------------ */
.lp-cta-wrap { margin: 0; }

.lp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 54px;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 8px;
  background: var(--brand-forest);
  color: var(--white);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background .15s var(--ease), transform .1s var(--ease);
}
.lp-cta:hover  { background: #256B29; color: var(--white); }
.lp-cta:active { transform: scale(.985); }
.lp-cta svg    { width: 18px; height: 18px; flex: 0 0 18px; }

/* Sits directly under the button and answers the last hesitation before it
   forms. Small, quiet, deliberately not a heading. */
.lp-friction {
  margin: .7rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255,255,255,.72);
}

/* The same CTA used mid-page on light sections. */
.lp-cta-section { margin: 2rem auto 0; max-width: 26rem; text-align: center; }
.lp-cta-section .lp-cta { background: var(--brand-forest); }
.lp-cta-section .lp-friction { color: var(--mute); }

/* ---- Adrian card (replaces the form card the other LPs carry) ------------- */
.lp-book-card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 50px rgba(6,20,40,.28);
  overflow: hidden;
  text-align: center;
}
.lp-book-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  background: var(--soft);
}
.lp-book-card__body { padding: 1.35rem; }
.lp-book-card__body h2 {
  margin: 0 0 .2rem;
  font-size: 1.25rem;
  line-height: 1.25;
}
.lp-book-card__role {
  margin: 0 0 1rem;
  font-size: .9rem;
  color: var(--mute);
}
.lp-book-card__creds {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .55rem;
  text-align: left;
}
.lp-book-card__creds li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--slate);
}
.lp-book-card__creds svg {
  width: 17px; height: 17px;
  flex: 0 0 17px;
  margin-top: .18rem;
  color: var(--brand-forest);
}

@media (min-width: 900px) {
  /* Room for everything: bullets return above the button. */
  .lp-hero__copy .lp-props    { order: 4; margin: 0 0 1.5rem; }
  .lp-hero__copy .lp-cta-wrap { order: 5; }
  .lp-hero__copy .lp-broker   { order: 6; margin-top: 1.5rem; }
  .lp-cta { width: auto; min-width: 20rem; }
  .lp-friction { text-align: left; }
}

/* ---- Offer stack: what actually happens in the conversation -------------- */
.lp-offer {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
}
.lp-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lp-offer-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--slate);
}
.lp-offer-list svg {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  margin-top: .22rem;
  color: var(--brand-forest);
}
.lp-offer-list strong { color: var(--charcoal); font-weight: 600; }

@media (min-width: 720px) {
  .lp-offer { padding: 2rem 2.25rem; }
}

/* ---- Plain benefit list (the "why me" section) ---------------------------- */
.lp-reasons {
  list-style: none;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.lp-reasons li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--slate);
}
.lp-reasons svg {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  margin-top: .2rem;
  color: var(--gold);
}
.lp-reasons strong { display: block; color: var(--charcoal); margin-bottom: .1rem; }

/* ---- About ---------------------------------------------------------------- */
.lp-about { display: grid; gap: 1.5rem; align-items: center; max-width: 52rem; margin: 0 auto; }
.lp-about__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  justify-self: center;
}
.lp-about p { color: var(--slate); }
.lp-about p:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .lp-about { grid-template-columns: 180px 1fr; gap: 2.25rem; }
  .lp-about__photo { width: 180px; height: 180px; }
}

/* Testimonials carry a required qualification, and it has to be as readable
   as the quote it qualifies — not grey 8pt fine print. */
.lp-testimonial-note {
  margin: .9rem auto 0;
  max-width: 46rem;
  font-size: .84rem;
  line-height: 1.5;
  text-align: center;
  color: var(--mute);
}

/* ==========================================================================
   /booking — the Calendly page
   ========================================================================== */
/* The calendar is the only thing to do on this page, so everything above it is
   overhead. The site-wide .section gives 4rem top padding, which on a phone
   pushes the first available time slot most of a screen down. Pulled in hard
   here so the calendar is visible almost immediately. */
.bk-page main .section { padding-top: 1.75rem; padding-bottom: 2rem; }
@media (min-width: 720px) { .bk-page main .section { padding-top: 3rem; } }

.bk-intro { text-align: center; max-width: 40rem; margin: 0 auto; }
.bk-intro .eyebrow { margin-bottom: .2rem; }
.bk-intro h1 { font-size: clamp(1.5rem, 5.4vw, 2.3rem); margin: 0 0 .5rem; }
.bk-intro p { color: var(--slate); margin: 0; font-size: .95rem; }

/* Calendly's docs put a fixed pixel height in the inline style attribute. The
   height lives here instead so it can respond to screen size, but it MUST be
   `height`, not `min-height`: the iframe Calendly injects is height:100%, and a
   percentage height only resolves against a parent with a definite height. With
   min-height alone the iframe computes to auto, collapses to a ~200px scrolling
   box, and leaves the rest of the container empty underneath.

   The height is also capped to the viewport, which is the more important half of
   the rule. Calendly's day view puts its back arrow at the very top of the
   iframe. An iframe taller than the screen therefore hides that arrow off the
   top of the fold the moment the invitee scrolls down to the time slots, and the
   only back control they can see is the phone's, which throws them out of the
   funnel entirely. Keeping the whole iframe on one screen means Calendly scrolls
   its own content internally and the arrow never leaves the fold. The 82px
   subtracted is the sticky header the widget has to clear. */
.calendly-inline-widget {
  min-width: 320px;
  width: 100%;
  height: calc(100dvh - 82px);
  min-height: 520px;
  max-height: 840px;
  margin: 1rem 0 0;
}

/* dvh is recent enough to want a floor under it on older mobile browsers. */
@supports not (height: 100dvh) {
  .calendly-inline-widget { height: calc(100vh - 82px); }
}

/* Calendly's script sets height="100%" as an HTML ATTRIBUTE on the iframe. That
   attribute only accepts pixel values, so browsers discard the percentage and
   fall back to the CSS default for an iframe, which is 150px. The result is a
   tiny scrolling box with the rest of the container empty below it. Giving the
   iframe a real CSS height fixes it: 100% now resolves against the definite
   height set above. */
.calendly-inline-widget iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 720px) {
  .calendly-inline-widget {
    height: min(900px, calc(100dvh - 96px));
    min-height: 620px;
    max-height: 900px;
  }
}

/* ---- Who you are meeting -------------------------------------------------
   Below the calendar on purpose. Calendly's own profile panel is switched off
   (hide_event_type_details) so the month grid can start at the top of the
   iframe, so this is where the face goes instead. */
.bk-host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  max-width: 28rem;
  margin: 1.5rem auto 0;
}
.bk-host__photo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--soft);
}
.bk-host__text { text-align: left; }
.bk-host__name {
  margin: 0;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}
.bk-host__role {
  margin: 0;
  font-size: .88rem;
  color: var(--mute);
  line-height: 1.4;
}

.bk-fallback {
  margin: 1rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
  text-align: center;
  color: var(--mute);
}

/* No sticky bar on this page — it would sit on top of Calendly's Confirm
   button, which is anchored to the bottom of the iframe. The footer's extra
   bottom padding exists to clear that bar, so it is not needed here either. */
.bk-page .lp-footer { padding-bottom: 2.25rem; }

/* ==========================================================================
   /booking-confirmed
   ========================================================================== */
.bk-done { text-align: center; max-width: 42rem; margin: 0 auto; }
.bk-done__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(46,125,50,.1);
  color: var(--brand-forest);
}
.bk-done__tick svg { width: 34px; height: 34px; }
.bk-done h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: .6rem; }
.bk-done__lead { font-size: 1.08rem; color: var(--slate); }

.bk-prep {
  text-align: left;
  max-width: 34rem;
  margin: 2rem auto 0;
  padding: 1.35rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bk-prep h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
.bk-prep > p { font-size: .92rem; color: var(--mute); margin: 0 0 1rem; }
.bk-prep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bk-prep li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--slate);
}
.bk-prep svg {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  margin-top: .2rem;
  color: var(--brand-forest);
}

.bk-done__adrian {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 2rem auto 1rem;
  display: block;
}
.bk-done__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .lp-cta { transition: none; }
}