/* ============================================================
   DESIGN SYSTEM — Hypnotherapy for Weight Loss
   Tokens · reset · typography · layout primitives · motion
   ============================================================ */

:root {
  /* ── Colour ─────────────────────────────────────────────
     Warm ivory ground, deep olive-charcoal ink, sage as the
     brand hue, champagne gold reserved for accents only.     */
  --c-ivory:        #FBF9F5;
  --c-cream:        #F4EFE6;
  --c-sand:         #EDE4D6;
  --c-beige:        #E3D7C5;

  --c-sage:         #6E8264;
  --c-sage-deep:    #4E5E46;
  --c-sage-light:   #9BAF90;
  --c-sage-pale:    #E4EBDE;
  --c-sage-tint:    rgba(110, 130, 100, 0.10);

  --c-ink:          #23281F;
  --c-ink-soft:     #3A4034;
  --c-graphite:     #12150F;

  --c-gold:         #B08D4F;
  --c-gold-light:   #CBA968;
  --c-clay:         #A9694F;
  --c-slate:        #5A6672;

  --c-text:         #2B3126;
  --c-text-2:       #5C6355;
  --c-text-3:       #8A907F;
  --c-on-dark:      #EFEDE6;
  --c-on-dark-2:    rgba(239, 237, 230, 0.72);
  --c-on-dark-3:    rgba(239, 237, 230, 0.48);

  --c-line:         #E0D8CA;
  --c-line-soft:    #EDE7DC;
  --c-line-dark:    rgba(239, 237, 230, 0.16);

  --c-white:        #FFFFFF;
  --c-success:      #4A7C59;
  --c-error:        #A8452F;

  /* ── Type ───────────────────────────────────────────────
     Fraunces: a soft-contrast optical serif — editorial and
     warm where Playfair would read generic.                  */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --t-xs:      clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:      clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --t-base:    clamp(0.95rem, 0.91rem + 0.20vw, 1.06rem);
  --t-md:      clamp(1.04rem, 0.98rem + 0.28vw, 1.19rem);
  --t-lg:      clamp(1.16rem, 1.06rem + 0.46vw, 1.42rem);
  --t-xl:      clamp(1.32rem, 1.16rem + 0.72vw, 1.75rem);
  --t-2xl:     clamp(1.55rem, 1.28rem + 1.20vw, 2.30rem);
  --t-3xl:     clamp(1.90rem, 1.48rem + 1.90vw, 3.00rem);
  --t-4xl:     clamp(2.25rem, 1.62rem + 2.80vw, 3.85rem);
  --t-display: clamp(2.55rem, 1.70rem + 3.90vw, 5.00rem);

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.55;
  --lh-relaxed: 1.72;
  --lh-loose:   1.85;

  --ls-tight:  -0.022em;
  --ls-snug:   -0.012em;
  --ls-wide:    0.04em;
  --ls-wider:   0.10em;
  --ls-widest:  0.18em;

  /* ── Space ──────────────────────────────────────────────  */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.75rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-section: clamp(3.75rem, 2.6rem + 5.2vw, 7.5rem);
  --s-section-tight: clamp(2.75rem, 2rem + 3.4vw, 5rem);

  /* ── Layout ─────────────────────────────────────────────  */
  --w-max:    1240px;
  --w-wide:   1440px;
  --w-narrow: 780px;
  --w-text:   66ch;
  --pad-x: clamp(1.15rem, 0.6rem + 2.6vw, 3.25rem);

  /* ── Form ───────────────────────────────────────────────  */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(35, 40, 31, 0.05), 0 1px 3px rgba(35, 40, 31, 0.04);
  --sh-md: 0 4px 10px rgba(35, 40, 31, 0.05), 0 10px 24px rgba(35, 40, 31, 0.05);
  --sh-lg: 0 10px 24px rgba(35, 40, 31, 0.07), 0 26px 56px rgba(35, 40, 31, 0.07);

  /* ── Motion ─────────────────────────────────────────────  */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-norm: 340ms;
  --d-slow: 620ms;

  /* ── Depth ──────────────────────────────────────────────  */
  --z-base: 1;
  --z-float: 60;
  --z-header: 200;
  --z-overlay: 300;
  --z-skip: 400;

  --header-h: 78px;
  --header-h-sm: 60px;
}

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--c-text);
  background-color: var(--c-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100svh;
  font-synthesis-weight: none;
}

body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

address { font-style: normal; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-ink);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  overflow-wrap: break-word;
}

p { overflow-wrap: break-word; }

hr { border: none; }

::selection { background-color: var(--c-sage); color: var(--c-white); }

/* ── Type scale ──────────────────────────────────────────── */
h1, .t-h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2, .t-h2 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3, .t-h3 { font-size: var(--t-xl); }
h4, .t-h4 { font-size: var(--t-lg); }
h5, .t-h5 { font-size: var(--t-md); }
h6, .t-h6 { font-size: var(--t-base); }

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
}

