body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
[id]{scroll-margin-top:6.5rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}
.btn[disabled]{opacity:.6;cursor:default}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.6rem 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}


/* ========================= PAGE HEAD ========================= */
main{flex:1 0 auto}
/* centred, unlike the head on the other small pages: this one is a short
   invitation standing over a single form rather than the opening of a column of
   prose, so the title and the copy sit over the middle of the card below them
   instead of against the left gutter.
   The card below sits under the band's edge and does not rise into it: the two
   sections meet on a straight line, the way every other band on the site meets
   the one after it. */
.phead{
  background:var(--dune);
  padding:clamp(8.5rem,15vh,11rem) 0 clamp(3rem,6vw,5rem);
  text-align:center;position:relative;overflow:hidden;
}
/* the same soft white disc the apricot bands on the home, speaking and corporate
   pages close with, on dune rather than apricot. Off to the top right against
   centred type: that asymmetry is what keeps a centred head from reading as a
   block of text parked in the middle of a rectangle. */
.phead::before{
  content:"";position:absolute;inset:-45% -12% auto auto;width:56vw;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.3);
}
/* lifts the copy above the disc */
.phead__in{position:relative}
.phead__t{
  font-family:var(--serif);font-size:clamp(2.6rem,1.4rem + 5.4vw,6rem);
  line-height:.94;letter-spacing:-.04em;
}
/* the headline is one line of one face — "with me" is not set apart. The script
   accent of this head is the reply line below instead. */
/* no 52ch measure here — the 52ch the other pages set would break this over
   three short lines in the middle of a wide band, which reads as a column that
   has lost its page. It runs the full line instead, and the wrap's own gutters
   are what hold it in.
   The two sentences are one paragraph with a <br> between them, not two
   paragraphs: they want the break without the space, so what separates them is
   the line height and nothing else. */
.phead__sub{
  margin:clamp(1.5rem,3vw,2.2rem) 0 0;
  font-family:var(--serif);font-size:clamp(1.1rem,.98rem + .6vw,1.45rem);
  line-height:1.4;color:var(--ink-soft);
}
/* how long a reply takes — the script line of this head, in Caveat and
   terracotta like every other handwritten line on the site.
   It must not read as smaller than the two sentences above it, which is why the
   size is theirs times 1.4 and not theirs exactly: Caveat's x-height is well
   under Playfair's at the same nominal size, so matching the numbers would have
   made it look like the footnote it is not. 1.4 puts the two x-heights past each
   other, and the line reads as the larger of the two.
   inline-flex, so the box is only as wide as the line and the centring of the
   parent still applies; align-items:flex-start keeps the clock on the first line
   when the sentence wraps on a phone rather than centring it over both. */
.phead__reply{
  --reply:clamp(1.1rem,.98rem + .6vw,1.45rem);
  margin:clamp(1.5rem,3vw,2.2rem) 0 0;
  display:inline-flex;align-items:flex-start;gap:.5em;
  font-family:var(--script);font-weight:600;font-size:calc(var(--reply) * 1.4);
  line-height:1.15;color:var(--terracotta);
}
/* .72em, not the ~1em it would take beside a serif: Caveat is set 1.4× up here,
   so a clock at its full em would be half again the size of the writing beside
   it. The nudge puts it on the line optically rather than on its own box. */
.phead__ico{width:.72em;height:.72em;flex:none;transform:translateY(.3em)}

/* ========================= PAGE BODY ========================= */
.pbody{padding:clamp(3.5rem,7vw,6rem) 0 clamp(5rem,10vw,8rem)}

/* ========================= THE FORM ==========================
   Lifted wholesale from the enquiry band on corporate-offerings.html so both
   forms stay one thing to the eye — same card, same three-column grid, same
   breakpoints. What is not carried over is the apricot band around it: here the
   form is the page, not the closer of a long one, so it sits on the shell's own
   cream ground like the prose on the other small pages.
   The one addition is the measure: on the corporate page the card spans the full
   1320px wrap because a second column of copy used to sit beside it. Alone on a
   page that is far wider than any of these fields need, so it is capped — and
   centred in what is left, under the centred head, rather than left against the
   gutter with 280px of empty page beside it. */
.formwrap{max-width:1040px;margin-inline:auto}
.formcard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:6px;
  padding:clamp(1.4rem,2.2vw,1.9rem);
  box-shadow:0 44px 84px -70px rgba(83,79,81,.75);
}
/* three columns: nine cells over three rows — the interest select takes the
   ninth by spanning two — so nothing is left hanging in a half-empty row. */
.form{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.5vw,1.15rem)}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field--full{grid-column:1/-1}
/* the one select whose options are full phrases ("ADHD workplace & strategy
   consulting") — at a third of the card it clipped its own value */
.field--wide{grid-column:span 2}
/* tighter than the .14em the rest of the site's small caps carry: these labels are
   full phrases ("Tell me a bit about what you're looking for"), not one-word kickers,
   and they sit directly above the box they name, so they read as a line of words
   rather than as a rule of spaced capitals */
.field > label{
  font-family:var(--cond);font-weight:500;font-size:.8125rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.3;
}
.field .req{color:var(--terracotta)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-weight:300;font-size:.9375rem;line-height:1.5;
  color:var(--ink-soft);background:var(--white);
  border:1px solid var(--hairline);border-radius:4px;
  padding:.72em .9em;width:100%;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{resize:vertical;min-height:6rem}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.6em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23423D3F' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(196,99,60,.14);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(83,79,81,.45)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;margin-top:.6rem;
}
.form__fine{font-size:.8125rem;line-height:1.6;color:var(--ink-faint);max-width:34ch}
.form__status{
  grid-column:1/-1;margin:0;padding:1em 1.2em;border-radius:4px;
  font-size:.9375rem;line-height:1.6;display:none;
}
.form__status.is-on{display:block}
.form__status.is-ok{background:rgba(196,99,60,.1);border:1px solid rgba(196,99,60,.3);color:var(--ink-soft)}
.form__status.is-err{background:#FDECE6;border:1px solid rgba(196,99,60,.45);color:var(--ink-soft)}
.form__done{
  text-align:center;padding:clamp(2rem,4vw,3.4rem) 1rem;
}
.form__done .script{font-size:clamp(2rem,1.5rem + 2vw,3rem);display:inline-block;transform:rotate(-2deg)}
.form__done p{margin-top:1.2rem;color:var(--ink-soft);font-size:.9875rem}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem;flex-shrink:0}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:2rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}
}
@media (max-width:860px){
  /* three columns stop being usable somewhere around here: the two selects and
     the location input start clipping their own placeholders. Two columns, and the
     interest select drops its span — eight fields divide evenly into 2 without it,
     and spanning would strand the email field alone on its row. */
  .form{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:auto}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  /* one column, and the interest select stops spanning — span 2 on a 1-column
     grid would silently widen the whole form */
  .form{grid-template-columns:1fr}
  .field--wide{grid-column:auto}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{justify-content:center}
  .foot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}