/* ============================================================
   contact.css — styles specific to contact.html
   Loaded in addition to styles.css
   ============================================================ */

/* ---- Shared page chrome (redeclared since this page doesn't load other page CSS) ---- */
.page-hero{padding:80px 0 90px;position:relative;overflow:hidden}
.page-hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(36px, 5.5vw, 64px);
  line-height:1.02;letter-spacing:-0.035em;
  margin-bottom:28px;color:var(--ink);
}
.page-hero-title em{font-style:italic;color:var(--accent);font-weight:300}
.page-hero-sub{
  font-size:18px;line-height:1.6;color:var(--ink-dim);
  max-width:680px;margin-bottom:36px;
}
.section-eyebrow{
  font-family:var(--mono);font-size:11px;color:var(--accent);
  text-transform:uppercase;letter-spacing:0.25em;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
}
.section-eyebrow::before{
  content:"";width:32px;height:1px;background:var(--accent);
}
.section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(32px, 4.5vw, 52px);
  line-height:1.05;letter-spacing:-0.03em;
  margin-bottom:24px;max-width:820px;
}
.section-title em{font-style:italic;color:var(--accent);font-weight:300}
.section-lede{font-size:18px;color:var(--ink-dim);max-width:680px;line-height:1.6;margin-bottom:20px}

.contact-hero-inner{max-width:720px}

/* ============================================================
   EMERGENCY BAR — for active incident response
   ============================================================ */
.emergency-bar{
  background:linear-gradient(90deg,
    rgba(255,77,109,0.12),
    rgba(255,77,109,0.06) 50%,
    rgba(255,77,109,0.12));
  border-bottom:1px solid rgba(255,77,109,0.35);
  border-top:1px solid rgba(255,77,109,0.35);
  padding:14px 0;
  position:relative;
  overflow:hidden;
}
.emergency-bar::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--crit), transparent);
  opacity:0.6;
}
.emergency-inner{
  display:flex;align-items:center;gap:18px;
}
@media (max-width:640px){.emergency-inner{gap:14px;flex-wrap:wrap}}

/* Pulsing indicator */
.emergency-pulse{
  position:relative;
  width:24px;height:24px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.pulse-dot{
  position:absolute;
  width:10px;height:10px;
  background:var(--crit);
  border-radius:50%;
  box-shadow:0 0 12px var(--crit), 0 0 24px rgba(255,77,109,0.5);
  z-index:2;
  animation:pulse 1.4s infinite;
}
.pulse-ring{
  position:absolute;
  width:10px;height:10px;
  border:1.5px solid var(--crit);
  border-radius:50%;
  z-index:1;
  animation:ringExpand 1.8s infinite;
}
@keyframes ringExpand{
  0%{width:10px;height:10px;opacity:0.8}
  100%{width:28px;height:28px;opacity:0}
}

.emergency-text{
  font-size:14px;line-height:1.5;
  color:var(--ink);
}
.emergency-text strong{
  color:#ffb3c1;font-weight:500;margin-right:4px;
}
.emergency-text a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(79,240,194,0.4);
  padding-bottom:1px;font-weight:500;
  transition:border-color 0.15s;
}
.emergency-text a:hover{border-bottom-color:var(--accent)}
.emergency-text code{
  font-family:var(--mono);font-size:12px;
  background:rgba(255,77,109,0.15);
  border:1px solid rgba(255,77,109,0.3);
  color:#ffb3c1;
  padding:1px 6px;
  border-radius:2px;
  letter-spacing:0.05em;
}

/* ============================================================
   ROUTER CARDS — 4 intent-based contact paths
   ============================================================ */
.contact-router{
  padding:110px 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
@media (max-width:768px){.contact-router{padding:72px 0}}

.router-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:24px;
  margin-top:56px;
}
@media (max-width:880px){.router-grid{grid-template-columns:1fr}}

