/* ============================================================================
   Unconditional — designed to sit beside celinefontaine.com as one body of work.
   Type, colour, rhythm and component shapes are hers; the differences are the
   three the brief names (solid buttons, contrast-safe blue, a single goal).
   Written mobile-first for 390px and stepped up from there.
   ========================================================================== */

:root{
  --font-display: "Gelasio", Georgia, serif;   /* all headlines */
  --font-body:    "Aleo", Georgia, serif;      /* body, buttons, labels */

  --white:   #FFFFFF;
  --cream:   #F9F4EB;   /* her soft section background */
  --sky:     #B7C8CE;   /* her signature dusty blue: backgrounds, footer, accents */
  --sky-ink: #5B7782;   /* blue for headlines on light backgrounds (passes contrast) */
  --slate:   #434A54;   /* body text */
  --grey:    #5F6160;   /* secondary text */
  --button:  #46606B;   /* buttons, white text on it = 6.7:1 */
  --button-hover: #3A4F58;

  /* One derived value the palette needs and the token list does not carry.
     --sky is a background colour: as a hairline it is invisible on cream, so the
     rules that separate things use a slightly deeper reading of the same blue. */
  --sky-line:  #CFDBDF;

  --maxw:   1240px;
  --gut:    20px;
  --band:   72px;      /* section padding, mobile */
  --header-h: 72px;
}

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

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

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;                       /* 19px from 900px up */
  line-height: 1.55;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

h1, h2, h3{ font-family: var(--font-display); font-weight: 400; letter-spacing: 0; margin: 0; }
h1{ font-size: 38px; line-height: 1.08; }    /* 58px from 900px up */
h2{ font-size: 31px; line-height: 1.12; }    /* 43px from 900px up */
h3{ font-size: 24px; line-height: 1.25; }

/* Her signature move: the key phrase in italic. Never bold, anywhere. */
h1 em, h2 em, h3 em{ font-style: italic; }

p{ margin: 0 0 18px; }
a{ color: inherit; }

.label{
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}

/* ---------- buttons ------------------------------------------------------- */
/* Hers are small underlined links. Ours are solid, so a cold visitor cannot
   miss the one action that matters; .btn-text is kept for secondary links. */
.btn{
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--button); color: #fff;
  border-radius: 2px; border: 0;
  height: 52px; padding: 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background .18s ease;
}
.btn:hover{ background: var(--button-hover); }
.btn:focus-visible{ outline: 2px solid var(--slate); outline-offset: 3px; }
.btn--wide{ width: 100%; }

.btn-text{
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sky-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  display: inline-block;
}
.btn-text:hover{ color: var(--slate); }

/* ---------- layout -------------------------------------------------------- */
.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section{ padding-block: var(--band); }
.bg-cream{ background: var(--cream); }
.bg-sky{ background: var(--sky); }
.center{ text-align: center; }
.on-cream h2, .on-white h2{ color: var(--sky-ink); }

/* ---------- header -------------------------------------------------------- */
/* Transparent over the hero; solid white once the visitor has left it. */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .25s ease;
}
.hdr__in{
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hdr__mark{
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  white-space: nowrap;
}
/* One goal: no menu links, so the button fits at every width. */
.hdr__cta{ display: none; }
.hdr::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--sky); opacity: 0; transition: opacity .25s ease;
}
.hdr.is-stuck{ background: var(--white); }
.hdr.is-stuck .hdr__mark{ color: var(--slate); }
.hdr.is-stuck .hdr__cta{ display: inline-flex; }
.hdr.is-stuck::after{ opacity: 1; }

