/* ===========================================================
   Organized Minds — base styles layered on top of Tailwind CDN
   =========================================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Montserrat', 'Inter', sans-serif;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #10406E;
  color: #F1EDEA;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 0.5rem 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Header ---------- */
#site-header {
  background: rgba(241, 237, 234, 0);
  backdrop-filter: blur(0px);
}
#site-header.scrolled {
  background: rgba(241, 237, 234, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(10, 52, 93, 0.08);
}

.nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #658990;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}
.nav-link:hover {
  color: #658990;
}

.mobile-nav-link {
  transition: color 0.2s ease;
}
.mobile-nav-link:hover {
  color: #658990;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: #10406E;
  margin: 3px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
#nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
#nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #658990;
  color: #F1EDEA;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: 0.7rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  box-shadow: 0 6px 16px rgba(101, 137, 144, 0.28);
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: #54737A;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(101, 137, 144, 0.36);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: 0.7rem;
  color: #10406E;
  background: transparent;
  border: 1.5px solid #A8C0D6;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.btn-secondary:hover {
  border-color: #10406E;
  background: rgba(16, 64, 110, 0.06);
  transform: translateY(-2px);
}

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #54737A;
}
.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #658990;
  display: inline-block;
}

/* ---------- Hero wordmark (SVG lockup) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#om-lockup {
  overflow: visible;
}
#om-lockup text {
  /* GSAP drives x/y as transforms; keep the box tight around the glyph. */
  dominant-baseline: alphabetic;
}

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #EEF3F8 0%, #F1EDEA 55%, #F1EDEA 100%);
}
#hero-canvas {
  pointer-events: none;
  opacity: 0.9;
}

/* ---------- Cards ---------- */
.shadow-card {
  box-shadow: 0 4px 14px rgba(10, 52, 93, 0.06), 0 1px 3px rgba(10, 52, 93, 0.06);
}

.service-card {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 10px rgba(10, 52, 93, 0.06);
  border: 1px solid rgba(16, 64, 110, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(10, 52, 93, 0.12);
}
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 0.75rem;
  background: #EEF3F8;
  color: #10406E;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon svg {
  width: 26px;
  height: 26px;
}

.team-card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(10, 52, 93, 0.06);
  border: 1px solid rgba(16, 64, 110, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(10, 52, 93, 0.12);
}
.team-photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #D6E1EC 0%, #A8C0D6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10406E;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

