/* ============================================================
   AXEON STUDIO — CONTACT PAGE STYLES
   css/contact.css
   ============================================================ */

/* HERO */
.hero{min-height:72vh;background:var(--bk);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
#contact-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.hero-left{display:flex;flex-direction:column;justify-content:flex-end;padding:0 60px 80px;position:relative;z-index:2}
.hero-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bl);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:'';width:20px;height:1px;background:var(--bl)}
.hero-title{font-family:var(--fd);font-size:clamp(72px,10vw,145px);line-height:.88;color:#f2f0eb;margin-bottom:22px}
.hero-title em{color:var(--bl);font-style:normal}
.hero-sub{font-size:15px;line-height:1.85;color:rgba(242,240,235,.42);max-width:380px}
.hero-sub strong{color:rgba(242,240,235,.75);font-weight:400}
.hero-right{border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:flex-end;padding:60px;position:relative;z-index:2}
.hero-info-stack{display:flex;flex-direction:column;gap:0}
.info-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.07);padding:18px 0}
.info-label{font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,240,235,.25)}
.info-val{font-size:14px;color:rgba(242,240,235,.65);font-weight:300}
.info-val a{color:rgba(242,240,235,.65);text-decoration:none;transition:color .2s}
.info-val a:hover{color:var(--bl)}
.resp-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.1);padding:10px 16px;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,240,235,.45);margin-top:28px;width:fit-content}
.resp-dot{width:6px;height:6px;background:#16a34a;border-radius:50%;animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* FORM SECTION */
.form-section{background:var(--bg);padding:100px 60px}
.form-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.form-left{}
.form-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bl);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.form-eyebrow::before{content:'';width:20px;height:1px;background:var(--bl)}
.form-title{font-family:var(--fd);font-size:clamp(40px,5vw,72px);line-height:.93;color:var(--bk);margin-bottom:22px}
.form-title em{color:var(--bl);font-style:normal}
.form-desc{font-size:15px;line-height:1.9;color:var(--bkl);margin-bottom:36px}
.form-desc strong{color:var(--bkm);font-weight:500}
.form-steps{display:flex;flex-direction:column;gap:0}
.fstep{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--br)}
.fstep:last-child{border-bottom:none}
.fstep-num{font-family:var(--fd);font-size:14px;color:var(--bl);line-height:1;padding-top:2px;flex-shrink:0;width:20px}
.fstep-body{}
.fstep-title{font-size:14px;color:var(--bkm);font-weight:400;margin-bottom:3px}
.fstep-desc{font-size:12px;color:var(--bkl);line-height:1.6}

/* FORM */
.form-right{}
.form-wrap{background:#fff;border:1px solid var(--br);padding:44px 40px}
.form-heading{font-family:var(--fd);font-size:22px;color:var(--bk);margin-bottom:32px;letter-spacing:.01em}
.field-group{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field.full{margin-bottom:16px}
.field label{font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bkl)}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--br);padding:12px 14px;font-family:var(--fb);font-size:14px;font-weight:300;color:var(--bk);outline:none;transition:border-color .2s;-webkit-appearance:none;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bl)}
.field input::placeholder,.field textarea::placeholder{color:rgba(13,13,13,.3)}
.field textarea{height:120px;resize:vertical;min-height:80px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5a5a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.interest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.interest-btn{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--bkl);border:1px solid var(--br);background:var(--bg);padding:10px 14px;text-align:center;transition:all .2s;position:relative}
.interest-btn.sel{background:var(--blp);border-color:rgba(26,74,255,.4);color:var(--bl)}
.interest-label{font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bkl);margin-bottom:8px}
.submit-btn{width:100%;background:var(--bk);color:#f2f0eb;border:none;font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:16px 28px;transition:background .25s;position:relative;overflow:hidden}
.submit-btn:hover{background:var(--bl)}
.submit-btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--bl);transition:left .3s;z-index:0}
.submit-btn:hover::after{left:0}
.submit-btn span{position:relative;z-index:1}
.form-note{font-family:var(--fm);font-size:9px;letter-spacing:.08em;color:var(--bkl);margin-top:12px;text-align:center;line-height:1.7}

