/* ==========================================================================
   SKYBOUND SCALING - contact.css
   Contact page styles. Loads after main.css and composes the same design
   system: paper atmosphere, ink/blue/orange, Archivo display type, glass
   panels, and the round-dot particle language (as a contained visual -
   no background particles).

   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01  Contact hero
   02  Layout grid + left rail
   03  Particle beacon (contained visual)
   04  Form: glass card
   05  Form: fields
   06  Form: pills (budget / services)
   07  Form: submit row
   08  Success state
   09  Responsive
   10  Reduced motion
   ------------------------------------------------------------------ */

/* ============ 01 CONTACT HERO ============ */
.contact-hero{
  padding:calc(var(--header-h) + clamp(52px,10vh,120px)) var(--pad) clamp(40px,6vh,76px);
}
.contact-eyebrow{
  display:flex;align-items:center;
  color:rgba(10,10,12,.62);
  letter-spacing:.22em;
  margin-bottom:clamp(22px,3.4vh,38px);
}
.contact-title{
  margin:0;
  font-weight:900;font-variation-settings:'wdth' 122;
  /* pure-vw sizing: the two display lines scale with the viewport and can
     never overflow, so they stay whole (no mid-line wrapping) at any width.
     Coefficient derived from the measured line width - "LET'S GET YOU" runs
     8.82em at wdth 122/900, and the tightest padding case allows ~9.9vw. */
  font-size:clamp(30px,9.4vw,148px);
  line-height:.9;letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--ink);
}
.contact-title .ln{display:block;white-space:nowrap}
.contact-title .punct{
  color:var(--blue);
  font-weight:900;font-variation-settings:'wdth' 122;
}
.contact-sub{
  margin-top:clamp(24px,3.6vh,42px);
  max-width:520px;
  font-size:16px;line-height:1.6;
  color:rgba(10,10,12,.72);
}

/* ============ 02 LAYOUT GRID + LEFT RAIL ============ */
.contact-body{
  padding:clamp(12px,2vh,28px) var(--pad) clamp(100px,13vh,180px);
}
.contact-grid{
  display:grid;
  /* rail gets near-equal width so the particle globe can be large; the form
     column stays comfortably above ~500px for its two-up fields */
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,4vw,80px);
  align-items:start;
}
.contact-rail{
  position:sticky;
  top:calc(var(--header-h) + 28px);
  align-self:start;
  min-width:0;
}
.rail-label{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;
  color:var(--blue);
  margin-bottom:14px;
}
.rail-email{
  display:inline-block;position:relative;
  font-weight:700;font-variation-settings:'wdth' 112;
  font-size:clamp(19px,1.85vw,27px);
  letter-spacing:-.012em;line-height:1.25;
  padding-bottom:6px;
  color:var(--ink);
}
.rail-email::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line-strong);
}
.rail-email::before{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;z-index:1;
  background:var(--blue);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.rail-email:hover{color:var(--blue)}
.rail-email:hover::before{transform:scaleX(1);transform-origin:left}
.rail-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line);
  margin-top:clamp(30px,4.6vh,48px);
}
.rail-social{margin-top:clamp(28px,4.2vh,44px)}
.rail-social-row{display:flex;gap:8px}
.rail-social-row a{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(10,20,40,.20);color:rgba(10,10,12,.75);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.rail-social-row a svg{width:18px;height:18px}
@media (hover:hover){
  .rail-social-row a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}
}

/* ============ 03 PARTICLE BEACON ============ */
/* The brand orb, contained in the rail - the page's single particle moment. */
.contact-visual{
  margin-top:clamp(20px,3.4vh,40px);
  width:100%;max-width:680px;   /* large - the particle globe is the rail's hero */
  aspect-ratio:1/1;
  position:relative;
}
#beacon-canvas{width:100%;height:100%;display:block;overflow:visible}

/* ============ 04 FORM: GLASS CARD ============ */
.contact-form-col{position:relative;min-width:0}
/* the author display values below would beat the UA [hidden] rule - restate it */
.contact-form[hidden],.form-success[hidden]{display:none}
.contact-form{
  position:relative;
  padding:clamp(30px,4.4vh,54px) clamp(26px,3.2vw,56px) clamp(30px,4.2vh,50px);
  border-radius:26px;
  background:
    linear-gradient(180deg,
      rgba(244,247,252,.94) 0%,
      rgba(232,238,246,.91) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 44px 96px -34px rgba(20,30,55,.34),
    0 20px 44px -14px rgba(20,30,55,.15),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  display:flex;flex-direction:column;
  gap:clamp(20px,2.8vh,30px);
}
.contact-form::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.36) 0%, transparent 50%),
    radial-gradient(80% 60% at 100% 100%, rgba(34,48,254,.05) 0%, transparent 60%);
  mix-blend-mode:screen;
}
.contact-form > *{position:relative;z-index:1}
.form-head{
  display:flex;justify-content:space-between;align-items:baseline;
  color:rgba(10,10,12,.55);
  letter-spacing:.12em;
}

