/* =========================================================
   EtherealMinds — Experience v2 (single screen)
   Loads ON TOP of styles.css. Only the new pieces live here:
   the one screen home (promise + testimonials + CTA), the breathing
   CTA, the founders photo on the calendar, and the contact form.
   Everything else (carousel, slot chips, day nav, buttons,
   loader, palette) is inherited unchanged from styles.css.
   ========================================================= */

/* ---- shell: styles.css locks the page; v2 lets it breathe ---- */
html, body { height: auto; min-height: 100%; overflow: visible; }
body { overflow-x: hidden; }

#home, #flow {
  position: relative;
  z-index: 2;                     /* above the fixed .vignette / .aurora layers */
}
#home.is-hidden { display: none; }

/* ---- the one screen: promise, proof and the button ---- */
#home {
  min-height: 100dvh;             /* dvh, not vh: Meta's in-app browser resizes the bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(56px, 9vh, 78px) 16px clamp(20px, 4vh, 34px);
  text-align: center;
}
#home > * { width: 100%; max-width: 680px; }
#home > section { margin-block: auto; display: flex; flex-direction: column; align-items: center; gap: inherit; }

/* ---- the founders block, ported from etherealmindsdigital.com/system/ ----
   Same treatment (rounded photo, dark gradient caption, "Healthcare only"
   pill), retokenised onto this stylesheet. It sits BELOW the times on the
   calendar: the hour is the decision, the founders are the reassurance you
   read once you have already picked one. */
.founders-hero {
  position: relative;
  margin: 4px auto 0;
  width: 100%;
  max-width: 290px;                 /* deliberately small: the hour is the decision,
                                       this is the reassurance underneath it */
}
.fh-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;              /* wide, so it stays a complement and never pushes the times up */
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--cream2);
  box-shadow: 0 24px 60px -28px rgba(11,26,46,.55);
}
.fh-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: center 26%;      /* frames the two of them, not the full body */
}
.fh-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 14px 12px;
  text-align: left;
  background: linear-gradient(180deg, rgba(11,26,46,0) 0%, rgba(11,26,46,.72) 55%, rgba(11,26,46,.93) 100%);
}
.fh-name {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  color: #fff; letter-spacing: -.01em;
}
.fh-role {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.4;
  color: rgba(255,255,255,.78);
}
.fh-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 100px;
  background: rgba(255,255,255,.93);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px -4px rgba(11,26,46,.28);
  font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink);
}
.fh-badge i { width: 7px; height: 7px; border-radius: 50%; background: #4b8f6b; display: block; }

/* the round avatars use a square face crop of the same shoot: the full body
   squeezed into 52px turned two people into two dark specks */
.founders img { object-position: center !important; }

/* the founders byline on the home screen: identity in one compact row, so it
   costs ~80px instead of a whole screen and a tap */
.home-founders { width: auto !important; max-width: 470px; margin: 0 auto; }
.home-founders img { width: 52px !important; height: 52px !important; }
.home-founders .ftxt { font-size: clamp(.78rem, 2.5vw, .86rem); }
@media (max-height: 700px) {
  .home-founders img { width: 42px !important; height: 42px !important; }
  .home-founders { padding: 9px 14px; }
}

/* the promise carries the screen, so it is tighter than the v1 headline */
#home .headline {
  font-size: clamp(1.55rem, 5.8vw, 2.7rem);
  max-width: 17ch;
  margin: 0 auto;
}
#home .eyebrow { margin: 0 auto; }

/* The proof is the point of this screen, so give the video every pixel:
   the arrows float ON the stage instead of stealing ~96px of width, and the
   stage takes its height from the slide's own 16/9 instead of a fixed box,
   which is what was leaving a band of dead space above and below. */
#home .vcarousel { margin: 0 auto; position: relative; }
#home .vc-stagewrap {
  flex: 1 1 100%;
  height: auto;
  aspect-ratio: 2.17 / 1;           /* = 1 / (slide 82% x 9/16) */
  max-height: 34vh;
}
#home .vc-slide { width: 82%; }
#home .vc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}
#home .vc-prev { left: 0; }
#home .vc-next { right: 0; }
#home .vc-arrow:hover { transform: translateY(-50%) scale(1.08); }
#home .vc-arrow:active { transform: translateY(-50%) scale(.95); }
#home .vc-meta { min-height: 2.6em; gap: 0; }
#home .vc-name { font-size: clamp(.86rem, 2.4vw, 1rem); }
#home .vc-stat { font-size: clamp(1rem, 3.2vw, 1.18rem); }

