/* ============================================================================
   ENERGIZE — "Start a conversation" conversion form  ·  CP1 SHELL
   REVEAL = "THE CLEARING" (locked 2026-06-26 — Adam's pick from the four-reveal
   comparison harness at _explore/energize-candidates/).
   ----------------------------------------------------------------------------
   The site's conversion CTAs (every a[href="#contact"]: kit.js .nav-cta and
   .foot-cta "Start a conversation", plus the in-page "Start a project" /
   "Extend your team" / "Start a conversation" links) open THIS overlay IN-PAGE.
   NOT a navigation — D14 skips in-page "#" hashes; energize.js preventDefault()s
   too, so the diamond never fires.

   THE CLEARING — restraint / "disciplined enough to disappear": on CTA click the
   site quiets to charcoal, and only the amber thread (the edge rail) and the
   form's words remain — settling in calmly, a held breath rather than a gesture.
     · .energize-bg     — the charcoal field fades in over the page (the quiet).
     · .energize-rail   — the amber edge rail draws in (the thread, at rest).
     · eyebrow/heading/intro — settle in, gently, staggered.
   Two-mode: reduced-motion = the form just appears (no fade, no rail draw).

   FULL-SCREEN TAKEOVER; underlying page scroll-locked while open. Canon:
   charcoal · off-white · amber · Museo. CLS 0 (fixed overlay + scrollbar comp).
   CP1 = SHELL ONLY. Fields/validation/submit land at CP2 in .energize-body.
   ============================================================================ */

.energize{ position:fixed; inset:0; z-index:9500; display:none; }
.energize.is-open{ display:block; }
.energize.is-closing{ opacity:0; transition:opacity .30s ease; }

/* z0 — the charcoal field quiets the page (the clearing) */
.energize-bg{ position:absolute; inset:0; z-index:0; background:#1d1b1e; opacity:0; }
.energize.is-open .energize-bg{ animation:nrg-fill .55s ease forwards; }

/* z1 — the amber edge RAIL (the site's through-line thread, come to rest) */
.energize-rail{ position:absolute; left:max(4vw,1.4rem); top:0; bottom:0; width:2px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--human-amber,#D4A374) 12%, var(--human-amber,#D4A374) 88%, transparent);
  opacity:0; transform:scaleY(.2); transform-origin:50% 42%; }
.energize.is-open .energize-rail{ animation:nrg-rail-in .9s cubic-bezier(.4,0,.2,1) .2s forwards; }

/* z2 — the form, centred; words settle in calmly */
.energize-dialog{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,7vh,5rem) clamp(1.4rem,6vw,3rem); outline:none; }
.energize-reveal{ width:100%; max-width:680px; display:flex; flex-direction:column; gap:1.2rem; }

