/* ============================================================
   SPECTRA ONE - CONTACT

   One screen. A contact page is a form with a reason to fill it
   in, so the page is exactly that: the reason on the left, the
   form on the right, and nothing underneath. No process
   explainer, no FAQ, no second way to reach us competing with
   the form.

   Every CTA on the site points here. The "What is this about"
   field is preset from the link that got you here (#demo,
   #enquiry, #help, #partner), so one page serves every button
   without the visitor noticing any machinery.

   Built from the About page's parts: same tokens, same nav pill,
   same button shapes, same dark footer.
   ============================================================ */

:root{
  --paper:#F3F4F6;
  --card:#FFFFFF;
  --ink:#07111F;
  --ink-2:#39434F;
  --muted:#5C6672;
  --line:rgba(10,20,40,.09);
  --line-2:rgba(10,20,40,.055);

  --blue:#1266FF;
  --blue-ink:#0A4AC4;
  --navy-deep:#060D1B;

  --ok:#0B7A4C;
  --bad:#B4231B;
  --warn:#8A5A00; --warn-bg:#FFF6E0; --warn-line:#E8C97A;

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(10,20,40,.04),0 10px 24px -14px rgba(10,20,40,.16);
  --sh-2:0 2px 6px -2px rgba(10,20,40,.05),0 26px 54px -26px rgba(10,20,40,.26);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.4,0,.2,1);

  --shell:1140px;
  --gut:clamp(18px,3.6vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
/* The sideways clip goes on html, not body. On body it forces
   overflow-y to compute to auto, which makes body a scrolling box
   and silently breaks every programmatic scroll on the page. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;
}
/* ---- ambient ground ----
   A flat grey makes the form card look like it was pasted on. Two
   very low-alpha washes, one cool under the form and one warm at
   the top left, give the page somewhere for the card to float.
   Fixed and pointer-events:none, so it never repaints on scroll
   and never intercepts a click. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 48% at 78% 18%,rgba(18,102,255,.10),transparent 62%),
    radial-gradient(48% 42% at 12% 6%,rgba(120,140,190,.09),transparent 60%),
    radial-gradient(70% 50% at 50% 100%,rgba(10,20,40,.05),transparent 70%);
}
body > *{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3{
  font-family:var(--display);color:var(--ink);
  margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;
}
h1{font-size:clamp(31px,3.9vw,46px);letter-spacing:-.035em}
h2{font-size:clamp(19px,1.8vw,23px);letter-spacing:-.026em}

p{margin:0;text-wrap:pretty}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:99;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none;transition:top .18s ease}
.skip:focus{top:10px}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);
  font-size:12px;font-weight:550;color:var(--ink);box-shadow:var(--sh-1);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:12px 20px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:550;letter-spacing:-.01em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;touch-action:manipulation;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.btn--go{background:var(--ink);color:#fff;box-shadow:0 10px 24px -14px rgba(7,17,31,.9)}
.btn--go:hover{transform:translateY(-1.5px);box-shadow:0 16px 30px -14px rgba(7,17,31,.75)}
.btn--go:active{transform:translateY(1px) scale(.985)}
.btn__x{
  width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:rgba(255,255,255,.16);font-size:11px;
  transition:transform .38s var(--ease);
}
.btn:hover .btn__x{transform:translate(2px,-1px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;padding-top:14px;padding-bottom:6px}
.nav__in{
  max-width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:22px;
  padding:9px 9px 9px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:box-shadow .35s var(--ease-io),background-color .35s var(--ease-io);
}
.nav.is-stuck .nav__in{
  background:rgba(255,255,255,.93);
  box-shadow:0 1px 2px rgba(10,20,40,.05),0 18px 38px -22px rgba(10,20,40,.38);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.035em;color:var(--ink)}
.brand__m{width:24px;height:24px;flex:none;
  background:url("../img/logo-mark.webp") center/contain no-repeat}
.nav__links{display:flex;gap:4px;margin-inline:auto}
.nav__links a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);
  padding:8px 13px;border-radius:var(--r-pill);
  transition:color .2s var(--ease-io),background-color .2s var(--ease-io);
}
.nav__links a:hover{color:var(--ink);background:rgba(10,20,40,.045)}
.nav__links a[aria-current="page"]{color:var(--ink);background:rgba(10,20,40,.06)}
.nav__end{display:flex;align-items:center;gap:8px}
.nav__end .signin{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);padding:8px 10px}
.nav__end .signin:hover{color:var(--ink)}
.burger{display:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:10px 12px;cursor:pointer}
.burger span{display:block;width:15px;height:1.6px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:4px}
@media (max-width:980px){
  .nav__links,.nav__end .signin{display:none}
  .burger{display:block}
  /* the pill has to hold brand and burger on one line at 375px */
  .nav__in{gap:10px;padding:8px 8px 8px 14px}
  .brand{white-space:nowrap;font-size:15.5px}
  .brand__m{width:22px;height:22px}
  .nav__end{margin-left:auto}
}
.drawer{display:none;max-width:var(--shell);margin:8px auto 0;padding:10px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.drawer.is-open{display:block}
.drawer a{display:block;padding:13px 0;text-decoration:none;color:var(--ink);
  font-weight:500;border-bottom:1px solid var(--line-2)}
.drawer a:last-child{border-bottom:0}

/* ---------- icons ----------
   Phosphor's webfont with each codepoint written into the markup
   as an entity, because the CDN's own class rules render tofu. */
@font-face{
  font-family:"PhosphorLight";
  src:url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/light/Phosphor-Light.woff2") format("woff2");
  font-weight:normal;font-style:normal;font-display:block;
}
.icn{
  font-family:"PhosphorLight";font-style:normal;font-weight:400;
  font-variant:normal;font-feature-settings:normal;font-variant-ligatures:none;
  text-transform:none;line-height:1;letter-spacing:0;
  display:inline-block;-webkit-font-smoothing:antialiased;
}

/* ============================================================
   THE ONE SCREEN
   ============================================================ */
main{flex:1 0 auto}
/* The copy column is deliberately shorter than the form. Aligned to
   the top it reads as a column that ran out of things to say, with a
   hole under it; centred against the form the same whitespace reads
   as composition. */
.page{
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:clamp(30px,4.5vw,76px);align-items:center;
  padding-block:clamp(34px,4.4vw,72px) clamp(48px,5.5vw,92px);
}
.page h1{margin-top:16px;max-width:15ch}
.page__sub{margin-top:18px;font-size:clamp(15px,1.15vw,17px);line-height:1.6;
  color:var(--muted);max-width:42ch}

/* the three reasons. Plain rows, no cards: they are a short list,
   and three boxes would make them look like a feature grid. */
.pts{margin:clamp(26px,3vw,36px) 0 0;padding:0;list-style:none;display:grid;gap:14px}
.pts li{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;
  line-height:1.5;color:var(--ink-2)}
.pts i{font-size:19px;color:var(--ok);flex:none;margin-top:1px}

.direct{
  margin-top:clamp(26px,3vw,34px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line-2);font-size:13.6px;color:var(--muted);
}
.direct a{color:var(--blue-ink);text-decoration:none;font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .34s var(--ease)}
.direct a:hover{background-size:100% 1px}

/* ============================================================
   FORM
   ============================================================ */
/* The anchors carry the sticky nav's height as scroll margin so an
   arrival from another page lands with the card's heading clear of
   the bar. Real anchors, so the browser does the scrolling and it
   works with JavaScript off. */
.anchor{display:block;height:0;scroll-margin-top:96px}
@media (max-width:980px){.anchor{scroll-margin-top:84px}}

/* ---- the card, as two nested enclosures ----
   A single white rectangle on a grey page reads as a box. A pale
   translucent tray holding a white plate reads as a made object:
   the tray catches the ambient wash behind it, the plate sits in
   it, and the 8px gap between them is what gives the edge its
   depth. The inner radius is the outer radius minus that gap, so
   the two curves stay concentric instead of fighting. */
.formshell{
  --tray:8px;
  padding:var(--tray);
  border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(10,20,40,.04),
    0 30px 70px -32px rgba(16,34,72,.34);
}
.formcard{
  background:var(--card);
  border:1px solid rgba(10,20,40,.07);
  border-radius:calc(30px - var(--tray));
  padding:clamp(22px,2.4vw,32px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(10,20,40,.03);
}
.formcard h2{font-size:clamp(21px,2vw,26px);margin-bottom:6px}
.formcard__p{font-size:13.4px;line-height:1.5;color:var(--muted);
  padding-bottom:clamp(18px,2vw,24px);margin-bottom:clamp(20px,2.2vw,26px);
  border-bottom:1px solid var(--line-2)}

/* DEV NOTICE - delete this rule and the block together */
.notice{
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-sm);
  padding:10px 13px;margin-bottom:20px;color:#6B4600;font-size:12.6px;line-height:1.5;
}
.fill{
  background:var(--warn-bg);border-bottom:2px solid var(--warn-line);
  color:var(--warn);font-family:var(--mono);font-size:.88em;padding:1px 6px;
  border-radius:4px;font-weight:500;white-space:nowrap;
}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.field{margin-bottom:18px;min-width:0}
.field--wide{grid-column:1 / -1}
.field label{display:block;font-size:12.6px;font-weight:600;color:var(--ink-2);
  letter-spacing:.005em;margin-bottom:7px}
.field label .opt{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:4px}
.req{color:var(--bad);font-weight:600}
/* 16px is not taste: iOS Safari zooms the page in on focus for
   anything smaller, and you pinch back out between every field. */
/* Near-white with a real hairline, not grey-on-white: a washed grey
   fill makes an empty field look disabled. The inset line along the
   top edge is what stops it reading as a flat swatch.
   16px is not taste either - iOS Safari zooms the page in on focus
   for anything smaller, and you pinch back out between every field. */
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:#FBFCFD;
  border:1px solid rgba(10,20,40,.13);border-radius:12px;
  box-shadow:inset 0 1px 2px rgba(10,20,40,.035);
  padding:13px 14px;min-height:50px;touch-action:manipulation;
  transition:border-color .2s var(--ease-io),box-shadow .2s var(--ease-io),
             background-color .2s var(--ease-io);
}
/* 4.5:1 against the field fill. The lighter grey that looks right
   in a mockup is unreadable for anyone who needs the contrast. */