.router-card{
  border:1px solid var(--line-bright);
  background:linear-gradient(145deg, var(--bg-1), var(--bg-2));
  padding:36px 32px;
  position:relative;
  transition:all 0.25s ease;
  display:flex;flex-direction:column;gap:14px;
}
.router-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.router-card-primary{
  border-color:var(--accent);
  background:linear-gradient(145deg, rgba(79,240,194,0.06), var(--bg-1));
  box-shadow:0 0 0 1px var(--accent), 0 20px 40px -15px rgba(79,240,194,0.2);
}
.router-card-primary:hover{
  box-shadow:0 0 0 1px var(--accent), 0 28px 50px -15px rgba(79,240,194,0.3);
}
.router-flag{
  position:absolute;top:-10px;right:20px;
  background:var(--accent);color:var(--bg-0);
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:4px 10px;letter-spacing:0.15em;
  text-transform:uppercase;border-radius:2px;
}

.router-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);color:var(--accent);
  background:rgba(79,240,194,0.05);
  border-radius:2px;
  margin-bottom:4px;
}
.router-icon svg{width:24px;height:24px}
.router-card-primary .router-icon{background:rgba(79,240,194,0.12)}

.router-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-mute);letter-spacing:0.25em;
  text-transform:uppercase;
}
.router-card h3{
  font-family:var(--display);font-weight:500;
  font-size:24px;line-height:1.2;letter-spacing:-0.02em;
  color:var(--ink);margin:0;
}
.router-card p{
  font-size:14.5px;line-height:1.6;
  color:var(--ink-dim);flex:1;
}
.router-cta{
  justify-content:center;
  margin-top:6px;
  cursor:pointer;border:none;
  font-family:var(--sans);
}
.router-card .btn-ghost.router-cta{
  border:1px solid var(--line-bright);
  justify-content:center;
}
.router-foot{
  font-family:var(--mono);font-size:11px;
  color:var(--ink-mute);letter-spacing:0.05em;
  padding-top:14px;border-top:1px dashed var(--line);
  line-height:1.5;
}
.router-foot a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px dotted rgba(79,240,194,0.4);
}
.router-foot a:hover{border-bottom-style:solid}

/* ============================================================
   GENERAL CONTACT FORM SECTION
   ============================================================ */
.contact-form-section{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-0);
}
@media (max-width:768px){.contact-form-section{padding:72px 0}}

.contact-form-grid{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;
  align-items:start;
}
@media (max-width:980px){.contact-form-grid{grid-template-columns:1fr;gap:48px}}

.contact-promise{
  margin-top:32px;
  display:flex;flex-direction:column;gap:20px;
}
.promise-item{
  display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding-top:20px;border-top:1px solid var(--line);
  align-items:start;
}
.promise-item:first-of-type{border-top:none;padding-top:0}
.promise-num{
  font-family:var(--mono);font-size:11px;
  color:var(--accent);letter-spacing:0.2em;
  padding-top:4px;
}
.promise-item h4{
  font-family:var(--display);font-weight:500;
  font-size:17px;letter-spacing:-0.015em;
  color:var(--ink);margin-bottom:4px;line-height:1.3;
}
.promise-item p{
  font-size:14px;line-height:1.55;color:var(--ink-dim);
}

/* Contact form wrap — terminal-styled */
.contact-form-wrap{
  border:1px solid var(--line-bright);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  overflow:hidden;
  position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.contact-form-wrap::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.6;
}

.contact-form-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:rgba(0,0,0,0.3);
  border-bottom:1px solid var(--line);
}
.form-head-label{
  font-family:var(--mono);font-size:11px;
  color:var(--ink-mute);letter-spacing:0.15em;
}
.form-head-status{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;
  color:var(--accent);letter-spacing:0.2em;
}
.form-head-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);
  animation:pulse 2s infinite;
}

.contact-form{
  padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
}
@media (max-width:600px){.contact-form{padding:24px 20px}}

