/* =============================================================
   THEME — more air, larger type, no hard borders.
   Loaded on every page except contact.html, AFTER the base
   stylesheets, and overrides them.

   1. Spacing + type scale      2. Card treatment
   3. Section rhythm (cream / cream-warm alternation)
   4. Homepage: hero, USPs, stats band, gallery, closing
   5. Inner-page upgrades       6. Motion
   ============================================================= */

/* ---------- 1. SPACING + TYPE ---------- */
:root {
  /* 80px on a phone, reaching the full 120px by ~1280px wide */
  --section-y: clamp(5rem, 3.2rem + 5.4vw, 7.5rem);
  --head-gap: 3rem;                 /* heading -> content, desktop */

  --maxw-text: 62ch;

  --fs-body: 1.125rem;              /* 18 */
  --lh-body: 1.75;

  /* one step up from the base scale */
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h4:   clamp(1.3125rem, 1.24rem + 0.35vw, 1.5rem);
  --fs-h3:   clamp(1.4375rem, 1.3rem + 0.65vw, 1.875rem);
  --fs-h2:   clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);   /* ~38px desktop */
  --fs-h1:   clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-display: clamp(2.125rem, 1.55rem + 2.9vw, 3.75rem);

  /* unhurried */
  --t-reveal: 600ms;
  --stagger: 100ms;

  /* the only card elevation the theme uses */
  --sh-soft: 0 2px 20px rgba(0, 0, 0, .04);
}

@media (max-width: 767px) {
  :root { --head-gap: 2rem; }       /* 32px on mobile */
}

.section-head { margin-bottom: var(--head-gap); }

/* ---------- 2. CARDS: no hard borders anywhere ---------- */
.card,
.quote,
.step,
.week__day,
.form-card,
.lead-card {
  border: 0;
  box-shadow: var(--sh-soft);
  border-radius: var(--r-lg);
}
.card--tint {
  background: var(--sage-tint);
  box-shadow: none;                  /* tint OR shadow, never both */
  border: 0;
}
.compare__card--worry {
  background: var(--sand);
  border: 0;
  box-shadow: none;
}
.compare__card--answer {
  background: var(--white);
  box-shadow: var(--sh-soft);
  border-left: 0;
}
.filter { border-color: transparent; background: var(--white); box-shadow: var(--sh-soft); }
.filter[aria-pressed="true"] { background: var(--sage-deep); box-shadow: none; }

/* 32px gutters between cards in a grid */
.grid, .usp, .team-grid, .steps, .quotes, .care-grid, .lead-team {
  gap: 2rem;
}

/* ---------- 3. SECTION RHYTHM ----------
   Alternate cream / warm cream instead of tinted bands and rules. */
.section--sand,
.section--tint { background: var(--cream-warm); }
.trust { background: var(--cream-warm); }
/* The closing band carries class="section cta-band", so the alternation
   used to repaint it cream while its text stayed white - invisible.
   It keeps its own dark background. */
main > .section:nth-of-type(even):not(.cta-band) { background: var(--cream-warm); }
main > .section:nth-of-type(odd):not(.cta-band)  { background: var(--cream); }
/* explicit wins over the nth-of-type rhythm */
main > .section--dark { background: var(--sage-dark); }
main > .home-price { background: var(--sand); }

/* =============================================================
   4. HOMEPAGE
   ============================================================= */

/* ---- Hero: full bleed, white type on the plain wall, sign on the right ----
   Photo: hero.jpg, the front desk extended to the LEFT (AI-extended
   background, approved by Justin - client to confirm). The extension is a
   plain wall, so the headline sits there and never meets the Sunheal sign
   (x 56-75%, y 26-41% of the photo). Ceiling camera trimmed off. Never
   mirrored. Portrait screens get hero-phone.jpg on top, text below. */
.home-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #221d17;
  color: #fff;
}
.home-hero__bg { position: absolute; inset: 0; }
.home-hero__bg picture { display: block; height: 100%; }
/* The photo is 2.5:1, wider than any screen, so only the sides are trimmed.
   Anchored right of centre so the sign always stays in frame. */