/* ============ 05 FORM: FIELDS ============ */
.field{min-width:0}
.field-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,28px);
}
.field-label{
  display:block;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:10px;
}
.field-label .req{color:var(--orange)}
.field-label .opt{color:rgba(10,10,12,.42);letter-spacing:.1em;font-weight:500}
.field-input{
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid rgba(10,20,40,.24);
  border-radius:0;
  padding:8px 2px 12px;
  font-family:var(--sans);font-size:16px;line-height:1.4;
  color:var(--ink);
  transition:border-color .3s ease,box-shadow .3s ease;
  appearance:none;-webkit-appearance:none;
}
.field-input::placeholder{color:rgba(10,10,12,.30)}
.field-input:focus{
  outline:none;
  border-bottom-color:var(--blue);
  box-shadow:0 1px 0 0 var(--blue);
}
.field-input.is-error{
  border-bottom-color:var(--orange);
  box-shadow:0 1px 0 0 var(--orange);
}
.field-area{resize:vertical;min-height:96px;max-height:320px}
.field-err{
  min-height:16px;
  margin-top:7px;
  font-size:10px;letter-spacing:.08em;
  color:var(--orange);
}
/* honeypot - parked far off-canvas, invisible to humans and screen readers */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ============ 06 FORM: PILLS ============ */
.pills-field{border:0;padding:0;margin:0}
.pills-field legend{padding:0}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pill{position:relative;display:inline-block}
.pill input{
  position:absolute;inset:0;
  opacity:0;margin:0;cursor:pointer;
}
.pill span{
  display:inline-flex;align-items:center;
  padding:9px 17px;
  border:1px solid rgba(10,20,40,.24);
  border-radius:999px;
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.04em;
  color:rgba(10,10,12,.72);
  background:transparent;
  cursor:pointer;user-select:none;
  transition:background-color .3s cubic-bezier(.65,0,.35,1),
             color .3s cubic-bezier(.65,0,.35,1),
             border-color .3s cubic-bezier(.65,0,.35,1),
             transform .3s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  .pill:hover span{border-color:rgba(10,20,40,.5);transform:translateY(-1px)}
}
.pill input:checked + span{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.pill input:focus-visible + span{
  outline:2px solid var(--blue);outline-offset:3px;
}

/* ============ 07 FORM: SUBMIT ROW ============ */
.form-foot{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:clamp(4px,1vh,10px);
}
.form-submit{border:1px solid var(--cta-bg)}
.form-submit.is-busy{pointer-events:none;opacity:.72}
.form-note{
  font-size:12px;line-height:1.5;
  color:rgba(10,10,12,.55);
  max-width:26ch;
}
.form-alert{
  display:none;
  padding:12px 16px;border-radius:12px;
  border:1px solid rgba(255,77,0,.4);
  background:rgba(255,77,0,.06);
  font-size:13px;color:var(--ink);
}
.form-alert.on{display:block}

/* ============ 08 SUCCESS STATE ============ */
.form-success{
  position:relative;
  min-height:480px;
  padding:clamp(40px,6vh,72px) clamp(26px,3.2vw,56px);
  border-radius:26px;
  background:
    linear-gradient(180deg,
      rgba(244,247,252,.94) 0%,
      rgba(232,238,246,.91) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 44px 96px -34px rgba(20,30,55,.34),
    0 20px 44px -14px rgba(20,30,55,.15),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  display:grid;place-items:center;
  text-align:center;
}
.form-success:focus{outline:none}
.success-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,20px)}
.success-ring{
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(34,48,254,.35);
  background:rgba(34,48,254,.06);
  color:var(--blue);
  margin-bottom:clamp(6px,1.4vh,14px);
}
.success-ring svg{width:32px;height:32px}
.success-ring svg path{
  stroke-dasharray:24;stroke-dashoffset:0;
}
.success-eyebrow{color:rgba(10,10,12,.6);letter-spacing:.2em}
.success-title{
  margin:0;
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(32px,6.4vw,76px);
  line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;
}
.success-title .punct{color:var(--blue)}
.success-copy{
  max-width:44ch;
  font-size:15px;line-height:1.6;
  color:rgba(10,10,12,.7);
}
.success-home{margin-top:clamp(10px,2vh,18px)}

/* ============ 09 RESPONSIVE ============ */
@media (max-width:1020px){
  .contact-grid{grid-template-columns:1fr;gap:clamp(48px,7vh,72px)}
  .contact-rail{
    position:static;
    order:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(28px,5vw,48px);
    align-items:start;
  }
  .rail-block{grid-column:1/-1}
  .rail-facts{margin-top:0;grid-column:1/2}
  .rail-social{margin-top:0;grid-column:2/3;justify-self:end;text-align:right}
  .rail-social .rail-social-row{justify-content:flex-end}
  .contact-visual{grid-column:1/-1;max-width:560px;margin:clamp(10px,2.4vh,26px) auto 0}
  .contact-form-col{order:1}
}
@media (max-width:720px){
  .contact-hero{padding-top:calc(var(--header-h) + clamp(40px,7vh,64px))}
  .contact-title{letter-spacing:-.03em}
  .contact-sub{max-width:none}
  .field-row{grid-template-columns:1fr}
  .contact-rail{grid-template-columns:1fr}
  .rail-facts{grid-column:1/-1;grid-template-columns:1fr}
  .fact:nth-child(odd){padding-right:0}
  .rail-social{grid-column:1/-1;justify-self:start;text-align:left}
  .rail-social .rail-social-row{justify-content:flex-start}
  .form-foot{align-items:flex-start;flex-direction:column;gap:16px}
  .form-success{min-height:420px}
}
/* Performance: the glass card blur is invisible at ~94% opacity - drop it on
   phones/tablets exactly as main.css does for the cinematic panels. */
@media (max-width:900px){
  .contact-form,.form-success{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ============ 10 REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .pill span,.rail-email::before,.rail-social-row a{transition:none}
}