/* ============================================================
   BRIEF SENT  (the confirmation after the lead form is submitted)
   Loaded after contact-form.css. Two surfaces, one design:
     1. inline on /contact, swapped in where the form was (JS path)
     2. /brief-sent as a standalone page (no-JS / native POST path)
   Motion reuses the site's own vocabulary: clip-path inset wipes on
   cubic-bezier(.16,1,.3,1), and the preloader's plBarL/plBarC/plBarR
   bar courses so the mark lays itself the same way it does on first load.
   ============================================================ */

.bsent[hidden]{display:none}

.bsent{
  display:grid; justify-items:start; outline:none;
  /* clears the sticky .page-head, which is ~67px on a phone, so scrolling the
     panel to the top does not tuck the mark behind it */
  scroll-margin-top:clamp(92px,12vw,140px);
  --ink-72:rgba(13,13,13,.72);
  --ink-50:rgba(13,13,13,.5);
  --osoft:rgba(255,74,28,.1);
  transition:min-height .82s cubic-bezier(.16,1,.3,1);
}
/* focus lands here programmatically so a screen reader reads the whole panel.
   A hairline rule rather than the default ring: still visible to anyone who
   needs it, quiet enough to read as part of the layout. */
.bsent:focus-visible{outline:1px solid rgba(255,74,28,.38); outline-offset:20px}

.bsent__mark{width:clamp(58px,6vw,84px); height:auto; display:block}
.bsent__kicker{display:block; margin-top:clamp(26px,3.4vw,40px);
  font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange)}
.bsent__h{font-family:var(--font-display); font-weight:400; font-size:clamp(46px,6.4vw,88px);
  line-height:.92; letter-spacing:-.015em; text-transform:lowercase; color:var(--ink); margin:16px 0 0}
.bsent__lead{margin-top:22px; max-width:30ch; color:var(--ink);
  font-size:clamp(19px,1.9vw,25px); line-height:1.34}
.bsent__to{margin-top:16px; max-width:38ch; color:var(--ink-72); font-size:16px; line-height:1.55}
.bsent__to b{color:var(--ink); font-weight:400; border-bottom:1px solid var(--osoft)}
.bsent__to[hidden]{display:none}
.bsent__alt{margin-top:26px; max-width:36ch; color:var(--ink-72); font-size:16px; line-height:1.55}
.bsent__alt a{color:var(--orange); border-bottom:1px solid var(--osoft); transition:border-color .15s}
.bsent__alt a:hover{border-bottom-color:var(--orange)}
.bsent__back{display:inline-flex; align-items:center; gap:10px; margin-top:clamp(30px,4vw,44px);
  font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); padding:4px 0; border-bottom:1px solid rgba(13,13,13,.16);
  transition:color .18s, border-color .18s}
