@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/archivo-var.woff2) format('woff2')}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/pt-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/pt-serif-400.woff2) format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/pt-serif-700.woff2) format('woff2')}

:root{
  --linen:#FAF6F0;
  --shell:#F5E7D6;
  --sage:#D3E1C4;
  --clay:#996F47;
  --clay-deep:#8A6238;
  --bark:#603D0B;
  --ink:#603D0B;
  --ink-soft:#8A6B3E;
  --line:rgba(96,61,11,.18);
  --line-soft:rgba(96,61,11,.10);
  --surface:rgba(255,255,255,.55);
  --surface-2:rgba(255,255,255,.72);
  --surface-3:#fff;
  --hdr-bg:rgba(250,246,240,.72);
  --ftr-bg:#603D0B;
  --ftr-fg:rgba(245,231,214,.78);
  --ftr-strong:#F5E7D6;
  --ftr-accent:#D3E1C4;
  --art-blend:multiply;
  --art-invert:0;

  --serif:'PT Serif',Iowan Old Style,Palatino,Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
  --pad-y:clamp(72px,10vw,132px);
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto;display:block}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--bark);font-weight:400;margin:0;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6.2vw,4.25rem);letter-spacing:-.025em}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);letter-spacing:-.02em}
h3{font-size:1.3125rem;line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--clay);margin:0 0 1.25rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";flex:0 0 34px;height:1px;background:currentColor;opacity:.45}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 34px;height:1px;background:currentColor;opacity:.45}

.lede{font-family:var(--serif);font-size:clamp(1.125rem,1.7vw,1.3125rem);line-height:1.6;color:var(--ink)}
.muted{color:var(--ink-soft)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad-y)}
.section--shell{background:var(--shell)}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}

/* ---------- skip + focus ---------- */
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--bark);color:var(--linen);padding:.7rem 1.1rem;border-radius:8px;
  font-size:.875rem;font-weight:600;text-decoration:none;transition:top .18s ease;
}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.hdr.is-stuck{background:var(--hdr-bg);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line-soft)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand__mark{width:26px;height:26px;flex:none;color:var(--clay)}
.brand__name{font-family:var(--serif);font-size:1.1875rem;color:var(--bark);letter-spacing:-.01em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:1.85rem}
.nav a{
  font-size:.875rem;text-decoration:none;color:var(--ink);
  position:relative;padding-block:.35rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="true"]{color:var(--bark)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.01em;
  padding:.78rem 1.4rem;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn--primary{background:var(--clay-deep);color:#FFFDFA}
.btn--primary:hover{background:var(--bark);transform:translateY(-1px)}
.btn--ghost{border-color:var(--line);color:var(--bark);background:transparent}
.btn--ghost:hover{border-color:var(--clay);background:color-mix(in srgb,var(--clay) 10%,transparent)}
.btn--lg{padding:.95rem 1.7rem;font-size:.9375rem}
.hdr .btn{padding:.62rem 1.15rem}

.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;font:inherit;font-size:.8125rem;font-weight:600;color:var(--bark);cursor:pointer}

/* ---------- hero ---------- */
.hero{padding-top:clamp(28px,5vw,56px);padding-bottom:var(--pad-y);position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{margin-bottom:1.4rem;max-width:12ch}
.hero .lede{max-width:46ch;margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:.5rem .5rem;list-style:none;padding:0;margin:0}
.hero__facts li{
  font-size:.8125rem;color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:999px;padding:.38rem .85rem;
  background:var(--surface);
}
.hero__art{position:relative;display:grid;place-items:center;padding:clamp(10px,3vw,28px)}
.hero__art::before{
  content:"";position:absolute;inset:6% 4%;border-radius:50%;
  /* Was a sage halo; it read as a green box behind the line art. A soft
     neutral lift keeps a little depth without tinting the artwork. */
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.45) 52%,rgba(255,255,255,0) 72%);
}
.hero__art img{position:relative;width:100%;mix-blend-mode:var(--art-blend);filter:invert(var(--art-invert));opacity:0}
.hero__art img.is-in{animation:fadeUp 1.15s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- journey (signature: the thread) ---------- */
.journey__head{max-width:56ch;margin-bottom:clamp(28px,3.5vw,44px)}
.journey__head h2{margin-bottom:.9rem}
/* One column, with the thread as a rail down the left.
   This replaced an alternating left/right layout. That version put each phase
   in its own row in one column, which left the opposite column empty for the
   full height of the row. It reads as elegant with two lines per phase and as
   broken with a paragraph and six bullets, which is what the content actually
   is. Right-aligned body copy and right-aligned bullet lists did not help.
   The mobile layout was already this, so there is now one layout rather than
   two, and half as much that can go wrong. */
.thread{
  position:relative;
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  row-gap:clamp(26px,3vw,40px);
}
.thread__line{
  position:absolute;left:0;top:0;width:74px;height:100%;pointer-events:none;
}
.thread__line svg{width:100%;height:100%;display:block;overflow:visible}
.thread__line path{
  fill:none;stroke:var(--clay);stroke-width:1.25;
  vector-effect:non-scaling-stroke;opacity:.55;
}
.node{
  position:absolute;left:31px;width:10px;height:10px;border-radius:50%;
  background:var(--linen);border:1.25px solid var(--clay);
  transform:scale(.5);opacity:0;
  transition:transform .45s cubic-bezier(.2,.9,.3,1.3),opacity .35s ease;
}
.node.is-on{transform:scale(1);opacity:1}
.node.is-on::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--clay)}

