/* ==========================================================================
   Spiritual Cradle — Homepage
   Built from Figma: Spiritual Cradle / Homepage (node 2:42), 1920 × 6249

   SCALING MODEL
   -------------
   The Figma frame is authored at 1920px wide. Every length in the DESKTOP
   section below is written in rem, where **1rem = 16px at a 1920px viewport**
   (i.e. design-px ÷ 16 = rem). The root font-size is then tied to the
   viewport, so the whole page scales proportionally and is pixel-accurate to
   the Figma at 1920, and geometrically identical at every width down to
   1200px (where it hits a floor).

   Below 1024px the root resets to 16px and a dedicated tablet/mobile layout
   takes over (see "RESPONSIVE" at the bottom).

   Conversion cheatsheet: 133.333px = 8.3333rem · 64px = 4rem · 58px = 3.625rem
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Figma variables */
  --sc-ink:    #33372e;
  --sc-ivory:  #f8f5ee;
  --sc-muted:  #616458;
  --sc-white:  #ffffff;
  --sc-line:   #dad8ce;
  --sc-olive:  #46523b;
  --sc-sage:   #dfe3d3;
  /* not exposed as a Figma variable, but used throughout the design */
  --sc-gold:   #ba8f50;
  --sc-hero-text: #fffaf5;

  --radius: 0.3333rem;   /* 5.333px */
  --stroke: 0.0833rem;   /* 1.333px */

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Hero headline. The Figma uses "Born Ready Slanted", which is a licensed
     font and not bundled here. Drop the licensed file into assets/fonts/ and
     the @font-face below picks it up automatically; until then it falls
     through to Kaushan Script, the closest freely-licensed match. */
  --font-script:  "Born Ready Slanted", "Kaushan Script", cursive;
}

/* Drop the licensed Born Ready Slanted files into assets/fonts/ and uncomment
   this block — the hero headline picks it up with no other change needed.
@font-face {
  font-family: "Born Ready Slanted";
  src: url("../fonts/BornReady-Slanted.woff2") format("woff2"),
       url("../fonts/BornReady-Slanted.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Proportional desktop scaling: 16px root at 1920, floored at 10px (1200). */
@media (min-width: 1024px) {
  html { font-size: clamp(10px, 0.83333vw, 16px); }
}