/* ---------- hero ---------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 86svh;
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + 40px) 56px;
  background: var(--slate);
  overflow: hidden;
}
.hero__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img--mobile{ display: block; }
.hero__img--desktop{ display: none; }
/* Overlay plus a gradient, so the text reads wherever the photograph is busy. */
.hero__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(40,48,54,.82) 0%, rgba(40,48,54,.45) 55%, rgba(40,48,54,.30) 100%);
}
.hero__in{
  position: relative; z-index: 2;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  width: 100%;
}
.hero__box{ max-width: 600px; color: #fff; }
.hero .label{ color: rgba(255,255,255,.92); }
.hero h1{ color: #fff; margin-bottom: 18px; }
.hero__body{ font-size: 19px; color: rgba(255,255,255,.95); margin-bottom: 26px; }
.hero__note{ font-size: 14px; color: rgba(255,255,255,.88); margin: 14px 0 0; }

/* ---------- intro statement ---------------------------------------------- */
.intro{ max-width: 760px; margin-inline: auto; text-align: center; }
.intro__icon{ width: 48px; height: 48px; margin: 0 auto 22px; }
.intro__lead{
  font-family: var(--font-display);
  font-size: 28px; line-height: 1.3;   /* 34px from 900px up */
  color: var(--sky-ink); margin: 0 0 22px;
}
.intro__body{ margin: 0; }

/* ---------- the four phases ---------------------------------------------- */
.phases__head{ text-align: center; margin-bottom: 44px; }
.phases__list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 20px;
}
.phase{ text-align: center; min-width: 0; }
/* The circle carries her watercolour; the numeral is set in the display face. */
.phase__disc{
  width: 160px; height: 160px; border-radius: 50%;   /* 200px from 900px up */
  margin: 0 auto 20px;
  display: grid; place-items: center;
  /* The watercolour sits on top, but the base colour underneath is the darker reading of
     the same blue. --sky alone is 1.6:1 against white type, which would leave the numerals
     unreadable the moment the illustration failed to load. This way the disc is legible
     with or without it. */
  background-color: var(--sky-ink);
  background-image: url("/assets/img/SKY_PATTERN.png");
  background-size: cover; background-position: center;
  color: #fff;
  font-family: var(--font-display); font-size: 56px; line-height: 1;
}
.phase__name{
  font-family: var(--font-display); font-size: 20px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 8px;
}
.phase__weeks{
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  /* slate, not sky-ink: this is 14px body text, so it needs 4.5:1, and sky-ink on cream
     measures 4.35:1. sky-ink stays on the large headings, where 3:1 is the bar. */
  color: var(--slate); margin: 0 0 10px;
}
.phase p{ margin: 0; }

/* ---------- split (Meet Celine) ------------------------------------------ */
/* Text left, photograph right, edge to edge, no radius and no gap — her split. */
.split{ padding: 0; }
.split__grid{ display: grid; grid-template-columns: 1fr; }
.split__media{ order: -1; }
.split__media img{ width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.split__text{ padding: 40px var(--gut); }
.split__text h2{ margin-bottom: 18px; }
.split__text .btn-text{ margin-top: 8px; }

/* ---------- credentials --------------------------------------------------- */
.creds{ padding-block: 48px; }
.creds .label{ text-align: center; }
.creds__badges{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 16px; align-items: center; justify-items: center;
  margin: 0 0 40px;
}
.creds__badges img{ height: 44px; width: auto; max-width: 100%; object-fit: contain; } /* 64px from 900px */
.creds__logos{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px; align-items: center; justify-items: center;
}
.creds__logos img{ height: 22px; width: auto; max-width: 100%; object-fit: contain; }  /* 28px from 900px */

/* ---------- photo band ---------------------------------------------------- */
.band{ padding: 0; }
.band img{ width: 100%; height: 300px; object-fit: cover; }   /* 420px from 900px */

/* ---------- how it works -------------------------------------------------- */
.how__head{ text-align: center; max-width: 640px; margin: 0 auto 44px; }
.how__list{ display: grid; grid-template-columns: 1fr; gap: 40px; }
.step{ text-align: center; min-width: 0; }
.step img{ width: 100%; max-width: 240px; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 auto 20px; }
.step__name{
  font-family: var(--font-display); font-size: 19px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 10px;
}
.step p{ margin: 0 0 14px; }

/* ---------- is this for you ---------------------------------------------- */
.foryou__head{ text-align: center; margin-bottom: 26px; }
.foryou__lead{ font-weight: 600; color: var(--slate); text-align: center; margin-bottom: 26px; }
.foryou__list{ list-style: none; margin: 0 auto 28px; padding: 0; max-width: 620px; }
.foryou__list li{ position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--slate); }
/* A thin check, drawn rather than shipped, so it inherits the ink colour. */
.foryou__list li::before{
  content: ""; position: absolute; left: 6px; top: .48em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--slate); border-bottom: 1.5px solid var(--slate);
  transform: rotate(-45deg);
}
.foryou__close{
  text-align: center; font-style: italic; font-family: var(--font-display);
  font-size: 21px; color: var(--slate); margin-bottom: 14px;
}
.foryou__small{ text-align: center; font-size: 15px; color: var(--slate); max-width: 560px; margin: 0 auto; }

