/* Layout: warm cream ground with generous pale-pink fields, soft rounded cards
   that lift off the page, and hot pink used as real colour on the things that
   matter. Friendly geometric type at medium weight, never hairline. */
:root{
  --cream:#f7f3ef;
  --blush:#fce7f2;
  --blush-lift:#fff0f7;
  --pink:#ff3b9f;
  --pink-deep:#c2186f;
  --pink-soft:#ff92c9;
  --on-pink:#2a0a1b;
  --ink:#130f0f;
  --ink-soft:#5a5055;
  --ink-faint:#8d8187;
  --card:#ffffff;
  --rule:#d9d2cb;
  --shadow:0 1px 2px rgba(104,26,67,.04), 0 10px 28px rgba(104,26,67,.07);
  --shadow-lift:0 2px 6px rgba(104,26,67,.06), 0 20px 48px rgba(104,26,67,.11);
  --deep:#231722;
  --on-deep:#fdf3f7;
  --on-deep-soft:#c1adb8;
  --rule-deep:#3d2e3a;

  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --measure:56ch;
  --wrap:1180px;
  --r:22px;
  --gl:max(22px,env(safe-area-inset-left,0px));
  --gr:max(22px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cream:#1a1118;
    --blush:#2a1b26;
    --blush-lift:#33212e;
    --pink:#ff5cae;
    --pink-deep:#ffa6d2;
    --on-pink:#1d0612;
    --ink:#fbeff5;
    --ink-soft:#c0aab6;
    --ink-faint:#8d7883;
    --card:#241823;
    --rule:#3a2b36;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.34);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.4);
    --deep:#120b11;
    --on-deep:#fbeff5;
    --on-deep-soft:#c0aab6;
    --rule-deep:#32242f;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --cream:#1a1118;
  --blush:#2a1b26;
  --blush-lift:#33212e;
  --pink:#ff5cae;
  --pink-deep:#ffa6d2;
  --on-pink:#1d0612;
  --ink:#fbeff5;
  --ink-soft:#c0aab6;
  --ink-faint:#8d7883;
  --card:#241823;
  --rule:#3a2b36;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.34);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.4);
  --deep:#120b11;
  --on-deep:#fbeff5;
  --on-deep-soft:#c0aab6;
  --rule-deep:#32242f;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font);font-weight:400;
  font-size:clamp(16px,.8vw + 13.8px,17.5px);
  line-height:1.68;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.025em;line-height:1.12;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:12px 18px;z-index:60;border-radius:0 0 10px 0}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.pad{padding-block:clamp(56px,7vw,100px)}

/* ---------- masthead ---------- */
.masthead .wrap{
  padding-block:18px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark b{font-weight:600;font-size:1.0625rem;letter-spacing:-0.01em}
.nav{display:flex;gap:clamp(10px,1.7vw,24px);flex-wrap:wrap;align-items:center}
.nav a{
  text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--ink-soft);
  padding:7px 2px;border-radius:6px;
}
.nav a:hover{color:var(--pink-deep)}
.nav .btn{margin-left:4px}
/* .nav a sets ink-soft and out-specifies .btn, which made the header call
   to action render in grey on hot pink at about 1.9:1. Pinned back here. */
.nav a.btn{color:var(--on-pink)}
.nav a.btn:hover{color:var(--on-pink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pink);color:var(--on-pink);
  font-family:inherit;font-weight:600;font-size:.9375rem;
  padding:14px 28px;border:2px solid var(--pink);border-radius:999px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--ghost{
  background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none;
}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--onDeep{border-color:var(--pink)}
.lnk{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.9375rem;
  color:var(--pink-deep);
}
.lnk::after{content:" \2192";display:inline-block;transition:transform .16s ease}
.lnk:hover::after{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{background:var(--blush);border-radius:0 0 clamp(26px,4vw,48px) clamp(26px,4vw,48px)}
.hero .wrap{padding-block:clamp(52px,7vw,96px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4.5vw,64px);align-items:center;
}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}}
.hero h1{
  font-size:clamp(2.35rem,5.6vw,4rem);font-weight:600;
  letter-spacing:-0.035em;line-height:1.05;max-width:14ch;
}
.hero h1 mark{
  background:transparent;color:var(--pink-deep);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero .sub{
  margin-top:22px;max-width:var(--measure);font-size:clamp(1.0625rem,.8vw + .9rem,1.25rem);
  color:var(--ink-soft);
}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,36px)}