body {
  margin: 0;
  background: var(--sc-ivory);
  color: var(--sc-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, blockquote, figure, fieldset, legend { margin: 0; padding: 0; }
ul { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.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;
}

:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

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

/* ------------------------------------------------------------ primitives */
.section {
  padding: 4rem 8.3333rem;              /* 64px / 133.333px */
}
.section--ivory { background: var(--sc-ivory); }
.section--olive { background: var(--sc-olive); color: var(--sc-white); }
.section--sage  { background: var(--sc-sage); }
.section--gold  { background: var(--sc-gold); color: var(--sc-white); }

.container {
  width: 100%;
  max-width: 103.3333rem;               /* 1653.333px */
  margin-inline: auto;
}

.stack-32 { display: flex; flex-direction: column; gap: 2rem; }
.center   { align-items: center; text-align: center; }

/* Type ------------------------------------------------------------------ */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.625rem;                  /* 58px */
  line-height: 1.1264;                  /* 65.333px */
}

.body-lg {
  font-size: 1.375rem;                  /* 22px */
  line-height: 1.6364;                  /* 36px */
  font-weight: 400;
}

.eyebrow {
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.4667;                  /* 29.333px */
  font-weight: 600;
  color: var(--sc-ink);
}
.eyebrow--muted { color: var(--sc-muted); }

.link-gold {
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.3333;                  /* 26.667px */
  font-weight: 600;
  color: var(--sc-gold);
  align-self: flex-start;
  transition: opacity 0.2s ease;
}
.link-gold:hover { opacity: 0.72; }
.center > .link-gold { align-self: center; }

.rule {
  display: block;
  width: 4.5rem;                        /* 72px */
  height: 0.1667rem;                    /* 2.667px */
  background: var(--sc-gold);
}

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;                   /* 16px / 32px */
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.5556rem;                 /* 24.89px */
  line-height: 1.4285;                  /* 35.556px */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--primary { background: var(--sc-gold); color: var(--sc-white); }
.btn--primary:hover { background: #a97f45; }

.btn--outline {
  background: transparent;
  color: var(--sc-white);
  border: var(--stroke) solid var(--sc-white);
  font-size: 1.1669rem;                 /* 18.67px */
  line-height: 1.4283;                  /* 26.667px */
}
.btn--outline:hover { background: var(--sc-white); color: var(--sc-gold); }

.btn--block { width: 100%; }

/* Form field ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 0.6667rem; }   /* 10.667px */

.field__label {
  font-family: var(--font-ui);
  font-size: 1.1667rem;                 /* 18.67px */
  line-height: 1.5;                     /* 28px */
  color: var(--sc-ink);
}

.field__input {
  width: 100%;
  padding: 0.6667rem 1rem;              /* 10.667px / 16px */
  background: var(--sc-white);
  border: var(--stroke) solid var(--sc-line);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1.1667rem;
  line-height: 1.5;
  color: var(--sc-ink);
}
.field__input::placeholder { color: var(--sc-muted); opacity: 1; }
.field__input:focus { border-color: var(--sc-gold); outline: none; }

/* Radios ---------------------------------------------------------------- */
.radios { display: flex; gap: 1rem; }

.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.3333rem;                       /* 5.333px */
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 1.1667rem;                 /* 18.667px */
  line-height: 1.5;                     /* 28px */
  white-space: nowrap;
}
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.radio__dot {
  flex: none;
  width: 0.8333rem;                     /* 13.333px */
  height: 0.8333rem;
  border: var(--stroke) solid var(--sc-ink);
  border-radius: 50%;
  position: relative;
}
.radio input:checked + .radio__dot::after {
  content: "";
  position: absolute;
  inset: 0.1667rem;
  border-radius: 50%;
  background: var(--sc-ink);
}
.radio input:focus-visible + .radio__dot { outline: 2px solid var(--sc-gold); outline-offset: 2px; }

/* Image cards ----------------------------------------------------------- */
.card-grid { display: grid; width: 100%; }

.card { display: flex; flex-direction: column; gap: 1rem; }  /* 16px */
.card--center { text-align: center; }

.card__media { border-radius: var(--radius); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__media--programme { aspect-ratio: 253.333 / 186.667; }
.card__media--workshop  { aspect-ratio: 320 / 117.333; }
.card__media--healing   { aspect-ratio: 522.667 / 266.667; }
.card__media--tool      { aspect-ratio: 389.333 / 240; }

.card__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.6669rem;                 /* 26.67px */
  line-height: 1.4665;                  /* 39.111px */
  color: var(--sc-ink);
}

/* ============================= 01 / HERO ============================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 61.125rem;                /* 978px */
  background: #000;
  color: var(--sc-hero-text);
  text-align: center;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;          /* matches the Figma crop */
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.875rem 8.3333rem 0;        /* 30px top */
}

.hero__badge {
  position: relative;
  flex: none;
  width: 13.0625rem;                    /* 209px */
  height: 12.75rem;                     /* 204px */
  overflow: hidden;
}
.hero__badge img {
  position: absolute;
  left: -17.89%; top: -19.18%;
  width: 135.78%; height: 138.36%;
  max-width: none;
}

.hero__title {
  margin-top: 6.625rem;                 /* → y = 340px */
  min-height: 7.5625rem;                /* 121px, holds the rhythm on fallback fonts */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 4.5rem;                    /* 72px */
  line-height: 1.2;
  color: var(--sc-hero-text);
}

.hero__subtitle {
  margin-top: 2rem;                     /* → y = 493px */
  max-width: 61.125rem;                 /* 978px */
  font-size: 1.5rem;                    /* 24px */
  line-height: 1.375;                   /* 66px over 2 lines */
  font-weight: 600;
}

