/* ============================================================================
     Eastall Software Systems Stylesheets — Contact page
     Version: 1.0.0 2026
     Loads on top of the base stylesheet (v1.2026-1-0-0.css); uses its tokens.
============================================================================ */

:root                     { --dot:rgba(255,255,255,.05); --grad-sep:#ffffff; }
:root[data-theme="light"] { --dot:rgba(0,0,0,.05);       --grad-sep:#0e1116; }

.ess-main{ flex:1 1 auto; }
.grad-text{
  background:linear-gradient(95deg,
    var(--grad-sep) 0%, var(--ess-blue) 16.67%, var(--grad-sep) 33.33%,
    var(--ess-red) 50%, var(--grad-sep) 66.67%, var(--ess-yellow) 83.33%, var(--grad-sep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

.ct-wrap{ background:radial-gradient(var(--dot) 1px, transparent 1.7px) 0 0 / 24px 24px, var(--bg); }
.ct-inner{ max-width:1100px; margin:0 auto; padding:clamp(48px,7vw,90px) 28px; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:start; }

/* Left: intro + channels */
.ct-eyebrow{ display:inline-block; font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ess-blue); margin:0 0 16px; }
.ct-title{ margin:0 0 16px; font-weight:900; letter-spacing:-.02em; line-height:1.06; font-size:clamp(2rem,4.4vw,3.1rem); color:var(--text-hi); }
.ct-lead{ margin:0 0 30px; max-width:42ch; color:var(--grey-m); font-size:1.04rem; line-height:1.65; }
.ct-channels{ display:flex; flex-direction:column; gap:14px; }
.ct-channel{ display:flex; gap:14px; align-items:flex-start; }
.ct-channel .material-symbols-rounded{ color:var(--ess-blue); font-size:22px; margin-top:2px; }
.ct-channel b{ display:block; color:var(--text-hi); font-size:.96rem; }
.ct-channel span, .ct-channel a{ color:var(--grey-m); font-size:.92rem; line-height:1.5; }
.ct-channel a:hover{ color:var(--text-hi); }

/* Right: form card */
.ct-card{ background:var(--menu); border:1px solid var(--panel-brd); border-radius:20px; box-shadow:var(--shadow); padding:clamp(22px,3vw,32px); }
.ct-field{ margin-bottom:16px; }
.ct-field label{ display:block; font-weight:700; font-size:.86rem; color:var(--grey-d); margin-bottom:7px; }
.ct-field input, .ct-field textarea, .ct-field select{
  width:100%; font:inherit; color:var(--text); background:var(--overlay-3);
  border:1px solid var(--panel-brd); border-radius:11px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.ct-field textarea{ min-height:140px; resize:vertical; }
.ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus{
  outline:none; border-color:var(--ess-blue); box-shadow:0 0 0 3px rgba(35,118,245,.22); background:var(--bg);
}
.ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ct-actions{ margin-top:6px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ct-actions .ess-btn{ padding:12px 26px; }
.ct-fineprint{ color:var(--grey-m); font-size:.8rem; line-height:1.5; }
.ct-fineprint a{ color:var(--ess-blue); font-weight:600; }
.ct-fineprint a:hover{ text-decoration:underline; }

/* Alerts */
.ct-alert{ border-radius:12px; padding:13px 16px; font-size:.9rem; font-weight:600; margin-bottom:20px; border:1px solid transparent; }
.ct-alert.ok{ color:#0a7d3a; background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.4); }
.ct-alert.err{ color:var(--ess-red); background:rgba(232,48,56,.10); border-color:rgba(232,48,56,.4); }
:root[data-theme="dark"] .ct-alert.ok{ color:#4ade80; }

@media (max-width:820px){
  .ct-inner{ grid-template-columns:1fr; }
  .ct-row{ grid-template-columns:1fr; }
}