/* soft rounded media frames, ready for the brand photography */
.frame{
  border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--blush-lift),var(--pink) 420%);
  box-shadow:var(--shadow-lift);max-width:100%;
}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame figcaption{
  position:absolute;inset:auto 0 0 0;padding:14px 16px;
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.frame--hero{aspect-ratio:4/5}
.frame--band{aspect-ratio:16/8}

@media (max-width:720px){.frame--band{aspect-ratio:4/3}}
.frame--wide{aspect-ratio:3/2}
.frame--square{aspect-ratio:1/1}
.frame--tall{aspect-ratio:2/3}

/* ---------- section heads ---------- */
.head h2{font-size:clamp(1.85rem,3.6vw,2.85rem);max-width:17ch}
.head p{margin-top:18px;max-width:var(--measure);color:var(--ink-soft)}

/* ---------- what we do ---------- */
.feature{
  margin-top:clamp(32px,4vw,52px);
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;align-items:stretch;
}
@media (max-width:820px){.feature{grid-template-columns:1fr}}
.feature .body{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
.feature .frame{border-radius:0;box-shadow:none;min-height:260px}
.pill{
  align-self:flex-start;background:var(--blush);color:var(--pink-deep);
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
}
.feature h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.feature p{color:var(--ink-soft)}

.pair{
  margin-top:clamp(18px,2vw,26px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(18px,2vw,26px);
}
.quad{
  margin-top:clamp(26px,3.4vw,42px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
@media (max-width:720px){.quad{grid-template-columns:1fr}}

/* ---------- results ---------- */
.stats{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,22px);
}
@media (max-width:1000px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
.stat{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:clamp(22px,2.4vw,30px);min-width:0;
}
.stat .num{
  font-size:clamp(2.25rem,4vw,3.125rem);font-weight:700;letter-spacing:-0.04em;
  line-height:1;color:var(--pink-deep);font-variant-numeric:tabular-nums;
}
.stat .num span{font-size:.42em;font-weight:600;letter-spacing:-0.01em}
.stat .k{margin-top:16px;font-size:.875rem;font-weight:600;color:var(--ink)}
.stat .d{margin-top:7px;color:var(--ink-soft);font-size:.9375rem}

.tile{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:14px;min-width:0;
  transition:transform .18s ease,box-shadow .18s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
/* ---------- tile internals: one spacing system ----------
   Nothing stretches. Whatever belongs at the bottom of the card gets
   margin-top:auto, so slack collects in exactly one place per card
   instead of being split across every paragraph. */
.tile p{color:var(--ink-soft);font-size:.9375rem}
.tile > .q{margin-bottom:-6px}
.tile > .pill{margin-bottom:-2px}
.tile > h3 + p{margin-top:0}
.tile > p:has(> .lnk){margin-top:auto;padding-top:6px;margin-bottom:0}
.tile > .mini{margin-top:auto;padding-top:6px;max-width:none}
.tile > form.mini{margin-top:auto}

.tile h3{font-size:1.3125rem}
/* the link row is not a flexing paragraph; pin it to the card bottom */
/* in the 3-across trio, keep link labels on one line so the rows align */
@media (min-width:941px){.trio .tile p:has(> .lnk) .lnk{white-space:nowrap}}

/* ---------- families ---------- */
.families .inner{
  background:var(--blush);border-radius:clamp(22px,3vw,34px);
  padding:clamp(32px,4.4vw,64px);
}

/* ---------- quote ---------- */
.quotes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(30px,3.6vw,44px);
}
.quote{
  background:var(--card);border-radius:var(--r);padding:clamp(26px,3vw,38px);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;min-width:0;
}
.quote .glyph{font-size:2.5rem;line-height:.6;color:var(--pink);font-weight:700}
.quote blockquote{margin:0;font-size:1.0625rem;font-weight:500;line-height:1.6}
.quote cite{font-style:normal;font-size:.875rem;color:var(--ink-soft);margin-top:auto}

/* ---------- library ---------- */
.library .inner{
  background:var(--deep);color:var(--on-deep);border-radius:clamp(22px,3vw,34px);
  padding:clamp(32px,4.4vw,64px);
}
.library h2{font-size:clamp(1.85rem,3.6vw,2.75rem);color:var(--on-deep);max-width:15ch}
.library h2 b{color:var(--pink);font-weight:700}
.library p{margin-top:18px;color:var(--on-deep-soft);max-width:46ch}
.library .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.library .cta .lnk{color:var(--pink)}
.states{display:flex;flex-direction:column;gap:14px}
.state{
  background:rgba(255,255,255,.055);border:1px solid var(--rule-deep);
  border-radius:16px;padding:20px 22px;
}
.state .k{font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--pink)}
.state .v{font-weight:500;margin-top:6px;color:var(--on-deep)}
.state .n{font-size:.875rem;color:var(--on-deep-soft);margin-top:4px}

/* ---------- dates ---------- */
.sched{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;gap:12px}
.when{
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  padding:20px clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:168px minmax(0,1fr) minmax(0,auto);
  gap:6px clamp(16px,3vw,36px);align-items:center;
}
@media (max-width:980px){.when{grid-template-columns:150px minmax(0,1fr)}.when .place{grid-column:2}}
@media (max-width:720px){.when{grid-template-columns:1fr}.when .place{grid-column:auto}}
.when time{
  font-weight:600;font-size:.9375rem;color:var(--pink-deep);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.when .title{font-weight:500;min-width:0}
.when .place{font-size:.875rem;color:var(--ink-soft)}
.row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:28px}
/* a single button under a full-width block reads as stranded on the left */
.row--center{justify-content:center;margin-top:clamp(28px,3.4vw,40px)}

/* an aside that belongs after a block rather than in front of it */
.footnote{
  margin:clamp(24px,2.8vw,34px) 0 0;padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:.875rem;color:var(--ink-soft);max-width:62ch;
}

/* ---------- about ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}

/* ---------- join ---------- */
.join .inner{
  background:var(--blush);border-radius:clamp(22px,3vw,34px);
  padding:clamp(32px,4.4vw,64px);
}
.join h2{font-size:clamp(1.85rem,3.6vw,2.75rem);max-width:16ch}
.join .intro{margin-top:18px;max-width:var(--measure);color:var(--ink-soft)}
.form{margin-top:clamp(28px,3.4vw,42px);max-width:660px;display:flex;flex-direction:column;gap:26px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:.8125rem;font-weight:600;color:var(--ink);padding:0;margin-bottom:14px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.choices{grid-template-columns:1fr}}
.choice{
  position:relative;background:var(--card);border:2px solid transparent;
  border-radius:16px;padding:18px 18px 18px 48px;cursor:pointer;display:block;
  box-shadow:var(--shadow);min-width:0;transition:border-color .16s ease,transform .16s ease;
}
.choice:hover{transform:translateY(-2px)}
.choice input{position:absolute;left:18px;top:21px;width:18px;height:18px;margin:0;accent-color:var(--pink);cursor:pointer}
.choice strong{display:block;font-weight:600;font-size:1.0625rem}
.choice span{display:block;font-size:.875rem;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.choice:has(input:checked){border-color:var(--pink)}
.choice:has(input:focus-visible){outline:3px solid var(--pink);outline-offset:3px}
.efield{display:flex;flex-direction:column;gap:9px}
.efield label{font-size:.8125rem;font-weight:600}
/* inside a white tile the label was inheriting the pink band colour and vanishing */
.tile .efield label,.panel .efield label{color:var(--ink)}
.efield input{
  font-family:inherit;font-size:1.0625rem;color:var(--ink);background:var(--card);
  border:2px solid var(--rule);border-radius:14px;padding:15px 18px;width:100%;
  box-shadow:var(--shadow);
}
.efield input::placeholder{color:var(--ink-faint)}
.efield input:focus{outline:0;border-color:var(--pink)}
.fine{font-size:.875rem;color:var(--ink-soft)}
.thanks{
  margin-top:clamp(28px,3.4vw,42px);max-width:660px;background:var(--card);
  border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(24px,3vw,34px);
  font-size:1.0625rem;font-weight:500;
}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:var(--on-deep);margin-top:clamp(50px,6vw,84px)}
.foot .wrap{padding-block:clamp(44px,5vw,70px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(26px,3vw,46px)}
.foot h3{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:0 0 16px}
.foot p,.foot address{font-style:normal;font-size:.9375rem;margin:0 0 9px;color:var(--on-deep)}
.foot a{color:var(--on-deep);text-decoration:none}
.foot a:hover{color:var(--pink)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- added for the multi-page build, 24 October ---------- */

.nav a[aria-current="page"]{color:var(--pink-deep);font-weight:600}

/* page header band for interior pages */
.phero{background:var(--blush);border-radius:0 0 clamp(26px,4vw,48px) clamp(26px,4vw,48px)}
.phero .wrap{padding-block:clamp(44px,6vw,86px)}
.phero-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4.5vw,64px);align-items:center;
}
@media (max-width:880px){.phero-grid{grid-template-columns:1fr}}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-deep);
}
.phero h1{
  margin-top:16px;font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:600;
  letter-spacing:-0.033em;line-height:1.06;max-width:20ch;
}
.phero h1 mark{
  background:transparent;color:var(--pink-deep);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.phero .sub{
  margin-top:20px;max-width:var(--measure);color:var(--ink-soft);
  font-size:clamp(1.0625rem,.8vw + .9rem,1.1875rem);
}
.phero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,2.8vw,34px)}

/* running prose at a readable measure */
/* 56ch is a comfortable measure, but a column of body text that narrow sitting
   alone in an 1180px wrap leaves a dead half-page beside it. 66ch still reads
   easily and closes most of that gap. */
.prose{max-width:66ch}

/* The About bio runs long enough that widening alone will not fix it, so the
   portrait and the credentials sit beside it and fill the column. */
.bio{
  margin-top:22px;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(28px,3.6vw,52px);
}
.bio .prose{max-width:none}
.bioside{display:grid;gap:clamp(22px,2.6vw,30px)}
.bioside .creds{margin-top:0;padding-top:0;border-top:0;max-width:none}
@media (max-width:900px){
  .bio{grid-template-columns:minmax(0,1fr)}
  .bio .prose{max-width:66ch}
  .bioside{max-width:420px}
}
.prose p{color:var(--ink-soft)}
.prose p + p{margin-top:18px}
.prose strong{color:var(--ink);font-weight:600}

/* generic soft panel and dark panel */
.panel{background:var(--blush);border-radius:clamp(22px,3vw,34px);padding:clamp(32px,4.4vw,64px)}
.cta-deep{
  background:var(--deep);color:var(--on-deep);
  border-radius:clamp(22px,3vw,34px);padding:clamp(32px,4.4vw,64px);
}
.cta-deep h2{color:var(--on-deep);font-size:clamp(1.75rem,3.2vw,2.5rem);max-width:20ch}
.cta-deep p{margin-top:18px;color:var(--on-deep-soft);max-width:52ch}
.cta-deep .lnk{color:var(--pink)}

/* artifact gallery: a picture of the tool, then what it answers */
.gallery{
  margin-top:clamp(30px,3.8vw,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(18px,2.2vw,28px);
}
.item{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:transform .18s ease,box-shadow .18s ease;
}
.item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.item .frame{border-radius:0;box-shadow:none;aspect-ratio:140/73;flex:none;background:var(--cream)}
/* artifact screenshots are documents: show the top, where the title is */
.item .frame img{object-position:top}
.item .body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;flex:1}
.q{
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pink-deep);
}
/* three-across card grid that collapses cleanly, no orphan rows */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3.4vw,42px)}
@media (max-width:940px){.trio{grid-template-columns:1fr}}
.quad--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.quad--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.quad--3{grid-template-columns:1fr}}
/* keep the question eyebrow a uniform height so headings align across a row */
/* uniform eyebrow height ONLY in the 3-across grids, where rows must align.
   Applying it to every tile injected dead space above short questions. */
