/* ==========================================================================
   PAGES: CONTACT (contact.html, body.page-contact) and CAREERS (careers.html,
   body.page-careers), 2026-09-16, built to Mia's 3 mocks:
     ChatGPT Image Sep 16 2026 07_33_22 AM  - contact, dark copy left, paper form right
     ChatGPT Image Sep 16 2026 08_05_48 AM  - careers hero, art right, Introduce yourself
     ChatGPT Image Sep 16 2026 07_43_27 AM  - Introduce yourself modal over the careers hero
   Both pages are ONE screen. The form kit (.f*) is shared by the contact card and the careers
   modal, so the two light papers are one set of rules, not two.
   Colours, buttons and the accent gradient are the page-aff / page-plat ones, unchanged.
   ========================================================================= */

/* ---------- shared shell ---------- */
body.page-contact, body.page-careers{ background:#05010F; color:#F2EFF6; }
body.page-contact .aacc, body.page-careers .aacc{
  background:linear-gradient(96deg,#D9BFFF 0%, #B98CFF 50%, #9A6BF5 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.page-contact .cpill, body.page-careers .cpill{
  display:inline-block; margin:0 0 20px; padding:9px 18px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:#E4D8FF; background:#1A0F3D; border:1px solid #3A2A7A;
}
body.page-contact main h1, body.page-careers main h1{
  margin:0; font-size:clamp(46px,5.4vw,92px); line-height:1.0; letter-spacing:-.025em;
}
body.page-contact .clede, body.page-careers .clede{
  margin:20px 0 0; max-width:34ch; font-size:clamp(17px,1.35vw,22px); line-height:1.42; color:rgba(242,239,246,.86);
}

/* ---------- the form kit, shared by both papers ---------- */
.fpaper{
  box-sizing:border-box; background:#F4F2FA; color:#150C2E; border-radius:clamp(16px,1.6vw,24px);
  padding:clamp(22px,2.1vw,36px); box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.fpaper h2{ margin:0 0 clamp(16px,1.6vw,24px); font-size:clamp(30px,2.9vw,46px); line-height:1.05; letter-spacing:-.025em; color:#150C2E; font-weight:600; }
.fpaper .fsub{ margin:-10px 0 clamp(16px,1.6vw,24px); font-size:16px; line-height:1.45; color:#4A4066; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px clamp(14px,1.4vw,22px); }
.ffield{ display:flex; flex-direction:column; gap:7px; }
.ffield--wide{ grid-column:1 / -1; }
.flabel{ font-size:14px; font-weight:500; color:#241A44; }
.flabel .freq{ color:#6B3DEC; }
.flabel .fopt{ color:#6E6690; font-weight:400; }
.finput, .ftext, .fselect{
  all:unset; box-sizing:border-box; width:100%; padding:0 14px; height:46px; border-radius:10px;
  font-size:15px; font-family:inherit; color:#150C2E; background:#FFFFFF; border:1px solid #DCD7EC;
}
.ftext{ height:auto; min-height:118px; padding:12px 14px; line-height:1.45; resize:vertical; }
.finput::placeholder, .ftext::placeholder{ color:#9B93B5; }
.finput:focus-visible, .ftext:focus-visible, .fselect:focus-visible{ outline:2px solid #8B54F7; outline-offset:1px; }
.fselectwrap{ position:relative; }
.fselect{ cursor:pointer; padding-right:40px; appearance:none; }
.fselectwrap::after{
  content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:1.8px solid #4A4066; border-bottom:1.8px solid #4A4066; transform:rotate(45deg); pointer-events:none;
}
.fhint{ margin:2px 0 -2px; font-size:13px; color:#6E6690; }
.fchips{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.fchip{ position:relative; }
.fchip input{ position:absolute; opacity:0; width:0; height:0; }
.fchip span{
  display:inline-block; cursor:pointer; padding:9px 18px; border-radius:999px; font-size:14px;
  color:#3B3159; background:#FFFFFF; border:1px solid #DCD7EC; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.fchip span:hover{ border-color:#B7A6F2; }
.fchip input:checked + span{ background:#EEE7FF; border-color:#8B54F7; color:#3B1E9A; }
.fchip input:focus-visible + span{ outline:2px solid #8B54F7; outline-offset:2px; }
.fdrop{
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:74px; padding:14px;
  border:1.5px dashed #C9C1E4; border-radius:12px; background:#FFFFFF; font-size:15px; color:#4A4066; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.fdrop:hover, .fdrop.is-over{ border-color:#8B54F7; background:#F7F3FF; }
.fdrop u{ color:#5130EC; }
.fdrop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; }
.fnote{ margin:14px 0 0; font-size:13px; line-height:1.5; color:#6E6690; }
.fnote a{ color:#5130EC; }
.fsend{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:56px; margin-top:16px; border-radius:12px; cursor:pointer;
  font-size:16px; font-weight:500; color:#fff; background:linear-gradient(112deg,#5130EC 0%,#6B3DEC 55%,#8747ED 100%);
  box-shadow:0 16px 34px -16px rgba(110,60,240,.9); transition:filter .2s ease, transform .18s ease;
}
.fsend:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.fsend:disabled{ opacity:.6; cursor:default; transform:none; }
.fsend svg{ width:18px; height:18px; }
.freqnote{ margin:12px 0 0; font-size:13px; color:#6E6690; }
.fok{ margin:12px 0 0; font-size:15px; color:#1E7A4B; }
.fsr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ==========================================================================
   CONTACT
   ========================================================================= */
body.page-contact .chero{ position:relative; isolation:isolate; overflow:hidden; min-height:100svh; display:flex; align-items:center; padding:calc(64px + 20px) 0 40px; }
body.page-contact .chero__art{ position:absolute; inset:0; z-index:-2; }
body.page-contact .chero__art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:0% 100%;
  transform:scaleX(-1); animation:cSettle 1.8s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes cSettle{ from{ transform:scaleX(-1) scale(1.06); opacity:.35; } to{ transform:scaleX(-1); opacity:1; } }
body.page-contact .chero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,1,15,.55) 0%, rgba(5,1,15,.2) 34%, rgba(5,1,15,.65) 58%, rgba(5,1,15,.86) 100%);
}
body.page-contact .chero__in{
  width:100%; max-width:1400px; margin-inline:auto; padding-inline:clamp(20px,4vw,56px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,660px); gap:clamp(28px,5vw,80px); align-items:center;
}
body.page-contact .clinks{ list-style:none; margin:clamp(28px,3.4vw,48px) 0 0; padding:0; max-width:520px; }
body.page-contact .clinks li + li{ border-top:1px solid rgba(255,255,255,.16); }
body.page-contact .clinks li{ padding:18px 0; }
body.page-contact .clink{ display:flex; align-items:center; gap:18px; text-decoration:none; color:inherit; }
body.page-contact .clink__ic{
  flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.05); transition:border-color .2s ease, background .2s ease;
}
body.page-contact .clink:hover .clink__ic{ border-color:#B98CFF; background:rgba(139,84,247,.18); }
body.page-contact .clink__ic svg{ width:22px; height:22px; }
body.page-contact .clink__k{ margin:0; font-size:14px; color:rgba(242,239,246,.72); }
body.page-contact .clink__v{ margin:3px 0 0; font-size:clamp(17px,1.35vw,21px); color:#F2EFF6; display:flex; align-items:center; gap:8px; }
body.page-contact .clink__v svg{ width:13px; height:13px; opacity:.75; }
body.page-contact .cpaper{ max-height:calc(100svh - 64px - 60px); overflow:auto; }

@media (max-width:1000px){
  body.page-contact .chero{ min-height:0; padding-top:calc(64px + 32px); }
  body.page-contact .chero__in{ grid-template-columns:1fr; gap:36px; }
  body.page-contact .chero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.95) 0%, rgba(5,1,15,.7) 45%, rgba(5,1,15,.55) 100%); }
  body.page-contact .cpaper{ max-height:none; }
}
@media (max-width:620px){
  .fgrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ body.page-contact .chero__art img{ animation:none; } }

/* ==========================================================================
   CAREERS
   ========================================================================= */
body.page-careers .khero{ position:relative; isolation:isolate; overflow:hidden; min-height:100svh; display:flex; align-items:center; padding:64px 0 40px; }
body.page-careers .khero__art{ position:absolute; inset:0; z-index:-2; }
body.page-careers .khero__art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:100% 100%;
  animation:kSettle 1.8s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes kSettle{ from{ transform:translate3d(3%,2%,0) scale(1.05); opacity:0; } to{ transform:none; opacity:1; } }
body.page-careers .khero__veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(5,1,15,.72) 0%, rgba(5,1,15,.3) 32%, rgba(5,1,15,0) 52%); }
body.page-careers .khero__in{ position:relative; width:100%; max-width:none; padding-inline:clamp(20px,5.8vw,110px); }
body.page-careers .kcta{
  display:inline-flex; align-items:center; gap:12px; margin-top:clamp(26px,3vw,42px); padding:16px 30px; border-radius:12px;
  font-size:16px; font-weight:500; color:#fff; text-decoration:none; cursor:pointer; border:0;
  background:linear-gradient(112deg,#5130EC 0%,#6B3DEC 55%,#8747ED 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 36px -16px rgba(110,60,240,.9);
  transition:filter .2s ease, transform .18s ease;
}
body.page-careers .kcta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
body.page-careers .kcta svg{ width:18px; height:18px; }

/* modal */
.kmodal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:clamp(16px,4vh,48px) 16px; }
.kmodal[hidden]{ display:none; }
.kmodal__back{ position:absolute; inset:0; background:rgba(5,1,15,.66); backdrop-filter:blur(6px); border:0; padding:0; cursor:pointer; }
.kmodal .fpaper{
  position:relative; width:min(680px,100%); max-height:min(880px, calc(100vh - 64px)); overflow:auto;
  animation:kPop .24s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes kPop{ from{ transform:translateY(14px) scale(.985); opacity:0; } to{ transform:none; opacity:1; } }
.kclose{
  all:unset; position:absolute; top:clamp(16px,1.6vw,24px); right:clamp(16px,1.6vw,24px); cursor:pointer;
  width:36px; height:36px; display:grid; place-items:center; border-radius:999px; color:#150C2E;
}
.kclose:hover{ background:rgba(21,12,46,.08); }
.kclose:focus-visible{ outline:2px solid #8B54F7; outline-offset:2px; }
.kclose svg{ width:20px; height:20px; }

@media (max-width:860px){
  body.page-careers .khero{ min-height:0; padding-top:calc(64px + 40px); padding-bottom:56px; }
  body.page-careers .khero__art img{ object-position:70% 100%; }
  body.page-careers .khero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.92) 0%, rgba(5,1,15,.55) 55%, rgba(5,1,15,.35) 100%); }
}
@media (prefers-reduced-motion:reduce){
  body.page-careers .khero__art img{ animation:none; }
  .kmodal .fpaper{ animation:none; }
}

/* Mia 2026-09-16 09:30: the contact section must fit the screen with NO scrolling, at 1440x900
   and at 1366x768. Everything inside the card is therefore sized against the viewport height, and
   the hero's own padding shrinks with it. The CONTACT pill is gone at her request. */
@media (min-width:1001px){
  /* the header sits IN FLOW, so 100svh here made the section one header taller than the screen and
     the page scrolled even with room to spare. The screen minus the header is the real height. */
  body.page-contact .chero{ min-height:calc(100svh - 64px); padding-block:1.6vh; }
  body.page-contact .chero__in{ align-items:center; gap:clamp(24px,4vw,64px); }
  body.page-contact main h1{ font-size:min(clamp(46px,5vw,84px), 10vh); }
  body.page-contact .clede{ margin-top:min(20px,2.2vh); font-size:min(clamp(17px,1.35vw,22px), 2.6vh); }
  body.page-contact .clinks{ margin-top:min(44px,4.4vh); }
  body.page-contact .clinks li{ padding-block:min(18px,2vh); }
  body.page-contact .clink__ic{ width:min(52px,5.6vh); height:min(52px,5.6vh); }

  body.page-contact .cpaper{ max-height:none; overflow:visible; padding:min(28px,2.2vh) clamp(20px,1.8vw,30px); }
  body.page-contact .cpaper h2{ font-size:min(clamp(28px,2.6vw,40px), 4.2vh); margin-bottom:min(18px,1.8vh); }
  body.page-contact .cpaper .fgrid{ gap:min(12px,1vh) clamp(14px,1.4vw,22px); }
  body.page-contact .cpaper .ffield{ gap:min(6px,.6vh); }
  body.page-contact .cpaper .finput, body.page-contact .cpaper .fselect{ height:min(46px,5.2vh); }
  body.page-contact .cpaper .ftext{ min-height:min(100px,8.4vh); }
  body.page-contact .cpaper .fchip span{ padding:min(8px,.9vh) 15px; font-size:13.5px; }
  body.page-contact .cpaper .fchips{ gap:8px; }
  body.page-contact .cpaper .fsend{ height:min(54px,5vh); margin-top:min(14px,1.3vh); }
  body.page-contact .cpaper .fnote{ margin-top:min(12px,1.2vh); }
  body.page-contact .cpaper .freqnote{ margin-top:min(10px,1vh); }
}

/* Mia 2026-09-16 09:30: the Career Hub section was far too tall. Its height now comes from the
   content, so the footer already starts under it instead of a screen of empty art. */
@media (min-width:861px){
  body.page-careers .khero{ min-height:0; padding-block:9vh; }
  body.page-careers main h1{ font-size:min(clamp(46px,5.4vw,92px), 11vh); }
}

/* the topic select: with all:unset a select does not centre its own text, so the value sat low
   against the box. Mia 2026-09-16 09:31. */
.fselect{ display:block; line-height:1.2; align-content:center; }

/* phones, 2026-09-16: on a narrow crop the mirrored plate fell off the left edge and the careers
   hero collapsed to a band, so both heroes keep a real height and the art reads behind the copy. */
@media (max-width:1000px){
  body.page-contact .chero__art img{ object-position:50% 100%; }
  body.page-contact .chero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.92) 0%, rgba(5,1,15,.62) 52%, rgba(5,1,15,.38) 100%); }
}
@media (max-width:860px){
  body.page-careers .khero{ min-height:72svh; }
  body.page-careers .khero__art img{ object-position:78% 100%; }
  body.page-careers .khero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.88) 0%, rgba(5,1,15,.5) 55%, rgba(5,1,15,.3) 100%); }
}

/* modal must sit above the footer and any pinned section */
.kmodal{ z-index:9999; }
.foot{ position:relative; z-index:1; }
body.page-careers .foot, body.page-contact .foot{ z-index:1; }