.field input::placeholder,.field textarea::placeholder{color:#697180}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* Windows draws the native option list from the OS palette, which
   in dark mode puts light text on light. Both values must be set. */
.field select option{background-color:#FFFFFF;color:#07111F}
.field input:hover,.field select:hover,.field textarea:hover{
  border-color:rgba(10,20,40,.24);background:#FDFDFE}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 3.5px rgba(18,102,255,.15),inset 0 1px 2px rgba(10,20,40,0);
  outline:none;
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:var(--bad);box-shadow:0 0 0 3px rgba(180,35,27,.12);
}
.err{display:block;color:#93211A;font-size:12.5px;margin-top:6px;font-weight:500}
.err:empty{display:none}
/* a real field to a bot, nothing at all to a person */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:11px;align-items:flex-start;margin:2px 0 20px}
.consent input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--blue);
  cursor:pointer;touch-action:manipulation}
.consent label{font-size:12.6px;line-height:1.55;color:var(--muted);cursor:pointer}
.consent a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px}

.submit{width:100%;justify-content:center;padding:15px 24px;font-size:15px}
/* Disabled only while the request is in flight. A submit greyed out
   until the form validates hides the reason it is greyed out. */
.submit[disabled]{opacity:.62;cursor:progress;transform:none;box-shadow:none}
.spin{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:1.8px solid rgba(255,255,255,.34);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.status{margin:0 0 18px;padding:0}
.status:not(:empty){
  padding:13px 15px;border-radius:var(--r-sm);font-size:13.4px;line-height:1.55;
  background:#FDECEA;border:1px solid #F0B4AE;color:#93211A;
}
.status.is-ok:not(:empty){background:#E3F6EC;border-color:#A9DCC1;color:#0B5638}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--navy-deep);color:#93A0B4;flex:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.foot__in{
  max-width:var(--shell);margin-inline:auto;
  padding:26px var(--gut) 28px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:13px;
}
.foot .brand{color:#fff}
.foot .brand__m{background-image:url("../img/logo-mark-light.webp")}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.foot a{color:#AEB9C9;text-decoration:none;transition:color .2s ease}
.foot a:hover{color:#fff}
.foot__c{width:100%;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:#7C8798;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot__c .sp{margin-left:auto}
@media (max-width:640px){
  .foot nav{margin-left:0;width:100%}
  .foot__c .sp{margin-left:0;width:100%}
}

/* ============================================================
   RESPONSIVE + MOTION
   ============================================================ */
@media (max-width:980px){
  .page{grid-template-columns:1fr;gap:30px}
  .page__copy{position:static;top:auto}
  .page h1,.page__sub{max-width:none}
}
@media (max-width:620px){
  .fields{grid-template-columns:1fr;gap:0}
}

.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .55s var(--ease) var(--rd,0ms),transform .55s var(--ease) var(--rd,0ms)}

@media (prefers-reduced-transparency:reduce){
  .nav__in{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn,.nav__in{transition:none}
  .btn:hover{transform:none}
  .spin{animation:none}
}

/* declared last so nothing earlier shrinks a target back under 44px */
@media (pointer:coarse){
  .btn,.burger{min-height:44px}
  .brand,.nav__links a,.foot nav a,.foot__c a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:980px){
  .nav__links,.nav__end .signin{display:none}
}

/* ============================================================
   NAV — matched to the landing page (spectra-one_45_panels.html)
   Same bar geometry, same link rhythm, same blue CTA, so the
   three pages read as one site. Declared last so it wins.
   ============================================================ */
.nav{padding-top:14px;padding-bottom:0}
.nav > .shell{--gut:36px;max-width:calc(1120px + 72px)}
.nav__in{
  gap:26px;padding:11px 12px 11px 20px;border-radius:15px;
  background:rgba(255,255,255,.55);border:1px solid rgba(10,20,40,.05);
  box-shadow:0 1px 1px rgba(10,20,40,.02);
  backdrop-filter:blur(0px) saturate(1);-webkit-backdrop-filter:blur(0px) saturate(1);
  transition:background-color .5s,box-shadow .5s,border-color .5s,padding .5s,
             backdrop-filter .5s,transform .5s cubic-bezier(.2,.8,.2,1);
}
.nav.is-stuck .nav__in{
  background:rgba(255,255,255,.82);border-color:rgba(10,20,40,.09);
  box-shadow:0 1px 2px rgba(10,20,40,.05),0 12px 34px -18px rgba(10,20,40,.28);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  padding:8px 10px 8px 18px;transform:scale(.985);
}
.brand{gap:10px;font-weight:600;font-size:16.5px;letter-spacing:-.02em}
.brand__m{width:26px;height:26px}
.nav__links{gap:3px;margin:0 auto 0 0}
.nav__links a{padding:7px 12px;border-radius:8px;font-size:14px;font-weight:450;color:var(--muted)}
.nav__links a:hover{color:var(--ink);background:rgba(10,20,40,.04)}
.nav__links a[aria-current="page"]{color:var(--ink);background:transparent;font-weight:500}
.nav__links a[aria-current="page"]:hover{background:rgba(10,20,40,.04)}
.nav__end{gap:6px}
.nav__end .signin{padding:9px 12px;font-size:14px;font-weight:450;color:var(--ink);border-radius:9px;transition:background-color .2s}
.nav__end .signin:hover{background:rgba(10,20,40,.04);color:var(--ink)}
.nav__end .btn{
  padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:550;letter-spacing:-.006em;
  background:var(--blue);color:#fff;border-color:transparent;
  box-shadow:0 10px 30px -10px rgba(18,102,255,.45);
}
.nav__end .btn:hover{transform:none;background:var(--blue);box-shadow:0 14px 34px -8px rgba(18,102,255,.55)}
.nav__end .btn:active{transform:translateY(1px) scale(.99)}
.nav__end .btn .btn__x{display:none}
.burger{width:38px;height:38px;padding:0;border-radius:10px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span+span{margin-top:0}
@media (max-width:980px){ .burger{display:flex} }
@media (max-width:880px){
  .nav__in{gap:10px;padding:8px 8px 8px 14px}
  .brand{font-size:15.5px}
  .brand__m{width:22px;height:22px}
  .nav__end .btn{padding:9px 14px;font-size:13.5px}
}

/* ============================================================
   FORM — calm and premium: two quiet groups, soft-filled
   inputs, plain consent line, one ink action.
   ============================================================ */
.formshell{
  --tray:7px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(10,20,40,.04),0 0 0 1px rgba(10,20,40,.05),0 36px 80px -40px rgba(16,34,72,.32);
}
.formcard{border-radius:calc(26px - var(--tray));padding:clamp(26px,3vw,36px);border-color:rgba(10,20,40,.06)}
.formcard h2{font-size:clamp(21px,2vw,25px);letter-spacing:-.03em;margin-bottom:6px}
.formcard__p{font-size:13.5px;line-height:1.55;color:var(--muted);max-width:none;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line-2)}

/* the groups stay in the markup for structure, but read as spacing, not labels */
.fgroup{border:0;padding:0;margin:0;min-width:0}
.fgroup + .fgroup{margin-top:18px;padding-top:22px;border-top:1px solid var(--line-2)}
.fgroup__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fields{gap:18px 16px}
.field{margin-bottom:0}
.field label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:7px;letter-spacing:0}
.field label .opt{font-size:12px;font-weight:400;color:var(--muted);margin-left:5px}
.req{color:var(--bad);font-weight:500}

.field input,.field select,.field textarea{
  min-height:46px;padding:11px 14px;border-radius:10px;font-size:15px;color:var(--ink);
  background:#F7F9FC;border:1px solid rgba(10,20,40,.09);box-shadow:none;
  transition:border-color .2s var(--ease-io),box-shadow .2s var(--ease-io),background-color .2s var(--ease-io);
}
.field input::placeholder,.field textarea::placeholder{color:#8A93A1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(10,20,40,.18);background:#F4F7FB}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,102,255,.14);outline:none;
}
.field textarea{min-height:118px;line-height:1.55}
.field select{
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-position:right 13px center;background-size:14px 14px;background-repeat:no-repeat;
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#D0342C;background:#fff;box-shadow:0 0 0 3px rgba(208,52,44,.10);
}
.err{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;font-weight:500;color:#B42318}
.err:empty{display:none}
.err::before{content:none}

.consent{margin:22px 0 18px;padding:0;border:0;background:transparent;gap:11px;align-items:flex-start}
.consent input{width:20px;height:20px;margin-top:1px}
.consent label{font-size:12.8px;line-height:1.55;color:var(--muted)}

.submit{
  min-height:50px;padding:14px 22px;border-radius:12px;font-size:15px;gap:10px;
  background:var(--ink);color:#fff;
  box-shadow:0 10px 24px -14px rgba(7,17,31,.9);
}
.submit:hover{background:var(--ink);transform:translateY(-1.5px);box-shadow:0 16px 30px -14px rgba(7,17,31,.75)}
.submit:active{transform:translateY(1px) scale(.99)}
.submit .btn__x{width:24px;height:24px;margin-right:-4px;font-size:11px;background:rgba(255,255,255,.16)}
.submit[disabled]{opacity:.62;transform:none;box-shadow:none}
.formcard__note{display:none}
.status:not(:empty){border-radius:10px;margin-bottom:18px}

@media (max-width:620px){
  .field input,.field select,.field textarea{font-size:16px}
  .formcard{padding:22px 18px}
  .fields{gap:16px}
}

/* ============================================================
   FORM — reference layout: plain two-column card, white fields
   with a hairline, counter under the message, ink send button.
   ============================================================ */
.formcard{padding:clamp(26px,3vw,36px)}
.formcard h2{font-size:clamp(24px,2.3vw,29px);letter-spacing:-.03em;margin-bottom:6px}
.formcard__p{font-size:14px;color:var(--muted);border-bottom:0;padding-bottom:0;margin-bottom:24px;max-width:none}
.fgroup + .fgroup{margin-top:20px;padding-top:0;border-top:0}
.fields{gap:20px 18px}
.field label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.field label .opt{font-size:12.5px;font-weight:400;color:var(--muted);margin-left:6px}
.req{color:#D0342C}
.field input,.field select,.field textarea{
  min-height:46px;padding:11px 14px;border-radius:9px;font-size:15px;
  background-color:#FCFDFE;border:1px solid #E1E6EE;box-shadow:none;
}
.field input::placeholder,.field textarea::placeholder{color:#98A2B3}
.field input:hover,.field select:hover,.field textarea:hover{background-color:#fff;border-color:#C9D1DC}
.field input:focus,.field select:focus,.field textarea:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,102,255,.14)}
.field select{background-position:right 14px center}
.field textarea{min-height:96px}
.count{display:block;text-align:right;margin-top:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.consent{margin:22px 0 20px;gap:12px}
.consent input{width:20px;height:20px;margin-top:0}
.consent label{font-size:13.5px;color:var(--ink-2)}
.consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.submit{min-height:52px;border-radius:12px;font-size:15.5px;background:var(--ink)}
.submit:hover{background:var(--ink)}
.submit .btn__x{width:26px;height:26px;margin-right:-4px;font-size:12px}
@media (max-width:620px){ .fields{gap:18px} }

/* ============================================================
   FORM — polish pass: wider column, tighter rhythm, finer surfaces
   ============================================================ */
.page{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,3.6vw,56px)}
.formshell{--tray:6px;border-radius:24px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(10,20,40,.04),0 0 0 1px rgba(10,20,40,.05),0 30px 70px -36px rgba(16,34,72,.3)}
.formcard{border-radius:calc(24px - var(--tray));padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,32px);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(10,20,40,.03)}
.formcard h2{font-size:clamp(22px,2.1vw,26px);margin-bottom:4px}
.formcard__p{font-size:13.5px;margin-bottom:18px}
.fgroup + .fgroup{margin-top:16px}
.fields{gap:16px 16px}
.field label{font-size:13px;margin-bottom:6px}
.field label .opt{font-size:12px}
.field input,.field select,.field textarea{min-height:44px;padding:10px 13px;border-radius:9px;font-size:14.5px;
  border-color:#E1E6EE;background-color:#FBFCFE;transition:border-color .2s var(--ease-io),box-shadow .2s var(--ease-io),background-color .2s var(--ease-io)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C4CDD9;background-color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,102,255,.13)}
.field select{background-position:right 12px center;padding-right:36px}
.field textarea{min-height:92px;line-height:1.5}
.count{margin-top:4px;font-size:11.5px}
.err{margin-top:5px;font-size:12px}
.consent{margin:16px 0 16px;gap:10px;align-items:flex-start}
.consent input{width:18px;height:18px;margin-top:2px;border-radius:5px}
.consent label{font-size:13px;line-height:1.5}
.submit{min-height:48px;padding:12px 20px;border-radius:11px;font-size:15px;
  background:linear-gradient(180deg,#111E36 0%,#07111F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -14px rgba(7,17,31,.9)}
.submit:hover{background:linear-gradient(180deg,#152442 0%,#0A1428 100%);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 30px -14px rgba(7,17,31,.8)}
.submit .btn__x{width:24px;height:24px;margin-right:-2px;font-size:11px;background:rgba(255,255,255,.14)}
.status:not(:empty){padding:11px 13px;font-size:13px;margin-bottom:16px}
@media (max-width:980px){ .page{grid-template-columns:1fr} }
@media (max-width:620px){ .formcard{padding:20px 16px} .fields{gap:14px} }

/* ============================================================
   FORM — white fields, smoother edges and motion
   ============================================================ */
.field input,.field select,.field textarea{
  background-color:#fff;border:1px solid #E6EAF0;border-radius:11px;
  box-shadow:0 1px 2px rgba(10,20,40,.03);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{background-color:#fff;border-color:#CBD3DE;box-shadow:0 2px 6px rgba(10,20,40,.05)}
.field input:focus,.field select:focus,.field textarea:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(18,102,255,.12),0 2px 6px rgba(10,20,40,.04)}
.field input::placeholder,.field textarea::placeholder{color:#9AA3B2}
.field select{color:var(--ink);font-size:14.5px}
.field select:has(option[value=""]:checked){color:#9AA3B2}
.field textarea{border-radius:12px}
.formcard{border-radius:calc(24px - var(--tray))}
.submit{border-radius:12px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s var(--ease)}

/* ============================================================
   FORM — plain heading, regular-weight labels
   ============================================================ */
.formcard h2{margin-bottom:18px}
.field label{font-weight:450;color:var(--ink-2)}
.field label .opt{font-weight:400}
.consent label{font-weight:400}