/* SUCCESS STATE */
.form-success{display:none;text-align:center;padding:60px 40px}
.success-icon{width:52px;height:52px;background:var(--blp);border:1.5px solid rgba(26,74,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px}
.success-title{font-family:var(--fd);font-size:32px;color:var(--bk);margin-bottom:10px}
.success-body { font-size: 14px; line-height: 1.85; color: var(--bkl); }

/* FOOTER */

/* ============================================================
   RESPONSIVE — CONTACT (contact.css)
   ============================================================ */

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 80px 32px 56px; }
  .hero-right { border-left: none; border-top: 1px solid rgba(255,255,255,.06); padding: 40px 32px; }
  .form-section { padding: 72px 32px; }
  .form-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .hero-left { padding: 72px 24px 48px; }
  .hero-right { padding: 32px 24px; }
  .hero-title { font-size: clamp(54px, 13vw, 90px); }
  .form-section { padding: 56px 24px; }
  .form-wrap { padding: 32px 24px; }
  .field-group { grid-template-columns: 1fr; }
  .interest-grid { grid-template-columns: 1fr 1fr; }
  .faq-mini { padding: 60px 32px; }
  .faq-mini-grid { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 480px) {
  .hero-left { padding: 64px 20px 44px; }
  .hero-right { padding: 24px 20px; }
  .hero-title { font-size: clamp(48px, 14vw, 76px); }
  .form-section { padding: 48px 20px; }
  .form-wrap { padding: 28px 20px; }
  .interest-grid { grid-template-columns: 1fr; }
  .interest-btn { padding: 14px 18px; font-size: 10px; } /* Larger touch targets for mobile */
  .faq-mini { padding: 48px 24px; }
}

/* ============================================================
   CONTACT PAGE — LOCAL, REMOTE, TESTIMONIALS, FAQ-MINI RESTYLE
   ============================================================ */

/* ── LOCAL ADVANTAGE ── */
.local-section { background: var(--bg2); border-top: 1px solid var(--br); }

.local-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 52px;
}

.local-item {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--br);
  padding: 36px 32px;
  transition: background .25s;
  position: relative;
  overflow: hidden;
}
.local-item:hover { background: rgba(26,74,255,.02); }
.local-item::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--bl);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s;
}
.local-item:hover::after { transform: scaleY(1); }

.local-num {
  font-family: var(--fd);
  font-size: 42px;
  line-height: 1;
  color: rgba(26, 74, 255, .12);
  flex-shrink: 0;
  width: 52px;
  padding-top: 4px;
}

.local-name {
  font-family: var(--fd);
  font-size: 22px;
  color: var(--bk);
  letter-spacing: .01em;
  margin-bottom: 10px;
  line-height: 1;
}

.local-desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--bkl);
}

/* ── REMOTE SECTION ── */
.remote-section {
  background: var(--bk);
  border-top: 1px solid rgba(255,255,255,.04);
}

.remote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.remote-desc {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(242,240,235,.44);
  margin-top: 24px;
  max-width: 440px;
}
.remote-desc strong { color: rgba(242,240,235,.75); font-weight: 400; }

.remote-features {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.remote-feat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 18px 0;
}
.remote-feat:first-child { border-top: 1px solid rgba(255,255,255,.06); }

.rf-label {
  font-family: var(--fd);
  font-size: 17px;
  color: #f2f0eb;
  flex-shrink: 0;
  letter-spacing: .01em;
}

.rf-val {
  font-size: 13px;
  color: rgba(242,240,235,.38);
  text-align: right;
  line-height: 1.5;
  max-width: 220px;
}

.remote-stat {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 22px 24px;
  background: rgba(26,74,255,.1);
  border: 1px solid rgba(26,74,255,.25);
}

