/* ==========================================================================
   Imperial Acquisitions Network - booking confirmation page
   Non-critical styles. Critical above-the-fold CSS is inlined in index.html.

   Modelled on imperialacquisitionsnetwork.com.au. The design language there is:
   white page, near-black ink, light grey cards, pill buttons, uppercase
   letterspaced eyebrows, and headings that pair a bold sans line with an
   italic serif line underneath. Type is Inter Tight with Instrument Serif
   italic as the accent. Both are self-hosted here rather than pulled from
   Google Fonts, so nothing third-party blocks the render.
   ========================================================================== */

/* --- Booking details card (hero) ----------------------------------------- */
/* Only shown when the redirect carries a parseable start time. */
/* `display` here outranks the browser's own [hidden]{display:none}, so the
   attribute has to be honoured explicitly or the empty box shows on a bare URL */
.booking-card[hidden]{display:none}
.booking-card{
  display:inline-block;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:16px 20px;
  margin-bottom:20px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.booking-label{
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:6px;
}
.booking-time{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.booking-tz{font-size:16px;color:rgba(255,255,255,.72);margin-top:3px}

/* --- Section scaffolding -------------------------------------------------- */
.section{padding:clamp(52px,7.4vw,96px) 0}
.section--tint{background:var(--card)}

.section h2.dual{font-size:clamp(29px,4.6vw,50px);margin-bottom:clamp(26px,3.6vw,44px)}
/* the live site centres its FAQ header, unlike every other section */
.faq-eyebrow{text-align:center}
.faq-title{
  font-size:clamp(29px,4.6vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  text-wrap:balance;margin-bottom:clamp(26px,3.6vw,44px);text-align:center;
}
.faq-title em{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
}

.lede{font-size:17px;line-height:1.7;color:var(--muted);margin:0 auto 24px;max-width:58ch;text-align:center}
.note{
  margin-top:26px;padding:16px 18px;border-radius:12px;
  background:rgba(15,15,15,.045);
  font-size:16px;line-height:1.65;color:var(--ink-2);
}
.section--tint .note{background:rgba(15,15,15,.05)}

/* --- Numbered cards ------------------------------------------------------- */
.cards{list-style:none;display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.card{background:var(--card);border-radius:16px;padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px)}
.section--tint .card{background:#fff}
.card-num{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:34px;line-height:1;color:#cfcfcf;margin-bottom:14px;
}
.card h3{
  font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:9px;
}
.card p{font-size:16px;line-height:1.65;color:var(--muted)}

/* --- Tick list ------------------------------------------------------------ */
.ticks{list-style:none}
.ticks li{position:relative;padding:0 0 16px 30px;font-size:17px;line-height:1.65}
.ticks li:last-child{padding-bottom:0}
.ticks li::before{
  content:"";position:absolute;left:1px;top:9px;
  width:11px;height:6px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}

/* --- Ian ------------------------------------------------------------------ */
.bio-photo{width:100%;border-radius:16px;object-fit:cover;aspect-ratio:3/2;margin-bottom:22px}
.bio-text p{font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:15px}
.bio-text p:last-child{margin-bottom:0;color:var(--ink)}

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:clamp(14px,2.4vw,30px);
  margin-top:clamp(30px,3.6vw,40px);padding-top:clamp(26px,3vw,32px);border-top:1px solid var(--line);
}
.stats{text-align:center}
.stats dt{font-size:clamp(32px,3.8vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stats dd{font-size:16px;line-height:1.45;color:var(--muted);margin-top:7px}

/* --- Testimonials --------------------------------------------------------- */
.quotes{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.quote{
  position:relative;background:#fff;border-radius:16px;padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px) clamp(20px,2.2vw,26px);
}
.section--tint .quote{background:#fff}
.quote blockquote{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin-bottom:20px}
.quote figcaption{display:flex;flex-direction:column;gap:2px}
.q-name{font-size:16px;font-weight:600}
.q-role{font-size:16px;color:var(--muted)}
.quote::after{
  content:"\201D";
  position:absolute;right:20px;bottom:2px;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:76px;line-height:1;color:var(--quote);pointer-events:none;
}

/* --- FAQ ------------------------------------------------------------------ */
/* Closed: light grey pill. Open: inverted to black, matching the live site. */
.faqs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.faq{background:var(--card);border-radius:14px;overflow:hidden;transition:background .18s ease}
.faq[open]{background:var(--ink)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:48px;padding:16px 20px;
  font-size:17px;font-weight:500;line-height:1.4;
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq[open] summary{color:#fff}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq[open] summary:focus-visible{outline-color:#fff}

/* plus that becomes a minus */
.faq-icon{position:relative;flex:0 0 auto;width:14px;height:14px}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:2px;
  background:var(--ink);transition:transform .2s ease,background .18s ease;
}
.faq-icon::after{transform:rotate(90deg)}
.faq[open] .faq-icon::before,.faq[open] .faq-icon::after{background:#fff}
.faq[open] .faq-icon::after{transform:rotate(0deg)}

.faq-body{padding:0 20px 20px}
.faq-body p{font-size:16px;line-height:1.65;color:var(--muted)}
.faq[open] .faq-body p{color:rgba(255,255,255,.78)}

/* --- Footer --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:#fff;padding:clamp(44px,5.6vw,68px) 0 clamp(36px,4vw,48px)}
.site-footer{text-align:center}
.footer-logo{height:clamp(36px,5.6vw,46px);width:auto;display:block;margin:0 auto clamp(18px,2.4vw,24px)}
.footer-line{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.4vw,25px);line-height:1.35;color:rgba(255,255,255,.88);
  max-width:34ch;margin:0 auto clamp(22px,2.8vw,30px);
}
.footer-legal{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:16px;color:rgba(255,255,255,.55);
}
.footer-legal a{display:inline-flex;align-items:center;min-height:48px;color:rgba(255,255,255,.78);text-decoration:none}
.footer-legal a:hover{color:#fff;text-decoration:underline}

/* --- Scroll reveal -------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .faq,.faq-icon::before,.faq-icon::after{transition:none}
}

/* --- Wider screens --------------------------------------------------------
   Most of the scale is handled by clamp() above, so this is only for things
   that genuinely change shape rather than size: the bio going side by side,
   and the footer legal row going horizontal. The bio waits until 900px
   because a 300px portrait beside text is cramped on a tablet.
   -------------------------------------------------------------------------- */
@media (min-width:760px){
  .card-num{font-size:clamp(34px,3.4vw,40px)}
  .faq summary{padding:18px 22px;font-size:17.5px}
  .faq-body{padding:0 22px 22px}
  .footer-legal{flex-direction:row;justify-content:center;gap:28px;align-items:center}
}

@media (min-width:900px){
  .bio{display:grid;grid-template-columns:clamp(240px,27%,320px) 1fr;gap:clamp(28px,3.6vw,44px);align-items:start}
  .bio-photo{margin-bottom:0}
}

/* Keep the hero readable on short landscape phones, where a tall min-height
   would push the sub-heading off screen entirely. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0;padding:64px 0 40px}
}

/* ==========================================================================
   Booking / VSL page only
   Everything above is shared with the confirmation page so the two cannot
   drift apart. Everything below exists only here.
   ========================================================================== */

/* Mobile breathing room. The hero headline inherits .dual's 1.06 line-height,
   which is right for a two or three line desktop headline and reads as a wall
   of text at five or six lines on a phone. Smaller type at looser leading
   occupies almost exactly the same vertical space while being far easier to
   read, so this costs nothing against the above-the-fold budget. */
@media (max-width:759px){
  .container{padding-left:24px;padding-right:24px}
  .hero h1{font-size:clamp(27px,7.3vw,33px);line-height:1.18;margin-bottom:24px}
  .step{font-size:16.5px;line-height:1.75}
  .step-tag{padding:5px 12px;margin-right:10px}


}

/* Short phones. An iPhone SE is 375x667 with the browser chrome, and older
   Androids are 360x640. The headline runs to six or seven lines there, which
   pushed the video past the fold. Tighten the stack for those only. */
@media (max-width:759px) and (max-height:700px){
  .hero{padding-top:84px;padding-bottom:18px}
  .hero h1{font-size:27px;margin-bottom:14px}
  .step{font-size:15.5px;line-height:1.5}
  .step-tag{font-size:12px;padding:5px 11px}
  .vsl{width:min(880px, 100%, calc(34svh * 16 / 9))}
}

/* --- Buttons ---------------------------------------------------------------
   Pill, arrow, matching the main site's CTA treatment.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 30px;
  font-size:17px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;border-radius:999px;
  transition:transform .18s ease,opacity .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-arrow{transition:transform .18s ease}
.btn:hover .btn-arrow{transform:translateX(3px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{opacity:.92}
.btn-dark{background:var(--ink);color:#fff}

.hero-note{
  margin-top:14px;
  font-size:16px;
  color:rgba(255,255,255,.62);
}

/* Short desktop windows (a 13in laptop with the browser chrome on screen is
   about 720-780px tall) are the only case where the video ran past the fold.
   Tighten the stack above it just for those, rather than shrinking the video
   everywhere or crowding the copy on screens that have the room. */
@media (min-width:760px) and (max-height:820px){
  .hero{padding-top:clamp(76px,7vw,92px);padding-bottom:20px}
  .hero h1{font-size:clamp(30px,3.9vw,44px);margin-bottom:16px}
  .step{line-height:1.55;font-size:17px}
}

/* --- Booking section (now directly under the hero) -------------------------- */
.section--book{
  background:var(--card);
  padding-top:clamp(36px,4.6vw,56px);
}
.step--dark{color:var(--ink-2)}
.step--dark .step-tag{background:var(--ink);color:#fff}
.section--book .lede{margin-bottom:clamp(22px,2.8vw,32px)}

/* --- Calls to action further down the page --------------------------------- */
.cta-row{margin-top:clamp(30px,4vw,44px);text-align:center}

/* --- Calendar --------------------------------------------------------------
   GHL's form_embed.js resizes the iframe to its content, so the min-height
   here is only a holding size to stop the page jumping before it loads.
   -------------------------------------------------------------------------- */
/* GHL's form_embed.js sets the iframe to position:absolute. In a static
   wrapper that collapses the wrapper to zero height and the calendar
   disappears. So the wrapper is a positioned, explicitly sized box and the
   iframe fills it absolutely. The layout is then identical whether or not
   that script loads, which also means it cannot break if GHL changes it. */
.calendar{
  position:relative;
  height:clamp(740px,118vw,820px);
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  max-width:900px;
  margin:0 auto;
  box-shadow:0 18px 50px -30px rgba(0,0,0,.3);
}
.calendar-skeleton{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--muted);
  /* hidden the moment the real iframe lands on top of it */
}
.calendar.is-loaded .calendar-skeleton{display:none}
.calendar iframe{
  position:absolute;inset:0;
  display:block;width:100%;border:0;
  /* !important because form_embed.js writes an inline height onto the iframe
     (936px on a 390px screen) which would otherwise overflow the box and be
     clipped out of reach. Pinned to the wrapper, the calendar scrolls inside
     its own frame instead of hiding its bottom rows. */
  height:100%!important;
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-arrow,.vsl-play{transition:none}
  .btn:hover{transform:none}
}