/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=La+Belle+Aurore&family=Newsreader:opsz,wght@6..72,500&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap
   preload: Nunito Sans:400,Newsreader:500
*/
@font-face {
  font-family: 'La Belle Aurore';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/la-belle-aurore-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'La Belle Aurore';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/la-belle-aurore-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* == end fonts == */

/* ===========================================================================
   Bloom (Blooming Transitions)
   Built to concept 2, A Place to Bloom, from the four page mockups the assets
   chat drew: design/mockup/home-941.png, services-941.png, meet-mattie-941.png
   and contact-1024.png.

   Every value below traces to a measurement in design/SPEC.md. Sizes are
   written in MOCKUP pixels as `N * var(--u)`: the 941 mockups set the design
   width D, so at a 941 window --u is exactly 1px and a screenshot lays over
   the mockup one to one. contact-1024 was drawn 1024 wide at the same type
   sizes (SPEC.md, "Contact is drawn at another width"), so it is built on the
   same unit.

   1200 MAX, NO BLEED (sites/.claude/rules/BUILD.md, "The defaults"): --u
   renders the 941 design at 1200 and stops growing there, and the header,
   page and footer are one 1200 column.
   =========================================================================== */

:root {
  --u: min(calc(1200px / 941), 100vw / 941);

  /* --- Colour (SPEC.md, "Colour": the darkest 3% of each text box, an area
     average for each band, never named by eye) ----------------------------- */
  --paper: #FAF6EF;        /* page ground, footer, the cream hero shape (#F9F6F0) */
  --ink: #17233A;          /* headings (band h2 #010619 darkest, antialiased) */
  --text: #2C3546;         /* body copy (#1A2434 darkest 3%) */
  --muted: #4F5768;        /* card copy, captions, footer small print */
  --green: #1F4D36;        /* buttons, CTA band (#255039 band average) */
  --green-h: #1C4632;      /* hero line 1 */
  --green-card: #3F6B52;   /* For Participants shape (#487159 average, under copy) */
  --purple: #644684;       /* hero line 2 (#5A3B73 darkest) */
  --purple-card: #735889;  /* For Families shape (#7B5D90 average) */
  --script: #6F5590;       /* handwritten lines on light ground (#7D649A, darkened to 4.5:1) */
  --lav: #E3D8EB;          /* lavender bands (#E2D6EA, #E7DEEF) */
  --tint-green: #D3E2BF;   /* soft circles: services, steps */
  --tint-lav: #C9BCDB;
  --tint-pink: #E8C2D6;
  --line: #E4DED3;         /* footer rule */

  /* --- Layout ---------------------------------------------------------- */
  --gut: max(18px, calc(64 * min(1200px / 941, 100vw / 941)));  /* x 64 to first ink */
  --wrap: calc(814 * var(--u));                                  /* 64 -> 878 */

  /* --- Type (SPEC.md, "Type scale") ------------------------------------ */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "La Belle Aurore", "Segoe Script", cursive;

  --f-h1: max(34px, calc(41.5 * var(--u)));   /* solved from "Grow your skills." 282 wide; two lines, pitch 45 */
  --lh-h1: 1.07;                              /* 45 / 42 */
  --f-h2: max(28px, calc(33.3 * var(--u)));   /* solved: "Everyone deserves a place to grow." 465 wide; Hi, I'm Mattie 34.1 */
  --f-h2s: max(26px, calc(28.7 * var(--u)));  /* solved: Our Services 27.6, How It Works 29.9 */
  --f-h3: max(21px, calc(24.8 * var(--u)));   /* solved: "Participants" 120 wide */
  --f-h4: max(18px, calc(17.8 * var(--u)));   /* solved: "Career Readiness" 121 wide */
  --f-lead: max(17px, calc(16 * var(--u)));   /* solved: hero line 1, 306 wide; pitch 21.5 */
  --f-body: max(16px, calc(12.7 * var(--u))); /* solved: band line 1, 483 wide; pitch 18 */
  --f-small: max(14px, calc(10.3 * var(--u)));/* solved: "Explore work interests and" 129 wide; pitch 14.5 */
  --f-nav: max(15px, calc(9.9 * var(--u)));   /* solved: "Our Services" 60 wide */
  --f-btn: max(15px, calc(12.3 * var(--u)));  /* solved: "Ask About Programs" 117 wide */
  --f-eye: max(11px, calc(9 * var(--u)));     /* BELONGING COMES FIRST, tracked 0.22em */
  --f-hand: max(22px, calc(24 * var(--u)));

  --btn-h: max(44px, calc(34 * var(--u)));    /* hero button 183 x 34 */
  --radius: calc(8 * var(--u));               /* photo cards */
}

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--f-body);
  line-height: 1.45;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* No bleed: one 1200 column, bands and photographs included. */