.remote-stat-num {
  font-family: var(--fd);
  font-size: 52px;
  line-height: 1;
  color: var(--bl);
  flex-shrink: 0;
}

.remote-stat-label {
  font-size: 13px;
  color: rgba(242,240,235,.5);
  line-height: 1.65;
}

/* ── CONTACT TESTIMONIALS ── */
.contact-testi-section { background: var(--bg); border-top: 1px solid var(--br); }

.contact-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 52px;
}

.ct-card {
  background: #fff;
  border: 1px solid var(--br);
  padding: 36px 32px 40px;
  position: relative;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.ct-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
}
.ct-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--bl);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}
.ct-card:hover::before { transform: scaleX(1); }

.ct-qmark {
  font-family: var(--fd);
  font-size: 72px;
  line-height: .65;
  color: rgba(26,74,255,.1);
  margin-bottom: 16px;
  display: block;
}

.ct-quote {
  font-size: 15px;
  line-height: 1.8;
  color: var(--bkm);
  font-style: italic;
  flex: 1;
  margin-bottom: 28px;
  border: none;
  padding: 0;
}

.ct-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--br);
  padding-top: 20px;
}

.ct-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blp);
  border: 1.5px solid rgba(26,74,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 14px;
  color: var(--bl);
  flex-shrink: 0;
}

.ct-name {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bk);
  margin-bottom: 3px;
}

.ct-role {
  font-size: 12px;
  color: var(--bkl);
}

/* ── FAQ MINI — proper spacing ── */
.faq-mini {
  background: var(--bg2);
  border-top: 1px solid var(--br);
  padding: 100px 60px;
}
/* sec-hdr inside faq-mini */
.faq-mini .sec-hdr { margin-bottom: 44px; }

.faq-mini-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
}

.faq-mini-item {
  background: #fff;
  border: 1px solid var(--br);
  padding: 32px 28px 36px;
  transition: background .2s;
}
.faq-mini-item:hover { background: rgba(26,74,255,.02); }

.faq-mini-q {
  font-family: var(--fd);
  font-size: 20px;
  color: var(--bk);
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: .01em;
}

.faq-mini-a {
  font-size: 14px;
  line-height: 1.85;
  color: var(--bkl);
}

/* ── RESPONSIVE — NEW SECTIONS ── */
@media (max-width: 1024px) {
  .local-grid { grid-template-columns: 1fr; }
  .remote-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-testi-grid { grid-template-columns: 1fr 1fr; }
  .faq-mini-grid { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 768px) {
  .local-item { padding: 28px 24px; gap: 20px; }
  .local-num { font-size: 32px; width: 40px; }
  .remote-desc { max-width: 100%; }
  .rf-label { font-size: 15px; }
  .rf-val { max-width: 160px; }
  .contact-testi-grid { grid-template-columns: 1fr; }
  .faq-mini .sec-hdr { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .local-item { flex-direction: column; gap: 10px; padding: 24px 20px; }
  .local-num { font-size: 26px; width: auto; }
  .remote-feat { flex-direction: column; gap: 6px; }
  .rf-val { text-align: left; max-width: 100%; }
  .remote-stat { flex-direction: column; gap: 10px; text-align: center; }
  .ct-card { padding: 28px 22px 32px; }
  .faq-mini-item { padding: 24px 20px; }
}

/* ── 1200px: large laptop tightening ── */
@media (max-width: 1200px) {
  .hero          { grid-template-columns: 1fr; min-height: auto; }
  .hero-left     { padding: 80px 40px 64px; }
  .hero-right    { border-left: none; border-top: 1px solid rgba(255,255,255,.08); padding: 40px; }
  .form-section .section-pad  { padding: 80px 40px; }
  .local-section .section-pad { padding: 80px 40px; }
  .remote-section .section-pad { padding: 80px 40px; }
  .faq-mini      { padding: 80px 40px; }
}