/* =========================================================
   Gathered in Community
   Palette and shapes drawn from the workshop flyer:
   flat colour blocking, arches, stripes.
   ========================================================= */

:root {
  /* Core palette */
  --ink: #25313F;        /* navy, headings + body */
  --teal: #26B5AA;         /* turquoise, navy text on it */
  --teal-dark: #1E9A90;
  --teal-ink: #137A72;     /* teal for text on white */
  --yellow: #F7C001;
  --orange: #F28C28;        /* fills and shapes */
  --orange-ink: #B4570A;    /* text on white */
  --orange-deep: #EF7D1F;   /* bold section background, navy text on it */

  /* Tints */
  --teal-soft: #DDF4F1;
  --yellow-soft: #FEF4D2;
  --peach-soft: #FFEDE0;
  --orange-soft: #FBE7D4;

  /* Surfaces (warm, no greys) */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --line: #F2DCC6;
  --muted: #33534F;

  --radius: 14px;
  --arch: 999px 999px 14px 14px;
  --shadow: 0 18px 40px -26px rgba(37,49,63,0.40);
  --maxw: 1180px;
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --font-script: "Sacramento", cursive;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--orange-ink); text-underline-offset: 3px; }
h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.5em;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* Layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem,5vw,4rem); }
.section { padding-block: clamp(3.5rem,8vw,6.5rem); }
.section--tint { background: var(--surface); }
.section--teal { background: var(--teal); color: var(--ink); }
.section--teal h1,.section--teal h2,.section--teal h3 { color: var(--ink); }
.section--teal .card h3 { color: var(--ink); }
.section--yellow { background: var(--yellow-soft); }
.section--peach { background: var(--yellow-soft); }
.narrow { max-width: 720px; }
.center { text-align: center; margin-inline: auto; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.75rem; font-weight: 700; color: var(--orange-ink);
  margin: 0 0 1rem;
}
.section--teal .eyebrow { color: var(--ink); }
.lead { font-size: clamp(1.1rem,2.1vw,1.32rem); line-height: 1.6; color: var(--muted); }
.lead--italic { font-style: italic; }
.section--teal .lead { color: var(--ink); }