/* ---------- testimonials -------------------------------------------------- */
.quotes{ position: relative; }
.quotes__stage{ position: relative; max-width: 780px; margin: 0 auto; min-height: 210px; }
.quote{ display: none; text-align: center; }
.quote.is-live{ display: block; }
.quote__text{
  font-family: var(--font-display); font-size: 22px; line-height: 1.4;   /* 28px from 900px */
  color: var(--grey); margin: 0 0 18px;
}
.quote__who{ font-style: italic; color: var(--grey); margin: 0; }
.quotes__nav{ display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; }
.quotes__arrow{
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--slate); font-size: 22px; line-height: 1;
}
.quotes__arrow:hover{ color: var(--slate); }
.quotes__dots{ display: flex; gap: 2px; }
/* The dot looks 8px but the button around it is 32px, because a tap target under 24px is a
   real accessibility failure — and a carousel nobody can page through is worse than none.
   The visible dot is drawn with a pseudo-element; the button itself is transparent. */
.quotes__dot{
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; position: relative;
  display: grid; place-items: center;
}
.quotes__dot::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sky); transition: background .2s ease;
}
.quotes__dot.is-live::before{ background: var(--sky-ink); }
.quotes__dot:focus-visible{ outline: 2px solid var(--slate); outline-offset: 2px; }

/* ---------- why this exists ---------------------------------------------- */
/* Full width of its own column: a centred 640px measure, nothing narrower. */
.why{ max-width: 640px; margin-inline: auto; text-align: center; }
.why__waves{ width: 80px; height: auto; margin: 0 auto 22px; }
.why__text{
  font-family: var(--font-display); font-style: italic;
  font-size: 21px; line-height: 1.45; color: var(--slate);   /* 24px from 900px */
  margin: 0 0 20px;
}

/* ---------- connect + booking -------------------------------------------- */
/* Full-bleed watercolour band, then the calendar on white beneath it. */
/* White type on flat --sky is 1.73:1, so the band is built the way her own image bands are:
   a deeper base blue, the watercolour over it, and a light scrim over both. That way the
   white heading reads whether the illustration loads or not. */