.quad--3 .tile .q,.trio .tile .q,.quad.g5>:nth-child(-n+3) .q{line-height:1.45;min-height:2.9em}

.step .q{margin-bottom:2px}
.item h3{font-size:1.1875rem}
.item p{color:var(--ink-soft);font-size:.9375rem}

/* sequence, ruled rather than numbered */
.flow{
  margin-top:clamp(30px,3.8vw,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(22px,2.6vw,34px);
}
.flow--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.flow--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.flow--4{grid-template-columns:1fr}}
.flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.flow--3{grid-template-columns:1fr}}
.step{border-top:3px solid var(--pink);padding-top:20px;min-width:0}
.step .k{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-deep);
}
.step h3{margin-top:10px;font-size:1.125rem}
.step p{margin-top:9px;color:var(--ink-soft);font-size:.9375rem}

/* case stories, with the limits of the result kept visible */
.cases{
  margin-top:clamp(30px,3.8vw,48px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px);
}
@media (max-width:720px){.cases{grid-template-columns:1fr}}
.case{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:13px;min-width:0;
}
.case .big{
  font-size:clamp(2.1rem,3.6vw,2.75rem);font-weight:700;letter-spacing:-0.04em;
  line-height:1;color:var(--pink-deep);font-variant-numeric:tabular-nums;
}
.case .big span{font-size:.42em;font-weight:600;letter-spacing:-0.01em}
.case h3{font-size:1.0625rem}
.case p{color:var(--ink-soft);font-size:.9375rem}
.case .note{
  font-size:.8125rem;color:var(--ink-faint);margin-top:auto;
  padding-top:14px;border-top:1px solid var(--rule);
}

