/* Heal Within Collective - static rebuild of the Canva site.
   Desktop (>= 900px): each section is a 1366 x 768 "artboard" scaled to the window
   width, with every element placed at its exact Canva position (--x, --y, --w, --h in
   Canva px) and font size (--fs in Canva px). Below 900px the same content reflows
   into a single stacked column. */

@font-face { font-family: "Playfair Display"; src: url("assets/fonts/playfair-display-var.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-var.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Alegreya Sans SC"; src: url("assets/fonts/alegreya-sans-sc-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("assets/fonts/open-sauce-sans-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
/* Stand-in for Canva's "Beautifully Delicious Sans" (not freely licensed for web use). */
@font-face { font-family: "HWC Display Sans"; src: url("assets/fonts/montserrat-var.woff") format("woff"); font-weight: 100 900; font-display: swap; }

:root {
  --sand: #dbd1bd;
  --olive: #434a00;
  --ink: #272727;
  --brown: #764d40;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --sauce: "Open Sauce Sans", "Inter", Arial, sans-serif;
  --smallcaps: "Alegreya Sans SC", "Alegreya Sans", Georgia, sans-serif;
  --script: "Beautifully Delicious Sans", "HWC Display Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--sans); line-height: 1.4; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; } /* keep true aspect ratio when only a width is set */
h1, h2, h3, p, ul { margin: 0; font-weight: 400; }
h2.serif { line-height: 1.15; }
.hero-sub { font-weight: 300; }
a { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- shared type ---------- */
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }
.olive { color: var(--olive); }
.ink { color: var(--ink); }
.center { text-align: center; }
.book-link { font-family: var(--serif); color: var(--olive); text-decoration: underline; text-align: center; display: inline-block; }
.book-link:hover, .cta:hover { opacity: .75; }

section { position: relative; overflow: hidden; background: var(--sand); }
.hero { background: #fff; }

/* ---------- desktop artboards ---------- */
@media (min-width: 900px) {
  section { container-type: inline-size; aspect-ratio: 1366 / 768; }
  .u { --k: calc(100cqw / 1366); }
  section .u, section .abs {
    position: absolute;
    left: calc(var(--x) * 100cqw / 1366);
    top: calc(var(--y) * 100cqw / 1366);
    width: calc(var(--w) * 100cqw / 1366);
  }
  section [style*="--h"] { height: calc(var(--h) * 100cqw / 1366); }
  section [style*="--fs"] { font-size: calc(var(--fs) * 100cqw / 1366); }
  .m-only { display: none !important; }
  .contents-d { display: contents; }
  .booking .slot { display: contents; }
  .why .para { line-height: 1.35; }
  /* Match Canva's video box so the glowing sun sits inside the logo. */
  /* The sun stage is only a box on mobile. On desktop it disappears and its children
     keep their exact artboard positions; the video sits behind everything as before. */
  .sun-stage { display: contents; }
  .hero { isolation: isolate; }
  .hero .hero-video { z-index: -1; }
  .hero .hero-video { inset: auto; left: calc(-1 * 100cqw / 1366); top: calc(2 * 100cqw / 1366); width: calc(1418 * 100cqw / 1366); height: calc(839 * 100cqw / 1366); object-position: 30% 50%; }
  .future-card { padding: calc(28 * 100cqw / 1366); }
  .future-card h3 { margin-bottom: calc(14 * 100cqw / 1366); }
  .future-cta a { margin-top: calc(12 * 100cqw / 1366); }
}

/* ---------- hero ---------- */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Logo: never stretched, always its real 900 x 899 shape. */
.logo { object-fit: contain; aspect-ratio: 900 / 899; }
.brand { display: block; font-family: var(--smallcaps); color: var(--brown); text-align: center; line-height: 1.2; white-space: nowrap; }
.hero-tagline { font-family: var(--sauce); font-weight: 500; color: #000; text-align: center; line-height: 1.37; }
.hero-sub { font-family: var(--script); color: #000; text-align: center; line-height: 1.3; }
.cta { display: flex; align-items: center; justify-content: center; background: var(--sand); color: #000; font-family: var(--sauce); font-weight: 500; text-transform: uppercase; text-decoration: underline; letter-spacing: .02em; line-height: 1.4; }

/* ---------- images ---------- */
.cover { object-fit: cover; width: 100%; height: 100%; }
.frame { overflow: hidden; border-radius: calc(8.56 * 100cqw / 1366); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.pillar-label { color: #fff; font-family: var(--sans); text-align: center; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,.25); }

/* ---------- schedule ---------- */
.card { background: #fff; border: 1.5px solid var(--olive); border-radius: calc(10 * 100cqw / 1366); }
.day { font-family: var(--serif); color: var(--olive); text-align: center; line-height: 1.2; }
.card-title { font-family: var(--sans); color: var(--ink); text-align: center; line-height: 1.2; }
.card-text { font-family: var(--sans); color: var(--ink); text-align: center; line-height: 1.4; }

/* ---------- booking ---------- */
.booking .opt { font-family: var(--sans); color: var(--ink); line-height: 1.1; }

.book-sub { line-height: 1.25; }
.book-about { line-height: 1.55; text-align: center; }
.book-about p + p { margin-top: .7em; }

/* ---------- future offerings ---------- */
.eyebrow { font-family: var(--sans); color: var(--olive); text-transform: uppercase; letter-spacing: .18em; font-weight: 500; line-height: 1.4; }
.future-intro { line-height: 1.5; }
.future-card h3 { line-height: 1.25; }
.future-card p { line-height: 1.5; }
.future-cta p { line-height: 1.5; }
.future-cta a { display: inline-block; }

/* ---------- why ---------- */
.why ul { padding-left: 1.7em; list-style: disc; }

/* ---------- testimonials ---------- */
.quote-mark { width: calc(56 * 100cqw / 1366); }
.t-name { font-family: var(--serif); color: var(--ink); }
.t-text { font-family: var(--sans); color: var(--ink); line-height: 1.4; }

/* ---------- contact ---------- */
.corner { pointer-events: none; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* ---------- mobile / tablet: stacked layout ---------- */
@media (max-width: 899.98px) {
  .d-only { display: none !important; }
  section { padding: 56px 24px; }
  /* width: 100% so flex and grid items fill the column (pillar photos had collapsed to 0 wide). */
  section .u { position: relative; margin: 0 auto; max-width: 560px; width: 100%; }
  [style*="--fs"] { font-size: clamp(14px, calc(var(--fs) * 1px * var(--m, .8)), 64px); }

  /* Soft cream that matches the misty edges of the sun video. */
  .hero { container-type: inline-size; --lw: min(62cqw, 280px); background: linear-gradient(to bottom, #f1ebe6 0%, #f8f4ee 45%, #fbf8f2 100%); }
  .hero { padding: 40px 24px 48px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .hero > * { z-index: 1; }
  .hero .brand { --m: .45; white-space: normal; }
  .hero .brand + .brand { margin-top: -14px; }
  /* Sun stage: a full-bleed band around the logo. The video inside is sized and placed
     relative to the logo width (--lw) with the same ratios as the approved desktop,
     so the glowing sun sits in the ring at about 0.9 of the logo width.
     Desktop ratios (Canva px, logo 336 wide): video drawn 1491.6 x 839 at left -23.07,
     top 2; logo at 549.5, 216.5. So video = 4.4392 x 2.4970 logo widths, its left edge
     1.7041 logo widths left of the logo, its top 0.6384 logo widths above it. */
  .sun-stage { position: relative; width: calc(100% + 48px); max-width: none; margin: 0 -24px; height: calc(var(--lw) * 1.8); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%); }
  .sun-stage .hero-video, .sun-stage::before { position: absolute; inset: auto; max-width: none; z-index: 0;
    width: calc(var(--lw) * 4.4392); height: calc(var(--lw) * 2.4970);
    left: calc(50% - var(--lw) * 2.2041); top: calc(50% - var(--lw) * 1.1378); object-fit: fill; }
  .hero .logo { position: absolute; z-index: 1; margin: 0; max-width: none; width: var(--lw); height: auto;
    left: calc(50% - var(--lw) * .5); top: calc(50% - var(--lw) * .4994); }
  .hero .brand + .brand { margin-bottom: -6px; }
  .hero-tagline { --m: .75; }
  .hero-sub { --m: .8; }
  .cta { padding: 14px 22px; width: 100%; max-width: 360px; }
  .hero .ndis { width: 220px; }

  .focus { display: flex; flex-direction: column; gap: 24px; }
  .focus .qr { width: 120px; order: 5; }
  .focus .photo { height: auto; aspect-ratio: 606 / 358; width: 100%; }
  .focus .group > * + * { margin-top: 16px; }
  .focus .group p + p { margin-top: 12px; }

  .pillars { display: grid; gap: 18px; }
  .pillars h2 { margin-bottom: 8px; }
  .pillar { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 393 / 300; }
  .pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pillar .pillar-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 30px; }

  .schedule { display: flex; flex-direction: column; gap: 18px; }
  .schedule .card { padding: 22px 20px; border-radius: 12px; max-width: 420px; width: 100%; margin: 0 auto; }
  .schedule .card > * + * { margin-top: 10px; }
  .schedule .day { font-size: 26px; margin-bottom: 6px; }
  .schedule .card-title { font-size: 20px; }
  .schedule .card-text { font-size: 15px; }

  .booking { display: flex; flex-direction: column; gap: 22px; }
  .booking .slot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .booking .opt { --m: .8; text-align: center; }
  .booking .book-link { font-size: 24px; }
  .booking .book-sub { --m: .8; }
  .booking .book-about { --m: .85; }
  .booking .slot + .slot { margin-top: -4px; }

  .future { display: flex; flex-direction: column; gap: 18px; }
  .future .eyebrow { --m: .8; margin-bottom: -10px; }
  .future-intro { --m: .85; }
  .future-card { padding: 22px 20px; border-radius: 12px; width: 100%; }
  .future-card h3 { --m: .85; margin-bottom: 10px; }
  .future-card p { --m: 1; }
  .future-cta p { --m: .85; }
  .future-cta a { --m: .75; margin-top: 10px; overflow-wrap: anywhere; }

  .why { display: flex; flex-direction: column; gap: 24px; }
  .why .frame { height: auto; aspect-ratio: 683 / 614; border-radius: 10px; }
  .why .group > * + * { margin-top: 16px; }
  .why .group { --m: .7; }

  .testimonials { display: flex; flex-direction: column; gap: 32px; }
  .testimonials .t { display: flex; flex-direction: column; gap: 12px; }
  .testimonials .t .t-name { order: 3; }
  .quote-mark { width: 48px; }

  .contact { padding-top: 0; display: flex; flex-direction: column; gap: 22px; }
  .contact .photo { margin: 0 -24px; max-width: none; width: calc(100% + 48px); height: 240px; }
  .contact .corner { display: none; }
}
@media (max-width: 899.98px) {
  .contact .photo img { width: 100%; height: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background: #fff url("assets/video/hero-poster.jpg") center / cover no-repeat; }
}
/* Mobile, reduced motion: show the still poster in the sun stage, lined up exactly like the video. */
@media (prefers-reduced-motion: reduce) and (max-width: 899.98px) {
  .hero { background: linear-gradient(to bottom, #f1ebe6 0%, #f8f4ee 45%, #fbf8f2 100%); }
  .sun-stage::before { content: ""; background: url("assets/video/hero-poster.jpg") 0 0 / 100% 100% no-repeat; }
}

/* One on One only, plus the first session explanation: custom section heights on desktop */
@media (min-width: 900px) {
  section.booking { aspect-ratio: 1366 / 660; }
  section.future { aspect-ratio: 1366 / 800; }
}