.home-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.home-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  /* dark behind the text on the left, clear over the sign on the right */
  background:
    linear-gradient(90deg, rgba(24,20,15,.74) 0%, rgba(24,20,15,.60) 30%, rgba(24,20,15,.30) 46%, rgba(24,20,15,0) 58%),
    linear-gradient(0deg, rgba(24,20,15,.55) 0%, rgba(24,20,15,0) 40%);
}
.home-hero__inner { position: relative; padding-block: var(--sp-8); }
.home-hero__copy { max-width: min(38rem, 44vw); }
.home-hero h1 {
  color: #fff;
  font-size: var(--fs-display);
  line-height: 1.06;
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 24px rgba(20,16,12,.5);
}
/* the gold highlight does not survive on a photograph — go luminous instead */
.home-hero h1 em { font-style: normal; background: none; color: var(--gold-soft); }
.home-hero__lead {
  color: rgba(255,255,255,.92);
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-6);
  text-shadow: 0 1px 16px rgba(20,16,12,.5);
}
.home-hero .btn-row { margin-bottom: var(--sp-6); }
.home-hero .btn--solid-white { background: var(--white); color: var(--bark); border-color: var(--white); }
.home-hero .btn--solid-white:hover { background: var(--cream); color: var(--bark); }
.home-hero .btn--line-white { background: rgba(24,20,15,.2); color: #fff; border-color: rgba(255,255,255,.8); }
.home-hero .btn--line-white:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.home-hero__trust {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.home-hero__trust span + span::before { content: "· "; opacity: .55; }

/* Portrait screens: the sign-and-desk crop on top, full width, fading into
   a dark panel that carries the text. Nothing ever sits on the sign. */
@media (max-aspect-ratio: 1/1) {
  .home-hero { display: block; min-height: 0; }
  .home-hero__bg { position: relative; inset: auto; }
  .home-hero__bg img { height: auto; aspect-ratio: 1426 / 1263; }
  .home-hero__bg::after { background: linear-gradient(0deg, #221d17 0%, rgba(34,29,23,0) 26%); }
  .home-hero__inner { padding-block: var(--sp-4) var(--sp-7); }
  .home-hero__copy { max-width: none; }
}
@media (max-width: 639px) {
  .home-hero .btn-row .btn { width: 100%; }
}

/* One slow image reveal. Pure CSS — no script, no timer, so the hero
   can never be left blank if JavaScript is slow or blocked. */
/* Scale only, never opacity. An animation that is paused (background
   tab) or that never starts would otherwise leave the hero photograph
   stuck at opacity 0 - a blank hero is a far worse failure than a photo
   that simply did not zoom. */
@keyframes home-hero-in {
  from { transform: scale(1.05); }
  to   { transform: none; }
}
.home-hero__bg img { animation: home-hero-in 1200ms cubic-bezier(.16,1,.3,1) both; }

/* ---- Care cards: no borders, no shadows ---- */
.home-care .card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.home-care .care-card { padding: 0; gap: var(--sp-3); }
.home-care .card--lift:hover { transform: none; box-shadow: none; }
.home-care .care-grid { gap: var(--sp-8) var(--sp-6); }

/* ---- USPs: 3 + 3, one sentence each ---- */
.home-usp { display: grid; gap: var(--sp-8) var(--sp-7); }
@media (min-width: 640px)  { .home-usp { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .home-usp { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-10); } }
.home-usp__item { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-usp__item .ibubble { background: transparent; width: auto; height: auto; color: var(--sage-deep); }
.home-usp__item .ibubble svg { width: 30px; height: 30px; }
.home-usp__item h3 { font-size: var(--fs-h4); margin: 0; }
.home-usp__item p { margin: 0; color: var(--muted); max-width: 30ch; }

/* ---- Stats band: an annual-report footer, not six boxes ---- */
.home-stats {
  border-block: 1px solid var(--line);
  padding-block: var(--sp-7);
  display: grid;
  gap: var(--sp-6) var(--sp-4);
  text-align: center;
}
@media (min-width: 560px) { .home-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .home-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) {
  .home-stats > * + * { border-left: 1px solid var(--line); }
}
.home-stats .stat__num {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.home-stats .stat__label {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 22ch;
  margin-inline: auto;
}
.home-facts {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: none;
  text-align: center;
}
/* Direct children only: a fact can contain config spans of its own
   (the licence line), which must not grow dots of their own. */
.home-facts > span + span::before { content: "· "; opacity: .5; }

/* ---- Timeline: its own world ---- */
.home-day { padding-block: calc(var(--section-y) * 1.35); }

/* ---- Gallery: four images, full bleed on mobile ---- */
.home-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 1024px) { .home-gallery { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.home-gallery .gallery__item { border-radius: var(--r-md); }
@media (max-width: 599px) {
  .home-gallery {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
  }
  .home-gallery .gallery__item { border-radius: 0; aspect-ratio: 3 / 2; }
}

/* ---- Pricing: its own band ---- */
.home-price { background: var(--sand); }
.home-price .card { background: var(--white); box-shadow: var(--sh-soft); }

/* ---- Closing: a full stop ---- */
.home-close {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 4rem + 8vw, 11rem);
  text-align: center;
  background: var(--sage-dark);
}
.home-close__bg { position: absolute; inset: 0; }
.home-close__bg img { width: 100%; height: 100%; object-fit: cover; }
.home-close__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(26,23,18,.66);
}
.home-close__inner { position: relative; }
.home-close h2 {
  color: #fff;
  font-size: var(--fs-h1);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  text-shadow: 0 1px 26px rgba(20,16,12,.4);
}
.home-close p {
  color: rgba(255,255,255,.88);
  font-size: var(--fs-lead);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
}
.home-close .btn {
  background: var(--white);
  color: var(--bark);
  border-color: var(--white);
}
.home-close .btn:hover { background: var(--cream); color: var(--bark); }
/* The closing photo is the AI-generated dining view (closing background only).
   The words sit on the plain wall, where white text reads easily; the window
   and plants show beside them, lightly darkened.
   Geometry (closing-dining.jpg, 2.36:1): the plain wall runs x 20-57%,
   y 0-43% (above the chair backs); the window starts at x 58%. From 900px the
   section is a fixed 9:5, so the photo always fills it height-first and is
   trimmed equally left and right (11.8% of the photo each side). The wall then
   sits at x 11-59% of the section and the window from 61%, at every width, so
   the text box can be placed in percentages. Never mirrored.
   Phones: the wall-and-pillar strip of the photo, darkened, text on top. */
.home-close__bg img { object-position: 29% 0%; }
.home-close__bg::after { background: rgba(26,23,18,.70); }
@media (min-width: 900px) {
  .home-close { aspect-ratio: 9 / 5; padding: 0; text-align: left; }
  .home-close__bg img { object-position: 50% 0%; }
  .home-close__bg::after {
    background: linear-gradient(90deg, rgba(26,23,18,.72) 0%, rgba(26,23,18,.72) 57%,
                rgba(26,23,18,.30) 64%, rgba(26,23,18,.26) 100%);
  }
  .home-close__inner.container {
    position: absolute; left: 12%; top: 4%; width: 45%; height: 38%;
    max-width: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  }
  .home-close h2 { font-size: clamp(2rem, 1rem + 1.6vw, 2.75rem); max-width: none; margin: 0 0 var(--sp-3); }
  .home-close p { max-width: 32rem; margin: 0 0 var(--sp-5); }
}

/* =============================================================
   5. INNER PAGES
   ============================================================= */

/* about.html — founders read as people, not as a card grid */
.lead-team { gap: var(--sp-9); }
.lead-card {
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 560px) { .lead-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.lead-card__frame { border-radius: var(--r-lg); aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .lead-team { grid-template-columns: 1fr; }
  /* One founder per row, but the portrait is a portrait - not half the
     page. 320px at 4:5 = 320x400. The text column is capped near the
     62-character measure the rest of the theme uses. */
  .lead-card { gap: var(--sp-8); grid-template-columns: minmax(0, 320px) minmax(0, 560px); }
}
.lead-card h3 { font-size: var(--fs-h3); }
.lead-card .team-card__quote {
  border-top: 0;
  padding-top: var(--sp-2);
  font-size: var(--fs-lead);
  font-style: normal;
  color: var(--bark);
  font-family: var(--font-head);
  line-height: 1.5;
}

/* Feature photographs: one size, consistently. They used to run 660px
   wide and take their height from whatever the photo happened to be,
   so a portrait shot towered over its own paragraph. */
@media (min-width: 900px) {
  .editorial__media { grid-column: 1 / span 6; }
  .editorial--flip .editorial__media { grid-column: 7 / span 6; }
}
.editorial__media { aspect-ratio: 3 / 2; }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }

/* team.html — larger photographs, air between cards */
.team-grid { gap: var(--sp-8) var(--sp-6); }
.team-card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.team-card .card__frame { border-radius: var(--r-lg); aspect-ratio: 4 / 5; }
.team-card .card__body { padding: var(--sp-4) 0 0; }
.team-card--lift:hover, .team-card.card--lift:hover { transform: none; box-shadow: none; }
.team-card__quote { border-top: 0; padding-top: var(--sp-2); }

/* facility.html — gallery goes edge to edge on phones */
@media (max-width: 599px) {
  [data-filterable] {
    margin-inline: calc(var(--gutter) * -1);
    gap: 2px;
  }
  [data-filterable] .gallery__item { border-radius: 0; }
  [data-filterable].is-carousel { margin-inline: calc(var(--gutter) * -1); }
}

/* room photography, softened */
.room__media { box-shadow: var(--sh-soft); }
.editorial__media { box-shadow: var(--sh-soft); }

/* =============================================================
   6. MOTION
   ============================================================= */
.js .reveal { transition-duration: var(--t-reveal); }

@media (prefers-reduced-motion: reduce) {
  .home-hero__bg img { animation: none; opacity: 1; transform: none; }
}

/* ---- Homepage: the price block on its own ---- */
.home-price-box { max-width: 40rem; }
.home-price-box .price-lead { margin-bottom: var(--sp-3); }

/* ---- Homepage: three short reviews, side by side from 900px, stacked on phones ---- */
.home-quotes { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .home-quotes { grid-template-columns: repeat(3, 1fr); } }