/* ============================================================
   TMG SECURITY — GLOBAL CONTACT SYSTEM
   Loaded on every page.

   Two things live here:
     1. The contact slide-over that every "Talk to a Security
        Expert" button opens. Previously those buttons pointed at
        an anchor that did not exist on the homepage, so the
        primary CTA of the entire site did nothing.
     2. The homepage contact section (#contact), which is the
        no-JS destination for the same links.

   The modal is progressive enhancement: the markup is a real
   section with a real id, so the CTA works with JavaScript
   disabled and is merely nicer with it.
   ============================================================ */

/* ============================================================
   CONTACT SECTION (homepage + fallback target)
   ============================================================ */
.contact-sec{ border-top:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start; }
.contact-lead{ font-size:16px; color:var(--ice); line-height:1.65; margin-bottom:var(--s4); max-width:520px; }
.contact-points{ display:flex; flex-direction:column; gap:14px; margin-top:var(--s5); }
.contact-point{ display:flex; gap:14px; align-items:flex-start; }
.contact-point .cpn{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--cyan); flex:none; width:22px; padding-top:3px; }
.contact-point b{ display:block; font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:3px; }
.contact-point span{ font-size:12.8px; color:var(--fog); line-height:1.55; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:var(--s5); } }

/* ============================================================
   FORM  (shared by the section and the slide-over)
   ============================================================ */
.tform{ display:flex; flex-direction:column; gap:var(--s4); }
.tform-legend{
  font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--cyan);
  margin-bottom:14px; display:block;
}
.tform-topics{ display:flex; flex-wrap:wrap; gap:8px; }
.tform-topic{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; padding:11px 15px;
  border-radius:20px; border:1px solid var(--line2); background:var(--deep); color:var(--ice);
  cursor:pointer; min-height:44px; display:inline-flex; align-items:center;
  transition:border-color .25s, background .25s, color .25s, transform .25s var(--ease);
}
.tform-topic:hover{ border-color:var(--line3); transform:translateY(-2px); }
.tform-topic[aria-pressed="true"]{
  border-color:var(--cyan); background:rgba(79,216,234,.12); color:var(--white);
  box-shadow:0 0 18px rgba(79,216,234,.16);
}
.tform-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tform-field{ display:flex; flex-direction:column; gap:7px; }
.tform-field.full{ grid-column:1/-1; }
.tform-field label{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); }
.tform-field label .req{ color:var(--cyan); }
.tform-field input,.tform-field textarea{
  font-family:var(--body); font-size:14px; padding:13px 15px; border-radius:10px; min-height:48px;
  background:var(--void); border:1px solid var(--line2); color:var(--white);
  transition:border-color .2s, background .2s;
}
.tform-field textarea{ min-height:104px; resize:vertical; line-height:1.6; }
.tform-field input:focus,.tform-field textarea:focus{ border-color:var(--cyan); outline:none; background:rgba(8,12,24,.8); }
.tform-field input::placeholder,.tform-field textarea::placeholder{ color:var(--line3); }
.tform-field.invalid input,.tform-field.invalid textarea{ border-color:var(--crit); }
.tform-err{ font-size:11.5px; color:var(--crit); min-height:0; display:none; }
.tform-field.invalid .tform-err{ display:block; }
.tform-actions{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.tform-note{ font-size:11.5px; color:var(--fog); line-height:1.6; }
@media (max-width:620px){ .tform-fields{ grid-template-columns:1fr; } }

/* submitted state — deliberately does NOT claim a message was delivered */
.tform-done{ display:none; padding:var(--s5) var(--s4); border:1px solid rgba(245,180,78,.34); border-radius:var(--r-md); background:rgba(245,180,78,.05); }
.tform.sent .tform-done{ display:block; }
.tform.sent .tform-body{ display:none; }
.tform-done b{ font-family:var(--display); font-size:17px; font-weight:700; display:block; margin-bottom:10px; }
.tform-done p{ font-size:13px; color:var(--ice); line-height:1.65; margin-bottom:12px; }
.tform-done .payload{
  font-family:var(--mono); font-size:10.5px; color:var(--fog); background:var(--void);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; margin-top:12px;
  white-space:pre-wrap; word-break:break-word; max-height:190px; overflow:auto;
}

/* ============================================================
   SLIDE-OVER
   ============================================================ */
.tpanel{
  position:fixed; inset:0; z-index:600; display:none;
  align-items:stretch; justify-content:flex-end;
}
.tpanel.on{ display:flex; }
.tpanel-scrim{
  position:absolute; inset:0; background:rgba(2,4,9,.82); backdrop-filter:blur(10px);
  animation:tpFade .3s var(--ease);
}
@keyframes tpFade{ from{ opacity:0; } to{ opacity:1; } }
.tpanel-inner{
  position:relative; width:min(620px,100%); height:100%; overflow-y:auto;
  background:linear-gradient(180deg,var(--deep),#070A14);
  border-left:1px solid var(--line2); box-shadow:-40px 0 90px rgba(0,0,0,.7);
  padding:var(--s6) var(--s5) var(--s7);
  animation:tpIn .38s var(--ease);
}
@keyframes tpIn{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
.tpanel-close{
  position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:11px;
  background:rgba(8,12,24,.8); border:1px solid var(--line2); color:var(--white);
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, background .25s;
}
.tpanel-close:hover{ border-color:var(--crit); background:rgba(255,90,110,.14); }
.tpanel-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:2.6px; color:var(--cyan); margin-bottom:14px; }
.tpanel-h{ font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.8px; margin-bottom:12px; }
.tpanel-sub{ font-size:14px; color:var(--fog); line-height:1.65; margin-bottom:var(--s5); }
body.tpanel-open{ overflow:hidden; }

@media (max-width:700px){
  /* bottom sheet on phones rather than a side panel */
  .tpanel{ align-items:flex-end; }
  .tpanel-inner{
    width:100%; height:94%; border-left:0; border-top:1px solid var(--line2);
    border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--s5) var(--s4) var(--s6);
    animation:tpUp .38s var(--ease);
  }
  @keyframes tpUp{ from{ transform:translateY(50px); opacity:0; } to{ transform:none; opacity:1; } }
  .tpanel-h{ font-size:23px; }
}
@media (prefers-reduced-motion:reduce){
  .tpanel-scrim,.tpanel-inner{ animation:none; }
  .tform-topic{ transition:none; }
}

/* ============================================================
   LEAD FORM — SPAM TRAP + SERVER ERROR
   The honeypot is removed from the accessibility tree and from the
   tab order, so it is invisible to humans and to assistive tech but
   still present in the DOM for bots that fill every field.
   ============================================================ */
.tform-hp{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.tform-error{
  margin:0 0 14px; padding:13px 15px; border-radius:10px;
  border:1px solid var(--crit); background:rgba(255,92,122,.08);
  font-size:13.5px; line-height:1.6; color:var(--ice);
}
.tform-error[hidden]{ display:none; }
.tform-error:focus-visible{ outline:2px solid var(--crit); outline-offset:2px; }