/* ==========================================================
   ITM Solutions — Contact (2026)
   Concept: a "conversational brief" — the form reads as a sentence,
   with a live contact panel, dark map and next-steps timeline.
   Builds on home-2026.css primitives and site-chrome.css tokens.
   ========================================================== */

body{background:var(--ink-0)}
.ct-page{margin-top:-96px} /* run the hero under the floating nav */
.ct-page{--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- Hero ---------- */
.ct-hero{position:relative;padding:150px 0 40px;isolation:isolate;overflow:hidden}
.ct-hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:
        radial-gradient(800px 460px at 15% 0%,rgba(0,167,158,.20),transparent 62%),
        radial-gradient(700px 420px at 95% 30%,rgba(247,148,29,.14),transparent 60%);
}
.ct-hero h1{font-size:clamp(3rem,8.4vw,7.4rem);letter-spacing:-.06em;line-height:.92;margin-top:22px;max-width:1000px}
.ct-hero .lede{color:var(--muted);max-width:560px;margin-top:22px;font-size:clamp(1rem,1.3vw,1.15rem)}

/* ---------- Layout ---------- */
.ct-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}
@media (max-width:1000px){.ct-grid{grid-template-columns:1fr}}

/* ---------- Sentence form ---------- */
.brief{
    position:relative;border-radius:var(--radius-lg);padding:clamp(28px,4.5vw,56px);
    background:linear-gradient(180deg,var(--ink-2),var(--ink-1));border:1px solid var(--line);
}
.brief .say{
    font-size:clamp(1.45rem,2.6vw,2.2rem);line-height:1.75;letter-spacing:-.03em;font-weight:500;color:var(--muted);
}
.brief .say b{color:var(--text);font-weight:500}
.slot{
    display:inline-block;vertical-align:baseline;min-width:6ch;max-width:100%;
    font:inherit;letter-spacing:inherit;color:var(--text);
    background:transparent;border:0;border-bottom:2px dashed var(--line-2);border-radius:0;
    padding:0 4px;margin:0 2px;outline:none;transition:border-color .25s var(--ease),background .25s;
}
.slot::placeholder{color:rgba(238,242,247,.22);font-style:italic;font-family:var(--serif);font-weight:400}
.slot:focus{border-bottom-color:var(--blue);border-bottom-style:solid;background:rgba(0,172,237,.06)}
.slot.ok{border-bottom-color:var(--teal);border-bottom-style:solid}
.slot[aria-invalid="true"]{border-bottom-color:#ff6b6b;border-bottom-style:solid}
.slot.w-name{width:7em}.slot.w-company{width:9em}.slot.w-email{width:9em}.slot.w-phone{width:8em} /* JS refines these to the text width */

.interests{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.interests button{
    height:40px;padding:0 16px;border-radius:999px;cursor:pointer;
    font:500 14.5px var(--sans);color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line-2);
    transition:all .25s var(--ease);
}
.interests button:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.interests button[aria-pressed="true"]{color:var(--ink-0);background:var(--text);border-color:var(--text)}
.interests button[aria-pressed="true"]::before{content:"✓ ";}

.brief textarea.slot{
    display:block;width:100%;min-height:120px;margin:12px 0 0;padding:14px 16px;resize:vertical;
    font:400 17px/1.6 var(--sans);letter-spacing:0;color:var(--text);
    border:1px dashed var(--line-2);border-radius:16px;background:rgba(255,255,255,.02);
}
.brief textarea.slot:focus{border-style:solid;border-color:var(--blue)}
.brief textarea.slot::placeholder{font-family:var(--sans);font-style:normal;font-size:16px}

.brief-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px}
.brief-foot .meter{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.brief-foot .meter .bar{width:120px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.brief-foot .meter .bar span{display:block;height:100%;width:0;background:var(--grad);transition:width .4s var(--ease)}
.brief .btn-primary[disabled]{opacity:.6;cursor:progress}
.brief .err{margin-top:16px;color:#ff8a8a;font-size:14.5px;min-height:1em}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:640px){
    .brief .say{line-height:1.6}
    .slot.w-name,.slot.w-company,.slot.w-email,.slot.w-phone{display:block;width:100%;margin:6px 0 10px}
}

/* success */
.brief-done{display:none;text-align:center;padding:clamp(30px,6vw,70px) 0;gap:18px;justify-items:center}
.brief.sent .brief-form{display:none}
.brief.sent .brief-done{display:grid}
.brief-done .check{
    width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--ink-0);
    background:var(--grad);animation:pop .6s var(--ease);
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.brief-done h2{font-size:clamp(2rem,4vw,3.2rem)}
.brief-done p{color:var(--muted);max-width:440px}

/* ---------- Side panel ---------- */
.side{display:grid;gap:16px}
.panel{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--ink-1);padding:24px}
.clock{display:flex;align-items:center;justify-content:space-between;gap:12px}
.clock .t{font-family:var(--mono);font-size:clamp(2rem,3.4vw,2.6rem);letter-spacing:-.04em;color:var(--text);line-height:1}
.clock .where{font-size:13px;color:var(--dim);margin-top:6px}
.clock .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(0,167,158,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(0,167,158,0)}100%{box-shadow:0 0 0 0 rgba(0,167,158,0)}}

.methods{display:grid;gap:8px}
.method{
    display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--line);
    background:rgba(255,255,255,.02);transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.method:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateX(4px)}
.method .main{display:flex;align-items:center;gap:14px;flex:1;min-width:0;color:inherit;text-decoration:none}
.method .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:16px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);flex:none}
.method small{display:block;font-size:12px;color:var(--dim);letter-spacing:.04em}
.method b{display:block;font-weight:500;color:var(--text);font-size:14.5px;overflow-wrap:anywhere}
.method .arr{margin-left:auto;color:var(--dim);font-size:12px}
.copy-btn{
    margin-left:auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);background:transparent;
    color:var(--muted);cursor:pointer;flex:none;transition:all .2s;
}
.copy-btn:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.copy-btn.done{color:var(--teal);border-color:var(--teal)}

.map{
    position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;
    background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px,var(--ink-2);
}
.map iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6) contrast(.9)}
.map .pin{
    position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
    background:rgba(5,7,12,.82);color:var(--text);font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.map .pin i{color:var(--orange)}

/* ---------- Next steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{list-style:none;border-top:1px solid var(--line-2);padding-top:24px}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--serif);font-style:italic;font-size:3rem;line-height:1;color:var(--orange);margin-bottom:18px}
.steps h3{font-size:1.4rem;margin-bottom:8px}
.steps p{color:var(--muted);font-size:15.5px}
.steps{padding:0;margin:0}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
    .clock .dot,.brief-done .check{animation:none}
}