.site-header, main, .site-footer { max-width: 1200px; margin-inline: auto; }
main { overflow: hidden; background: var(--paper); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

.skip-link {
  position: absolute; left: -9999px; top: 16px; z-index: 1000;
  padding: 12px 20px; background: var(--green); color: #fff;
  text-decoration: none; font-weight: 700; border-radius: 999px;
}
.skip-link:focus { left: 16px; outline: 3px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------- type --- */
.h1, .h2, .h2s, .h3, .h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.h1 { font-size: var(--f-h1); line-height: var(--lh-h1); letter-spacing: -0.025em; }
.h1 .l1 { color: var(--green-h); display: block; }
.h1 .l2 { color: var(--purple); display: block; }
.h2 { font-size: var(--f-h2); line-height: 1.15; text-wrap: balance; }
.h2s { font-size: var(--f-h2s); line-height: 1.15; }
.h3 { font-size: var(--f-h3); line-height: 1.15; }
.h4 { font-size: var(--f-h4); line-height: 1.2; }
.eyebrow {
  display: block;
  font-family: var(--sans); font-weight: 700; font-size: var(--f-eye);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  margin-bottom: max(6px, calc(6 * var(--u)));
}
.lead { font-size: var(--f-lead); line-height: 1.3; color: var(--text); }
.small { font-size: var(--f-small); line-height: 1.32; color: var(--muted); }
.hand { font-family: var(--hand); font-size: var(--f-hand); line-height: 1.3; color: var(--script); font-weight: 400; }

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: var(--btn-h); padding-inline: max(20px, calc(22 * var(--u)));
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--green); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: var(--f-btn); line-height: 1.2; white-space: nowrap;
  transition: background-color .15s ease;
}
.btn:hover { background: #163a28; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--lav); }
.btn .arrow { font-size: 1em; line-height: inherit; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .35em; min-height: 44px;
  color: var(--purple); font-weight: 600; font-size: var(--f-small);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}

/* -------------------------------------------------------------- header --- */
.site-header { position: relative; z-index: 20; background: var(--paper); }
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: max(68px, calc(60 * var(--u)));
}
.brand { display: block; flex: none; }
.brand img { width: max(104px, calc(110 * var(--u))); height: auto; }
.nav { display: flex; align-items: center; gap: calc(34 * var(--u)); }
.nav__links { display: flex; align-items: center; gap: calc(30 * var(--u)); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--f-nav); font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav__links a:hover { color: var(--purple); }
.nav__links a[aria-current="page"] { color: var(--purple); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
.nav__toggle { display: none; }
.nav__menu-cta { display: none !important; }

@media (max-width: 860px) {
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px;
    background: transparent; border: 1.5px solid var(--green); color: var(--green);
    font-weight: 700; font-size: 15px; cursor: pointer;
  }
  .nav__cta { display: none; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gut) 22px;
    background: var(--paper); box-shadow: 0 14px 24px rgba(23, 35, 58, .12);
  }
  .nav__links a { min-height: 50px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav__links a[aria-current="page"] { text-underline-offset: 6px; }
  .nav__links .nav__menu-cta { display: inline-flex !important; margin-top: 16px; border: 0; color: #fff; text-decoration: none; }
  .nav.is-open .nav__links { display: flex; }
}

/* --------------------------------------------------------------- hero --- */
/* Band 48-339 of the mockup (292 tall): the photograph across the whole
   column and a cream shape holding the copy on its left, 0 -> 415 wide. */
.hero { position: relative; min-height: calc(292 * var(--u)); display: flex; align-items: flex-end; }
.hero__photo { position: absolute; inset: 0; }
.hero__photo picture { display: contents; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 65% 50%); }
.hero__copy {
  position: relative; z-index: 2;
  width: calc(430 * var(--u));
  margin-top: calc(28 * var(--u));
  padding: calc(46 * var(--u)) calc(56 * var(--u)) calc(30 * var(--u)) var(--gut);
  background: var(--paper);
  border-radius: 0 60% 0 0 / 0 70% 0 0;   /* the cream shape: flat left and bottom, a long curve top right */
}
.hero__copy .lead { margin-top: calc(14 * var(--u)); max-width: calc(330 * var(--u)); }
.hero__actions { margin-top: calc(18 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px calc(22 * var(--u)); }
.hero__note {
  position: absolute; z-index: 2; right: calc(300 * var(--u)); top: calc(26 * var(--u));
  color: #fff; transform: rotate(-12deg); transform-origin: left top;
  font-size: max(19px, calc(23 * var(--u))); line-height: 1.15;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.hero__note .heart { display: block; font-family: var(--sans); font-size: .9em; margin-top: .25em; }
.hero--inner .h1 { font-size: max(32px, calc(38 * var(--u))); }

/* -------------------------------------------------------- lavender band --- */
.band-lav { position: relative; background: var(--lav); text-align: center; padding-block: calc(24 * var(--u)) calc(26 * var(--u)); }
.band-lav > .wrap { position: relative; z-index: 1; }
.band-lav p { max-width: calc(500 * var(--u)); margin: calc(12 * var(--u)) auto 0; line-height: 1.33; }
.band-lav p + p { margin-top: calc(8 * var(--u)); }
.band-lav .label { font-weight: 800; color: var(--green); }
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco--leaves-l { left: 0; top: 50%; transform: translateY(-50%); width: calc(150 * var(--u)); }
.deco--sprig-r { right: calc(12 * var(--u)); bottom: 0; width: calc(110 * var(--u)); }

/* ------------------------------------------------------ audience cards --- */
.audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u)); }
.acard { position: relative; border-radius: var(--radius); overflow: hidden; min-height: calc(212 * var(--u)); display: flex; align-items: flex-end; color: #fff; }
.acard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acard__shape {
  position: relative; z-index: 1; width: max(52%, 250px);
  padding: calc(28 * var(--u)) calc(52 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
  border-radius: 0 78% 0 0 / 0 62% 0 0;
  background: var(--green-card);
}
.acard--families .acard__shape { background: var(--purple-card); }
.acard__shape .h3 { color: #fff; }
.acard__shape p { margin-top: calc(8 * var(--u)); font-size: var(--f-small); line-height: 1.32; }
.acard__go {
  position: absolute; z-index: 2; right: calc(18 * var(--u)); bottom: calc(18 * var(--u));
  width: max(44px, calc(36 * var(--u))); height: max(44px, calc(36 * var(--u)));
  border-radius: 50%; background: var(--paper); color: var(--ink); text-decoration: none;
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
}
.acard__go:hover { background: var(--lav); }
.acard__icon { width: max(26px, calc(30 * var(--u))); margin-bottom: calc(2 * var(--u)); }

/* ---------------------------------------------------------- Mattie note --- */
.note { display: grid; grid-template-columns: calc(250 * var(--u)) minmax(0, 1fr) calc(170 * var(--u)); align-items: center; gap: calc(36 * var(--u)); padding-block: calc(14 * var(--u)); }
.note__portrait { justify-self: end; width: calc(212 * var(--u)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.note__portrait img { width: 100%; height: 100%; object-fit: cover; }
.note__body .h2 { margin-top: calc(2 * var(--u)); }
.note__body p { margin-top: calc(9 * var(--u)); font-size: var(--f-small); line-height: 1.3; color: var(--text); }
.note__body .btn { margin-top: calc(12 * var(--u)); }
.note__hand { transform: rotate(-12deg); text-align: left; }
.note__hand .sig { display: block; margin-top: .35em; padding-left: 1.4em; }

/* ------------------------------------------------- Explore / Connect / Grow --- */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(4 * var(--u)); }
.panel { position: relative; min-height: max(230px, calc(160 * var(--u))); color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(16 * var(--u)) calc(22 * var(--u)); }
.panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,12,.7) 0%, rgba(10,16,12,.25) 38%, rgba(10,16,12,.3) 48%, rgba(10,16,12,.78) 68%, rgba(10,16,12,.88) 100%); }
.panel > * { position: relative; z-index: 1; }
.panel .panel__lead { position: absolute; top: calc(16 * var(--u)); left: calc(50 * var(--u)); right: 12px; font-family: var(--serif); font-weight: 500; font-size: max(21px, calc(24.5 * var(--u))); line-height: 1.12; letter-spacing: -0.015em; }
.panel__row { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.panel__icon { flex: none; width: max(40px, calc(44 * var(--u))); height: max(40px, calc(44 * var(--u))); border: 1.5px solid #fff; border-radius: 50%; display: grid; place-items: center; }
.panel__icon img { width: 60%; }
.panel .h3 { color: #fff; font-size: max(20px, calc(17.5 * var(--u))); }
.panel p { font-size: var(--f-small); line-height: 1.25; }

/* ------------------------------------------------------------ services --- */
.services { padding-block: calc(14 * var(--u)) calc(26 * var(--u)); }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin-top: calc(4 * var(--u)); text-align: center; }
.svc__circle { width: max(76px, calc(92 * var(--u))); aspect-ratio: 1; margin: 0 auto calc(12 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--tint-green); }
.svc__circle img { width: 52%; }
.svc--lav .svc__circle { background: var(--tint-lav); }
.svc--pink .svc__circle { background: var(--tint-pink); }
.svc .h4 { margin-bottom: calc(6 * var(--u)); }
.svc .small { max-width: 15em; margin-inline: auto; }

/* --------------------------------------------------------- how it works --- */
.how { position: relative; background: var(--lav); padding-block: calc(30 * var(--u)) calc(48 * var(--u)); }
.how::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-14 * var(--u)); height: calc(28 * var(--u)); background: var(--lav); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.how__inner { position: relative; display: grid; grid-template-columns: calc(170 * var(--u)) calc(445 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(14 * var(--u)); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.step { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--tint-green); display: grid; align-content: center; justify-items: center; text-align: center; padding: calc(11 * var(--u)); margin-inline: calc(-5 * var(--u)); }
.step:nth-child(2) { background: var(--tint-lav); }
.step:nth-child(3) { background: var(--tint-pink); }
.step__icon { width: max(24px, calc(26 * var(--u))); margin-bottom: calc(4 * var(--u)); }
.step__title { display: block; text-align: center; }
.step__num { margin-right: .2em; }
.step__num { font-family: var(--serif); font-size: max(22px, calc(21 * var(--u))); color: var(--ink); line-height: 1; }
.step p { margin-top: calc(7 * var(--u)); font-size: var(--f-small); line-height: 1.25; color: var(--text); max-width: 13em; }
.how .hand { transform: rotate(-12deg); align-self: start; line-height: 1.1; }

/* ------------------------------------------------------------ CTA band --- */
.cta { position: relative; background: var(--green); color: #fff; padding-block: calc(16 * var(--u)) calc(24 * var(--u)); }
.cta::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-12 * var(--u)); height: calc(24 * var(--u)); background: var(--green); border-radius: 60% 40% 0 0 / 100% 100% 0 0; }
.cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: calc(40 * var(--u)); padding-inline: calc(80 * var(--u)) calc(30 * var(--u)); }
.cta .eyebrow { color: #E7EFE6; }
.cta .h2 { color: #fff; font-size: max(28px, calc(31 * var(--u))); line-height: 1.02; }   /* solved: "Let's start" 122 wide */
.cta p { font-size: var(--f-small); line-height: 1.32; color: #F1F4EF; max-width: 30em; }
.cta .btn { margin-top: calc(12 * var(--u)); }
.cta__call { margin-top: calc(10 * var(--u)); }
.cta__call a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.deco--cta-l { left: calc(6 * var(--u)); bottom: 0; width: calc(110 * var(--u)); opacity: .5; }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--paper); padding-block: calc(18 * var(--u)) calc(8 * var(--u)); }
.foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.foot .brand img { width: max(100px, calc(110 * var(--u))); }
.foot__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 calc(28 * var(--u)); }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--f-small); color: var(--ink); text-decoration: none; }
.foot__nav a:hover { color: var(--purple); }
.foot__where { display: grid; gap: 0; justify-items: end; font-size: var(--f-small); color: var(--muted); text-align: right; }
.foot__where a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; }
.foot__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 24px; margin-top: calc(10 * var(--u)); border-top: 1px solid var(--line); font-size: max(14px, calc(10 * var(--u))); color: var(--muted); }
.foot__legal p { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }

/* ------------------------------------------------------------ placeholders --- */
.ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #EDE6F2 0 12px, #E4DBEC 12px 24px); color: var(--purple); font-weight: 700; font-size: 14px; text-align: center; padding: 16px; line-height: 1.3; }

/* ========================================================= TABLET 761-900 === */
@media (min-width: 761px) and (max-width: 900px) {
  .note { grid-template-columns: calc(250 * var(--u)) minmax(0, 1fr); }
  .note__hand { display: none; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .how__inner { grid-template-columns: minmax(0, 1fr); }
  .how .hand { display: none; }
  .hero__note { display: none; }
}

/* ================================================================ PHONE === */
@media (max-width: 760px) {
  /* MOBILE.md 11: the words, then the photograph, then the actions. */
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__copy { display: contents; }
  .hero__copy > * { margin-inline: var(--gut); }
  .hero__copy > :first-child { margin-top: 24px; }
  .hero__copy > .lead { max-width: none; margin-top: 12px; }
  .hero__photo { position: relative; order: 1; margin-top: 20px; height: min(96vw, 60svh); }
  .hero__photo img { object-position: var(--focus-phone, 60% 40%); }
  .hero__actions { order: 2; margin: 20px var(--gut) 30px; }
  .hero__actions .btn { width: 100%; }
  .hero__note { display: none; }

  .audience { grid-template-columns: minmax(0, 1fr); padding: 14px var(--gut) 0; gap: 14px; }
  .acard { min-height: 330px; }
  .acard__shape { width: 82%; padding: 26px 64px 24px 22px; }

  .note { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 40px; }
  .note__portrait { justify-self: center; width: min(64vw, 250px); }
  .note__hand { transform: rotate(-5deg); justify-self: center; }

  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 240px; padding: 18px var(--gut); }
  .panel .panel__lead { position: static; margin-bottom: auto; font-size: 25px; }

  .services { padding-block: 40px 44px; }
  .services__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; margin-top: 22px; }

  .how { padding-block: 44px 60px; }
  .how__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .step { width: min(300px, 84vw); margin: 0; padding: 34px; }
  .steps { gap: 4px; }
  .guides .hand { display: none; }
  .step p { max-width: 14em; }
  .how .hand { justify-self: end; transform: rotate(-8deg); }

  .cta { padding-block: 40px 44px; }
  .cta__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-inline: var(--gut); }
  .deco--cta-l, 
  .foot { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; }
  .foot__nav { justify-content: flex-start; gap: 0 22px; }
  .foot__where { justify-items: start; text-align: left; }
  .foot__legal { flex-direction: column; align-items: flex-start; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================ SERVICES === */
/* design/mockup/services-941.png. The hero, the lavender intro and the CTA
   are the Home components; what follows is only what this page adds. */
.svc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(30 * var(--u)); padding-block: calc(12 * var(--u)) calc(16 * var(--u)); }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(168 * var(--u)); gap: calc(10 * var(--u)); align-items: center; padding-block: calc(12 * var(--u)); }
.svc-rows > .svc-row:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.svc-row__head { display: grid; grid-template-columns: max(56px, calc(72 * var(--u))) minmax(0, 1fr); align-items: center; gap: calc(14 * var(--u)); }
.svc-row__head .svc__circle { width: 100%; margin: 0; min-width: 0; }
.svc-row .h3 { font-size: max(20px, calc(21.5 * var(--u))); }
.svc-row p { margin: calc(8 * var(--u)) 0 0 calc(64 * var(--u)); font-size: var(--f-small); line-height: 1.4; color: var(--text); }
.svc-row__photo { aspect-ratio: 168 / 185; border-radius: 38% 46% 40% 44% / 30% 34% 36% 40%; overflow: hidden; }
.svc-row__photo img { width: 100%; height: 100%; object-fit: cover; }

