/* Contact (4.0): page styles. Scoped under .hp, built on the homepage tokens. */

/* ---- hero + form ---- */
.hp .ct-top{padding-block:120px 130px}
.hp .ct-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:80px;align-items:start}
.hp .ct-hero{display:flex;flex-direction:column;gap:26px;padding-top:28px}
.hp .ct-hero .lead{max-width:520px}
.hp.hp .ct-hero .h1{font-size:clamp(40px,4.9cqw,64px);overflow-wrap:normal}

.hp .ct-card{background:var(--card,#fff);box-shadow:var(--card-sh,0 18px 40px rgba(9,25,40,.10));border-radius:var(--rad-card,0);padding:44px 44px 40px;display:flex;flex-direction:column;gap:14px}
.hp .ct-title{font-stretch:var(--fs);font-weight:var(--fw2,650);text-transform:var(--tt2,none);font-size:32px;line-height:1.02;letter-spacing:.006em;margin:0}
.hp .ct-lede{margin:0 0 10px;font-size:16.5px}

.hp .ct-card .form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;position:relative}
.hp .ct-card .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.hp .ct-card .field--full{grid-column:1/-1}
.hp .ct-card label{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.hp .ct-card input[type=text],.hp .ct-card input[type=email],.hp .ct-card textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);background:var(--g);border:1px solid var(--line);border-radius:var(--rad,6px);padding:13px 14px}
.hp .ct-card textarea{resize:vertical;min-height:150px}
.hp .ct-card input::placeholder,.hp .ct-card textarea::placeholder{color:var(--ink2);opacity:.7}
.hp .ct-card input:focus-visible,.hp .ct-card textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.hp .ct-card .form-submit{grid-column:1/-1;justify-self:start;border:0;cursor:pointer;font-family:inherit;margin-top:6px}
.hp .ct-card .form-submit:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.hp .ct-card .form-fine{grid-column:1/-1;margin:0;font-family:var(--f-mono);font-size:13px;color:var(--ink2)}
.hp .ct-card .form-message{grid-column:1/-1;margin:0;font-size:15px;font-weight:600}

/* confirmation, shown when the form posts successfully */
.hp .confirm-panel{display:none;padding-top:8px}
.hp .confirm-panel>*+*{margin-top:16px}
.hp .confirm-panel .body{margin-top:12px;margin-bottom:0}
.hp .confirm-panel .btn{margin-top:22px}
.hp .confirm-panel__mark{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc)}
.hp #formWrap[data-confirmed="true"] .form{display:none}
.hp #formWrap[data-confirmed="true"] .confirm-panel{display:block}

/* ---- looking for something else ---- */
.hp .ct-routes{padding-block:130px}
.hp .ct-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin:0 auto 64px;max-width:900px}
.hp .ct-head .lead{max-width:56ch}
.hp .ct-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hp .ct-route{color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.hp .ct-route:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(9,25,40,.14)}
.hp .ct-route:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
.hp .ct-route .body{margin:0}
.hp .ct-route .tl{margin-top:auto;align-self:flex-start}
.hp .ct-route .ttl{font-size:27px;line-height:1.05}
.hp .ct-num{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--acc)}
@media (prefers-reduced-motion:reduce){.hp .ct-route{transition:none}.hp .ct-route:hover{transform:none}}

/* ---- tablet and phone ---- */
@container (max-width:980px){
  .hp .ct-split{grid-template-columns:minmax(0,1fr);gap:48px}
  .hp .ct-hero{padding-top:0}
  .hp.hp .ct-hero .h1{font-size:clamp(40px,7cqw,64px)}
  .hp .ct-cards{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:700px){
  .hp .ct-top{padding-block:64px 80px}
  .hp .ct-routes{padding-block:80px}
  .hp .ct-card{padding:30px 22px 28px}
  .hp .ct-card .form{grid-template-columns:minmax(0,1fr)}
  .hp .ct-title{font-size:27px}
  .hp .ct-head{align-items:flex-start;text-align:left;margin-bottom:40px}
  .hp .ct-route .ttl{font-size:24px}
}