.hero__contact {
  margin-top: 2rem;                     /* → y = 591px */
  display: flex;
  align-items: center;
  gap: 4.375rem;                        /* 70px */
}
.hero__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;                        /* 10px */
  font-size: 1.25rem;                   /* 20px */
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.hero__contact-item:hover { opacity: 0.75; }
.hero__contact-item img { width: 1.875rem; height: 1.875rem; }  /* 30px */

.hero__strip {
  position: relative;
  z-index: 1;
  margin-top: auto;                     /* pins the strip to y = 750px */
  min-height: 14.25rem;                 /* 228px */
  padding: 1.625rem 8.3333rem 1.25rem;  /* 26px top */
  background: rgba(0, 0, 0, 0.35);
}

.trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 103.3333rem;
  margin-inline: auto;
}
.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 20rem;                     /* 320px */
  margin-inline: auto;
}
.trust__icon { width: 4rem; height: 4rem; }                     /* 64px */
.trust__title {
  margin-top: 1.25rem;                  /* 20px */
  font-size: 1.5rem;                    /* 24px */
  line-height: 1.26;                    /* 30.24px */
  font-weight: 700;
  color: var(--sc-white);
}
.trust__text {
  margin-top: 0.75rem;                  /* 12px */
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.4;                     /* 28px */
  font-weight: 600;
  color: var(--sc-white);
}

/* ============================= 03 / ABOUT ============================= */
/* The Figma placed a landscape image here. It now carries a portrait photo of
   Ashema, so the image column is narrower and the box is 4:5 — a landscape box
   would slice a horizontal band out of a full-body shot. */
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 440fr) minmax(0, 1128fr);
  gap: 5.3333rem;                       /* 85.333px */
  align-items: center;
}
.about__figure { aspect-ratio: 4 / 5; }
.about__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;          /* keep her head, drop decking if pinched */
}

.about__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6667rem;                       /* 26.667px */
}
.about__copy .body-lg { max-width: 54.1667rem; }   /* 866.667px */

/* ============================= 04 / ACADEMY ============================= */
.academy__intro { display: flex; flex-direction: column; gap: 1rem; }
.academy__lede { max-width: 91.6667rem; }          /* 1466.667px */

.academy__block { display: flex; flex-direction: column; gap: 1rem; }

/* minmax(0, 1fr) rather than 1fr: a long unbreakable word in a card title
   would otherwise push its track past the container. */
.card-grid--programmes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6667rem; }  /* 26.667px */
.card-grid--workshops  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6667rem; }

.academy__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.academy__workshops {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 41.6667rem;                    /* 666.667px */
  flex: none;
}
.academy__link { align-self: center; }

/* ===================== 05 / CONSULTATIONS & PRACTICES ===================== */
.consultations__intro { text-align: center; }
.consultations__intro .body-lg { line-height: 1.5152; }   /* 33.333px */

.consult-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.1667rem;                       /* 66.667px */
  margin-top: 2rem;                     /* 32px → icons land at y = 212px */
}
.consult {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.consult__icon { width: 4.5rem; height: 4.5rem; }   /* 72px */

.consult__title {
  margin-top: 2.75rem;                  /* 44px */
  min-height: 4.75rem;                  /* 76px — keeps the three columns aligned */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;                      /* 32px */
  line-height: 1.1875;                  /* 38px */
  max-width: 24.5rem;                   /* 392px */
}
.consult__fee {
  margin-top: 1rem;
  font-size: 1.375rem;                  /* 22px */
  line-height: 1;
  font-weight: 600;
  max-width: 24.5rem;
}
.consult__desc {
  margin-top: 1rem;
  min-height: 4.6875rem;                /* 75px */
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.25;                    /* 25px */
  max-width: 27.75rem;                  /* 444px */
}
.consult__duration {
  margin-top: 1rem;
  font-size: 1rem;                      /* 16px */
  line-height: 1.3125;                  /* 21px */
  max-width: 24.5rem;
}

.consultations__action { margin-top: 3.25rem; text-align: center; }  /* 52px */

/* ======================= 06 / MEDITATIVE HEALINGS ======================= */
.healings__intro .body-lg,
.tools__intro .body-lg { line-height: 1.5152; }     /* 33.333px */

.healings__intro, .tools__intro {
  display: flex; flex-direction: column; gap: 1rem; width: 100%;
}

.card-grid--healings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6667rem; }  /* 42.667px */