.sessions { position: relative; background: var(--lav); padding-block: calc(22 * var(--u)) calc(26 * var(--u)); }
.sessions::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-10 * var(--u)); height: calc(20 * var(--u)); background: var(--lav); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.sessions__head { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: calc(30 * var(--u)); }
.sessions__head p { font-size: var(--f-body); line-height: 1.4; color: var(--text); }
.activities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); }
.activity { background: var(--paper); border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)); text-align: center; }
.activity .svc__circle { width: max(52px, calc(57 * var(--u))); min-width: 0; margin-bottom: calc(10 * var(--u)); }
.activity:nth-child(3n+2) .svc__circle { background: var(--tint-lav); }
.activity:nth-child(3n) .svc__circle { background: var(--tint-pink); }
.activity .h4 { font-size: max(16px, calc(12.5 * var(--u))); }
.activity p { margin-top: calc(6 * var(--u)); font-size: max(14px, calc(9.8 * var(--u))); line-height: 1.38; color: var(--muted); }

.groups { display: grid; grid-template-columns: calc(270 * var(--u)) calc(430 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(14 * var(--u)); padding-block: calc(22 * var(--u)) calc(18 * var(--u)); }
.groups__copy p { margin-top: calc(8 * var(--u)); font-size: var(--f-body); line-height: 1.38; }
.groups .steps .step p { max-width: 10em; }
.groups .hand { transform: rotate(-12deg); }

.pay { display: grid; grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr) calc(220 * var(--u)); align-items: center; gap: calc(24 * var(--u)); padding-block: calc(16 * var(--u)) calc(30 * var(--u)); border-top: 1px solid var(--line); }
.pay__ways { border-inline: 1px solid var(--line); padding-inline: calc(20 * var(--u)); text-align: center; }
.pay__ways > p { font-size: var(--f-body); }
.pay__ways ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: calc(10 * var(--u)); }
.pay__ways li { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: var(--f-small); color: var(--ink); }
.pay__ways li img { width: max(34px, calc(34 * var(--u))); }
.pay__aside p { font-size: var(--f-small); line-height: 1.4; color: var(--text); }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--green); margin-top: calc(10 * var(--u)); }
.btn--outline:hover { background: var(--green); color: #fff; }

@media (min-width: 761px) and (max-width: 900px) {
  .svc-rows { grid-template-columns: minmax(0, 1fr); }
  .svc-rows > .svc-row:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .activities { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
  .groups { grid-template-columns: minmax(0, 1fr); }
  .groups .hand { display: none; }
  .pay { grid-template-columns: minmax(0, 1fr); }
  .pay__ways { border: 0; padding: 0; }
}
@media (max-width: 760px) {
  .svc-rows { grid-template-columns: minmax(0, 1fr); padding-block: 24px; }
  .svc-rows > .svc-row:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .svc-row { grid-template-columns: minmax(0, 1fr); padding-block: 24px; }
  .svc-row p { margin-left: 0; }
  .svc-row__photo { order: -1; width: min(100%, 360px); justify-self: center; aspect-ratio: 4 / 3.4; }
  .sessions { padding-block: 40px 44px; }
  .sessions__head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .activities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .activity { padding: 16px 12px 18px; }
  .groups { grid-template-columns: minmax(0, 1fr); padding-block: 40px; gap: 22px; }
  .groups .hand { justify-self: end; transform: rotate(-8deg); }
  .pay { grid-template-columns: minmax(0, 1fr); padding-block: 36px 44px; }
  .pay__ways { border: 0; padding: 0; text-align: left; }
  .pay__ways ul { justify-items: start; }
}

/* ========================================================= MEET MATTIE === */
/* design/mockup/meet-mattie-941.png. Her own words fill it: the bio is her
   "Who we are", split across the intro band and "More than a classroom". */
.hero--mattie .h1 .l2 { font-size: .74em; line-height: 1.1; margin-top: .1em; }
.hero__photo.ph { position: absolute; }
.creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: calc(18 * var(--u)) calc(16 * var(--u)); text-align: center; }
.cred { padding-inline: calc(14 * var(--u)); }
.cred + .cred { border-left: 1px solid var(--line); }
.cred .svc__circle { width: max(64px, calc(76 * var(--u))); margin-bottom: calc(10 * var(--u)); }
.cred:nth-child(2) .svc__circle { background: var(--tint-lav); }
.cred:nth-child(3) .svc__circle { background: var(--tint-pink); }
.cred .h4 { font-size: max(18px, calc(17 * var(--u))); }
.cred p { margin-top: calc(6 * var(--u)); font-size: var(--f-small); line-height: 1.32; color: var(--muted); }
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.why__copy { padding: calc(22 * var(--u)) calc(34 * var(--u)) calc(24 * var(--u)) var(--gut); }
.why__copy p { margin-top: calc(10 * var(--u)); font-size: var(--f-body); line-height: 1.4; }
.why__copy .btn { margin-top: calc(14 * var(--u)); }
.why__photo { min-height: calc(300 * var(--u)); }
.why__photo img { width: 100%; height: 100%; object-fit: cover; }
.guides { position: relative; background: var(--lav); padding-block: calc(18 * var(--u)) calc(22 * var(--u)); }
.guides__inner { display: grid; grid-template-columns: minmax(0, 1fr) calc(110 * var(--u)); gap: calc(14 * var(--u)); align-items: center; }
.guides .steps { max-width: calc(620 * var(--u)); margin-inline: auto; margin-top: calc(10 * var(--u)); }
.guides .step__title { justify-content: center; text-align: center; }
.guides .hand { transform: rotate(-12deg); }
.rooted { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: center; padding-block: calc(20 * var(--u)) calc(30 * var(--u)); }
.rooted p { margin-top: calc(8 * var(--u)); font-size: var(--f-body); line-height: 1.4; }

/* ============================================================= CONTACT === */
/* design/mockup/contact-1024.png, drawn 1024 wide at the type sizes of the
   941 pages (SPEC.md), so it is built on the same unit and tokens. */
.ways { background: var(--lav); padding-block: calc(18 * var(--u)); }
.ways ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
.way { display: grid; grid-template-columns: max(48px, calc(56 * var(--u))) minmax(0, 1fr); gap: calc(14 * var(--u)); align-items: start; }
.way .svc__circle { width: 100%; min-width: 0; margin: 0; }
.way:nth-child(2) .svc__circle { background: var(--tint-lav); }
.way .h4 { font-size: max(18px, calc(15.5 * var(--u))); }
.way__big { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: max(17px, calc(14 * var(--u))); color: var(--ink); text-decoration: none; }
.way__big:hover { color: var(--purple); }
.way p { font-size: var(--f-small); line-height: 1.32; color: var(--muted); }
.formband { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(40 * var(--u)); padding-block: calc(26 * var(--u)) calc(34 * var(--u)); align-items: start; }
.formband > div > p { margin-top: calc(8 * var(--u)); font-size: var(--f-body); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)) calc(18 * var(--u)); margin-top: calc(18 * var(--u)); }
#interest-form { scroll-margin-top: 24px; }
.field { display: grid; gap: 6px; grid-column: 1 / -1; align-content: start; }
.field--half { grid-column: auto; }
.field label, .field legend { font-weight: 700; font-size: max(15px, calc(11.5 * var(--u))); color: var(--ink); padding: 0; }
.field .req { color: #A3341F; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid #D9D2DF; border-radius: 10px; background: #F4F0F6;
  font-size: 16px; color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--purple); }