.energize-eyebrow{ margin:0; opacity:0; color:var(--human-amber,#D4A374);
  font-size:clamp(.72rem,1.1vw,.82rem); font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.energize-head{ margin:.1rem 0 0; opacity:0; color:var(--warm-gray,#E7E4E2);
  font-size:clamp(2.2rem,6vw,3.6rem); font-weight:800; line-height:1.04; letter-spacing:-.02em; }
.energize-intro{ margin:0; opacity:0; max-width:46ch; color:var(--txt-2,#BDB9B4);
  font-weight:300; line-height:1.6; font-size:clamp(1.05rem,1.5vw,1.2rem); }
.energize-body{ margin-top:1.4rem; opacity:0; }   /* CP2 fields live here; settles in with The Clearing */

.energize.is-open .energize-eyebrow{ animation:nrg-settle .70s ease .45s forwards; }
.energize.is-open .energize-head{    animation:nrg-settle .80s ease .58s forwards; }
.energize.is-open .energize-intro{   animation:nrg-settle .80s ease .72s forwards; }
.energize.is-open .energize-body{    animation:nrg-settle .80s ease .88s forwards; }

/* ---- CP2 · the form (lean: name · email · company(optional) · message) ---- */
.energize-form{ display:flex; flex-direction:column; gap:1.05rem; }
.nrg-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:560px){ .nrg-row{ grid-template-columns:1fr; } }
.nrg-field{ display:flex; flex-direction:column; }
.nrg-label{ color:var(--warm-gray,#E7E4E2); font-size:.84rem; font-weight:600; letter-spacing:.01em; margin-bottom:.45rem; }
.nrg-opt{ color:var(--txt-2,#BDB9B4); font-weight:400; font-size:.78rem; text-transform:lowercase; margin-left:.5em; letter-spacing:.02em; }
.nrg-input{ font:inherit; font-size:1rem; color:var(--warm-gray,#E7E4E2); background:rgba(255,255,255,.045);
  border:1px solid rgba(231,228,226,.22); border-radius:2px; padding:.72em .85em; width:100%; transition:border-color .16s ease, box-shadow .16s ease; }
.nrg-input::placeholder{ color:var(--txt-2,#BDB9B4); opacity:.7; }
textarea.nrg-input{ resize:vertical; min-height:6.5rem; line-height:1.5; }
.nrg-input:hover{ border-color:rgba(231,228,226,.4); }
.nrg-input:focus{ outline:none; border-color:var(--human-amber,#D4A374); box-shadow:0 0 0 3px rgba(212,163,116,.28); }
.nrg-input:focus-visible{ outline:none; }

/* AA-SAFE ERROR STATE — off-white text + a non-colour icon cue; the canon red
   appears ONLY as a thin decorative left border accent, never as the sole signal
   and never as error text (red-on-charcoal is 2.99:1 → fails AA). WCAG 1.4.1 met:
   icon + border + text, not colour alone. Error slot is reserved → no CLS jump. */
.nrg-field.is-invalid .nrg-input{ border-color:rgba(231,228,226,.5); border-left:3px solid var(--brand-red,#ED202D); padding-left:calc(.85em - 2px); }
.nrg-field.is-invalid .nrg-input:focus{ box-shadow:0 0 0 3px rgba(212,163,116,.28); }
.nrg-err{ display:flex; align-items:center; gap:.4em; min-height:1.2em; margin-top:.42rem;
  color:var(--warm-gray,#E7E4E2); font-size:.8rem; font-weight:600; opacity:0; }
.nrg-field.is-invalid .nrg-err{ opacity:1; }
.nrg-err .nrg-ico{ flex:none; width:1.05em; height:1.05em; }
.nrg-err .nrg-ico path{ stroke:var(--warm-gray,#E7E4E2); }

/* label size 19px (>18.66px bold) → qualifies as WCAG large text, so white #fff on
   canon red #ED202D meets the 3:1 large-text AA bar (4.33:1). AA fix — do NOT change
   the canon red or the white label; type size is the only canon-preserving lever. */
.nrg-submit{ font:inherit; font-weight:700; font-size:19px; color:#fff; background:var(--brand-red,#ED202D);
  border:2px solid var(--brand-red,#ED202D); border-radius:2px; padding:.92em 1.6em; margin-top:.4rem; cursor:pointer;
  align-self:flex-start; transition:transform .18s ease, opacity .18s ease; }
.nrg-submit:hover{ transform:translateY(-2px); }
.nrg-submit:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.nrg-submit[disabled]{ opacity:.6; cursor:default; transform:none; }

/* honeypot (CP2 Unit 2) — visually + AT-hidden, off-screen */
.nrg-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* aria-live status region (validation summary · submit-failure message) */
.nrg-status{ margin:0; min-height:1.2em; color:var(--warm-gray,#E7E4E2); font-size:.86rem; font-weight:600; }

/* ---- CP2 Unit 2 · success confirmation (The Clearing resolves to this) ---- */
.energize-confirm{ outline:none; }
.energize.is-sent .energize-eyebrow,
.energize.is-sent .energize-head,
.energize.is-sent .energize-intro,
.energize.is-sent .energize-body{ display:none; }
.energize.is-sent .energize-confirm{ animation:nrg-settle .6s ease forwards; }
.energize-confirm-mark{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  border:2px solid var(--human-amber,#D4A374); border-radius:50%; }
.energize-confirm-mark svg{ width:24px; height:24px; }
.energize-confirm-mark svg path{ stroke:var(--human-amber,#D4A374); }
.energize-confirm-msg{ margin:1.25rem 0 0; color:var(--warm-gray,#E7E4E2);
  font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:800; line-height:1.1; letter-spacing:-.014em; max-width:24ch; }

/* z3 — close affordance : always available */
.energize-close{ position:absolute; top:clamp(1rem,3vh,1.6rem); right:clamp(1rem,3vw,1.6rem); z-index:3;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center; padding:0; margin:0;
  background:transparent; border:1px solid rgba(231,228,226,.24); border-radius:50%;
  color:var(--warm-gray,#E7E4E2); font-size:1.1rem; line-height:1; cursor:pointer;
  transition:border-color .18s ease, background .18s ease; }
.energize-close:hover{ border-color:rgba(212,163,116,.65); background:rgba(212,163,116,.10); }
.energize-close:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* page scroll-lock while open (scrollbar-width compensated → no CLS) */
html.nrg-lock{ overflow:hidden !important; }
html.nrg-lock body{ padding-right:var(--nrg-sbw,0px); }

@keyframes nrg-fill{ from{ opacity:0; } to{ opacity:1; } }
@keyframes nrg-settle{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes nrg-rail-in{ from{ opacity:0; transform:scaleY(.2); } to{ opacity:1; transform:scaleY(1); } }

/* ====== REDUCED MOTION — the form just appears (no clearing animation) ====== */
@media (prefers-reduced-motion:reduce){
  .energize-bg{ opacity:1 !important; animation:none !important; }
  .energize-rail{ display:none !important; }
  .energize-eyebrow, .energize-head, .energize-intro, .energize-body, .energize-confirm{ opacity:1 !important; animation:none !important; transform:none !important; }
  .energize.is-closing{ transition:none; }
}