/* =========================================
   CONTACT PAGE — TOKENS
========================================= */
.page-contact{
  --hero-img:url('../assets/imghero.png');
}

/* =========================================
   CONTACT PAGE — HERO
========================================= */
.page-contact .hero{
  background:
    linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    var(--hero-img) center/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:64px 18px 56px;
}

.page-contact .hero h1{
  color:#fff;
  margin-bottom:10px;
}

.page-contact .hero .lead{
  max-width:620px;
  margin:0 auto 8px;
  font-size:17px;
  line-height:1.5;
}

.page-contact .hero .hero-note{
  font-size:13.5px;
  opacity:.85;
  letter-spacing:.02em;
}

/* =========================================
   CONTACT LAYOUT
========================================= */
.contact-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
}

@media (max-width:900px){
  .contact-layout{
    grid-template-columns:1fr;
  }
}

/* =========================================
   BASE FORM STYLES
========================================= */
.quote-form{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media (max-width:640px){
  .form-grid{
    grid-template-columns:1fr;
  }
}

.quote-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.quote-form input,
.quote-form textarea{
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  font:inherit;
  background:#fff;
}

.quote-form textarea{
  min-height:110px;
}

.form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* =========================================
   CONTACT ASIDE
========================================= */
.contact-aside{
  display:grid;
  gap:18px;
}

.contact-aside .card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
}

/* =========================================
   CONTACT FOOTER (MATCHES SERVICES)
========================================= */
.page-contact .footer-band{
  margin-top:48px;
  background:linear-gradient(180deg, #29160e, #1f120c);
  border-top:1px solid rgba(255,255,255,.08);
}

.page-contact .footer-band .fb-grid{
  max-width:1120px;
  margin-inline:auto;
  padding:36px 18px 28px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:28px;
  text-align:center;
}

@media (max-width:900px){
  .page-contact .footer-band .fb-grid{
    grid-template-columns:1fr;
  }
}

.page-contact .footer-band h3{
  color:#fff;
  font-weight:700;
  margin:0 0 10px;
}

.page-contact .footer-band p,
.page-contact .footer-band a{
  color:#fff;
  font-size:15px;
  text-decoration:none;
}

.page-contact .footer-band a:hover{
  text-decoration:underline;
}

.page-contact .footer-band .muted{
  color:rgba(255,255,255,.75);
}

.page-contact .brand-mark{
  display:grid;
  justify-items:center;
  gap:8px;
}

.page-contact .brand-mark img{
  height:54px;
  filter:brightness(0) invert(1);
}

.page-contact .brand-mark .tagline{
  font-weight:600;
  color:rgba(255,255,255,.85);
}

.page-contact .site-footer{
  background:#120a06;
  border-top:1px solid rgba(255,255,255,.06);
}

.page-contact .site-footer p{
  color:rgba(255,255,255,.86);
  text-align:center;
  padding:14px 0;
  margin:0;
  font-size:14px;
}

/* =========================================
   REQUEST A QUOTE — SPLIT LAYOUT
========================================= */
#contact.quote-lite{
  padding:36px 0 48px;
  background:transparent;
}

#contact.quote-lite .quote-header{
  max-width:680px;
  margin-bottom:22px;
}

#contact.quote-lite .quote-header p{
  color:var(--muted);
}

#contact.quote-lite .quote-grid{
  display:grid;
  grid-template-columns:minmax(420px,1.05fr) minmax(320px,.9fr);
  gap:48px;
  align-items:start;
}

@media (max-width:900px){
  #contact.quote-lite .quote-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}

/* =========================================
   QUOTE FORM (PRIMARY)
========================================= */
#contact.quote-lite .quote-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
}

#contact.quote-lite .quote-form span{
  font-size:14px;
  font-weight:600;
  color:var(--heading);
}

#contact.quote-lite .q-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

@media (max-width:640px){
  #contact.quote-lite .q-row{
    grid-template-columns:1fr;
  }
}

#contact.quote-lite .q-full{
  margin-bottom:16px;
}

#contact.quote-lite .quote-form input,
#contact.quote-lite .quote-form textarea{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  background:#fff;
}

/* =========================================
   TEXTAREA — DEFINITIVE FIX (NO INNER LINE)
========================================= */
#contact.quote-lite .quote-form textarea{
  min-height:100px;
  resize:vertical;

  /* kill browser inset line */
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  background-image:none !important;
  background-clip:padding-box;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}

#contact.quote-lite .quote-form input:focus,
#contact.quote-lite .quote-form textarea:focus{
  border-color:var(--heading);
  box-shadow:0 0 0 3px rgba(58,23,12,.12);
}

/* =========================================
   GDPR CHECKBOX
========================================= */
#contact.quote-lite .quote-form .q-check{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-size:14px;
  color:var(--muted);
}

#contact.quote-lite .quote-form .q-check input{
  margin:0;
  flex:0 0 auto;
}

#contact.quote-lite .quote-form .q-check span{
  margin:0;
  line-height:1.4;
}

/* =========================================
   CALM INFO PANEL
========================================= */
.calm-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
}

.calm-panel h3{
  margin:0 0 14px;
  font-size:18px;
  font-weight:700;
  color:var(--heading);
}

.calm-steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:14px;
}

.calm-steps li{
  display:grid;
  gap:2px;
}

.calm-steps strong{
  font-size:14.5px;
  font-weight:700;
  color:#111;
}

.calm-steps span{
  font-size:14px;
  color:var(--muted);
}

.calm-divider{
  height:1px;
  background:var(--border);
  margin:18px 0 14px;
}

.calm-note{
  font-size:14px;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}

@media (max-width:900px){
  .calm-panel{
    padding:20px;
  }
}