/* ---------- services menu ---------- */
.menu{position:relative}
.menu-btn{
  font-family:inherit;font-size:.9375rem;font-weight:500;color:var(--ink-soft);
  background:none;border:0;padding:7px 2px;cursor:pointer;border-radius:6px;
  display:inline-flex;align-items:center;gap:8px;line-height:inherit;
}
.menu-btn:hover,.menu-btn[aria-expanded="true"],.menu-btn.is-current{color:var(--pink-deep)}
.menu-btn.is-current{font-weight:600}
.menu-btn::after{
  content:"";width:6px;height:6px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;
}
.menu-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-1px,-1px)}
.menu-panel{
  position:absolute;top:calc(100% + 12px);left:-12px;z-index:50;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow-lift);
  padding:10px;min-width:252px;display:flex;flex-direction:column;
}
.menu-panel[hidden]{display:none}
.menu-panel a{
  padding:10px 14px;border-radius:10px;font-size:.9375rem;font-weight:500;
  color:var(--ink);text-decoration:none;
}
.menu-panel a:hover{background:var(--blush);color:var(--pink-deep)}
.menu-panel a[aria-current="page"]{color:var(--pink-deep);font-weight:600}
@media (max-width:620px){
  .menu{position:static;width:100%}
  .menu-panel{
    position:static;box-shadow:none;background:transparent;
    padding:4px 0 8px;min-width:0;width:100%;
  }
  .menu-panel a{padding:8px 0}
  .menu-panel a:hover{background:transparent}
}

