/* ============================================================================
   XINNACE v3 — page-contact.css
   The "contact" artifact's own stylesheet, verbatim, less the 36 chrome rules
   that base.css now owns for every page, and less --maxw / --gutter / --head-h,
   which are shared so the bar and the column do not change between pages.
   Loads AFTER base.css, so everything here wins. Regenerate, do not edit.
   ========================================================================== */


:root{
  --ground:#07111F;
  --ground-2:#0B182A;
  --surface:#101E31;
  --surface-2:#152640;
  --line:#223651;
  --line-2:#39516D;
  --ink:#F5F8FC;
  --ink-soft:#C9D4E2;
  --ink-faint:#AFBDD0;
  --brand:#12B5AB;
  --brand-2:#0FA39A;
  --on-brand:#041816;
  --eyebrow:#46D0C7;
  --manage:#2C8FD6;
  --empower:#1FAE6B;
  --engage:#F59331;
  --manage-text:#7FC0EF;
  --empower-text:#71D19E;
  --engage-text:#FFB66B;
  --manage-wash:rgba(44,143,214,.14);
  --empower-wash:rgba(31,174,107,.14);
  --engage-wash:rgba(245,147,49,.14);
  --good:#4ADE9B;
  --shadow-2:0 18px 44px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.light{
  --ground:#FFFFFF;
  --ground-2:#ECF2F8;
  --surface:#FFFFFF;
  --surface-2:#F2F6FA;
  --line:#DCE6EF;
  --line-2:#C3D2E0;
  --ink:#172235;
  --ink-soft:rgba(23,34,53,.72);
  --ink-faint:#617086;
  --eyebrow:#0E8F87;
  --brand:#1C8A83;
  --brand-2:#146D67;
  --on-brand:#FFFFFF;
  --manage-text:#1F6FA8;
  --empower-text:#157A4C;
  --engage-text:#AF620C;
  --manage-wash:rgba(44,143,214,.10);
  --empower-wash:rgba(31,174,107,.10);
  --engage-wash:rgba(245,147,49,.10);
  --good:#16794A;
  --shadow-2:0 18px 44px rgba(23,34,53,.10),0 4px 12px rgba(23,34,53,.05);
  background:var(--ground);
  color:var(--ink);
}
.light--white{--ground:#FFFFFF;--surface:#FFFFFF;}
.light--grey{--ground:#EFF3F8;--surface:#FFFFFF;--line:#DCE5EE;}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:#07111F;color:#F5F8FC;
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px;}
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance;}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;}
h2{font-size:clamp(27px,3.4vw,42px);line-height:1.12;}
h3{font-size:22px;letter-spacing:-.025em;line-height:1.25;}
h4{font-size:16.5px;letter-spacing:-.015em;}
p{margin:0;}
.eyebrow{
  font-family:var(--f-body);font-stretch:75%;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--line-2);flex:none;}
.lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.62;color:var(--ink-soft);max-width:62ch;}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.rv.is-in{opacity:1;transform:none;}
/* ---------- page hero ---------- */
.phero{position:relative;overflow:hidden;background:#07111F;padding:clamp(52px,6.4vw,86px) 0 clamp(44px,5.4vw,68px);}
/* Same unmatched pair as the homepage: both overrun their viewBox so the
   honeycomb is cut flush by the screen edge. Plain outlines, no lit cell. */
.comb{position:absolute;pointer-events:none;color:#12B5AB;}
.comb--r{right:0;top:-26px;width:min(372px,38vw);}
.comb--l{left:0;bottom:-44px;width:min(280px,29vw);}
/* --- Nexus: separate cells drift in, lock into the lattice, then a few
   shared edges take a teal charge. Honours prefers-reduced-motion. --- */
.comb polygon{transform-box:fill-box;transform-origin:center;
  animation:hexLock 1.05s cubic-bezier(.22,1.06,.36,1) backwards;}
@keyframes hexLock{
  from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rz,0deg)) scale(.84);}
}
.comb__lit{opacity:0;animation:hexCharge 2.6s ease-out .95s forwards;}
@keyframes hexCharge{
  0%{opacity:0;}
  40%{opacity:.85;}
  100%{opacity:.45;}
}
@media (prefers-reduced-motion:reduce){
  .comb polygon{animation:none;}
  .comb__lit{opacity:.42;animation:none;}
}
@media (max-width:760px){
  .comb--r{width:196px;top:-40px;opacity:.6;}
  .comb--l{width:142px;bottom:-58px;opacity:.48;}
}
.phero__in{position:relative;display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
/* module index */
.idx{display:flex;flex-wrap:wrap;gap:8px 9px;padding-top:6px;}
.idx a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink-soft);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.idx a:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-1px);}
.idx i{width:9px;height:8px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}
.idx .i--m{background:var(--manage);}
.idx .i--e{background:var(--empower);}
.idx .i--g{background:var(--engage);}
.idx .i--b{background:#E54B6F;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
/* ---------- generic band ---------- */
.band{padding:clamp(52px,6.2vw,84px) 0;}
.band__head{max-width:820px;display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(26px,3.2vw,40px);}
.tlink{color:var(--brand);font-weight:600;}
/* ---------- lead layout ---------- */
.lead{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,3.8vw,54px);align-items:start;}
@media (max-width:940px){.lead{grid-template-columns:1fr;}}
.lead__aside{display:flex;flex-direction:column;gap:16px;}
.lead__aside p{font-size:16px;color:var(--ink-soft);line-height:1.7;}
.points{display:flex;flex-direction:column;gap:17px;margin-top:6px;}
.point{display:flex;gap:14px;align-items:flex-start;}
.point__ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--brand);}
.point__ico svg{width:18px;height:18px;}
.point h3{font-size:16.5px;letter-spacing:-.02em;}
.point p{font-size:14.6px;color:var(--ink-soft);line-height:1.6;margin-top:3px;}
/* ---------- form card ---------- */
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.8vw,34px);box-shadow:var(--shadow-2);}
.formsec{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line);}
.formsec--last{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.formsec__title{display:flex;align-items:center;gap:11px;font-size:16.5px;letter-spacing:-.02em;margin-bottom:16px;}
.formsec__step{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-family:var(--f-body);font-size:12.5px;font-weight:700;}
.formsec__hint{font-size:14px;color:var(--ink-faint);line-height:1.6;margin-bottom:15px;}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
@media (max-width:620px){.fgrid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field--full{grid-column:1/-1;}
.field label{font-family:var(--f-body);font-stretch:75%;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
.req{color:var(--brand);}
.opt{font-stretch:100%;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:500;color:var(--ink-faint);}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:15.4px;color:var(--ink);
  background:var(--ground);border:1px solid var(--line-2);border-radius:10px;
  padding:11px 13px;width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.field textarea{min-height:112px;resize:vertical;line-height:1.6;}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23617086' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:34px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--empower-wash);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.8;}
.field--error input,.field--error select,.field--error textarea{border-color:#D6455F;}
.ferr{font-size:13px;color:#D6455F;font-weight:600;}
/* ranked call-back windows */
.prefs{display:flex;flex-direction:column;gap:11px;}
.prefs__row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:13px;align-items:center;}
@media (max-width:560px){.prefs__row{grid-template-columns:1fr;gap:6px;}}
.prefs__rank{font-family:var(--f-body);font-stretch:75%;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
/* honeypot — must stay visually gone but not display:none, so bots still fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-foot{margin-top:24px;display:flex;flex-direction:column;gap:14px;}
.fineprint{font-size:13.2px;color:var(--ink-faint);line-height:1.6;}
.formnote{display:flex;gap:11px;align-items:flex-start;background:var(--engage-wash);
  border:1px solid var(--engage);border-radius:12px;padding:14px 16px;font-size:14px;
  color:var(--ink-soft);line-height:1.6;}
.formnote svg{flex:none;width:17px;height:17px;color:var(--engage-text);margin-top:2px;}
/* --brand on the amber note ground is only 3.86:1; --brand-2 clears AA. */
.formnote .tlink{color:var(--brand-2);text-decoration:underline;}
.formnote[hidden]{display:none;}
/* ---------- contact cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px;
  display:flex;flex-direction:column;gap:11px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.card h3{font-size:17.5px;}
.card p{font-size:14.8px;color:var(--ink-soft);line-height:1.6;}
.card .clink{color:var(--brand);font-weight:600;text-decoration:none;}
.card .clink:hover{text-decoration:underline;}
.ico{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface-2);color:var(--brand);}
.ico svg{width:19px;height:19px;}
.card--m .ico{background:var(--manage-wash);color:var(--manage-text);}
.card--e .ico{background:var(--empower-wash);color:var(--empower-text);}
.card--g .ico{background:var(--engage-wash);color:var(--engage-text);}
.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- the sending screen ----------------------------------------- */
/* Covers the FORM CARD, not the viewport. The card is what the person is
   looking at and what must stop accepting presses; a full-screen sheet on a
   phone would also hide the page they were reading a second ago and read as
   an error. position:absolute against .formcard, which is already relative. */
.formcard{position:relative;}
/* display:grid in a class rule BEATS the browser's own [hidden]{display:none},
   so without the line below the hidden overlay still covers the form and eats
   every click on it. Caught by a headless browser refusing to press Send. */
.sending[hidden]{display:none;}
.sending{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;
  padding:24px;border-radius:inherit;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .sending{background:rgba(255,255,255,.93);}
}
/* STICKY, not centred in the card. The form is over a thousand pixels tall on
   a phone and the person pressing Send is at the BOTTOM of it, so a box
   centred on the card would sit off the top of their screen and the page
   would look like it had simply greyed out. Sticky keeps it in view from
   wherever they are. */
.sending__box{position:sticky;top:36vh;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;max-width:30ch;}
.sending__mark{width:56px;height:56px;margin-bottom:8px;overflow:visible;}
/* Two copies of the same hexagon: one faint and whole, one bright and dashed,
   drawing itself round the first. The site's motif doing the waiting, rather
   than a spinner borrowed from somewhere else. */
.sending__track{fill:none;stroke:var(--line-2);stroke-width:2.4;}
.sending__draw{fill:none;stroke:var(--brand);stroke-width:2.8;stroke-linecap:round;
  stroke-dasharray:26 78;stroke-dashoffset:0;animation:sendTrace 1.25s linear infinite;}
@keyframes sendTrace{to{stroke-dashoffset:-104;}}
.sending__t{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);}
.sending__s{font-size:13.5px;line-height:1.45;color:var(--ink-soft);}
/* The button keeps its size so the card does not jump when the label changes. */
.btn--busy{pointer-events:none;opacity:.55;}
/* Reduced motion: the hexagon pulses in place instead of chasing its own
   outline. Something must still move, or there is no sign of life at all. */
@media (prefers-reduced-motion:reduce){
  .sending__draw{animation:sendPulse 1.4s ease-in-out infinite;stroke-dasharray:none;}
  @keyframes sendPulse{0%,100%{opacity:.25;}50%{opacity:1;}}
}