#header-logo-slot{ opacity:1 !important; }
header.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }

.contact-page-hero{ padding:160px clamp(20px,4vw,56px) 60px; text-align:center; position:relative; overflow:hidden; }
.contact-page-eyebrow{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.15em; color:var(--cyan); text-transform:uppercase; font-weight:700; margin-bottom:22px; }
.contact-page-heading{ font-weight:900; font-size:clamp(2.8rem,6vw,5rem); line-height:1; letter-spacing:-.01em; margin-bottom:24px; }
.contact-page-lead{ font-size:16px; line-height:1.95; color:var(--ink-dim); max-width:520px; margin:0 auto; text-wrap:pretty; }

.contact-page-form-wrap{ padding:80px clamp(20px,4vw,56px) 140px; }
.contact-page-form{ max-width:680px; margin:0 auto; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-row.single{ grid-template-columns:1fr; }
.form-field{ margin-bottom:28px; }
.form-label{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; margin-bottom:12px; color:var(--ink); }
.form-required{ font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.03em; background:var(--glitch-a); color:#fff; padding:3px 9px; border-radius:99px; }
.form-optional{ font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.03em; border:1px solid var(--border); color:var(--ink-dim); padding:3px 9px; border-radius:99px; }
.contact-page-form input, .contact-page-form select, .contact-page-form textarea{
  width:100%; background:#fff; border:1.5px solid var(--border); border-radius:10px;
  padding:14px 16px; font-size:15px; color:var(--ink); font-family:inherit; transition:border-color .2s ease;
}
.contact-page-form input::placeholder, .contact-page-form textarea::placeholder{ color:rgba(0,0,0,.28); }
.contact-page-form input:focus, .contact-page-form select:focus, .contact-page-form textarea:focus{
  outline:none; border-color:var(--glitch-a);
}
.contact-page-form textarea{ resize:vertical; min-height:140px; }
.contact-page-form select{ appearance:none; -webkit-appearance:none; 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 1l5 5 5-5' stroke='%2318140f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.contact-page-form input.contact-page-submit{
  display:flex; align-items:center; justify-content:center; gap:10px; width:auto; margin:36px auto 0;
  background:var(--glitch-a); color:#fff; font-weight:700; font-size:15px; letter-spacing:.04em;
  padding:16px 52px 16px 36px; border-radius:999px; border:none; cursor:pointer;
  transition:background-color .25s ease, color .25s ease; font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10' stroke='white' stroke-width='1.4'/%3E%3Cpath d='M9.5 7.5L13 11l-3.5 3.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center;
}
.contact-page-form input.contact-page-submit:hover{
  background-color:#fff; color:var(--glitch-a); box-shadow:inset 0 0 0 1.5px var(--glitch-a);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%23ff3d81' stroke-width='1.4'/%3E%3Cpath d='M9.5 7.5L13 11l-3.5 3.5' stroke='%23ff3d81' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* CF7 renders the submit as <input type="submit">, which can't contain a child SVG like the
   original mockup did — the arrow icon above is done as a background-image instead, swapped
   on hover so it matches the button's white/pink hover-swap. */

/* ---------- mobile fixes ---------- */
@media(max-width:768px){
  .contact-page-hero{ padding:120px clamp(20px,5vw,32px) 48px; }
  .form-row{ grid-template-columns:1fr; }
}