/* ---------- inline waitlist on the dark library band ---------- */
.mini{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:flex-end;max-width:470px;
}
.mini .efield{flex:1 1 230px;min-width:0}
.library .mini .efield label{color:var(--on-deep)}
.mini .btn{flex:none}
.thanks--deep{
  margin-top:26px;max-width:470px;background:rgba(255,255,255,.07);
  border:1px solid var(--rule-deep);border-radius:16px;padding:20px 22px;
  font-size:1rem;font-weight:500;color:var(--on-deep);
}

/* ---------- inquiry form ---------- */
.iform{
  margin-top:clamp(28px,3.4vw,42px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
@media (max-width:640px){.iform{grid-template-columns:1fr}}
.iform .efield--wide{grid-column:1/-1}
.iform select,
.iform textarea,
.iform input[type="date"]{
  font-family:inherit;font-size:1.0625rem;color:var(--ink);background:var(--card);
  border:2px solid var(--rule);border-radius:14px;padding:15px 18px;width:100%;
  box-shadow:var(--shadow);
}
.iform textarea{min-height:120px;resize:vertical;line-height:1.6}
.iform select:focus,
.iform textarea:focus,
.iform input[type="date"]:focus{outline:0;border-color:var(--pink)}
.iform .submit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--ink-soft)}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--pink);flex:none;cursor:pointer}

/* ---------- brand mark ---------- */
.mark-img{
  /* square tile cut from the real logo, so the white frame keeps the same
     breathing room it has in the logo itself. Kept clear of the corner
     rounding, which used to clip into that frame. */
  height:46px;width:46px;flex:none;display:block;border-radius:10px;
  /* assets are cached immutably for a year, so if a stale copy of the mark is
     ever served into this square box, letterbox it rather than distort it */
  object-fit:contain;
}
@media (max-width:560px){
  .mark-img{height:40px;width:40px;border-radius:9px}
}

/* ---------- waitlist on the dark library band ---------- */
.waitform{margin-top:26px;display:flex;flex-direction:column;gap:22px;max-width:520px}
.waitform .choices{grid-template-columns:1fr;gap:10px}