/* Reuse form-field / form-label etc from the main styles.css modal */
.contact-submit{
  justify-content:center;
  width:100%;
  cursor:pointer;
  border:none;
  font-family:var(--sans);
  position:relative;
}
.contact-submit .submit-loading{display:none;letter-spacing:0.08em}
.contact-submit .submit-loading .dots{display:inline-block;width:18px;text-align:left}
.contact-submit.is-loading{pointer-events:none;opacity:0.9}
.contact-submit.is-loading .submit-label,
.contact-submit.is-loading .arrow{display:none}
.contact-submit.is-loading .submit-loading{display:inline-flex;align-items:center;gap:2px}
.contact-submit.is-loading .submit-loading .dots::after{
  content:"...";
  animation:dotCycle 1s steps(4) infinite;
}

/* Success state */
.contact-form-success{
  display:none;
  padding:48px 32px;
  text-align:center;
}
.contact-form-success.is-visible{display:block;animation:successFade 0.4s ease forwards;opacity:0}
@keyframes successFade{to{opacity:1}}
.contact-form-success .success-check{margin:0 auto 20px;display:block}
.contact-form-success h4{
  font-family:var(--display);font-weight:400;
  font-size:24px;letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:10px;
}
.contact-form-success p{
  color:var(--ink-dim);font-size:14.5px;line-height:1.6;
  max-width:380px;margin:0 auto;
}

/* ============================================================
   LOCATION & HOURS — 4-card info grid
   ============================================================ */
.contact-location{
  padding:90px 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
@media (max-width:768px){.contact-location{padding:64px 0}}

.location-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line-bright);
}
@media (max-width:880px){.location-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:540px){.location-grid{grid-template-columns:1fr}}

.location-card{
  background:var(--bg-1);
  padding:28px 24px;
  display:flex;flex-direction:column;gap:14px;
  transition:background 0.2s;
}
.location-card:hover{background:var(--bg-2)}

.loc-label{
  font-family:var(--mono);font-size:10px;
  color:var(--accent);letter-spacing:0.25em;
  text-transform:uppercase;
}
.loc-icon{
  color:var(--accent);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}
.loc-icon svg{width:24px;height:24px}
.loc-body{
  padding-top:12px;
  border-top:1px solid var(--line);
}
.loc-value{
  font-family:var(--display);font-weight:500;
  font-size:18px;letter-spacing:-0.015em;
  color:var(--ink);margin-bottom:8px;line-height:1.3;
}
.loc-sub{
  font-size:13px;color:var(--ink-dim);line-height:1.5;
}

/* ============================================================
   EMERGENCY BUTTON
   ============================================================ */
.emergency-inner{flex-wrap:wrap}
.emergency-text{flex:1;min-width:260px}
.emergency-btn{
  flex-shrink:0;
  background:var(--crit);
  color:#ffffff;
  border:1px solid var(--crit);
  padding:10px 18px;
  font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  border-radius:2px;
  transition:all 0.2s ease;
  box-shadow:0 0 0 1px var(--crit), 0 0 24px rgba(255,77,109,0.35);
}
.emergency-btn:hover{
  background:#ff6680;
  box-shadow:0 0 0 1px #ff6680, 0 0 40px rgba(255,77,109,0.55);
  transform:translateY(-1px);
}
.emergency-btn .arrow{transition:transform 0.2s}
.emergency-btn:hover .arrow{transform:translateX(3px)}
@media (max-width:640px){
  .emergency-btn{width:100%;justify-content:center;margin-top:4px}
}

/* ============================================================
   URGENT MODAL — red-themed priority incident channel
   ============================================================ */
.urgent-modal-backdrop.is-open{
  background:rgba(20,5,8,0.88);
}
.urgent-modal{
  border-color:var(--crit) !important;
  box-shadow:
    0 0 0 1px var(--crit),
    0 40px 120px -20px rgba(0,0,0,0.7),
    0 0 80px -10px rgba(255,77,109,0.45) !important;
}
.urgent-modal::before{
  background:linear-gradient(90deg, transparent, var(--crit), transparent) !important;
}
.urgent-scanline{
  background:linear-gradient(90deg, transparent 10%, var(--crit) 50%, transparent 90%) !important;
  box-shadow:0 0 12px var(--crit), 0 0 24px var(--crit) !important;
}