.bsent__back .ar{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.bsent__back:hover{color:var(--orange); border-bottom-color:var(--orange)}
.bsent__back:hover .ar{transform:translateX(5px)}
.bsent__back:focus-visible{outline:2px solid var(--orange); outline-offset:5px}

/* ---- armed / play ----
   armed matches the hero tagline's hidden state (rise + wipe up from the
   baseline) so every line in the panel travels the same direction. */
.bsent--arm{min-height:var(--bsent-from-h,0)}
.bsent.bsent--in{min-height:0}

.bsent--arm .bsent__kicker,
.bsent--arm .bsent__h,
.bsent--arm .bsent__back{
  clip-path:inset(100% 0 0 0); transform:translateY(18px); opacity:0;
  transition:clip-path .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
/* body copy rises and fades without a wipe, because a wipe up the block face
   uncovers the last line of a wrapped paragraph first. This is the treatment
   the contact section already uses on its own fieldsets. */
.bsent--arm .bsent__lead,
.bsent--arm .bsent__to,
.bsent--arm .bsent__alt{
  transform:translateY(22px); opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.bsent--arm .bsent__mark{opacity:0}

.bsent.bsent--in .bsent__kicker,
.bsent.bsent--in .bsent__h,
.bsent.bsent--in .bsent__back{clip-path:inset(0 0 0 0); transform:none; opacity:1}
.bsent.bsent--in .bsent__lead,
.bsent.bsent--in .bsent__to,
.bsent.bsent--in .bsent__alt{transform:none; opacity:1}

.bsent.bsent--in .bsent__kicker{transition-delay:.30s}
.bsent.bsent--in .bsent__h{transition-delay:.38s}
.bsent.bsent--in .bsent__lead{transition-delay:.50s}
.bsent.bsent--in .bsent__to{transition-delay:.58s}
.bsent.bsent--in .bsent__alt{transition-delay:.66s}
.bsent.bsent--in .bsent__back{transition-delay:.74s}

/* the mark lays its three courses exactly as the preloader does:
   bottom bar from the left, middle from the centre out, top from the right. */
.bsent.bsent--in .bsent__mark{opacity:1; animation:bsentMarkLift .9s cubic-bezier(.16,1,.3,1) both}
.bsent.bsent--in .bsent__mark path:nth-of-type(1){animation:plBarR .7s cubic-bezier(.16,1,.3,1) .26s both}
.bsent.bsent--in .bsent__mark path:nth-of-type(2){animation:plBarC .7s cubic-bezier(.16,1,.3,1) .13s both}
.bsent.bsent--in .bsent__mark path:nth-of-type(3){animation:plBarL .7s cubic-bezier(.16,1,.3,1) 0s both}
@keyframes bsentMarkLift{from{transform:translateY(12px)}to{transform:none}}

/* ---- standalone page (/brief-sent) ----
   a fresh document has no previous state to transition from, so the same
   choreography runs as keyframes instead. Identical timings either way. */
.contact--sent{padding:clamp(96px,15vw,190px) 0 clamp(120px,17vw,220px)}
.bsent--standalone{max-width:62ch}
/* no neighbouring column here, so the type gets the room the contact page's
   own h1 has rather than staying at form-column width */
.bsent--standalone .bsent__h{font-size:clamp(52px,8vw,116px)}
.bsent--standalone .bsent__lead{max-width:26ch; font-size:clamp(21px,2.4vw,30px)}
.bsent--standalone .bsent__mark{width:clamp(64px,7vw,104px)}
@keyframes bsentWipe{
  from{clip-path:inset(100% 0 0 0); transform:translateY(18px); opacity:0}
  to{clip-path:inset(0 0 0 0); transform:none; opacity:1}
}
@keyframes bsentRise{
  from{transform:translateY(22px); opacity:0}
  to{transform:none; opacity:1}
}
.bsent--load .bsent__kicker{animation:bsentWipe .7s cubic-bezier(.16,1,.3,1) .30s both}
.bsent--load .bsent__h{animation:bsentWipe .7s cubic-bezier(.16,1,.3,1) .38s both}
.bsent--load .bsent__lead{animation:bsentRise .7s cubic-bezier(.16,1,.3,1) .50s both}
.bsent--load .bsent__alt{animation:bsentRise .7s cubic-bezier(.16,1,.3,1) .66s both}
.bsent--load .bsent__back{animation:bsentWipe .7s cubic-bezier(.16,1,.3,1) .74s both}

/* ---- form exit: accelerates away, the one place the site ramps up ---- */
.lead-form{transition:opacity .3s cubic-bezier(.5,0,.75,0), transform .3s cubic-bezier(.5,0,.75,0), clip-path .3s cubic-bezier(.5,0,.75,0)}
.lead-form.is-out{opacity:0; transform:translateY(-10px); clip-path:inset(0 0 100% 0); pointer-events:none}

/* ---- pending + error states on the send row ---- */
.contact .send__btn[disabled]{cursor:progress; background:var(--ink); color:rgba(244,241,236,.6)}
.contact .send__btn[disabled] .ar{opacity:0}
.contact .send__btn[disabled]:hover{background:var(--ink)}

/* the dithered meter is the hero pixel loader's, reused so "working" looks
   the same everywhere on the site */
.contact .send__meter{position:relative; display:block; width:104px; height:5px; margin-top:20px;
  background:repeating-linear-gradient(90deg,rgba(13,13,13,.18) 0 5px,transparent 5px 7px)}
.contact .send__meter[hidden]{display:none}
.contact .send__meter i{position:absolute; inset:0; display:block;
  background:repeating-linear-gradient(90deg,var(--orange) 0 5px,transparent 5px 7px);
  background-size:28px 100%; animation:bsentMarch .9s linear infinite}
@keyframes bsentMarch{from{background-position:0 0}to{background-position:28px 0}}

.contact .send__slow{margin-top:12px; font-family:var(--font-text); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-50)}
.contact .send__slow[hidden]{display:none}

.contact .send__err{margin-top:20px; max-width:40ch; color:var(--err,#c2320f);
  font-size:16px; line-height:1.55}
.contact .send__err[hidden]{display:none}
.contact .send__err a{color:inherit; border-bottom:1px solid currentColor}

/* validation: only speaks up once a send has been attempted */
.contact{--err:#c2320f}
.contact .lead-form.is-checked .pitch:invalid,
.contact .lead-form.is-checked .field input:invalid{border-bottom-color:var(--err)}
.contact [aria-invalid="true"]{border-bottom-color:var(--err)}

.bsent-vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

@media (max-width:900px){
  .bsent{justify-items:start}
}

@media (prefers-reduced-motion:reduce){
  .bsent,
  .bsent--arm{min-height:0; transition:none}
  .bsent--arm .bsent__kicker,
  .bsent--arm .bsent__h,
  .bsent--arm .bsent__lead,
  .bsent--arm .bsent__to,
  .bsent--arm .bsent__alt,
  .bsent--arm .bsent__back{clip-path:none; transform:none; opacity:1; transition:none}
  .bsent--arm .bsent__mark{opacity:1}
  /* the :nth-of-type selectors above have to be matched exactly here, not
     shortened to `path`, or the bar animations outrank this and the mark stays
     clipped away to nothing */
  .bsent.bsent--in .bsent__mark{animation:none; transform:none}
  .bsent.bsent--in .bsent__mark path:nth-of-type(1),
  .bsent.bsent--in .bsent__mark path:nth-of-type(2),
  .bsent.bsent--in .bsent__mark path:nth-of-type(3){animation:none; clip-path:none}
  .bsent--load .bsent__kicker,
  .bsent--load .bsent__h,
  .bsent--load .bsent__lead,
  .bsent--load .bsent__alt,
  .bsent--load .bsent__back{animation:none; clip-path:none; transform:none; opacity:1}
  .lead-form{transition:none}
  .lead-form.is-out{opacity:1; transform:none; clip-path:none}
  .contact .send__meter i{animation:none}
  .bsent__back .ar{transition:none}
}