/* Each phase uses the full width rather than stacking everything in a 56ch
   column. Text on the left, its list on the right in two columns, which turns
   roughly eight stacked rows into three and lets the whole journey sit on one
   screen with the thread still running down beside it.

   Placed by grid rather than by wrapping the markup in more divs, so the
   source order stays flat and readable. */
.phase{
  grid-column:2;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  column-gap:clamp(24px,3vw,48px);
  align-items:start;
}
.phase > .eyebrow{grid-column:1;grid-row:1;margin-bottom:.5rem}
.phase > h3{grid-column:1;grid-row:2}
.phase > .phase__when{grid-column:1;grid-row:3}
/* :not(.eyebrow) matters. The eyebrow is a <p> too, and without excluding it
   this rule also matched it, with higher specificity than the eyebrow's own
   rule, so the label landed on row 4 on top of the paragraph. */
.phase > p:not(.phase__when):not(.eyebrow){grid-column:1;grid-row:4;margin-bottom:0}
.phase > .phase__list{grid-column:2;grid-row:1 / span 4}
.phase__when{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:.9375rem;margin:.2rem 0 .6rem}
.phase h3{margin-bottom:.35rem}
.phase p{color:var(--ink-soft);font-size:.9375rem;margin-bottom:1.1rem}
.phase__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.4rem}
.phase__list li{position:relative;padding-left:1.15rem;font-size:.9375rem;color:var(--ink)}
.phase__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--clay);opacity:.7;
}

/* ---------- services ---------- */
/* Four across, so the whole section fits one screen. Child care used to be a
   dashed aside below the cards, which pushed the section past the fold and
   left it cut in half. */
/* Three across, so each card has room to breathe. Child care sits beneath as
   a quieter aside, because it is not doula work and should not read as a
   fourth option alongside the three that are. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(24px,2.6vw,34px)}
.card{
  background:var(--linen);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.section--shell .card{background:var(--surface)}
.card:hover{border-color:color-mix(in srgb,var(--clay) 45%,transparent);transform:translateY(-3px);box-shadow:0 14px 34px -22px color-mix(in srgb,var(--bark) 45%,transparent)}
.card__tag{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:.9rem}
.card h3{margin-bottom:.55rem;font-size:1.25rem}
.card p{font-size:.9375rem;color:var(--ink-soft)}
.card__list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.4rem;font-size:.875rem}
.card__list li{position:relative;padding-left:1.2rem;color:var(--ink)}
.card__list li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;border:1px solid var(--clay);opacity:.75}
.card__foot{margin-top:auto;padding-top:1.2rem}
.card__link{
  font-size:.875rem;font-weight:600;color:var(--bark);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45rem;
}
.card__link svg{transition:transform .22s ease}
.card:hover .card__link svg{transform:translateX(4px)}

.aside-note{
  margin-top:clamp(20px,2.4vw,28px);border:1px dashed var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem;align-items:center;
}
.aside-note h3{font-size:1.0625rem}
.aside-note p{font-size:.875rem;color:var(--ink-soft);margin:.2rem 0 0;max-width:60ch}

/* ---------- ethos ---------- */
.ethos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.ethos__stmt{font-family:var(--serif);font-size:clamp(1.5rem,2.9vw,2.125rem);line-height:1.3;color:var(--bark);letter-spacing:-.015em;margin:0}
.ethos__stmt em{font-style:italic;color:var(--clay)}
.values{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-soft)}
.values li{
  padding:1.05rem 0 1.05rem 2.6rem;border-bottom:1px solid var(--line-soft);
  position:relative;font-size:1rem;
}
.values li::before{
  content:"";position:absolute;left:.5rem;top:1.55rem;width:9px;height:9px;
  border-radius:50%;background:var(--sage);border:1px solid color-mix(in srgb,var(--clay) 55%,transparent);
}