.choice--deep{
  background:rgba(255,255,255,.055);border:2px solid var(--rule-deep);
  box-shadow:none;color:var(--on-deep);
}
.choice--deep span{color:var(--on-deep-soft)}
.choice--deep{padding:15px 18px 15px 48px}
.choice--deep input{top:18px}
.choice--deep:has(input:checked){border-color:var(--pink);background:rgba(255,255,255,.09)}
.waitform .mini{margin-top:0}

/* ---------- social tiles along the foot of every page ---------- */
.socials{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(30px,3.6vw,46px);
}
.socials a{
  width:44px;height:44px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:var(--pink);color:var(--on-pink);
  transition:transform .16s ease;
}
.socials a:hover{transform:translateY(-2px);color:var(--on-pink)}
.socials svg{width:21px;height:21px;display:block;fill:currentColor}
.legal{
  margin-top:clamp(24px,3vw,36px);padding-top:20px;
  border-top:1px solid var(--rule-deep);font-size:.8125rem;
  color:var(--on-deep-soft);text-align:center;
}
.legal a{color:var(--pink);text-decoration:none}
.buys{display:flex;flex-wrap:wrap;gap:10px 26px}
.tile .mini .efield{flex:1 1 200px}

/* ---------- grid overrides, last so they win over the base grids ---------- */
/* five items never divide evenly: lay them 3 across, then 2 wider */
.flow.g5,.pair.g5,.quad.g5{grid-template-columns:repeat(6,minmax(0,1fr))}
.flow.g5>*,.pair.g5>*,.quad.g5>*{grid-column:span 2}
.flow.g5>:nth-child(4),.pair.g5>:nth-child(4),.quad.g5>:nth-child(4),
.flow.g5>:nth-child(5),.pair.g5>:nth-child(5),.quad.g5>:nth-child(5){grid-column:span 3}
@media (max-width:940px){
  .flow.g5,.pair.g5,.quad.g5{grid-template-columns:1fr}
  .flow.g5>*,.pair.g5>*,.quad.g5>*,
  .flow.g5>:nth-child(4),.pair.g5>:nth-child(4),.quad.g5>:nth-child(4),
  .flow.g5>:nth-child(5),.pair.g5>:nth-child(5),.quad.g5>:nth-child(5){grid-column:auto}
}
/* four quotes read as a 2x2, not 3 plus an orphan */
.quotes.quotes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.quotes.quotes--2{grid-template-columns:1fr}}

/* seven artifacts lay out 3, then 2, then 2 rather than leaving one alone */
.gallery.g7{grid-template-columns:repeat(6,minmax(0,1fr))}
.gallery.g7>*{grid-column:span 2}
.gallery.g7>:nth-child(n+4){grid-column:span 3}
@media (max-width:1000px){
  .gallery.g7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery.g7>*,.gallery.g7>:nth-child(n+4){grid-column:auto}
}
@media (max-width:640px){
  .gallery.g7{grid-template-columns:1fr}
}

/* eight artifacts: 3, 3, then 2 wider, so the last row is not half empty */
.gallery.g8{grid-template-columns:repeat(6,minmax(0,1fr))}
.gallery.g8>*{grid-column:span 2}
.gallery.g8>:nth-child(n+7){grid-column:span 3}
@media (max-width:1000px){
  .gallery.g8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery.g8>*,.gallery.g8>:nth-child(n+7){grid-column:auto}
}
@media (max-width:640px){.gallery.g8{grid-template-columns:1fr}}

/* nine artifacts: three across, then straight to one.
   A two-column state would leave the ninth card alone on a row. */
.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.gallery{grid-template-columns:1fr}}

/* ---------- visual rhythm ----------
   The pages ran as one long cream field of identical white boxes. These give
   each section a marker, make the numbers an event, and break the field up. */

/* a short pink rule above every section heading */
.head h2{position:relative;padding-top:20px}
.head h2:before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;border-radius:2px;background:var(--pink)}
.phero h1:before,.hero h1:before{display:none}

/* numbers should look like a result, not a paragraph */
.stat{border-top:4px solid var(--pink)}
.stat .num{font-size:clamp(2.6rem,4.6vw,3.6rem)}
.case{border-top:4px solid var(--pink)}
.case .big{font-size:clamp(2.4rem,4vw,3.1rem)}