.display { font-size: clamp(3rem,7vw,5.4rem); line-height: 1.0; letter-spacing:-0.025em; }
h1 { font-size: clamp(2.5rem,5.4vw,4rem); letter-spacing:-0.022em; }
h2 { font-size: clamp(2rem,4vw,3rem); letter-spacing:-0.02em; }
h3 { font-size: clamp(1.15rem,2vw,1.4rem); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1;
  padding: 1rem 1.9rem; border-radius: 999px; border: 2.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn--primary { background: var(--teal); color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn--accent { background: var(--yellow); color: var(--ink); }
.btn--accent:hover { background: #E4B000; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--orange-ink); border-color: var(--orange-ink); }
.btn--outline:hover { background: var(--orange-ink); color: #fff; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--teal-ink); }
.btn--light:hover { transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.center .btn-row { justify-content: center; }

/* Small freeform shapes scattered through the background */
.section, .hero { position: relative; overflow: hidden; }
.section > .container, .hero > .container { position: relative; z-index: 1; }
.shape { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.shape svg { display: block; width: 100%; height: auto; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-block: .8rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { height: 40px; width: auto; }
.footer .brand__logo { height: 54px; }
.nav__links { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
  padding-block: .3rem; border-bottom: 2.5px solid transparent;
}
.nav__links a:hover { color: var(--orange-ink); }
.nav__links a.is-active { color: var(--orange-ink); border-bottom-color: var(--yellow); }
.nav__cta { margin-left: .3rem; }
.nav__cta a.btn { color: var(--ink); border-bottom: 0; }
.nav__cta a.btn:hover { color: #fff; }
.nav__toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: .4rem; }
.nav__toggle span { display: block; width: 26px; height: 3px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* Hero with flyer-style colour block art */
.hero { background: var(--bg); overflow: hidden; }
.hero__grid { padding-block: clamp(3.5rem,9vw,7rem); }
.hero__content { max-width: 54ch; }
.hero__lead { margin-block: 1.3rem 2rem; }

/* Grids + cards */
.grid { display: grid; gap: clamp(1.2rem,2.4vw,1.7rem); }
.grid--2 { grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit,minmax(228px,1fr)); }

.card {
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem,2.4vw,1.9rem); position: relative; overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 11px; background: var(--teal); }
.card--teal::before { background: var(--teal); }
.card--orange::before { background: var(--orange); }
.card--yellow::before { background: var(--yellow); }
.card--peach::before { background: var(--ink); }
.figure__flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.figure img { position: relative; z-index: 1; }
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--muted); font-size: .98rem; }
.card__tag { display: inline-block; font-family: var(--font-script); font-size: 1.35rem; line-height: 1; color: var(--orange-ink); margin-bottom: .4rem; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { min-height: 320px; }
.figure {
  position: relative; overflow: hidden;
  width: 100%; height: 100%; min-height: 380px;
  display: grid; place-items: center; padding: 0;
  border-radius: clamp(110px,18vw,190px) clamp(110px,18vw,190px) 26px 26px;
  color: #fff;
}
.figure--b { border-radius: 26px 26px clamp(110px,18vw,190px) clamp(110px,18vw,190px); }
.figure--c { border-radius: clamp(110px,18vw,190px) 26px 26px clamp(110px,18vw,190px); }
.figure--d { border-radius: 26px clamp(110px,18vw,190px) clamp(110px,18vw,190px) 26px; }
.figure--teal { background: var(--teal); }
.figure--orange { background: var(--orange); }
.figure--yellow { background: var(--yellow); color: var(--ink); }

/* Statement */
.statement { max-width: 900px; margin-inline: auto; text-align: center; }
.statement p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem,2.9vw,2rem); line-height: 1.35; color: #fff; margin: 0; }
.statement cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }

/* Detail list (workshop) */
.detail { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.detail li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.detail .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); margin-top: .45rem; }
.detail li:nth-child(2) .dot { background: var(--teal); }
.detail li:nth-child(3) .dot { background: var(--orange); }

/* Event band */
.event { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: var(--yellow); color: var(--ink); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.2rem); }
.event > div { flex: 1 1 240px; }
.event .btn { flex: 0 0 auto; }
.event h3 { margin: 0 0 .2rem; }
.event p { margin: 0; font-weight: 600; }

/* FAQ */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 2px solid var(--line); padding: 1.05rem 0; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange-ink); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: .85rem; color: var(--muted); }