.urgent-boot{
  background:rgba(60,10,18,0.5) !important;
  border-bottom-color:rgba(255,77,109,0.35) !important;
}
.urgent-boot-dot{
  background:var(--crit) !important;
  box-shadow:0 0 10px var(--crit) !important;
}
.urgent-boot .boot-text{color:#ffb3c1 !important}
.urgent-cursor{color:var(--crit) !important}

.urgent-eyebrow{color:#ff8a9e !important}
.urgent-eyebrow::before{background:var(--crit) !important}

.urgent-modal h3{color:var(--ink)}
.urgent-modal h3 em{color:#ff8a9e !important}

/* Urgent form focus states */
.urgent-form .form-label em:not(.optional){color:#ff8a9e}
.urgent-form input:focus,
.urgent-form select:focus,
.urgent-form textarea:focus{
  border-color:#ff8a9e !important;
  box-shadow:0 0 0 3px rgba(255,77,109,0.15) !important;
}

/* Urgent submit button */
.urgent-submit{
  justify-content:center;
  width:100%;
  position:relative;
  cursor:pointer;
  border:none;
  font-family:var(--sans);font-weight:600;
  font-size:14px;letter-spacing:0.04em;
  text-transform:uppercase;
  padding:16px 28px;
  background:var(--crit);
  color:#ffffff;
  border-radius:2px;
  display:inline-flex;align-items:center;gap:10px;
  transition:all 0.2s;
  box-shadow:0 0 0 1px var(--crit), 0 0 32px rgba(255,77,109,0.35);
}
.urgent-submit:hover{
  background:#ff6680;
  box-shadow:0 0 0 1px #ff6680, 0 0 48px rgba(255,77,109,0.55);
}
.urgent-submit .submit-loading{display:none;letter-spacing:0.08em}
.urgent-submit .submit-loading .dots{display:inline-block;width:18px;text-align:left}
.urgent-submit.is-loading{pointer-events:none;opacity:0.9}
.urgent-submit.is-loading .submit-label,
.urgent-submit.is-loading .arrow{display:none}
.urgent-submit.is-loading .submit-loading{display:inline-flex;align-items:center;gap:2px}
.urgent-submit.is-loading .submit-loading .dots::after{
  content:"...";
  animation:dotCycle 1s steps(4) infinite;
}
.urgent-submit .arrow{transition:transform 0.2s}
.urgent-submit:hover .arrow{transform:translateX(3px)}

.urgent-disclaimer{color:var(--ink-dim) !important}
.urgent-disclaimer strong{color:#ff8a9e}

/* Urgent success state */
.urgent-success{display:none}
.urgent-success.is-visible{display:block;animation:successFade 0.4s ease forwards;opacity:0}
.urgent-received{text-align:center;padding:12px 0}
.received-banner{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px;margin-bottom:28px;
  background:rgba(79,240,194,0.1);
  border:1px solid rgba(79,240,194,0.4);
  border-radius:2px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.2em;
  color:var(--accent);
}
.received-pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:pulse 1.3s infinite;
}
.received-label{font-weight:500}
.urgent-success h4{
  font-family:var(--display);font-weight:400;
  font-size:28px;letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:14px;
}
.urgent-success p{
  color:var(--ink-dim);font-size:14.5px;line-height:1.65;
  max-width:440px;margin:0 auto 28px;
}
.urgent-success .btn-ghost{
  color:var(--accent);border-color:var(--accent);
  background:rgba(79,240,194,0.04);
}
.urgent-success .btn-ghost:hover{
  color:var(--bg-0);background:var(--accent);border-color:var(--accent);
}