/* quotes read as voices, not as another information card */
.quote{background:var(--blush);box-shadow:none;border:1px solid var(--rule)}
.quote .glyph{font-size:3.4rem;color:var(--pink)}
.quote blockquote{font-size:1.09375rem}

/* a tinted band, so a long page is not one unbroken field */
.tint{background:var(--blush)}
.tint .tile,.tint .case,.tint .stat,.tint .item{box-shadow:0 10px 30px rgba(42,23,34,.07)}
/* inside a tinted band the quote needs to invert, or it vanishes into it */
.tint .quote,.panel .quote{background:var(--card);border-color:var(--rule)}
.voices{background:var(--blush)}

/* service-card icons: pink mark on a blush chip, sized to sit above the question */
.tile .ico{
  width:46px;height:46px;border-radius:13px;background:var(--blush);
  display:flex;align-items:center;justify-content:center;color:var(--pink-deep);
  flex:none;margin-bottom:2px;
}
.tint .tile .ico,.panel .tile .ico{background:var(--blush-lift)}
.tile .ico svg{width:24px;height:24px;display:block}

/* step cards already carry a pink rule, so their icon runs smaller and sits
   beside the label rather than stacking another block above it */
.step .ico{
  width:36px;height:36px;border-radius:11px;background:var(--blush);
  display:flex;align-items:center;justify-content:center;color:var(--pink-deep);
  flex:none;margin-bottom:10px;
}
.step .ico svg{width:20px;height:20px;display:block}
/* on a blush panel the chip has to go white or it disappears into the field */
.panel .step .ico,.tint .step .ico{background:var(--card)}

/* short student quotes read better three across, centred on the line */
.quotes.quotes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.quotes--3 blockquote{font-size:1.25rem;line-height:1.45}
@media (max-width:860px){.quotes.quotes--3{grid-template-columns:1fr}}

/* the licence block: the thing that can be bought today leads the band */
.lic{
  margin-top:clamp(22px,2.6vw,30px);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  padding:clamp(20px,2.4vw,28px);
}
.lic .k{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-soft)}
.lic h3{margin-top:6px;color:var(--on-deep);font-size:1.25rem}
.lic p:not(.k){margin-top:8px;color:var(--on-deep-soft);font-size:.9375rem}
.waitform .k{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* three results read stronger than four with a weak one */
.stats.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.stats.stats--3{grid-template-columns:1fr}}

/* wider text column beside a capture form. Set here, not inline, so the
   mobile rule below can still collapse it. An inline value cannot be beaten. */
.pair.pair--lead{grid-template-columns:1.25fr 1fr;align-items:center}
@media (max-width:900px){.pair.pair--lead{grid-template-columns:minmax(0,1fr)}}

/* a single case card centres instead of stretching across the two-column grid */
.cases.cases--1{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}

/* one tile on its own row, matching the grids above it in gutter and rhythm */
.solo{margin-top:clamp(18px,2.2vw,28px);display:grid;grid-template-columns:minmax(0,1fr)}

/* numbered steps: the sequence carried by a filled badge instead of a word.
   pink-deep behind white clears 5.8:1, where hot pink behind white would not */
.step .numb{
  width:46px;height:46px;border-radius:50%;background:var(--pink-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.3125rem;line-height:1;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;flex:none;margin-bottom:14px;
}

/* a single line lifted out of the prose, where a pull quote would sit */
.prose .pull{
  margin-top:26px;padding-left:20px;border-left:4px solid var(--pink);
  font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:600;line-height:1.45;color:var(--ink);
}

/* certifications: a short verified list, set apart from the prose without a card */
.creds{margin-top:clamp(26px,3vw,38px);padding-top:22px;border-top:1px solid var(--rule);max-width:760px}
.creds .k{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-deep)}
.creds ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.creds li{position:relative;padding-left:28px;color:var(--ink);font-size:.9375rem}
.creds li:before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:8px;
  border-left:2.4px solid var(--pink);border-bottom:2.4px solid var(--pink);
  transform:rotate(-45deg);border-radius:1px;
}
@media (min-width:720px){.creds ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 28px}}
/* in the narrow About column there is no room for two, and splitting them
   there breaks every credential across six lines */
.bioside .creds ul{grid-template-columns:minmax(0,1fr)}

/* a supporting figure set under the proof it supports, not competing with it */
.under{
  margin:clamp(26px,3vw,36px) auto 0;max-width:720px;text-align:center;
  color:var(--ink-soft);font-size:.9375rem;line-height:1.6;
}