.connect{
  position: relative;
  background-color: var(--sky-ink);
  background-image: url("/assets/img/SKY_PATTERN.png");
  background-size: cover; background-position: center;
  padding-block: var(--band);
}
.connect::before{
  content: ""; position: absolute; inset: 0;
  background: rgba(40, 48, 54, .30);
}
.connect__in{ position: relative; z-index: 1; max-width: 760px; margin-inline: auto; text-align: center; color: #fff; }
.connect h2{ color: #fff; margin-bottom: 22px; }
.connect__list{ list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
.connect__list li{ color: #fff; margin-bottom: 10px; font-size: 17px; }
.connect__list li::before{ content: "— "; }

.book{ padding-block: var(--band); }
.book__frame{
  max-width: 1000px; margin-inline: auto;
  border: 1px solid var(--sky); border-radius: 0;
  min-height: 700px; background: var(--white);
}
.book__frame iframe{ width: 100%; height: 700px; border: 0; display: block; }
.book__loading{ min-height: 700px; display: grid; place-content: center; text-align: center; padding: 40px 24px; }
.book__loading p{ margin: 0 0 8px; }

/* ---------- FAQ ----------------------------------------------------------- */
.faq__list{ max-width: 820px; margin: 0 auto; border-top: 1px solid var(--sky-line); }
.faq{ border-bottom: 1px solid var(--sky-line); }
.faq__q{
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 40px 22px 0; position: relative;
  font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--slate);
}
.faq__q::after{
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 22px; color: var(--sky-ink); line-height: 1;
}
.faq__q[data-open="1"]::after{ content: "\2212"; }
.faq__a{ display: none; padding: 0 40px 22px 0; }
.faq__a.is-live{ display: block; }
.faq__a p:last-child{ margin-bottom: 0; }

/* ---------- footer -------------------------------------------------------- */
/* The background stays her --sky. The type does not stay white: white on #B7C8CE measures
   1.73:1, which is unreadable and would fail the accessibility bar, so the wordmark and
   label are slate (5.19:1). This is the one place the brief's colour is overruled, and it
   is a text colour only — the band itself is unchanged. */
.ftr{ background: var(--sky); color: var(--slate); padding-block: 56px; text-align: center; }
.ftr__mark{
  font-family: var(--font-display); font-size: 22px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 6px;
}
.ftr .label{ color: var(--slate); margin-bottom: 22px; }
.ftr__note{ color: var(--slate); margin-bottom: 20px; }
.ftr__links{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ftr__links a{ color: var(--slate); text-decoration: none; border-bottom: 1px solid transparent; }
.ftr__links a:hover{ border-bottom-color: var(--slate); }

/* ---------- mobile sticky bar -------------------------------------------- */
.stickybar{
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: var(--white); border-top: 1px solid var(--sky);
  height: 64px; padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center;
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s ease, visibility .3s;
}
.stickybar[data-shown="1"]{ transform: none; visibility: visible; }
.stickybar .btn{ width: 100%; }
@media (min-width: 900px){ .stickybar{ display: none; } }

/* ---------- cookie card --------------------------------------------------- */
/* Card in the bottom-left on desktop, one slim row on mobile; it must never sit
   on a button, and it only appears once the visitor has shown some interest. */
.consent{
  position: fixed; z-index: 70; visibility: hidden;
  left: var(--gut); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 2 * var(--gut)));
  padding: 18px; border: 1px solid var(--sky-line); border-radius: 2px;
  background: var(--white); color: var(--slate);
  box-shadow: 0 14px 44px rgba(40, 48, 54, .16);
  transform: translateY(140%);
  transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility .42s;
}
html[data-consent="unset"] .consent[data-shown="1"]{ visibility: visible; transform: none; }
.consent__txt{ font-size: 14px; line-height: 1.45; color: var(--slate); margin: 0; }
.consent__txt a{ color: var(--sky-ink); }
.consent__short{ display: none; }
.consent__acts{ display: flex; gap: 10px; margin-top: 14px; }
.consent button{
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  min-height: 44px; padding: 0 16px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer;
}
.consent__yes{ flex: 1; background: var(--button); color: #fff; }
.consent__yes:hover{ background: var(--button-hover); }
.consent__no{ flex: 1; background: var(--white); color: var(--slate); border-color: var(--sky-line); }
@media (max-width: 760px){
  .consent{
    left: 0; right: 0; bottom: 0; width: auto;
    border-radius: 0; border: 0; border-top: 1px solid var(--sky);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 12px; max-height: 64px;
  }
  .consent__txt{ flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; }
  .consent__long{ display: none; }
  .consent__short{ display: inline; }
  .consent__acts{ flex: 0 0 auto; margin-top: 0; gap: 8px; }
  .consent button{ min-height: 44px; padding: 0 12px; }
  /* the booking bar shares this edge; step it up so the two never collide */
  html[data-consent="unset"] .stickybar{ bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- utilities ----------------------------------------------------- */
.skip{ position: absolute; left: -9999px; }
.skip:focus{ position: fixed; left: 12px; top: 12px; z-index: 90; background: #fff; padding: 10px 16px; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================================
   From 900px up: the desktop composition.
   ========================================================================== */
@media (min-width: 900px){
  body{ font-size: 19px; }
  h1{ font-size: 58px; }
  h2{ font-size: 43px; }
  :root{ --band: 96px; --gut: 40px; }

  .hdr__cta{ display: inline-flex; }
  .hero{ min-height: 88vh; align-items: center; padding-block: calc(var(--header-h) + 60px) 80px; }
  .hero__img--mobile{ display: none; }
  .hero__img--desktop{ display: block; }
  /* Left-to-right on desktop so the headline sits over the calmer side. */
  .hero__scrim{
    background: linear-gradient(to right,
      rgba(40,48,54,.72) 0%, rgba(40,48,54,.45) 45%, rgba(40,48,54,.22) 100%);
  }
  .hero__body{ font-size: 20px; }

  .intro__lead{ font-size: 34px; }

  .phases__list{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
  .phase__disc{ width: 200px; height: 200px; font-size: 72px; }

  /* Text left, photograph right, no gap between the two halves. */
  .split__grid{ grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split__media{ order: 0; }
  .split__media img{ height: 100%; aspect-ratio: auto; }
  .split__text{ padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; }

  .creds__badges{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; }
  .creds__badges img{ height: 64px; }
  .creds__logos{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .creds__logos img{ height: 28px; }

  .band img{ height: 420px; }

  .how__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }

  .quote__text{ font-size: 28px; }
  .quotes__stage{ min-height: 180px; }
  .quotes__arrow--prev{ position: absolute; left: -56px; top: 40%; }
  .quotes__arrow--next{ position: absolute; right: -56px; top: 40%; }
  .quotes__nav{ margin-top: 10px; }
  .quotes__dots{ display: none; }

  .why__text{ font-size: 24px; }

  .connect__list li{ font-size: 19px; }
}

@media (min-width: 1240px){
  :root{ --gut: 48px; }
}

/* --------------------------------------------------------------------------------
   Reduced motion. The carousel already stops advancing on its own when this
   preference is set (see site.js); this makes the transitions and smooth scrolling
   inert as well, so nothing moves for anyone who asked for no movement.
   -------------------------------------------------------------------------------- */

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