/* =========================================================
   CONTACT — dark navy gradient on the left, warm cream form on the right
   ========================================================= */
#p-cont{--bg:#041E4B}
#p-cont .shell{display:grid;grid-template-columns:1.05fr .95fr}

/* ---------- left · the pitch, on a deep navy → violet gradient ---------- */
#p-cont .left{padding:clamp(54px,7vw,88px) var(--pad);display:flex;flex-direction:column;
  justify-content:space-between;gap:44px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#020F30 0%,#041E4B 38%,#0B1A63 72%,#1B0F5E 100%)}
#p-cont .left::after{content:"";position:absolute;left:-24%;bottom:-32%;width:78%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(185,9,189,.32),transparent 62%);pointer-events:none}
#p-cont h1{font-size:clamp(2.4rem,6.8vw,4.9rem);position:relative;font-weight:800}
#p-cont .left .lede{color:rgba(226,232,255,.76)}
#p-cont .deets{list-style:none;padding:0;margin:0;position:relative}
#p-cont .deets li{padding:15px 0;border-top:1px solid rgba(255,255,255,.16);display:flex;gap:18px;align-items:baseline}
#p-cont .deets span{font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(226,232,255,.6);min-width:92px;flex:0 0 auto}
#p-cont .deets b{font-weight:500;font-size:.98rem}
#p-cont .deets a{color:#EC4BEF;text-decoration:none;border-bottom:1px solid transparent}
#p-cont .deets a:hover{border-color:#EC4BEF}

/* ---------- right · the form, on a deeper cream than the header/footer ---------- */
#p-cont .right{padding:clamp(54px,7vw,88px) var(--pad);background:#F6F3EA;color:#041E4B;
  position:relative;z-index:1}
#p-cont .field{margin-bottom:22px}
#p-cont .right label{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(4,30,75,.72);display:block;margin-bottom:9px}
#p-cont input,#p-cont textarea,#p-cont select{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(4,30,75,.28);color:#041E4B;font-family:var(--body);font-size:1rem;
  padding:11px 0;transition:border-color .2s;
  /* Safari paints its own grey gradient, inset shadow and rounded corners on
     form controls unless appearance is reset. Chrome mostly does not, which
     is why the select looked like a grey bar only in Safari. */
  -webkit-appearance:none;appearance:none;border-radius:0}

/* ...and once appearance is off, the dropdown arrow has to be drawn back on */
#p-cont select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23041E4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:12px 8px;
  padding-right:26px;
  cursor:pointer}
#p-cont input::placeholder,#p-cont textarea::placeholder{color:rgba(4,30,75,.42)}
#p-cont select option{background:#F6F3EA;color:#041E4B}
#p-cont input:focus,#p-cont textarea:focus,#p-cont select:focus{outline:none;border-color:#B909BD}
#p-cont textarea{resize:vertical;min-height:108px}
#p-cont .pills{display:flex;flex-wrap:wrap;gap:8px}
#p-cont .pills button{font-family:var(--mono);font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:1px solid rgba(4,30,75,.3);color:rgba(4,30,75,.75);padding:9px 14px;
  border-radius:999px;cursor:pointer;transition:all .18s}
#p-cont .pills button:hover{border-color:rgba(4,30,75,.6);color:#041E4B}
#p-cont .pills button[aria-pressed="true"]{background:#20098F;border-color:#20098F;color:#fff;font-weight:700}
#p-cont .right .btn{background:linear-gradient(96deg,#3C1FB0 0%,#8C1E9A 100%);
  border-color:transparent;color:#fff}
#p-cont .right .btn:hover{box-shadow:0 12px 32px -14px rgba(60,31,176,.9)}
#p-cont .right :focus-visible{outline-color:#20098F}
#p-cont .note{font-size:.92rem;line-height:1.5;color:rgba(4,30,75,.72);margin-top:16px;min-height:1.4em}
#p-cont .note.is-ok{color:#0E6B4C;font-weight:600}
#p-cont .note.is-error{color:#A3123F;font-weight:600}
#p-cont .note.is-busy{color:rgba(4,30,75,.72)}

/* validation */
#p-cont .err{font-size:.84rem;line-height:1.4;color:#A3123F;margin:8px 0 0;font-weight:600}
#p-cont input.bad,#p-cont textarea.bad{border-bottom-color:#A3123F}
#p-cont .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* fieldset carries the pill group — strip the browser's default chrome */
#p-cont fieldset.field{border:0;padding:0;margin:0 0 22px;min-width:0}
#p-cont legend{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(4,30,75,.72);display:block;margin-bottom:9px;padding:0}

/* honeypot — off-screen for sighted users, ignored by assistive tech */
#p-cont .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- sign-off band ---------- */
#p-cont .sign{text-align:center;
  background:linear-gradient(155deg,#1B0F5E 0%,#0B1A63 32%,#041E4B 70%,#020F30 100%)}
#p-cont .sign h2{font-size:clamp(1.7rem,4.6vw,3rem);margin:0}
@media(max-width:900px){
  #p-cont .shell{grid-template-columns:1fr}
}

/* --- touch + small screens ---------------------------------------- */
@media (pointer: coarse){
  #p-cont .deets a{display:inline-block;padding:6px 0}
  #p-cont .pills button{padding:15px 18px;font-size:.68rem}
}
@media (max-width:720px){
  #p-cont .right label,#p-cont legend{font-size:.78rem}
  #p-cont .deets span{font-size:.72rem;min-width:84px}
  #p-cont .note{font-size:.95rem}
}
@media (max-width:560px){
  #p-cont .deets li{flex-direction:column;gap:4px}
  /* 16px stops iOS zooming the page when a field takes focus */
  #p-cont input,#p-cont textarea,#p-cont select{font-size:16px}
}