.healings__more {
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.4;                     /* 28px */
}
.healings__more span { padding: 0 0.9375rem; }      /* the interpunct spacing */

/* ==================== 07 / PRODUCTS & SPIRITUAL TOOLS ==================== */
.card-grid--tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }  /* 32px */

.tools__action { width: 100%; display: flex; justify-content: flex-end; }

/* ==================== 08 / NUMEROLOGY CALCULATORS ==================== */
.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 373.333fr) minmax(0, 597.333fr) minmax(0, 597.333fr);
  gap: 2.6667rem;                       /* 42.667px */
  align-items: center;
}

.calc-intro { display: flex; flex-direction: column; gap: 1.3333rem; }  /* 21.333px */

.calc {
  display: flex;
  flex-direction: column;
  gap: 1rem;                            /* 16px */
  min-height: 33.6667rem;               /* 538.667px */
  padding: 2rem;                        /* 32px */
  background: var(--sc-white);
  border-radius: var(--radius);
}
.calc__title {
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.4667;                  /* 29.333px */
  font-weight: 600;
}
.calc__spacer { height: 5.5rem; }       /* 88px — aligns the two buttons */

.calc__note {
  font-family: var(--font-ui);
  font-size: 1.1667rem;                 /* 18.667px */
  line-height: 1.5;                     /* 28px */
  color: var(--sc-muted);
  text-align: center;
}
.calc__note--error { color: #a8442f; }

.calc__result {
  border-top: var(--stroke) solid var(--sc-line);
  padding-top: 1rem;
  font-family: var(--font-ui);
}
.calc__result-system {
  font-size: 1.1667rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sc-ink);
}
.calc__result-system + .calc__result-system { margin-top: 1rem; }
.calc__numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6667rem 1rem;
  margin-top: 0.6667rem;
}
.calc__number { display: flex; align-items: baseline; gap: 0.5rem; }
.calc__number dt {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sc-muted);
}
.calc__number dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;                   /* 28px */
  line-height: 1.2;
  color: var(--sc-gold);
}

.calculators__price {
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.4667;
  font-weight: 600;
  text-align: right;
}

/* ======================= 09 / ABOUT THE FOUNDER ======================= */
.founder__layout {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 1088fr);
  gap: 5.3333rem;                       /* 85.333px */
  align-items: center;
}
.founder__figure { aspect-ratio: 480 / 512; overflow: hidden; }
.founder__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;       /* matches the Figma crop */
}

.founder__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.3333rem;                       /* 21.333px */
}
.founder__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.625rem;                  /* 42px */
  line-height: 1.3333;                  /* 56px */
}

/* ======================= 11 / JOIN THE COMMUNITY ======================= */
.community { padding-block: 2.6667rem; }            /* 42.667px */

.community__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.6667rem;
}
.community__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.625rem;                  /* 42px */
  line-height: 1.2064;                  /* 50.667px */
  max-width: 50.8333rem;                /* 813.333px */
}
.community__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.3333rem;                       /* 21.333px */
}
.community__input {
  width: 35.8333rem;                    /* 573.333px */
  font-size: 1.5556rem;                 /* 24.89px */
  line-height: 1.5;                     /* 37.333px */
}
.community__form .btn--outline { flex: none; }
.community__status {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  font-size: 1.1667rem;
  line-height: 1.5;
  color: var(--sc-white);
}

/* ============================= 12 / FOOTER ============================= */
.site-footer {
  background: var(--sc-ivory);
  padding: 2.6667rem 8.3333rem;         /* 42.667px / 133.333px */
}
.site-footer__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.6667rem;
}
.site-footer__brand { display: flex; align-items: center; gap: 1.1458rem; }