/* ---- the CTA: bigger, breathing, with an occasional sweep ---- */
.cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.btn-hero {
  font-size: clamp(1.02rem, 4.2vw, 1.26rem);
  padding: clamp(15px, 2.2vh, 20px) clamp(28px, 7vw, 42px);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* the reflector sweep, every 6s */
.btn-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-130%);
  z-index: 1;
}
.btn-hero.is-live::after { animation: heroSweep 6s var(--ease) 1.2s infinite; }
@keyframes heroSweep { 0%{transform:translateX(-130%)} 22%,100%{transform:translateX(130%)} }
/* breathing starts only once they have had a moment with the proof */
.btn-hero.is-live { animation: heroBreath 3s var(--ease) infinite; }
@keyframes heroBreath { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }
.btn-hero.is-live:hover, .btn-hero.is-live:active { animation: none; }
.btn-hero:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.cta-note { font-size: clamp(.78rem, 2.2vw, .88rem); color: var(--ink-dim); }

/* ---- booking + contact views ---- */
#flow { display: none; min-height: 100dvh; padding: 64px 16px 40px; }
#flow.is-on { display: flex; flex-direction: column; align-items: center; }
#flow .view { margin-block: auto; }
.view { width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.hold-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--gold); background: var(--gold-soft);
  color: var(--ink); border-radius: 999px; padding: 9px 17px;
  font-size: .87rem; font-weight: 600;
}

/* form: 4 fields, all visible, correct mobile keyboards */
.form-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 430px; text-align: left; }
.f-row { display: flex; flex-direction: column; gap: 5px; }
.f-row label { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); }
.f-in {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: rgba(255,255,255,.75);
  border-radius: 12px; padding: 0 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.f-in input, .f-in select {
  border: none; background: transparent; outline: none;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 14px 0; width: 100%; min-width: 0;
}
.f-in select { width: auto; flex: none; cursor: pointer; }
.f-prefix { color: var(--ink-dim); font-size: 1rem; flex: none; }
.f-err { font-size: .8rem; color: #d04a5a; min-height: 1em; }
.f-err:empty { min-height: 0; }

.confirm-card { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.6); padding: 16px 20px; }
.cc-when { font-family: var(--serif); font-size: 1.7rem; color: var(--accent); }
.cal-add { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cal-add-lbl { font-size: .85rem; color: var(--ink-dim); }
.cal-btns { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.cal-btn { border: 1px solid var(--line); border-radius: 999px; padding: 11px 19px; font-size: .9rem; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.7); transition: .2s var(--ease); }
.cal-btn:hover { border-color: var(--accent); color: var(--accent); }

.back-link { background: none; border: none; color: var(--ink-dim); font-size: .87rem; cursor: pointer; text-decoration: underline; padding: 6px; font-family: var(--sans); }
.back-link:hover { color: var(--accent); }

/* The v1 shrank the whole screen with a JS auto-fit to make the slot grid
   fit. v2 has no auto-fit, so on a narrow phone the fixed 3 column grid
   clipped the third time ("4:30" with the PM cut off, inside an
   overflow:hidden stage). auto-fit drops to 2 columns on its own instead of
   cutting a time in half, and the arrows take less room to begin with. */
#flow .period-times { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
#flow .day-periods .period-times { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
#flow .slot-chip.big { font-size: clamp(.9rem, 3.6vw, 1rem); padding: 13px 4px; }
@media (max-width: 420px) {
  #flow .day-nav { gap: 4px; }
  #flow .day-arrow { width: 34px; height: 34px; font-size: 1.2rem; }
  #flow .day-card { padding: 16px 10px; }
}

/* very short screens: drop the least load bearing pieces first */
@media (max-height: 700px) {
  #home .vc-dots, #home .vc-count { display: none; }
  .cta-note { display: none; }
}

/* respect the OS setting: no breathing, no sweep */
@media (prefers-reduced-motion: reduce) {
  .btn-hero.is-live, .btn-hero.is-live::after { animation: none !important; }
}