@layer pages {
/* ==========================================================
   RouterHaus — Contact page (enterprise-grade)
   Harmonized with Kits Design System (light/dark) — CLEANED
   ========================================================== */
/* Buttons centralized in main.css (2025-02-14).
   Local .btn overrides removed; use .btn, .btn-secondary, .btn-ghost, sizes .btn-sm/.btn-lg. */

/* ------------------- Design tokens (from kits.css) ------------------- */
:root{
  /* Light mode → use EXACT dark-mode brand purples */
  --primary-h:234.433; --primary-s:100%; --primary-l:80.98%;
  --primary:hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-rgb:158 167 255; /* #9ea7ff */

  --accent-h:300; --accent-s:100%; --accent-l:80.2%;
  --accent:hsl(var(--accent-h) var(--accent-s) var(--accent-l)); /* #ff9aff */

  --success:#10b981; --warning:#f59e0b; --danger:#ef4444; --info:#3b82f6;

  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .375vw,1rem);
  --text-base:clamp(1rem,.9rem + .5vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .625vw,1.25rem);
  --text-xl:clamp(1.25rem,1.1rem + .75vw,1.5rem);
  --text-2xl:clamp(1.5rem,1.3rem + 1vw,2rem);

  /* Light */
  --bg:#f8fafc; --bg-elev:#fff;
  --text-1:#0a0f1e; --text-2:#3a4361; --muted:#6d7694;

  --surface-primary:rgba(255,255,255,.9);
  --surface-secondary:rgba(255,255,255,.95);
  --surface-tertiary:rgba(255,255,255,.86);
  --surface-elevated:rgba(255,255,255,.98);

  --glass-bg:rgba(255,255,255,.1);
  --glass-border:rgba(0,0,0,.12);

  --border:rgba(0,0,0,.12);
  --border-strong:rgba(0,0,0,.2);
  --ring:color-mix(in oklab,var(--primary) 40%,transparent);

  --shadow-soft:0 2px 12px rgba(16,24,40,.08);
  --shadow:0 10px 32px rgba(16,24,40,.12);
  --shadow-sm:0 6px 20px rgba(16,24,40,.08);
  --shadow-strong:0 20px 48px rgba(16,24,40,.15);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;

  --radius-xs:4px; --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:32px; --radius-full:9999px;

  --duration-fast:.15s; --duration-normal:.3s; --easing-smooth:cubic-bezier(.4,0,.2,1);

  color-scheme: light dark;
  accent-color: var(--primary);
}

/* Dark */
html[data-theme="dark"]{
  --bg:#0a0e16; --bg-elev:#0f1419;
  --text-1:#f0f4f8; --text-2:#cbd5e0; --muted:#a0aec0;

  --surface-primary:rgba(15,20,25,.85);
  --surface-secondary:rgba(20,25,35,.9);
  --surface-tertiary:rgba(25,30,40,.78);
  --surface-elevated:rgba(30,35,45,.95);

  --glass-bg:rgba(10,14,22,.4);
  --glass-border:rgba(255,255,255,.12);

  --border:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.22);
  --ring:color-mix(in oklab,var(--primary) 50%,transparent);

  --shadow:0 20px 40px rgba(0,0,0,.4);
  --shadow-sm:0 10px 24px rgba(0,0,0,.3);
  --shadow-strong:0 30px 60px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0a0e16; --bg-elev:#0f1419;
    --text-1:#f0f4f8; --text-2:#cbd5e0; --muted:#a0aec0;
    --surface-primary:rgba(15,20,25,.85);
    --surface-secondary:rgba(20,25,35,.9);
    --surface-tertiary:rgba(25,30,40,.78);
    --surface-elevated:rgba(30,35,45,.95);
    --glass-bg:rgba(10,14,22,.4);
    --glass-border:rgba(255,255,255,.12);
    --border:rgba(255,255,255,.14);
    --border-strong:rgba(255,255,255,.22);
    --ring:color-mix(in oklab,var(--primary) 50%,transparent);
    --shadow:0 20px 40px rgba(0,0,0,.4);
    --shadow-sm:0 10px 24px rgba(0,0,0,.3);
    --shadow-strong:0 30px 60px rgba(0,0,0,.5);
  }
}

/* ------------------- Base ------------------- */
html,body{
  background:var(--bg); color:var(--text-1);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1080px;margin-inline:auto;padding:clamp(16px,3vw,28px);}