/* ---------- about ---------- */
.about{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.about__fig{margin:0}
/* No saturate(0) here. It was left from when this figure held the black and
   white birth photograph, where it did nothing, and it silently drained the
   colour from Gloria's portrait when that took its place. */
.about__fig img{border-radius:var(--r);width:100%}
.about__fig figcaption{font-size:.75rem;color:var(--ink-soft);margin-top:.7rem;font-style:italic;font-family:var(--serif)}
.about h2{margin-bottom:1.1rem}
.about p{color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:62ch}
.about p strong{color:var(--ink);font-weight:500}
.sig{font-family:var(--serif);font-style:italic;font-size:1.375rem;color:var(--clay);margin-top:1.5rem}
.quote{
  margin:clamp(40px,6vw,72px) 0 0;padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--line-soft);
  text-align:center;
}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.4;color:var(--bark)}
.quote cite{display:block;margin-top:1rem;font-style:normal;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay)}

/* ---------- faq ---------- */
.faq{max-width:800px;margin-inline:auto}
.faq__list{border-top:1px solid var(--line-soft);margin-top:clamp(20px,2.4vw,30px)}
details{border-bottom:1px solid var(--line-soft)}
summary{
  list-style:none;cursor:pointer;padding:1rem 2.5rem 1rem 0;position:relative;
  font-family:var(--serif);font-size:1.125rem;color:var(--bark);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:.4rem;top:calc(1rem + .55em);
  width:11px;height:11px;border-right:1.25px solid var(--clay);border-bottom:1.25px solid var(--clay);
  transform:translateY(-50%) rotate(45deg);transition:transform .25s ease;
}
details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
summary:hover{color:var(--clay)}
.faq__a{padding:0 3rem 1.2rem 0;font-size:.9375rem;color:var(--ink-soft);max-width:66ch}

/* ---------- contact ---------- */
/* The form column takes more of the row than the prose beside it. At the old
   ratio "Due date (or your best guess)" wrapped to two lines while its
   neighbours did not, which pushed its input a line lower than theirs. */
.contact{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(28px,4vw,56px);align-items:start}
.steps{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:1.1rem;counter-reset:s}
.steps li{position:relative;padding-left:2.4rem;font-size:.9375rem;color:var(--ink-soft);counter-increment:s}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-.05em;
  width:26px;height:26px;border-radius:50%;background:var(--sage);color:var(--bark);
  display:grid;place-items:center;font-family:var(--sans);font-size:.75rem;font-weight:600;
}
.steps b{display:block;color:var(--ink);font-weight:500}

.form{background:var(--linen);border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.field{margin-bottom:.9rem}
.field label,.legend{display:block;font-size:.8125rem;font-weight:600;color:var(--bark);margin-bottom:.45rem;letter-spacing:.01em}
.hint{font-weight:400;color:var(--ink-soft);letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.9375rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:.72rem .85rem;transition:border-color .2s ease,background .2s ease;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--surface-3);border-color:var(--clay);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--clay) 20%,transparent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* Due date, location and language share a row. Three short fields stacked
   separately cost a whole row of height the section did not have. */
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
fieldset{border:0;padding:0;margin:0 0 .9rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;font-size:.8125rem;padding:.48rem .9rem;border-radius:999px;
  border:1px solid var(--line);cursor:pointer;transition:all .18s ease;background:var(--surface);
}
.chip span:hover{border-color:var(--clay)}
.chip input:checked+span{background:var(--sage);border-color:var(--clay);color:var(--bark);font-weight:500}
.chip input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.form__note{font-size:.75rem;color:var(--ink-soft);max-width:32ch}
.sent{
  display:none;border:1px solid var(--clay);background:var(--sage);border-radius:var(--r);
  padding:clamp(24px,3vw,36px);
}
.sent h3{margin-bottom:.5rem}
.sent p{font-size:.9375rem;color:var(--ink)}
.is-sent .form{display:none}
.is-sent .sent{display:block}