/* two results read as a pair, not a row with a hole in it */
.stats.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.stats.stats--2{grid-template-columns:1fr}}

/* library band: the two offers sit side by side, so neither column runs long
   past the other and leaves a field of empty deep-pink beside it */
/* Heading and intro sit side by side so the top of the band is not half
   empty, then the two offers run as a matched pair of equal-height cards:
   a reader picks the one that applies to them instead of parsing a wall. */
.libhead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,46px);align-items:end;
}
.libhead h2{margin:0}
.libhead p{margin:0;color:var(--on-deep-soft);max-width:none}
@media (max-width:860px){
  .libhead{grid-template-columns:1fr;gap:14px;align-items:start}
}
.libgrid{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);align-items:start;
}
@media (max-width:900px){.libgrid{grid-template-columns:1fr}}

/* both offers share one card treatment, so neither looks like the footnote */
.libgrid > *{
  margin-top:0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:0;max-width:none;
}
.libgrid .lic .row{margin-top:18px}

/* The band used to put a licence pitch and a two-option waitlist side by side,
   which asked a visitor to make five choices before doing anything. Now there
   is one thing to do, and the waitlist waits behind a line of text. */
.libwhat{
  list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.libwhat li{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 16px;font-size:.875rem;color:var(--on-deep);
}
.libact{
  margin-top:clamp(26px,3vw,36px);
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
}
.libact .libnote{margin:0;color:var(--on-deep-soft);font-size:.9375rem;max-width:42ch}

.libmore{margin-top:clamp(26px,3vw,34px);border-top:1px solid var(--rule-deep);padding-top:20px}
.libmore summary{
  cursor:pointer;color:var(--pink-soft);font-weight:500;font-size:.9375rem;
  list-style:none;padding:4px 2px;display:inline-flex;align-items:center;gap:9px;
}
.libmore summary::-webkit-details-marker{display:none}
.libmore summary:before{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;
}
.libmore[open] summary:before{transform:rotate(-135deg);margin-top:3px}
.libmore summary:hover{color:var(--pink)}
.libmore summary:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}
.libmore .waitform{margin-top:22px;max-width:620px}
.libmore .waitform .choices{gap:10px}
.libmore .waitform .mini{margin-top:18px}
.libmore legend{color:var(--on-deep)}
@media (prefers-reduced-motion:no-preference){
  .libmore summary:before{transition:transform .16s ease}
}

/* three citations read as three things, not one sentence with three links in it */
.citelist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.citelist li{position:relative;padding-left:20px}
.citelist li:before{
  content:"";position:absolute;left:0;top:.56em;width:8px;height:8px;
  border-radius:50%;background:var(--pink);
}

/* Questions and answers. Open by keyboard or click; the answer stays in the
   DOM either way, so search and AI readers can reach it while closed. */
.faq{margin-top:clamp(24px,3vw,36px);display:grid;gap:10px;max-width:860px}
.faq-item{
  background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:0;overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 54px 18px 22px;position:relative;
  font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:3px solid var(--pink-deep);outline-offset:-3px;border-radius:16px}
.faq-item summary:after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2.4px solid var(--pink-deep);border-bottom:2.4px solid var(--pink-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq-item[open] summary:after{transform:translateY(-20%) rotate(-135deg)}
.faq-item[open] summary{padding-bottom:6px}
.faq-a{padding:0 54px 20px 22px}
.faq-a p{color:var(--ink-soft);font-size:.9375rem;line-height:1.65;margin:0}
@media (prefers-reduced-motion:reduce){.faq-item summary:after{transition:none}}

/* A quiet mid-page nudge. Long pages lose people who decided early and had
   nowhere to act: by the time the closing call to action arrives they have
   gone. This sits inline, reads as a line of text rather than a banner, and
   never interrupts the argument it sits inside. */
/* The mid-page prompt sits in its own band so it stays inside the page's
   width and keeps clear air under it. It used to be a bare child of <main>,
   which ran it edge to edge and let it butt straight into the next section. */
.nudgeband{padding-block:clamp(30px,3.6vw,46px)}
.nudge{
  margin:0;padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);
  background:var(--blush);border-radius:18px;border:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
}
.nudge p{margin:0;font-size:1rem;font-weight:600;color:var(--ink);max-width:46ch}
.nudge .btn{flex:none}