img{max-width:100%;height:auto;display:block;}
::selection{background:rgba(var(--primary-rgb),.3);color:var(--text-1);}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--muted) 50%,transparent);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--muted) 70%,transparent)}
.glass{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--glass-border)}
@supports not (backdrop-filter:blur(20px)){.glass{background:var(--surface-primary)}}
.grad{ background: linear-gradient(90deg, var(--accent), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ------------------- Hero ------------------- */
.contact-hero{
  background:
    radial-gradient(1000px 540px at 85% -20%,color-mix(in oklab,var(--accent) 8%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--surface-tertiary) 40%,transparent),transparent 50%),
    var(--bg);
  padding:clamp(24px,6vw,64px) 0;
}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(16px,3vw,32px);align-items:center}
.hero-copy h1{font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem);margin:0 0 .5rem;line-height:1.1}
.hero-copy p{color:var(--text-2);margin:0 0 1rem}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin:.5rem 0 1rem}
.eta{color:var(--muted);margin-top:.25rem}
.hero-card{border-radius:var(--radius-xl);padding:16px}
.hero-list{margin:.25rem 0 0;padding-left:1.1rem;color:var(--text-2)}
.hero-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;color:var(--text-2)}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr}}

/* ------------------- Section scaffold ------------------- */
.section-head{text-align:center;margin-bottom:clamp(10px,2vw,16px)}
.section-head h2{font-size:clamp(1.4rem,1rem + 1.4vw,2rem);margin:0 0 .35rem}
.section-head p{color:var(--text-2);margin:0}

.grid{display:grid;gap:clamp(12px,1.6vw,18px)}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1060px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cards-3,.cards-4{grid-template-columns:1fr}}

.card{
  border-radius:var(--radius-xl);border:1px solid var(--border);
  background:var(--surface-primary);padding:clamp(14px,2vw,18px);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-normal) var(--easing-smooth),box-shadow var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth)
}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-strong);border-color:var(--primary)}
.card .icon{font-size:1.4rem;margin-bottom:.25rem;color:var(--text-2)}
.card h3{margin:.2rem 0 .3rem;font-size:1.05rem}
.card p{margin:0;color:var(--text-2)}

/* ------------------- Contact Form ------------------- */
.contact-form{padding:clamp(24px,6vw,60px) 0}

#contactForm{
  border-radius:var(--radius-2xl);
  background:var(--surface-elevated);
  border:1px solid var(--border);
  padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--shadow);
}

/* Grid */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1 / -1}

/* Labels & controls */
.form-grid label{display:grid;gap:6px}
.form-grid input,.form-grid select,.form-grid textarea{
  min-height:44px;
  padding:.7rem .9rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface-secondary);
  color:var(--text-1);
  transition:border-color var(--duration-normal) var(--easing-smooth),box-shadow var(--duration-normal) var(--easing-smooth),background var(--duration-normal) var(--easing-smooth);
  outline:none;
}

/* Select — remove bevels & add chevron */
.form-grid select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:2.75rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:18px;
}
.form-grid select::-ms-expand{display:none}

/* Textarea */
.form-grid textarea{min-height:160px;resize:vertical}

/* Checkbox row */
.form-grid .agree{grid-column:1 / -1;display:flex;align-items:center;gap:10px;color:var(--text-2)}
.form-grid .agree input{width:18px;height:18px;accent-color:var(--primary)}

/* Hover/Focus/Placeholder */
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{background:var(--surface-tertiary)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--ring) 28%,transparent)
}
.form-grid ::placeholder{color:color-mix(in oklab,var(--muted) 90%,transparent)}

/* Honeypot */
.hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Actions & messages */
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.form-msg{min-height:1.2em;color:var(--danger);margin-top:6px;font-weight:600}

/* After submit */
.after-contact{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;background:var(--surface-primary)}
.after-contact .stack{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ------------------- Other sections ------------------- */
.coverage,.faq,.channels{padding:clamp(24px,6vw,60px) 0}
.faq-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.faq details{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-secondary);padding:10px 12px}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:var(--text-2);margin:.5rem 0 0}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* ------------------- Reveal ------------------- */
.reveal{opacity:0;transform:translateY(8px);transition:opacity var(--duration-normal) var(--easing-smooth),transform var(--duration-normal) var(--easing-smooth)}
.reveal.in-view{opacity:1;transform:none}

/* ------------------- A11y & Motion ------------------- */
:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in oklab,var(--ring) 55%,transparent)}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
}