/* Contact page. Reuses css/use-cases.css (nav, .top, .close, .foot, .kicker, .reveal,
   .luma-btn, .dim). Adds the contact hero, the two-column body, the form and the sent
   state. Strictly monochrome; tokens come from tokens.css / use-cases.css. */

/* the dark-fill button the form submit uses */
.luma-btn.ink{background:var(--foreground);color:var(--background);}
.luma-btn.ink:hover{opacity:.85;background:var(--foreground);}

/* ---------- hero ---------- */
.chero{padding:clamp(2.5rem,6vh,4rem) 0 clamp(2.5rem,6vh,4rem);}
.chero .kicker{color:oklch(1 0 0 / .5);}   /* base kicker is muted grey; lift it on the dark hero */
.chero h1{margin:0;color:#fff;max-width:16ch;font-size:clamp(2rem,5.4vw,4rem);font-weight:600;line-height:1.01;letter-spacing:-.038em;}
.chero h1 .dim{color:oklch(1 0 0 / .45);}
.chero-sub{margin:clamp(1rem,2.5vh,1.5rem) 0 0;max-width:44ch;color:oklch(1 0 0 / .68);font-size:clamp(.9375rem,1.4vw,1.125rem);line-height:1.6;}

/* ---------- body ---------- */
.cbody{background:var(--secondary);color:var(--foreground);padding:clamp(3rem,7vh,5rem) var(--side, clamp(1.25rem,4vw,3.5rem)) clamp(4rem,9vh,7rem);}
.cgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start;}

/* left rail */
.cside h2{margin:0 0 1.5rem;font-size:clamp(1.375rem,2.6vw,1.875rem);font-weight:600;line-height:1.1;letter-spacing:-.03em;text-transform:uppercase;}
.cpoints{list-style:none;margin:0 0 clamp(2rem,4vh,2.75rem);padding:0;border-top:1px solid var(--border);}
.cpoints li{display:flex;gap:.875rem;padding:1rem 0;border-bottom:1px solid var(--border);}
.cpoints i{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:9999px;margin-top:.125rem;background:var(--foreground);color:var(--background);}
.cpoints i svg{width:.6875rem;height:.6875rem;}
.cpoints b{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.1875rem;}
.cpoints span{display:block;color:var(--muted-foreground);font-size:.8125rem;line-height:1.55;}
.cmeta{font-size:.8125rem;line-height:1.75;color:var(--muted-foreground);font-style:normal;}
.cmeta b{display:block;color:var(--foreground);font-weight:600;margin-bottom:.25rem;}
.cmeta a{color:var(--foreground);text-decoration:none;border-bottom:1px solid var(--border);}
.cmeta a:hover{border-bottom-color:var(--foreground);}

/* form card */
.cform{padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-4xl);background:var(--card);outline:1px solid color-mix(in oklch,var(--foreground) 6%,transparent);outline-offset:-1px;box-shadow:0 4px 6px -1px color-mix(in oklch,var(--foreground) 6%,transparent);}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.875rem,1.6vw,1.25rem);}
.fld{margin-bottom:clamp(.875rem,1.6vw,1.25rem);}
.fld:last-of-type{margin-bottom:0;}
.fld label{display:block;margin-bottom:.4375rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);}
.fld label .req{color:var(--foreground);}
.inp,.sel,.txt{width:100%;font-family:inherit;font-size:.9375rem;color:var(--foreground);background:var(--background);border:1px solid var(--input);border-radius:var(--r-3xl);transition:border-color .2s,box-shadow .2s;}
.inp,.sel{height:3rem;padding:0 1rem;}
.txt{padding:.875rem 1rem;min-height:8.5rem;resize:vertical;line-height:1.6;}
.inp::placeholder,.txt::placeholder{color:var(--muted-foreground);}
.inp:focus,.sel:focus,.txt:focus{outline:none;border-color:var(--foreground);box-shadow:0 0 0 3px color-mix(in oklch,var(--foreground) 8%,transparent);}
.sel{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.5rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:.875rem;}
.sel:invalid{color:var(--muted-foreground);}
.phone{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.5rem;}
.err{display:none;margin-top:.4375rem;font-size:.75rem;font-weight:500;color:var(--foreground);}
.fld.bad .inp,.fld.bad .sel,.fld.bad .txt{border-color:var(--foreground);box-shadow:0 0 0 3px color-mix(in oklch,var(--foreground) 10%,transparent);}
.fld.bad .err{display:block;}
/* Honeypot — off-screen rather than display:none so bots that skip hidden
   fields still fill it. Never shown to, or focusable by, a person. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Network/server failure banner. Field-level errors use .err above. */
.ferr{margin:clamp(1.25rem,2.5vh,1.75rem) 0 0;padding:.75rem .875rem;border:1px solid var(--border);border-radius:.5rem;background:var(--background);font-size:.8125rem;line-height:1.55;color:var(--foreground);}
.ferr[hidden]{display:none;}
.ferr a{color:var(--foreground);text-decoration:none;border-bottom:1px solid var(--border);}

.fsubmit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:clamp(1.5rem,3vh,2rem);padding-top:clamp(1.25rem,2.5vh,1.75rem);border-top:1px solid var(--border);}
.fnote{margin:0;flex:1;min-width:14rem;font-size:.75rem;line-height:1.55;color:var(--muted-foreground);}
.fnote a{color:var(--foreground);text-decoration:none;border-bottom:1px solid var(--border);}

/* sent state */
.sent{display:none;text-align:center;padding:clamp(2.5rem,6vh,4rem) 1rem;}
.sent.on{display:block;animation:rise .5s cubic-bezier(.16,1,.3,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sent-i{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:9999px;margin-bottom:1.25rem;background:var(--foreground);color:var(--background);}
.sent-i svg{width:1.125rem;height:1.125rem;}
.sent h3{margin:0 0 .625rem;font-size:1.375rem;font-weight:600;letter-spacing:-.025em;}
.sent p{margin:0 auto;max-width:36ch;color:var(--muted-foreground);font-size:.9375rem;line-height:1.6;}
.sent .luma-btn{margin-top:1.75rem;}

@media (max-width:940px){.cgrid{grid-template-columns:1fr;}}
@media (max-width:560px){
  .frow{grid-template-columns:1fr;}
  .phone{grid-template-columns:8rem minmax(0,1fr);}
  .fsubmit .luma-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){.sent.on{animation:none;}}