.why-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(241, 237, 234, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 -4px 16px rgba(10, 52, 93, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-cta-bar.visible {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar {
    transition: none;
  }
}

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 2rem 1.85rem;
  box-shadow: 0 2px 10px rgba(10, 52, 93, 0.06);
  border: 1px solid rgba(16, 64, 110, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(10, 52, 93, 0.12);
}
.testimonial-card blockquote {
  color: rgba(46, 57, 68, 0.85);
  line-height: 1.7;
  font-size: 0.98rem;
  position: relative;
  padding-left: 1.1rem;
  border-left: 3px solid #658990;
}
.testimonial-card figcaption {
  margin-top: 1.25rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #10406E;
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(16, 64, 110, 0.1);
  border-radius: 0.85rem;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.15rem 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #0A345D;
}
.faq-icon {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: #658990;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::before {
  width: 14px;
  height: 2px;
}
.faq-icon::after {
  width: 2px;
  height: 14px;
  transition: transform 0.3s ease;
}
.faq-item.open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-answer-inner p {
  padding: 0 1.4rem 1.3rem;
  color: rgba(46, 57, 68, 0.75);
  line-height: 1.65;
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-icon::after {
    transition: none;
  }
}

/* ---------- Form ---------- */
.field label {
  display: block;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #0A345D;
  margin-bottom: 0.45rem;
}
.field input,
.field textarea {
  width: 100%;
  border: 1.5px solid #D6E1EC;
  border-radius: 0.65rem;
  padding: 0.75rem 1rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #2E3944;
  background: #F7F4F1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #1A5285;
  box-shadow: 0 0 0 3px rgba(26, 82, 133, 0.15);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(241, 237, 234, 0.4);
  border-top-color: #F1EDEA;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
#submit-btn.loading .btn-spinner {
  display: inline-block;
}
#submit-btn.loading .btn-label {
  opacity: 0.85;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

#form-status.success { color: #10406E; font-weight: 600; }
#form-status.error { color: #54737A; font-weight: 600; }

/* ---------- Scroll reveal (GSAP-driven; JS toggles .is-visible) ---------- */
.reveal,
.reveal-card {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.is-visible,
.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.no-js .reveal,
.no-js .reveal-card {
  opacity: 1;
  transform: none;
}

/* Nav link active section state */
.nav-link.active {
  color: #658990;
}
.nav-link.active::after {
  transform: scaleX(1);
}

/* Focus visibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #1A5285;
  outline-offset: 2px;
}

/* ---------- Consultation dialog ----------
   Native <dialog>, so the browser owns the focus trap, Escape and inerting
   the page behind it. Everything here is presentation only. */
.consult-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(640px, calc(100vw - 2rem));
  width: 100%;
  max-height: calc(100dvh - 2rem);
  overflow: visible;
}
.consult-dialog::backdrop {
  background: rgba(14, 31, 50, 0.55);
  backdrop-filter: blur(3px);
}

.consult-panel {
  position: relative;
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 0 1.75rem 1.75rem;
  box-shadow: 0 24px 60px rgba(14, 31, 50, 0.28);
  max-height: calc(100dvh - 2rem);
  overflow: hidden auto;
}
@media (min-width: 640px) {
  .consult-panel {
    padding: 0 2.5rem 2rem;
  }
}

/* The coaches, leading the panel. Full-bleed to the panel edges via negative
   margins that cancel its horizontal padding; aspect-ratio matches the 2:1
   artwork so `cover` never crops a face off. Height therefore tracks width,
   and the form below always starts clear of their chins. */
.consult-hero {
  position: relative;
  margin: 0 -1.75rem;
  /* Crop frame. The height cap lives here, not on the artwork: aspect-ratio
     and max-height on the same box makes the browser shrink the *width* to
     hold the ratio, which pulled the band in from the panel edges. Clamping a
     plain wrapper and letting it crop keeps the band full-bleed. */
  max-height: 30dvh;
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 0 0;
}
@media (min-width: 640px) {
  .consult-hero {
    margin: 0 -2.5rem;
  }
}

/* The artwork itself, sized purely by its own 2:1 so it always spans the full
   panel width. What the frame above cuts is the bottom - chins and shoulders,
   never the faces. */
.consult-hero-img {
  aspect-ratio: 2 / 1;
  background-image: url('../assets/consult-team.webp?v=2');
  background-size: cover;
  background-position: center top;
}

/* Faded into the panel rather than sitting at a flat opacity: held back where
   the heading crosses it, and solid white by the chin line so the form never
   reads over an image. */
.consult-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(255, 255, 255, 0.87) 78%,
    #FFFFFF 100%
  );
}

/* Rides across the foreheads. Positioned as a share of the band's own height,
   so it holds its place against the faces at every panel width. */