.site-footer__badge {
  position: relative;
  display: block;
  flex: none;
  width: 5.1875rem;                     /* 83px */
  height: 5.125rem;                     /* 82px */
  overflow: hidden;
}
.site-footer__badge img {
  position: absolute;
  left: -17.27%; top: -17.64%;
  width: 134.55%; height: 135.27%;      /* matches the Figma crop of the badge art */
  max-width: none;
}
.site-footer__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.375rem;                  /* 38px */
  line-height: 1.1228;                  /* 42.667px */
}
.site-footer__promise {
  margin-top: 0.6667rem;                /* 10.667px */
  font-family: var(--font-ui);
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.4;                     /* 28px */
  color: var(--sc-muted);
}
.site-footer__links {
  display: flex;
  gap: 2.6667rem;                       /* 42.667px */
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.3333;
}
.site-footer__links a { transition: color 0.2s ease; }
.site-footer__links a:hover { color: var(--sc-gold); }


/* ==========================================================================
   RESPONSIVE
   The Figma file contains a desktop frame only, so the layouts below are
   derived from the desktop design system (same tokens, type ramp, colours and
   card components) rather than traced from a mobile artboard.
   ========================================================================== */

/* -------------------------------------------------- small desktop / iPad
   Above 1200px the proportional scaling model holds exactly, so the 6-up
   programme grid stays as designed. Between 1024 and 1199 the root font is
   floored, which squeezes those six columns, so they drop to 3-up. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .card-grid--programmes { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
}

/* ---------------------------------------------------- tablet (≤ 1023px) */
@media (max-width: 1023px) {
  html { font-size: 16px; }

  .section { padding: 56px 40px; }
  .container { max-width: 900px; }

  :root { --radius: 4px; --stroke: 1px; }

  .h-display { font-size: 40px; line-height: 1.15; }
  .body-lg   { font-size: 17px; line-height: 1.7; }
  .eyebrow   { font-size: 15px; line-height: 1.45; }
  .link-gold { font-size: 16px; line-height: 1.4; }
  .rule      { width: 56px; height: 2px; }
  .card__title { font-size: 20px; line-height: 1.4; }

  .btn { padding: 13px 26px; font-size: 18px; line-height: 1.4; }
  .btn--outline { font-size: 16px; }

  .field { gap: 8px; }
  .field__label, .field__input, .radio, .calc__note { font-size: 16px; line-height: 1.5; }
  .field__input { padding: 11px 14px; }
  .radios { flex-wrap: wrap; gap: 12px 18px; }
  .radio__dot { width: 14px; height: 14px; }
  .radio input:checked + .radio__dot::after { inset: 2px; }

  /* Hero */
  .hero { min-height: 0; }
  .hero__inner { padding: 32px 40px 0; }
  .hero__badge { width: 132px; height: 129px; }
  .hero__title {
    margin-top: 32px;
    min-height: 0;
    font-size: 52px;
    line-height: 1.25;
    display: block;
  }
  .hero__subtitle { margin-top: 20px; max-width: 640px; font-size: 18px; line-height: 1.55; }
  .hero__contact { margin-top: 24px; gap: 32px; flex-wrap: wrap; justify-content: center; }
  .hero__contact-item { font-size: 16px; gap: 8px; }
  .hero__contact-item img { width: 22px; height: 22px; }
  .hero__strip { margin-top: 56px; min-height: 0; padding: 32px 40px; }
  .trust { gap: 28px; }
  .trust__icon { width: 48px; height: 48px; }
  .trust__title { margin-top: 14px; font-size: 18px; }
  .trust__text  { margin-top: 8px; font-size: 15px; line-height: 1.45; }

  /* About + Founder stack.
     Both figures keep a portrait-ish box matching their source images. The
     founder photo is a 3:4 full-body portrait with her face ~38% down, so a
     landscape box would crop her head off; 3:4 shows it uncropped. Capped in
     width so it does not become absurdly tall on a wide tablet. */
  .about__layout,
  .founder__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about__figure,
  .founder__figure {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
  .about__figure { aspect-ratio: 4 / 5; }
  .founder__figure { aspect-ratio: 3 / 4; }
  .founder__figure img { object-position: center; }
  .about__copy { gap: 18px; }
  .founder__copy { gap: 16px; }
  .founder__quote { font-size: 28px; line-height: 1.35; }

  /* Academy */
  .academy__footer { flex-direction: column; align-items: stretch; gap: 28px; }
  .academy__workshops { width: 100%; }
  .academy__link { align-self: flex-end; }

  /* Consultations */
  .card-grid--programmes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .consult-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 28px; }
  .consult__icon { width: 56px; height: 56px; }
  .consult__title { margin-top: 20px; min-height: 0; font-size: 24px; line-height: 1.25; }
  .consult__fee { margin-top: 10px; font-size: 17px; line-height: 1.4; }
  .consult__desc { margin-top: 10px; min-height: 0; font-size: 16px; line-height: 1.5; }
  .consult__duration { margin-top: 10px; font-size: 14px; }
  .consultations__action { margin-top: 36px; }

  /* Calculators */
  .calc-layout { grid-template-columns: 1fr; gap: 24px; }
  .calc { min-height: 0; padding: 24px; }
  .calc__spacer { display: none; }
  .calc__title { font-size: 17px; }
  .calc__number dd { font-size: 24px; }
  .calculators__price { text-align: left; font-size: 16px; }

  /* Community */
  .community { padding-block: 40px; }
  .community__layout { flex-direction: column; align-items: stretch; gap: 20px; }
  .community__heading { font-size: 30px; line-height: 1.25; max-width: none; }
  .community__form { flex-wrap: wrap; gap: 12px; }
  .community__input { width: auto; flex: 1 1 260px; font-size: 17px; }
  .community__status { position: static; margin-top: 4px; flex-basis: 100%; font-size: 14px; }

  /* Footer */
  .site-footer { padding: 32px 40px; }
  .site-footer__layout { flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer__name { font-size: 28px; }
  .site-footer__promise { margin-top: 4px; font-size: 16px; }
  .site-footer__badge { width: 60px; height: 60px; }
  .site-footer__links { flex-wrap: wrap; gap: 16px 28px; font-size: 16px; }
}

/* ----------------------------------------------------- phone (≤ 767px) */
@media (max-width: 767px) {
  .section { padding: 48px 20px; }

  .h-display { font-size: 32px; line-height: 1.18; }
  .body-lg   { font-size: 16px; line-height: 1.65; }

  /* Hero */
  .hero__inner { padding: 24px 20px 0; }
  .hero__badge { width: 104px; height: 102px; }
  .hero__title { margin-top: 24px; font-size: 38px; line-height: 1.22; }
  .hero__subtitle { margin-top: 16px; font-size: 16px; }
  .hero__contact { margin-top: 20px; flex-direction: column; gap: 12px; }
  .hero__strip { margin-top: 40px; padding: 28px 20px; }
  .trust { grid-template-columns: 1fr; gap: 28px; }
  .trust__item { max-width: 380px; }

  /* Cards: two-up on phone */
  .card-grid--programmes,
  .card-grid--tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .card-grid--workshops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .card-grid--healings { grid-template-columns: 1fr; gap: 24px; }
  .card { gap: 10px; }
  .card__title { font-size: 16px; line-height: 1.35; }

  /* Consultations single column */
  .consult-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .consult__title { font-size: 22px; }

  .healings__more { font-size: 16px; line-height: 1.6; }
  .healings__more span { display: block; height: 0; overflow: hidden; padding: 0; }

  .tools__action { justify-content: flex-start; }
  .academy__link { align-self: flex-start; }

  .founder__quote { font-size: 24px; }
  .community__heading { font-size: 26px; }
  .community__form { flex-direction: column; align-items: stretch; }
  /* the form is now a column, so the flex-basis above would size the HEIGHT */
  .community__input { flex: none; width: 100%; }
  .community__form .btn--outline { width: 100%; }

  .calc { padding: 20px; }
  .site-footer { padding: 28px 20px; }
  .site-footer__links { gap: 12px 20px; font-size: 15px; }
}