.field fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.radio input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--green); }
.form [aria-invalid="true"] { border-color: #A3341F; }
.field__error { color: #A3341F; font-size: 14px; font-weight: 700; margin: 0; }
.field__error:empty { display: none; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__status { font-weight: 700; font-size: 16px; }
.form__status--ok { color: var(--green); }
.form__status--bad { color: #A3341F; }
.form__note { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aside { display: grid; gap: calc(14 * var(--u)); }
.aside__photo { border-radius: calc(14 * var(--u)); overflow: hidden; aspect-ratio: 364 / 262; }
.aside__photo img { width: 100%; height: 100%; object-fit: cover; }
.aside__card { border-radius: calc(14 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); background: #E6EFDA; }
.aside__card--lav { background: #EDE5F3; }
.aside__card .h4 { font-size: max(19px, calc(16.5 * var(--u))); }
.aside__card ol { display: grid; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.aside__card li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--f-small); line-height: 1.4; }
.aside__card li span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-card); color: #fff; font-weight: 700; font-size: 15px; }
.aside__card p { margin-top: calc(10 * var(--u)); font-size: var(--f-small); line-height: 1.45; }

@media (min-width: 761px) and (max-width: 900px) {
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .cred:nth-child(3) { border-left: 0; }
  .guides__inner { grid-template-columns: minmax(0, 1fr); }
  .guides .hand { display: none; }
  .formband { grid-template-columns: minmax(0, 1fr); }
  .aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aside__photo { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .creds { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 36px; }
  .cred + .cred { border-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why__copy { padding: 40px var(--gut); }
  .why__photo { min-height: 300px; }
  .guides { padding-block: 40px 48px; }
  .guides__inner { grid-template-columns: minmax(0, 1fr); }
  .guides .steps { margin-top: 18px; }
  .rooted { grid-template-columns: minmax(0, 1fr); padding-block: 36px 44px; }
    .ways { padding-block: 26px; }
  .ways ul { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .formband { grid-template-columns: minmax(0, 1fr); padding-block: 36px 44px; gap: 30px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .field--half { grid-column: 1 / -1; }
}

/* ------------------------------------------------- 404 and privacy --- */
.notfound { padding-block: calc(60 * var(--u)) calc(70 * var(--u)); }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: calc(20 * var(--u)); }
.prose { max-width: calc(620 * var(--u) + 2 * var(--gut)); padding-block: calc(36 * var(--u)) calc(48 * var(--u)); }
.prose .h4 { margin-top: calc(22 * var(--u)); }
.prose p { margin-top: calc(10 * var(--u)); font-size: var(--f-body); line-height: 1.55; }
.prose a { color: var(--purple); font-weight: 700; }
@media (max-width: 760px) { .notfound { padding-block: 56px 64px; } .prose { padding-block: 36px 48px; } }
.credit a { text-decoration: none; color: var(--ink); }
.credit a:hover { color: var(--purple); }

/* Layout check, 15 Oct 2026: seven activity cards and two service rows only
   have room at the width the mockup draws; below that they stack sooner. */
@media (max-width: 1100px) { .groups .hand, .how .hand, .note__hand { display: none; } .groups { grid-template-columns: calc(270 * var(--u)) minmax(0, 1fr); } .how__inner { grid-template-columns: calc(170 * var(--u)) minmax(0, 1fr); } .note { grid-template-columns: calc(250 * var(--u)) minmax(0, 1fr); } }
@media (max-width: 1024px) { .svc-rows { grid-template-columns: minmax(0, 1fr); } .svc-rows > .svc-row:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 760px) { .hero__photo.ph { position: relative; } .groups { grid-template-columns: minmax(0, 1fr); } .how__inner { grid-template-columns: minmax(0, 1fr); } .note { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .activities { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .band-lav { padding-block: 40px 44px; } .band-lav p { max-width: none; text-align: left; } .deco--leaves-l { width: 90px; top: auto; bottom: 0; transform: none; opacity: .6; } .deco--sprig-r { width: 80px; opacity: .6; } }
.svc-row__photo img { object-position: 50% 20%; }
.hero--services .hero__photo img { --focus: 50% 35%; }
/* The banner has a painted sign on its left wall (words in a scene need Jacob's
   OK, BUILD.md): the cream panel runs to the top here and curves late, so it
   covers the sign at every desktop width. */
.hero--services .hero__copy { margin-top: 0; border-radius: 0 38% 0 0 / 0 62% 0 0; }
.rooted--text { grid-template-columns: minmax(0, 1fr); text-align: center; }
.rooted--text p { max-width: 34em; margin-inline: auto; }
.why__photo img { object-position: 50% 60%; }
.hero__photo.ph { padding-left: 46%; }
.why__copy .hand { font-size: var(--f-hand); margin-top: calc(6 * var(--u)); }
@media (max-width: 760px) { .hero__photo.ph { padding-left: 16px; min-height: 260px; } }

/* QA, 15 Oct 2026: captions over photographs sit on their own scrim, because a
   bright patch of flowers under white text measured 1.3:1 through the band's
   gradient alone (check:derived). */
.panel__row, .panel .panel__lead { background: rgba(14, 24, 18, .62); border-radius: 12px; padding: 8px 12px; }
.panel .panel__lead { right: auto; }
.hero__note { background: rgba(14, 24, 18, .4); border-radius: 18px; padding: 10px 16px 12px; text-shadow: 0 1px 6px rgba(0,0,0,.35); font-size: max(20px, calc(26 * var(--u))); }
/* The seven activity cards run past the content edges, as the mockup draws
   them (x 25 to 915 of 941), so each card has room for its own words. */

@media (max-width: 1100px) { .svc-rows { grid-template-columns: minmax(0, 1fr); } .svc-rows > .svc-row:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 900px) { .why { grid-template-columns: minmax(0, 1fr); } .why__photo { min-height: 340px; } .why__copy { padding-inline: var(--gut); } }
@media (max-width: 760px) { .acard { min-height: 290px; } }
.pay__ways li span { display: block; }
/* QA: Mattie's own activity descriptions are longer than the mockup's
   one-liners, so the seven cards set four to a row rather than seven
   (CLAUDE.md, Departures). */
@media (max-width: 1100px) { .pay { grid-template-columns: minmax(0, 1fr); } .pay__ways { border: 0; padding: 0; text-align: left; } .pay__ways ul { justify-items: start; } }
@media (max-width: 900px) { .guides .steps { max-width: none; } }
@media (max-width: 760px) {
  .panel { min-height: 0; aspect-ratio: 16 / 10; }
  .why__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .pay__ways ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pay__ways li { grid-template-columns: 40px minmax(0, 1fr); display: grid; align-items: center; justify-items: start; text-align: left; }
}
@media (max-width: 1000px) { .why { grid-template-columns: minmax(0, 1fr); } .why__photo { min-height: 0; aspect-ratio: 16 / 9; } .why__copy { padding-inline: var(--gut); } }
@media (max-width: 900px) { .activities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* A phone card is the photo, then its words beneath it, so the photo keeps
     its shape instead of being cut to a square behind the copy. */
  .acard { display: block; min-height: 0; }
  .acard > img { position: static; height: auto; aspect-ratio: 16 / 10; }
  .acard__shape { width: 100%; border-radius: 0; padding: 18px 70px 20px 20px; }
}
@media (max-width: 480px) { .activities { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 900px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 0; aspect-ratio: 16 / 7; }
}

/* ===================================================== ChatGPT desktop review ===
   design/chatgpt-desktop-feedback/feedback.md, 15 Oct 2026: the points
   applied. Tighter bands and footer, a larger logo, softer caption backing,
   smaller step circles, firmer form fields, a lighter Contact hero button. */
.brand img { width: max(116px, calc(126 * var(--u))); }
.site-header .bar { min-height: max(64px, calc(54 * var(--u))); }
.band-lav { padding-block: calc(18 * var(--u)) calc(20 * var(--u)); }
.band-lav .eyebrow { margin-bottom: 2px; }
.band-lav p { max-width: calc(470 * var(--u)); line-height: 1.42; }
.band-lav p + p { margin-top: calc(10 * var(--u)); }
.deco--leaves-l { width: calc(190 * var(--u)); }
.deco--sprig-r { width: calc(140 * var(--u)); }
.note { gap: calc(26 * var(--u)); padding-block: calc(8 * var(--u)); }
.note__body .eyebrow { margin-bottom: 2px; }
.panel__row, .panel .panel__lead { background: rgba(14, 24, 18, .56); }
.services { padding-block: calc(10 * var(--u)) calc(22 * var(--u)); }
.svc__circle { margin-bottom: calc(8 * var(--u)); }
.svc .h4 { margin-bottom: calc(4 * var(--u)); }
.step { transform: scale(.92); margin-inline: calc(-9 * var(--u)); }
.how .hand, .groups .hand, .guides .hand { font-size: max(24px, calc(29 * var(--u))); }
.cta { padding-block: calc(10 * var(--u)) calc(16 * var(--u)); }
.cta .btn { margin-top: calc(8 * var(--u)); }
.cta__call { margin-top: calc(6 * var(--u)); }
.site-footer { padding-block: calc(12 * var(--u)) 0; }
.foot .brand img { width: max(110px, calc(120 * var(--u))); }
.foot__where { gap: 0; }
.foot__legal { margin-top: calc(4 * var(--u)); }
.activity { border: 1px solid #DCD0E6; }
.why__copy { padding-block: calc(16 * var(--u)) calc(18 * var(--u)); }
.why__copy .hand { display: block; margin-top: calc(12 * var(--u)); }
.guides { padding-block: calc(12 * var(--u)) calc(16 * var(--u)); }
.guides .steps { margin-top: calc(2 * var(--u)); }
.rooted { padding-block: calc(14 * var(--u)) calc(22 * var(--u)); }
.creds { padding-block: calc(14 * var(--u)) calc(12 * var(--u)); }
.cred .svc__circle { width: max(70px, calc(84 * var(--u))); margin-bottom: calc(6 * var(--u)); }
.pay { padding-block: calc(12 * var(--u)) calc(22 * var(--u)); }
.pay__ways li img { width: max(38px, calc(40 * var(--u))); }
.formband { padding-block: calc(18 * var(--u)) calc(24 * var(--u)); }
.form { gap: calc(11 * var(--u)) calc(18 * var(--u)); }
.field { gap: 4px; }
.field input, .field select, .field textarea { border-color: #B9AEC6; background: #FBF9FC; }
.field textarea { min-height: 100px; }
.field fieldset { gap: 0; }
.form__note { margin-top: -4px; font-size: 13px; }
.aside { gap: calc(10 * var(--u)); }
.aside__card .h4 { font-size: max(20px, calc(18 * var(--u))); }
.hero--contact .hero__actions .btn { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.hero--contact .hero__actions .btn:hover { background: var(--green); color: #fff; }
.hero__copy .lead { margin-top: calc(10 * var(--u)); }
@media (max-width: 760px) { .step { transform: none; margin: 0; } }
.how .hand, .guides .hand { white-space: nowrap; }

/* ===================================================== ChatGPT tablet review ===
   design/chatgpt-tablet-feedback/feedback.md, 15 Oct 2026, applied. */
.svc-row p { margin-left: calc(max(56px, calc(72 * var(--u))) + 14 * var(--u)); }
.acard__go { right: max(16px, calc(18 * var(--u))); bottom: max(16px, calc(18 * var(--u))); }
@media (max-width: 1000px) {
  .groups { grid-template-columns: minmax(0, 1fr); }
  .groups__copy p { max-width: 40em; }
  .steps { gap: 12px; }
  .step { transform: none; margin: 0; padding: 18px; }
  .how__inner > .steps, .groups > .steps, .guides .steps { max-width: 660px; }
}
@media (max-width: 960px) {
  /* The footer in two rows: logo and where-to-reach, then the links. */
  .foot { grid-template-columns: auto 1fr; grid-template-areas: "brand where" "nav nav"; row-gap: 4px; }
  .foot > .brand { grid-area: brand; }
  .foot__where { grid-area: where; }
  .foot__nav { grid-area: nav; justify-content: flex-start; gap: 0 26px; }
  .foot__legal { flex-direction: column; align-items: flex-start; gap: 0; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .panel { aspect-ratio: 16 / 6; }
  .why__photo { aspect-ratio: 16 / 7; }
  .why__photo img { object-position: 50% 40%; }
  .cta__inner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-inline: var(--gut); }
  .cta { padding-block: 36px 40px; }
  .aside { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .aside__photo { aspect-ratio: 16 / 7; }
  .aside__photo img { object-position: 30% 50%; }
}
@media (max-width: 900px) {
  .activities .activity:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
}
@media (max-width: 760px) {
  .foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "where" "nav"; }
  .foot__where { justify-items: start; }
  .svc-row p { margin-left: 0; }
}
@media (max-width: 480px) { .activities .activity:last-child:nth-child(odd) { width: auto; } }
@media (min-width: 761px) and (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .steps .step { width: min(100%, 290px); }
  .steps .step:nth-child(3) { grid-column: 1 / -1; }
  .aside__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 1000px) { .how__inner { grid-template-columns: minmax(0, 1fr); } .how__inner > .steps { justify-self: center; width: 100%; } }

/* ===================================================== ChatGPT mobile review ===
   design/chatgpt-mobile-feedback/feedback.md, 15 Oct 2026, applied. Last in
   the file on purpose: it re-asserts phone values that the desktop-review
   block above had overridden by source order (MOBILE.md 12). */
@media (max-width: 760px) {
  .band-lav p { max-width: none; text-align: left; }
  .band-lav .deco { display: none; }
  .hero__photo { height: clamp(300px, 64vw, 440px); }
  .acard > img { aspect-ratio: 16 / 9; }
  .acard__go { width: 48px; height: 48px; }
  .acard__shape { padding-bottom: 24px; }
  .note__portrait { width: min(54vw, 210px); }
  .note__body .btn { margin-top: 16px; }
  .panel { aspect-ratio: 16 / 9; }
  .panel__row, .panel .panel__lead { margin-inline: 0; }
  .services { padding-block: 32px 36px; }
  .services__grid { row-gap: 22px; }
  .svc__circle { width: 68px; }
  .steps { gap: 12px; }
  .step, .steps .step { width: 240px; padding: 24px; }
  .how, .guides { padding-block: 36px 44px; }
  .svc-row { padding-block: 18px; gap: 12px; }
  .svc-row__photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 32px; }
  .svc-row__photo img { object-position: 50% 25%; }
  .activity { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; text-align: left; padding: 14px 16px; }
  .activity .svc__circle { width: 52px; margin: 0; grid-row: span 2; }
  .activity p { margin-top: 2px; }
  .activities { gap: 10px; }
  .groups__copy p + p { margin-top: 14px; }
  .pay { padding-block: 36px 40px; }
  .pay__ways li { min-height: 48px; }
  .pay__aside { margin-top: 8px; }
  .cta .btn, .formband .form__foot .btn { width: 100%; }
  .why__photo { aspect-ratio: 16 / 9; }
  .why__copy .hand { margin-top: 12px; }
  .creds { padding-block: 28px; gap: 18px; }
  .cred + .cred { padding-top: 18px; margin-inline: 24px; }
  .cred .svc__circle { width: 64px; }
  .ways ul { gap: 16px; }
  .field select { padding-right: 36px; }
  .site-footer { padding-top: 24px; }
  .foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0 16px; }
  .foot__legal { gap: 4px; }
  .foot__legal p { gap: 0 16px; }
}
@media (max-width: 760px) { .activities { grid-template-columns: minmax(0, 1fr); } .activities .activity:last-child:nth-child(odd) { width: auto; } }