/* Booking */
.booking { background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: clamp(1.7rem,4vw,2.8rem); text-align: center; }
.booking__frame { width: 100%; min-height: 640px; border: 0; border-radius: var(--radius); }
.setup-note { border: 2px dashed var(--orange); background: var(--orange-soft); color: #7a4211; border-radius: var(--radius); padding: 1.05rem 1.25rem; font-size: .93rem; text-align: left; margin-bottom: 1.5rem; }
.setup-note code { background: #f5d9bd; padding: .1rem .4rem; border-radius: 5px; font-size: .88em; }

/* Footer */
.footer { background: var(--teal); color: var(--ink); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(37,49,63,.2); }
.footer__brand p { color: var(--ink); max-width: 34ch; margin-top: 1rem; font-size: .96rem; }
.footer h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; color: var(--ink); margin: 0 0 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .96rem; }
.footer__bottom { padding-top: 1.5rem; font-size: .83rem; color: var(--ink); }

.mb-lg { margin-bottom: 2.2rem; }
.text-muted { color: var(--muted); }

/* Responsive */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { aspect-ratio: 16 / 6; max-height: 200px; }
  .hero__art .capsule { left: 4%; width: 26%; }
  .hero__art .corner { width: 26%; height: 62%; }
  .hero__content { max-width: none; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .brand__logo { height: 32px; }
  .footer .brand__logo { height: 44px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: .3rem; background: #fff; border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1.25rem,5vw,4rem) 1.5rem; box-shadow: var(--shadow); display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { width: 100%; padding-block: .6rem; }
  .nav__cta { margin: .5rem 0 0; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }


/* ---------- Placeholders for content still to come ---------- */
.ph {
  background: var(--yellow-soft);
  box-shadow: inset 0 -2px 0 #E3AE33;
  padding: 0 .28rem; border-radius: 3px; font-style: normal;
}
.photo-ph {
  aspect-ratio: 4 / 5; border: 2px dashed var(--orange-ink); border-radius: 18px;
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: var(--peach-soft); color: var(--orange-ink);
  font-size: .92rem; font-weight: 600; line-height: 1.5;
}

/* ---------- Offering blocks with colour coding ---------- */
.offering { border-left: 7px solid var(--teal); padding-left: clamp(1.2rem,3vw,2.4rem); }
.offering--teal   { border-color: var(--teal); }
.offering--orange { border-color: var(--orange); }
.offering--yellow { border-color: var(--yellow); }
.offering--peach  { border-color: var(--ink); }
.offering .eyebrow--teal   { color: var(--teal-ink); }
.offering .eyebrow--orange { color: var(--orange-ink); }
.offering .eyebrow--yellow { color: #9A7407; }
.offering .eyebrow--peach  { color: var(--ink); }

/* ---------- Two audience paths ---------- */
.paths { display: grid; gap: clamp(1.2rem,2.5vw,1.8rem); grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.path {
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem,3vw,2.2rem); position: relative; overflow: hidden;
}
.path::before { content:""; position:absolute; inset:0 0 auto 0; height:8px; background: var(--teal); }
.path--b::before { background: var(--orange); }
.path h3 { margin-top: .4rem; }
.path p { color: var(--muted); font-size: 1rem; }
.path .btn { margin-top: 1rem; }

/* ---------- Practical details ---------- */
.facts { display: grid; gap: 0; margin: 0; padding: 0; }
.facts div { display: grid; grid-template-columns: minmax(150px,32%) 1fr; gap: 1rem;
  padding: .85rem 0; border-bottom: 2px solid var(--line); }
.facts dt { font-weight: 700; color: var(--ink); margin: 0; }
.facts dd { margin: 0; color: var(--muted); }

/* ---------- Email signup ---------- */
.signup { background: var(--yellow-soft); border-radius: var(--radius); padding: clamp(1.6rem,4vw,2.6rem); }
.signup__form { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.signup__form input {
  flex: 1 1 260px; font-family: var(--font-body); font-size: 1rem;
  padding: .95rem 1.1rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
}
.signup__form input::placeholder { color: #7A8A86; }
@media (max-width: 640px) { .facts div { grid-template-columns: 1fr; gap: .2rem; } }
.footer .ph { color: var(--ink); }


/* ---------- Bold solid colour sections ---------- */
.section--yellow-solid { background: var(--yellow); color: var(--ink); }
.section--yellow-solid h1,.section--yellow-solid h2,.section--yellow-solid h3 { color: var(--ink); }
.section--yellow-solid .lead { color: var(--ink); }
.section--yellow-solid .eyebrow { color: var(--teal-ink); }

.section--orange-solid { background: var(--orange-deep); color: var(--ink); }
.section--orange-solid h1,.section--orange-solid h2,.section--orange-solid h3 { color: var(--ink); }
.section--orange-solid .lead { color: var(--ink); }
.section--orange-solid .eyebrow { color: var(--ink); }

/* cards and panels keep their own surface on colour */
.section--yellow-solid .card { border-color: var(--ink); }
.section--orange-solid .card { border-color: #7E3F0B; }
.section--orange-solid .card h3 { color: var(--ink); }
.section--yellow-solid .facts div { border-bottom-color: rgba(37,49,63,.25); }
.section--orange-solid .facts div { border-bottom-color: rgba(255,255,255,.3); }
.section--orange-solid .facts dt { color: var(--ink); }
.section--yellow-solid .facts dd { color: var(--ink); }
.section--orange-solid .facts dd { color: var(--ink); }
.section--yellow-solid .offering { border-left-color: var(--ink); }
.section--orange-solid .offering { border-left-color: var(--yellow); }
.section--yellow-solid .btn--outline { color: var(--ink); border-color: var(--ink); }
.section--orange-solid .btn--outline { color: var(--ink); border-color: var(--ink); }
.section--yellow-solid .btn--outline:hover { background: var(--ink); color: #fff; }
.section--orange-solid .btn--outline:hover { background: var(--ink); color: #fff; }
.section--yellow-solid .ph, .section--orange-solid .ph { background: #fff; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* ---------- Founder portrait ---------- */
.portrait { display: block; width: 100%; max-width: 440px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; margin-inline: auto; }

/* ---------- Relational therapy detail ---------- */
.therapy-list { display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.therapy-list h3 { margin-bottom: .35rem; }
.therapy-list ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.therapy-list li { margin-bottom: .25rem; }

/* ---------- Keep long email addresses inside their cards ---------- */
.grid > * { min-width: 0; }
.card .btn { max-width: 100%; white-space: normal; }

/* ---------- Home headline and mission ---------- */
.display em { font-style: italic; font-weight: inherit; }
.display .underline { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; }
.mission { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.45; font-weight: 500; margin: 0; }

/* ---------- About bio ---------- */
.signoff { font-weight: 600; color: var(--ink); }
.hero__content .display { font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.05; }
@media (min-width: 901px) { .hero__content:has(.display) { max-width: 72ch; } }

/* ---------- About page spacing ---------- */
.hero--about .hero__grid { padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero--about .hero__lead { margin-bottom: 0; }
.section--bio { padding-top: clamp(1.5rem, 4vw, 3rem); }
.split--bio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split--bio .split__media { min-height: 0; position: static; }
.split--bio h2 { margin-top: 0; }
.split--bio .portrait { margin-top: .4rem; }
@media (max-width: 900px) {
  .split--bio { grid-template-columns: 1fr; gap: 2rem; }
  .split--bio .portrait { max-width: 320px; margin-inline: 0; }
}
@media (max-width: 760px) {
  .hero--about .shape { display: none; }
}

/* ---------- Buttons on teal backgrounds ---------- */
.section--teal .btn--primary { background: #FFFFFF; color: var(--ink); }
.section--teal .btn--primary:hover { background: var(--yellow); color: var(--ink); }

/* ---------- Values: 4 then 3 on wide screens ---------- */

@media (max-width: 1000px) {
  .grid--values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--values > *, .grid--values > :nth-child(n+5) { grid-column: auto; }
}
@media (max-width: 640px) {
  .grid--values { grid-template-columns: 1fr; }
}


/* =========================================================
   Theme: mustard, teal and dark plum on white, clean line borders
   ========================================================= */
:root {
  --ink: #2A1530;          /* dark plum: headings, text, footer */
  --mustard: #F2BA1B;      /* main color: buttons, signup box */
  --teal-fill: #4CC0B7;    /* second color: boxes and outlines */
  --teal-text: #1A9C94;    /* teal for large text on white */
  --mustard-text: #7E6110; /* small accent text on white */
  --teal: var(--mustard); --teal-dark: #D9A410; --teal-ink: var(--mustard-text);
  --yellow: var(--teal-fill); --orange: var(--mustard); --orange-ink: var(--mustard-text); --orange-deep: var(--mustard);
  --line: #EDE7EF; --muted: #4D3F52;
  --teal-soft: #FBF3DC; --yellow-soft: #E6F4F3; --peach-soft: #FBF3DC; --orange-soft: #FBF3DC;
  --box-width: 960px;
}
body { color: var(--ink); }
h1, h2 { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
a { color: var(--mustard-text); }

/* Keyboard focus: a dark plum ring that shows on white and on mustard */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.footer :focus-visible { outline-color: var(--mustard); }

/* Skip link for keyboard and screen reader users */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; color: #fff; }

/* Hero */
.hero h1.display { font-weight: 800; line-height: 1.02; letter-spacing: -.025em; font-size: clamp(2.5rem,4.8vw,3.9rem); }
.hero h1 em { color: var(--teal-text); font-style: italic; }
.hero .underline { text-decoration: none; padding-bottom: .18em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%2024%22%3E%3Cpath%20d%3D%22M4%2C14%20C40%2C4%2070%2C22%20105%2C12%20S170%2C4%20205%2C14%20S265%2C20%20296%2C9%22%20fill%3D%22none%22%20stroke%3D%22%23F2BA1B%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") left bottom/100% .32em no-repeat; }
.hero__content { max-width: 600px; }
.hero--compact .hero__grid { padding-bottom: clamp(.5rem,2vw,1.2rem); }
.hero--compact + .section { padding-top: clamp(1rem,3vw,2rem); }

/* Buttons */
.btn--primary, .nav__cta a.btn, .section--teal .btn--primary { background: var(--mustard); color: var(--ink); }
.btn--primary:hover, .nav__cta a.btn:hover, .section--teal .btn--primary:hover { background: var(--ink); color: #fff; }
.btn--outline { color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.nav__links a.is-active { color: var(--ink); border-bottom-color: var(--mustard); }
.nav__links a:hover { color: var(--teal-text); }

/* Boxed sections: white page, one box per section, all the same width */
.section--yellow-solid, .section--orange-solid, .section--teal { background: #fff; color: var(--ink); padding-block: clamp(1.5rem,4vw,2.6rem); }
.section--yellow-solid > .container, .section--orange-solid > .container, .section--teal > .container {
  box-sizing: border-box; max-width: var(--box-width); border: 2px solid var(--teal-fill); border-radius: var(--radius); padding: clamp(1.8rem,5vw,3.4rem);
}
.section--yellow-solid h1, .section--yellow-solid h2, .section--yellow-solid h3,
.section--orange-solid h1, .section--orange-solid h2, .section--orange-solid h3,
.section--orange-solid .lead, .section--orange-solid .facts dt, .section--orange-solid .facts dd { color: var(--ink); }
.section--yellow-solid .eyebrow, .section--orange-solid .eyebrow, .section--teal .eyebrow { color: var(--ink); }
.section--yellow-solid .btn--outline, .section--orange-solid .btn--outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.section--yellow-solid .btn--outline:hover, .section--orange-solid .btn--outline:hover { background: var(--ink); color: #fff; }
.mission { font-weight: 600; color: var(--ink); }
.offering, .section--orange-solid .offering { border-left: 0; padding-left: 0; }

/* Solid color boxes */
.fill-teal > .container { background: var(--teal-fill); border-color: var(--teal-fill); }
.fill-mustard > .container { background: var(--mustard); border-color: var(--mustard); }
.fill-teal .facts div, .fill-mustard .facts div { border-bottom-color: rgba(42,21,48,.25); }
.fill-teal .facts div:last-child, .fill-mustard .facts div:last-child { border-bottom: 0; }

/* Email signup */
.signup { box-sizing: border-box; max-width: var(--box-width); margin-inline: auto; background: var(--mustard); border: 2px solid var(--mustard); }
.signup h2, .signup p { color: var(--ink); }
.signup__label { display: block; font-weight: 600; font-size: .95rem; margin: 1.4rem 0 .45rem; }
.signup__form { margin-top: 0; }
.signup__form input { min-width: 0; width: 100%; }
.signup__form input::placeholder { color: #5E5462; }
.signup .btn--primary { background: var(--ink); color: #fff; }
.signup .btn--primary:hover { background: #fff; color: var(--ink); }
.signup__status { margin: .8rem 0 0; font-weight: 600; min-height: 1.4em; }

/* Booking */
.booking { box-sizing: border-box; max-width: var(--box-width); margin-inline: auto; border: 2px solid var(--mustard); }

/* Cards and values: equal widths, four then three centered */
.card { border: 2px solid var(--mustard); }
.card::before { display: none; }
.grid--values { display: flex; flex-wrap: wrap; justify-content: center; --gap: 1.5rem; gap: var(--gap); }
.grid--values > * { flex: 0 0 calc((100% - 3 * var(--gap, 1.4rem)) / 4); box-sizing: border-box; }
.grid--values .card:nth-child(3n+1) { border-color: var(--mustard); }
.grid--values .card:nth-child(3n+2) { border-color: var(--teal-fill); }
.grid--values .card:nth-child(3n) { border-color: var(--ink); }
.grid--values .card h3 { color: var(--ink); }
@media (max-width: 900px) { .grid--values > * { flex-basis: calc((100% - var(--gap, 1.4rem)) / 2); } }
@media (max-width: 560px) { .grid--values > * { flex-basis: 100%; } }

/* FAQ */
.faq details { border-color: var(--line); }
.faq summary::after { color: var(--teal-text); }

/* Footer: dark plum band */
.footer { background: var(--ink); color: #F3EEF4; border-top: 0; }
.footer a, .footer p, .footer li, .footer__brand p, .footer__bottom { color: #F3EEF4; }
.footer__heading { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; color: var(--mustard); margin: 0 0 1rem; line-height: 1.4; }
.footer__grid { border-bottom-color: rgba(255,255,255,.18); }

@media (max-width: 900px) {
  .section--yellow-solid > .container, .section--orange-solid > .container { margin-inline: 1.25rem; width: auto; }
}
.narrow--box { max-width: calc(var(--box-width) + 2 * clamp(1.25rem, 5vw, 4rem)); }
.booking { width: 100%; }
/* Signup with name and email: two fields side by side, button below */
.signup__form--stacked { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; align-items: end; }
.signup__form--stacked .signup__label { margin: 0 0 .45rem; }
.signup__form--stacked .btn { justify-self: start; }
@media (max-width: 600px) { .signup__form--stacked { grid-template-columns: 1fr; } }
/* Home page: the hero lines up with the boxes below, all one width */
.hero--home .hero__grid { display: block; }
.hero--home .hero__content { max-width: none; }
/* keep long lines comfortable to read inside the wider boxes */
.mission { max-width: none; margin-inline: 0; }
.fill-teal .container.center, .section--yellow-solid .container.center { text-align: left; }
.signup > p { max-width: 60ch; }
.hero--home .hero__lead { max-width: 62ch; }
.section--orange-solid .offering p, .section--orange-solid .offering ul { max-width: 70ch; }
/* Home mission: no box, set like the hero headline */
.fill-teal > .container { background: transparent; border: 0; border-radius: 0; padding-block: clamp(.5rem,2vw,1rem); }
.fill-teal .mission { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem,3.3vw,2.6rem); line-height: 1.12; letter-spacing: -.022em; color: var(--ink); }
.fill-teal .mission em { color: var(--teal-text); font-style: italic; }
@media (max-width: 900px) { .fill-teal > .container { margin-inline: auto; padding-inline: clamp(1.25rem,5vw,4rem); } }
.fill-teal > .container { padding-inline: 0; }
@media (max-width: 900px) { .fill-teal > .container { margin-inline: 1.25rem; } }
/* Mission: plum headline text inside a teal outline */
.fill-teal > .container { border: 2px solid var(--teal-fill); border-radius: var(--radius); padding: clamp(1.8rem,5vw,3.4rem); }
@media (max-width: 900px) { .fill-teal > .container { margin-inline: 1.25rem; } }
/* Mission: dark plum box with a teal outline, white headline text */
.fill-teal > .container { background: var(--ink); border: 3px solid var(--teal-fill); }
.fill-teal .mission { color: #FFFFFF; }
/* Mission: plum box framed by a thin moving dashed line in mustard, teal and plum */
.fill-teal > .container { position: relative; border: 0; }
.dash-frame { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.dash { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 18 42; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; }
.dash--1 { stroke: var(--mustard); stroke-dashoffset: 0; animation-name: dash-1; }
.dash--2 { stroke: var(--teal-fill); stroke-dashoffset: -20; animation-name: dash-2; }
.dash--3 { stroke: var(--ink); stroke-dashoffset: -40; animation-name: dash-3; }
@keyframes dash-1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -60; } }
@keyframes dash-2 { from { stroke-dashoffset: -20; } to { stroke-dashoffset: -80; } }
@keyframes dash-3 { from { stroke-dashoffset: -40; } to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .dash { animation: none; } }
/* Mission: no fill, just the moving dashed outline */
.fill-teal > .container { background: transparent; }
.fill-teal .mission { color: var(--ink); }
.dash-frame { inset: 0; width: 100%; height: 100%; }
/* separate dashes with clear gaps, so the outline reads as broken lines, not a solid frame */
.dash { stroke-dasharray: 18 72; animation-duration: 4s; }
.dash--1 { stroke-dashoffset: 0; animation-name: dashgap-1; }
.dash--2 { stroke-dashoffset: -30; animation-name: dashgap-2; }
.dash--3 { stroke-dashoffset: -60; animation-name: dashgap-3; }
@keyframes dashgap-1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -90; } }
@keyframes dashgap-2 { from { stroke-dashoffset: -30; } to { stroke-dashoffset: -120; } }
@keyframes dashgap-3 { from { stroke-dashoffset: -60; } to { stroke-dashoffset: -150; } }
/* three long lines, one per color, spaced apart and slowly travelling around the box */
.dash { stroke-width: 3; stroke-dasharray: 72 228; animation-duration: 28s; animation-timing-function: linear; }
.dash--1 { stroke-dashoffset: 0; animation-name: longline-1; }
.dash--2 { stroke-dashoffset: -100; animation-name: longline-2; }
.dash--3 { stroke-dashoffset: -200; animation-name: longline-3; }
@keyframes longline-1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -300; } }
@keyframes longline-2 { from { stroke-dashoffset: -100; } to { stroke-dashoffset: -400; } }
@keyframes longline-3 { from { stroke-dashoffset: -200; } to { stroke-dashoffset: -500; } }
/* many long lines around the box (mustard, teal, plum repeating), spaced so they never touch, all drifting slowly */
.dash { stroke-width: 3; stroke-dasharray: 22 78; animation-duration: 60s; animation-timing-function: linear; }
.dash--1 { stroke-dashoffset: 0; animation-name: many-1; }
.dash--2 { stroke-dashoffset: -33.33; animation-name: many-2; }
.dash--3 { stroke-dashoffset: -66.67; animation-name: many-3; }
@keyframes many-1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -300; } }
@keyframes many-2 { from { stroke-dashoffset: -33.33; } to { stroke-dashoffset: -333.33; } }
@keyframes many-3 { from { stroke-dashoffset: -66.67; } to { stroke-dashoffset: -366.67; } }

/* each line paces slowly back and forth in its own spot, on its own timing */
.dash { stroke-width: 3; stroke-dasharray: 22 278; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.dash-l0 { stroke: var(--mustard); stroke-dashoffset: -0.00; animation-name: pace-0; animation-duration: 11s; animation-delay: 0s; }
@keyframes pace-0 { from { stroke-dashoffset: 4.00; } to { stroke-dashoffset: -4.00; } }
.dash-l1 { stroke: var(--teal-fill); stroke-dashoffset: -33.33; animation-name: pace-1; animation-duration: 14s; animation-delay: -4s; }
@keyframes pace-1 { from { stroke-dashoffset: -29.83; } to { stroke-dashoffset: -36.83; } }
.dash-l2 { stroke: var(--ink); stroke-dashoffset: -66.67; animation-name: pace-2; animation-duration: 9.5s; animation-delay: -7s; }
@keyframes pace-2 { from { stroke-dashoffset: -62.67; } to { stroke-dashoffset: -70.67; } }
.dash-l3 { stroke: var(--mustard); stroke-dashoffset: -100.00; animation-name: pace-3; animation-duration: 13s; animation-delay: -2s; }
@keyframes pace-3 { from { stroke-dashoffset: -97.00; } to { stroke-dashoffset: -103.00; } }
.dash-l4 { stroke: var(--teal-fill); stroke-dashoffset: -133.33; animation-name: pace-4; animation-duration: 10.5s; animation-delay: -9s; }
@keyframes pace-4 { from { stroke-dashoffset: -129.33; } to { stroke-dashoffset: -137.33; } }
.dash-l5 { stroke: var(--ink); stroke-dashoffset: -166.67; animation-name: pace-5; animation-duration: 15s; animation-delay: -5s; }
@keyframes pace-5 { from { stroke-dashoffset: -163.17; } to { stroke-dashoffset: -170.17; } }
.dash-l6 { stroke: var(--mustard); stroke-dashoffset: -200.00; animation-name: pace-6; animation-duration: 12s; animation-delay: -1s; }
@keyframes pace-6 { from { stroke-dashoffset: -197.00; } to { stroke-dashoffset: -203.00; } }
.dash-l7 { stroke: var(--teal-fill); stroke-dashoffset: -233.33; animation-name: pace-7; animation-duration: 9s; animation-delay: -6s; }
@keyframes pace-7 { from { stroke-dashoffset: -229.33; } to { stroke-dashoffset: -237.33; } }
.dash-l8 { stroke: var(--ink); stroke-dashoffset: -266.67; animation-name: pace-8; animation-duration: 13.5s; animation-delay: -3s; }
@keyframes pace-8 { from { stroke-dashoffset: -263.17; } to { stroke-dashoffset: -270.17; } }
@media (prefers-reduced-motion: reduce) { .dash { animation: none; } }
/* Mission: light words with the key words in bold */
.fill-teal .mission { font-weight: 400; letter-spacing: -.015em; }
.fill-teal .mission strong { font-weight: 800; letter-spacing: -.022em; }
/* Mission: no frame, just a short mustard bar on the left */
.dash-frame { display: none; }
.fill-teal > .container { border: 0; border-radius: 0; padding: 0 0 0 clamp(1.4rem,3vw,2rem); position: relative; }
.fill-teal > .container::before { content: ""; position: absolute; left: 0; top: .35em; width: 6px; height: 3.2em; border-radius: 3px; background: var(--mustard); }