/* ---------- footer ---------- */
.ftr{background:var(--ftr-bg);color:var(--ftr-fg);padding-block:clamp(46px,6vw,68px)}
.ftr__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.ftr h4{color:var(--ftr-strong);font-size:1.375rem;margin-bottom:.6rem}
.ftr p{font-size:.875rem;max-width:34ch}
.ftr__t{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ftr-accent);margin-bottom:.9rem}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.875rem}
.ftr a{color:var(--ftr-fg);text-decoration:none}
.ftr a:hover{color:var(--ftr-strong);text-decoration:underline;text-underline-offset:3px}
.ftr__base{
  margin-top:clamp(32px,4vw,48px);padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--ftr-fg) 26%,transparent);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.75rem;
}
.ftr .brand__name{color:var(--ftr-strong)}
.ftr .brand__mark{color:var(--ftr-accent)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__art{order:-1;max-width:400px;margin-inline:auto}
  .hero h1{max-width:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .ethos,.about,.contact{grid-template-columns:1fr}
  .about__fig{max-width:460px}
  .ftr__in{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav,.hdr .btn{display:none}
  .menu-btn{display:inline-block}
  .nav.is-open{
    display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--linen);border-bottom:1px solid var(--line-soft);padding:.5rem var(--gutter) 1.25rem;
  }
  .nav.is-open a{padding:.85rem 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
  .hdr__in{position:relative}

  .thread{grid-template-columns:52px minmax(0,1fr)}
  .thread__line{width:52px}
  .node{left:20px}
  .aside-note{grid-template-columns:1fr;text-align:left}
}
@media(max-width:560px){
  .row2,.row3{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .hero__art img{opacity:1}
}

/* ---------- form: live states ---------- */
.form__err{
  margin:.9rem 0 0;padding:.7rem .9rem;border-radius:9px;
  background:rgba(180,71,47,.09);border:1px solid rgba(180,71,47,.35);
  color:#8E3520;font-size:.875rem;
}
.field input.is-invalid,.field textarea.is-invalid{border-color:#B4472F;background:rgba(180,71,47,.05)}
.btn[disabled]{opacity:.6;cursor:progress;pointer-events:none}
.cf-turnstile{margin:.2rem 0 .8rem}


/* ---------- viewport bottom fade ----------
   The section below the fold is always cut mid-thought. A fixed scrim blurs and
   lifts it so the page reads as continuing rather than truncated.

   backdrop-filter cannot take a gradient strength, so the layer is blurred and
   then masked to ramp in from nothing. pointer-events:none keeps clicks working;
   z-index sits below the sticky header (100). */
.viewport-fade{
  position:fixed;left:0;right:0;bottom:0;height:150px;
  z-index:60;pointer-events:none;
  background:linear-gradient(to top,rgba(250,246,240,.92) 0%,rgba(250,246,240,.5) 46%,rgba(250,246,240,0) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 100%);
  opacity:1;transition:opacity .3s ease;
}
/* At the true end of the page nothing is cut off, and a linen scrim over the
   dark footer would look wrong. */
.viewport-fade.is-at-end{opacity:0}
@media(max-width:700px){.viewport-fade{height:110px}}
@media(prefers-reduced-motion:reduce){.viewport-fade{transition:none}}

/* ---------- back to top ----------
   Same behaviour as skyenet.tech, in this site's palette. Sits above the
   bottom scrim (60) so it is never blurred by it. */
.to-top{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(96,61,11,.86);border:1px solid rgba(245,231,214,.28);
  color:var(--shell);z-index:90;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .2s ease;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--clay-deep);border-color:rgba(245,231,214,.5)}
.to-top svg{display:block}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- top scrim ----------
   Blurs content passing under the sticky header, fading out downward.

   The header itself is NOT blurred: .hdr is z-index 100 and this sits at 90,
   and backdrop-filter only affects what paints below it. Above the header it
   would smear the nav, which is exactly what this avoids. */
.top-fade{
  position:fixed;top:0;left:0;right:0;height:120px;
  z-index:90;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,246,240,.88) 0%,rgba(250,246,240,.45) 48%,rgba(250,246,240,0) 100%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 36%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 36%,transparent 100%);
  opacity:0;transition:opacity .3s ease;
}
.top-fade.is-visible{opacity:1}
@media(max-width:700px){.top-fade{height:92px}}
@media(prefers-reduced-motion:reduce){.top-fade{transition:none}}



/* ---------- closing note ----------
   The page used to end on a form and a footer. A quiet sign-off in Gloria's
   voice lets the reader leave the page settled rather than mid-transaction. */
.closing{
  background:var(--shell);
  padding-block:clamp(44px,7vw,76px);
  text-align:center;
}
.closing p{
  font-family:var(--serif);
  font-size:clamp(1.125rem,2.2vw,1.4375rem);
  line-height:1.55;color:var(--bark);
  max-width:34ch;margin:0 auto;
}
.closing__sig{
  font-style:italic;color:var(--clay);
  font-size:1.125rem !important;margin-top:1.1rem !important;
}

/* A quote used at the top of a section rather than as a divider between two.
   Same type and spacing as .quote, without the rule above it. */
.quote--flush{
  margin:0 0 1.6rem;padding-top:0;border-top:0;
  /* Left, not centred like .quote. It sits directly above a left-aligned
     eyebrow, heading and paragraph, and centring it there reads as a stray
     element rather than the opening of the section. The typography is what
     makes both read as quotations; the alignment can follow its neighbours. */
  text-align:left;
}
.quote--flush blockquote{font-size:clamp(1.0625rem,1.9vw,1.3125rem)}
/* The questions section is centred, so this instance follows it. */
.quote--center{text-align:center;margin-bottom:1.2rem}

/* Cards sat at rgba(255,255,255,.55) over --shell, which resolves to about
   #FAF3E9 against #F5E7D6. Two percent of separation is not separation. */
.section--shell .card{
  background:#FFFDFB;
  border-color:rgba(96,61,11,.14);
  box-shadow:0 1px 2px rgba(96,61,11,.04),0 8px 20px -14px rgba(96,61,11,.28);
}
.section--shell .card:hover{
  box-shadow:0 2px 4px rgba(96,61,11,.05),0 16px 32px -18px rgba(96,61,11,.4);
}

/* ---------- portrait ----------
   The About figure is now a portrait rather than a landscape photograph, so
   it needs its own aspect handling. Kept unsaturated like the rest of the
   photography on the page. */
.about__fig img{aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}

/* ---------- image above the closing quote ----------
   Gives the Rachel Reed line something to sit under, rather than leaving it
   as text floating between two sections. */
.quote__fig{margin:clamp(40px,6vw,72px) 0 0}
.quote__fig img{width:100%;border-radius:var(--r);filter:saturate(0)}
.quote__fig figcaption{
  font-size:.75rem;color:var(--ink-soft);margin-top:.7rem;
  font-style:italic;font-family:var(--serif);text-align:center;
}
.quote__fig + .quote{margin-top:clamp(26px,3.5vw,40px);padding-top:clamp(22px,3vw,32px)}

/* Subheadings inside her story. They were h3s at default spacing, which ran
   straight into the paragraph beneath and read as bold text rather than as
   a new part of the piece. */
.about h3{
  font-size:1.25rem;margin:2.4rem 0 .7rem;
  padding-top:1.4rem;border-top:1px solid var(--line-soft);
}
.about h3:first-of-type{margin-top:2rem}

/* The birth photograph sat immediately below her story with no separation, so
   the two read as one block. */
.quote__fig{margin:clamp(56px,8vw,96px) 0 0}

/* The photograph and the closing quote, between meeting Gloria and the
   questions. Its own ground so it reads as a pause rather than as the tail of
   her biography. */
/* An interstitial, so it must read as a pause rather than as another section.
   It was previously the photograph at full width with the quote beneath, which
   made this brief moment taller than the sections it sits between. */
.section--still{background:var(--linen);padding-block:clamp(44px,6vw,76px)}
.still{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.section--still .quote__fig{margin:0}
.section--still .quote{margin:0;padding:0;border:0}
.quote--beside{text-align:left}
.quote--beside blockquote{font-size:clamp(1.1875rem,2vw,1.5rem)}
.quote--beside cite{margin-top:.9rem}
@media(max-width:820px){
  .still{grid-template-columns:1fr;gap:1.8rem}
  .section--still .quote__fig{max-width:420px;margin-inline:auto}
}

@media(max-width:760px){.cards{grid-template-columns:1fr;max-width:520px}}

/* ---------- about: horizontal panels ----------
   Her biography, approach and story are ~450 words of her own writing. In one
   column that is taller than a screen at any readable size, and shrinking the
   type or cutting her words were both worse answers. Three panels moving
   sideways keeps every word and keeps the section on one screen.

   The track is a real scroll container, so trackpad, touch and keyboard all
   work whether or not the arrow buttons do. */
.about__body{min-width:0}
.slider{position:relative;margin-top:.4rem}
.slider__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:clamp(24px,4vw,56px);
  scrollbar-width:none;
  /* Room for the focus ring, which would otherwise be clipped by overflow. */
  padding:3px;margin:-3px;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:6px}

.slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  min-width:0;
  /* Equal height panels, so the arrows do not move as you go between them. */
  min-height:clamp(340px,42vh,460px);
}
.slide h2{margin-bottom:1.1rem}
.slide p:last-child{margin-bottom:0}