.consult-title {
  position: absolute;
  z-index: 1;
  top: 21%;
  left: 1.75rem;
  right: 1.75rem;
  text-align: center;
  color: #1C3A5C;
  font-size: clamp(1.75rem, 5.2vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
@media (min-width: 640px) {
  .consult-title {
    left: 2.5rem;
    right: 2.5rem;
  }
}

.consult-content {
  position: relative;
  z-index: 1;
}

/* Condensed sign-off, sitting over the strongest part of the watermark. */
.consult-note {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(28, 58, 92, 0.12);
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(46, 57, 68, 0.75);
}
.consult-note-names {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1C3A5C;
  margin-bottom: 0.15rem;
}

.consult-close {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  color: #1C3A5C;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, color 0.2s ease;
}
.consult-close:hover {
  background: #EDF1F6;
  color: #1C3A5C;
}

/* Entrance. The backdrop and panel share one duration so they arrive together. */
@media (prefers-reduced-motion: no-preference) {
  .consult-dialog[open] {
    animation: consult-panel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .consult-dialog[open]::backdrop {
    animation: consult-backdrop-in 0.32s ease;
  }
}
@keyframes consult-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes consult-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Consultation dialog: short windows ----------
   The form and sign-off come to a fixed ~580px, so on a laptop the band alone
   cannot shrink enough to keep the panel inside the viewport - it would have
   to collapse to a strip before the faces read at all. These tighten the
   content instead, in two steps, so the dialog stays a single unscrolled box
   down to roughly 640px of viewport height. */
@media (max-height: 940px) {
  .consult-panel { padding-bottom: 1.25rem; }
  .consult-form { margin-top: 1rem; }
  .consult-form .grid { gap: 0.8rem; }
  .consult-form .field.mt-4 { margin-top: 0.7rem; }
  .consult-form textarea { height: 4.6rem; min-height: 0; }
  .consult-form .btn-primary { margin-top: 1rem; }
  .consult-note {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    font-size: 0.8rem;
    line-height: 1.45;
  }
  .consult-note-names { font-size: 1.05rem; }
}

@media (max-height: 780px) {
  .consult-hero { max-height: 26dvh; }
  .consult-form textarea { height: 3.9rem; }
  .consult-form .field.mt-4 { margin-top: 0.55rem; }
  .consult-note { margin-top: 0.75rem; padding-top: 0.6rem; }
  /* Names only - the descriptive half is the first thing worth losing. */
  .consult-note-detail { display: none; }
}

@media (max-height: 660px) {
  .consult-hero { max-height: 22dvh; }
  .consult-title { top: 16%; font-size: clamp(1.4rem, 4.4vw, 1.8rem); }
}

/* ---------- Form privacy line ----------
   Sits with the form rather than buried in a policy page: the reassurance is
   worth most at the moment someone is deciding whether to type their child's
   details in. */
.form-privacy {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(46, 57, 68, 0.62);
}

/* In the dialog it joins the existing fine print. Ordered after the marketing
   line so that when short windows drop that line (see the max-height rules
   above), the privacy line is the one that stays. */
.consult-note-privacy {
  display: block;
  margin-top: 0.4rem;
  color: rgba(46, 57, 68, 0.62);
}

/* Narrow screens need the same trim as short ones, for a different reason:
   the viewport is tall enough to miss the max-height rules above, but the
   name/email pair stacks and the panel grows past the fold anyway. */
@media (max-width: 640px) {
  .consult-note-detail { display: none; }
  .consult-form .field.mt-4 { margin-top: 0.6rem; }
  .consult-form textarea { height: 4.2rem; min-height: 0; }
  .consult-form .btn-primary { margin-top: 0.9rem; }
}

/* On a phone the dialog becomes a full-screen sheet. A four-field form plus
   the photo band cannot fit a 667px-tall screen without squeezing the fields
   to the point of being unpleasant to type in, so rather than fight it the
   panel takes the whole viewport: scrolling then reads as a page rather than
   as a cramped box with a scrollbar, which is the standard mobile pattern. */
@media (max-width: 640px) {
  .consult-dialog {
    /* inset alone defines the box. Setting width/height as well over-constrains
       it - the browser then honours width and top/left and drops right/bottom,
       leaving the sheet a few px short of each edge. */
    inset: 0;
    margin: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
  }
  .consult-panel {
    border-radius: 0;
    min-height: 100dvh;
    max-height: none;
    padding-bottom: 2rem;
  }
  .consult-hero {
    border-radius: 0;
    /* more room for the faces now the sheet is full height */
    max-height: 34dvh;
  }
  .consult-close {
    background: rgba(255, 255, 255, 0.85);
  }
}