.text-lede {
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}

.text-small { font-size: var(--t-sm); }

.text-overline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-sage);
}

.text-overline--light { color: var(--c-sage-light); }
.text-overline--gold { color: var(--c-gold); }

.text-center { text-align: center; }
.centred-title { text-align: center; margin-bottom: var(--s-7); }

/* Editorial drop cap */
.has-dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: 500;
  padding: 0.08em 0.12em 0 0;
  color: var(--c-sage-deep);
}

/* ── Layout primitives ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--wide   { max-width: var(--w-wide); }
.container--narrow { max-width: var(--w-narrow); }

.section {
  padding-block: var(--s-section);
  position: relative;
}

.section--tight { padding-block: var(--s-section-tight); }

.section--strip {
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  background-color: var(--c-ivory);
  border-block: 1px solid var(--c-line-soft);
}

.section--cream { background-color: var(--c-cream); }
.section--sand  { background-color: var(--c-sand); }
.section--pale  { background-color: var(--c-sage-pale); }

.section--deep {
  background-color: var(--c-graphite);
  color: var(--c-on-dark-2);
}
.section--deep h1, .section--deep h2,
.section--deep h3, .section--deep h4 { color: var(--c-on-dark); }
.section--deep a:not(.btn) { color: var(--c-sage-light); }

.section--sage {
  background-color: var(--c-sage-deep);
  color: var(--c-on-dark-2);
}
.section--sage h1, .section--sage h2,
.section--sage h3, .section--sage h4 { color: var(--c-white); }

/* ── Section headers ─────────────────────────────────────── */
.section-header { max-width: 44rem; margin-bottom: var(--s-8); }
.section-header--wide { max-width: 56rem; }
.section-header--center { text-align: center; margin-inline: auto; }

.section-header .text-overline { margin-bottom: var(--s-4); }
.section-header h2 { margin-bottom: var(--s-4); }
.section-header p {
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}
.section--deep .section-header p,
.section--sage .section-header p { color: var(--c-on-dark-2); }

/* ── Rules & dividers ────────────────────────────────────── */
.divider {
  width: 58px;
  height: 2px;
  background-color: var(--c-sage);
  margin-block: var(--s-4);
}
.divider--gold { background-color: var(--c-gold); }
.divider--center { margin-inline: auto; }

/* ── Media / face-safe pictures ──────────────────────────── */
/* The box always carries the photograph's own aspect ratio, so
   `contain` can never crop a face or clip a subject.          */
.media {
  position: relative;
  aspect-ratio: var(--img-ratio, 4 / 3);
  background-color: var(--c-sand);
  border-radius: var(--r-md);
  overflow: hidden;
}

.media picture { display: contents; }

.media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Non-portrait imagery may safely fill its box edge to edge. */
.media--fill { aspect-ratio: auto; }
.media--fill img { object-fit: cover; }

.media__caption {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
}

/* ── Icons ───────────────────────────────────────────────── */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}
.icon--xs { width: 0.9em; height: 0.9em; }
.icon--lg { width: 1.6em; height: 1.6em; }

/* ── Accessibility helpers ───────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: var(--z-skip);
  padding: 0.85rem 1.5rem;
  background-color: var(--c-sage-deep);
  color: var(--c-white);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: translate var(--d-fast) var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

:focus-visible {
  outline: 2px solid var(--c-sage-deep);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.section--deep :focus-visible,
.section--sage :focus-visible,
.site-footer :focus-visible { outline-color: var(--c-sage-light); }

/* ── Scroll reveal ─────────────────────────────────────────
   Scoped to .js so that with JavaScript disabled every element
   renders visible instead of being stranded at opacity: 0.      */
.js .reveal, .js .reveal-left, .js .reveal-right {
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease), translate var(--d-slow) var(--ease);
  will-change: opacity, translate;
}
.js .reveal       { translate: 0 26px; }
.js .reveal-left  { translate: -34px 0; }
.js .reveal-right { translate: 34px 0; }

/* Must out-specify the `.js .reveal` rules above, or revealed elements
   would stay stuck at opacity: 0. */
.js .reveal.is-revealed,
.js .reveal-left.is-revealed,
.js .reveal-right.is-revealed,
.is-revealed { opacity: 1; translate: 0 0; }

.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }
.reveal-delay-4 { transition-delay: 360ms; }

/* ── Reduced motion ──────────────────────────────────────── */
@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;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal, .js .reveal-left, .js .reveal-right,
  .js .reveal.is-revealed,
  .js .reveal-left.is-revealed,
  .js .reveal-right.is-revealed {
    opacity: 1;
    translate: none;
  }
}

/* ── Scrollbar ───────────────────────────────────────────── */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--c-beige) var(--c-cream); }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-cream); }
::-webkit-scrollbar-thumb { background: var(--c-beige); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--c-sage-light); }

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .site-header, .mobile-nav, .back-to-top, .whatsapp-float,
  .scroll-progress, .cta-band, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}