.slider__nav{display:flex;align-items:center;gap:.6rem;margin-top:1.4rem}
.slider__btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--bark);
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,opacity .2s ease;
}
.slider__btn:hover:not(:disabled){background:rgba(151,111,72,.1);border-color:var(--clay)}
.slider__btn:disabled{opacity:.3;cursor:default}
.slider__count{
  margin:0 0 0 .5rem;font-size:.8125rem;color:var(--ink-soft);
}
.slider__count span{color:var(--faint);margin-left:.4rem}

@media(prefers-reduced-motion:reduce){.slider__track{scroll-behavior:auto}}

/* On a narrow screen the panels stack, because sideways paging beside a photo
   is a poor trade when there is no room for the photo anyway. */
@media(max-width:700px){
  .slider__track{display:block;overflow:visible}
  .slide{min-height:0;margin-bottom:2rem}
  .slider__nav{display:none}
}

@media(max-width:860px){
  .phase{grid-template-columns:1fr}
  .phase > .eyebrow,.phase > h3,.phase > .phase__when,.phase > p:not(.phase__when):not(.eyebrow),.phase > .phase__list{
    grid-column:1;grid-row:auto;
  }
  .phase > p:not(.phase__when):not(.eyebrow){margin-bottom:1rem}
}
@media(max-width:560px){
  .phase__list{grid-template-columns:1fr}
}

/* The journey is the tallest section on the page, so it carries less padding
   than the others and its intro runs wider, which costs a line. Without both
   it overruns a 1080p viewport by roughly 160px and gets cut. */
#journey{padding-block:clamp(48px,6vw,84px)}
#journey .journey__head{max-width:74ch;margin-bottom:clamp(22px,2.6vw,32px)}

/* Eight questions at full section padding overran a 1080p viewport. Less
   padding here, and a tighter row rhythm on the accordion. */
#faq{padding-block:clamp(44px,5.5vw,76px)}

/* A standalone quote between two sections. Short, so it reads as a breath. */
.section--quote{padding-block:clamp(38px,4.6vw,64px)}
.section--quote .quote{margin:0}

/* The closing note follows the contact section, which is shell, so it takes
   the lighter ground to keep the alternation going to the bottom. */
.closing{background:var(--shell)}

/* Services carries less padding than the default so the three cards and the
   child care aside sit on one screen together. */
#services{padding-block:clamp(44px,5.5vw,76px)}
/* A little wider than the rest of the page. Three cards plus their gaps need
   more room than a column of prose, and the extra width buys each card a
   couple of lines of height back. */
#services .wrap{max-width:1320px}
#services .journey__head{max-width:70ch;margin-bottom:0}
.aside-note{margin-top:clamp(18px,2vw,24px);padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px)}
.aside-note p{margin-top:.35rem}

/* The form is the tallest thing on the page after the journey, so this
   section carries less padding than the default. */
#contact{padding-block:clamp(44px,5.5vw,76px)}
#contact .form{padding:clamp(20px,2.2vw,28px)}
@media(max-width:820px){.row3{grid-template-columns:1fr}}

/* Inputs line up on their bottom edge, so a label that wraps can never again
   drag its field out of step with the ones beside it. Widening the column
   fixed today's case; this fixes the next one. */
.row2,.row3{align-items:end}
.row2 > .field,.row3 > .field{display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:0}
.row2,.row3{margin-bottom:.9rem}