/* ==========================================================
   contact.css — page-specific styles for contact.html
   Extracted from inline <style> — see site.css for shared rules
   ========================================================== */

/* ══════════════════════════════════════════
   CONTACT PAGE — Dhuleva Group
══════════════════════════════════════════ */

/* ── HERO ── */
.ct-hero{
  position:relative; min-height:70svh;
  background:var(--char); overflow:hidden;
  display:flex; align-items:stretch;
  padding-top:var(--nav-h);
}
.ct-hero-bg{
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=2000&q=80');
  background-size:cover; background-position:center 60%;
  /* opacity:.22; */
  animation:ctKen 20s ease-in-out infinite alternate;
}
@keyframes ctKen{from{transform:scale(1)}to{transform:scale(1.06)}}
.ct-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(37,37,37,.15) 0%,rgba(37,37,37,.9) 100%);
}
/* single column — headline top, strip bottom */
.ct-hero-content{
  position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:clamp(56px,8vw,96px) clamp(28px,6vw,96px) clamp(48px,6vw,72px);
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(40px,6vw,64px);
}
.ct-hero-top{
  display:flex; flex-direction:column;
}
.ct-hero-kicker{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px; display:flex; align-items:center; gap:12px;
}
.ct-hero-kicker::before{content:''; width:28px; height:1px; background:var(--gold)}
.ct-hero-h{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(2.4rem,5vw,5rem); line-height:1.0; letter-spacing:-.03em;
  margin:0;
}
.ct-hero-h em{color:var(--gold-soft); font-style:normal}
/* quick contact strip — horizontal */
.ct-hero-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.ct-quick{
  display:flex; align-items:center; gap:14px; padding:18px 22px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; text-decoration:none; color:inherit;
  transition:all .3s var(--ease);
}
.ct-quick:hover{background:rgba(207,173,102,.1); border-color:rgba(207,173,102,.35); transform:translateY(-3px)}
.ct-quick-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:rgba(207,173,102,.12); border:1px solid rgba(207,173,102,.2);
  display:flex; align-items:center; justify-content:center;
}
.ct-quick-icon svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.5px;fill:none}
.ct-quick-label{font-family:var(--sans); font-weight:700; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:4px}
.ct-quick-val{font-size:.9rem; font-weight:500; color:rgba(255,255,255,.9)}

/* ── MAIN CONTACT AREA ── */
.ct-main{
  background:var(--ivory); padding:0 0 clamp(56px,8vw,96px);
}
.ct-main-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,6vw,96px);
  display:grid; grid-template-columns:1fr 420px; gap:clamp(40px,6vw,80px);
  align-items:start; transform:translateY(-56px);
}

/* ── FORM CARD ── */
.ct-form-card{
  background:var(--white); border-radius:24px;
  box-shadow:0 24px 64px rgba(37,37,37,.12);
  padding:clamp(32px,4vw,52px); grid-column:1;
}
.ct-form-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:36px;
}
.ct-form-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.6rem,2.2vw,2.4rem); line-height:1.15; letter-spacing:-.02em;
}
.ct-form-h em{color:var(--gold); font-style:normal}
.ct-form-resp{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:right; flex-shrink:0; margin-top:4px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.ct-dot{width:6px;height:6px;border-radius:50%;background:#22a06b;flex-shrink:0;animation:ctPulse 2s ease-in-out infinite}
@keyframes ctPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* Interest tabs */
.ct-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px}
.ct-tab{
  height:34px; padding:0 16px; border-radius:9999px;
  border:1.5px solid var(--hairline); background:transparent;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:var(--body); cursor:pointer; transition:all .2s var(--ease);
}
.ct-tab.active{background:var(--gold); border-color:var(--gold); color:var(--white)}
.ct-tab:hover:not(.active){border-color:var(--gold-soft); color:var(--ink)}

/* Form fields */
.ct-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ct-field{margin-bottom:16px}
.ct-label{display:block; font-size:.76rem; font-weight:600; color:var(--ink); margin-bottom:6px; letter-spacing:.02em}
.ct-input{
  width:100%; height:50px; padding:0 16px;
  border:1.5px solid var(--hairline); border-radius:12px;
  font-family:var(--sans); font-size:.92rem; color:var(--ink); background:var(--white);
  outline:none; transition:border .2s, box-shadow .2s; box-sizing:border-box;
}
.ct-input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(207,173,102,.1)}
.ct-input::placeholder{color:var(--muted)}
.ct-select{
  width:100%; height:50px; padding:0 16px;
  border:1.5px solid var(--hairline); border-radius:12px;
  font-family:var(--sans); font-size:.92rem; color:var(--ink); background:var(--white);
  appearance:none; outline:none; cursor:pointer;
  transition:border .2s, box-shadow .2s; box-sizing:border-box;
  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='%239F9F9E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.ct-select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(207,173,102,.1)}
.ct-textarea{
  width:100%; height:120px; padding:14px 16px; resize:vertical;
  border:1.5px solid var(--hairline); border-radius:12px;
  font-family:var(--sans); font-size:.92rem; color:var(--ink); background:var(--white);
  outline:none; transition:border .2s, box-shadow .2s; box-sizing:border-box; line-height:1.6;
}
.ct-textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(207,173,102,.1)}
.ct-textarea::placeholder{color:var(--muted)}
.ct-field-error{
  display:none;
  margin-top:6px;
  color:#b42318;
  font-size:12px;
  line-height:1.45;
}
.ct-submit{
  width:100%; height:54px; background:var(--black); color:var(--white);
  border:none; border-radius:12px; font-family:var(--sans); font-size:.95rem; font-weight:600;
  cursor:pointer; transition:all .3s var(--ease); margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.ct-submit:hover{background:var(--gold); color:var(--black)}
.ct-submit svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.ct-form-note{text-align:center; margin-top:14px; font-size:.74rem; color:var(--muted); line-height:1.5}
.ct-form-success{
  display:none; text-align:center; padding:36px 0;
}
.ct-success-icon{
  width:64px;height:64px;border-radius:50%;background:rgba(108, 207, 102,.1);
  border:1.5px solid #7bcf66;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.ct-success-icon svg{width:28px;height:28px;stroke:#80d06b;stroke-width:1.5px;fill:none}
.ct-success-h{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-bottom:8px}
.ct-success-text{font-size:.9rem;color:var(--muted);line-height:1.6}

/* ── SIDEBAR INFO ── */
.ct-sidebar{display:flex; flex-direction:column; gap:0;
  background:var(--white); border:1px solid var(--hairline); border-radius:20px;
  padding:clamp(24px,3vw,36px); box-shadow:0 4px 24px rgba(37,37,37,.07);}
.ct-info-block{
  padding:clamp(20px,2.5vw,28px) 0;
  border-bottom:1px solid var(--hairline);
}
.ct-info-block:first-child{padding-top:0}
.ct-info-label{
  font-family:var(--sans); font-weight:700; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.ct-info-label::before{content:''; width:14px; height:1px; background:var(--gold); opacity:.7}
.ct-info-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.2; margin-bottom:8px;
}
.ct-info-val{
  font-size:clamp(.85rem,1vw,.95rem); color:var(--body); line-height:1.7;
}
.ct-info-val a{color:var(--body); transition:color .2s}
.ct-info-val a:hover{color:var(--gold)}
.ct-info-hours{
  display:flex; flex-direction:column; gap:4px; margin-top:6px;
}
.ct-hour-row{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.84rem; color:var(--body);
}
.ct-hour-row span:first-child{color:var(--muted)}

/* Socials */
.ct-socials{
  display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;
}
.ct-social{
  width:40px; height:40px; border-radius:10px;
  border:1.5px solid var(--hairline); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:all .25s var(--ease); text-decoration:none;
}
.ct-social:hover{border-color:var(--gold); background:rgba(207,173,102,.07)}
.ct-social svg{width:16px;height:16px;stroke:var(--ink-soft);stroke-width:1.5px;fill:none}
.ct-social:hover svg{stroke:var(--gold-deep)}
.ct-social i{
  font-size:16px;
  line-height:1;
  color:var(--ink-soft);
}
.ct-social:hover i{color:var(--gold-deep)}

/* ── MAP SECTION ── */
.ct-map-sec{
  background:var(--white); padding:0 0 clamp(80px,10vw,120px);
}
.ct-map-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,6vw,96px)}
.ct-map-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:36px; flex-wrap:wrap;
}
.ct-sec-kicker{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:12px; display:flex; align-items:center; gap:10px;
}
.ct-sec-kicker::before{content:''; width:22px; height:1px; background:var(--gold)}
.ct-sec-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.8rem,3vw,3rem); line-height:1.1; letter-spacing:-.02em;
}
.ct-sec-h em{color:var(--gold); font-style:normal}

/* Office cards */
.ct-offices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px;
}
.ct-office{
  background:var(--ivory); border:1px solid var(--hairline); border-radius:16px;
  padding:clamp(20px,2.5vw,28px); transition:all .3s var(--ease);
  cursor:default;
}
.ct-office.active,.ct-office:hover{
  background:var(--white); border-color:var(--gold-soft);
  box-shadow:0 8px 28px rgba(37,37,37,.09); transform:translateY(-3px);
}
.ct-office-tag{
  font-family:var(--sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:10px; display:inline-flex; align-items:center; gap:6px;
}
.ct-office-tag::before{content:''; width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
.ct-office-name{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.2; margin-bottom:8px;
}
.ct-office-addr{font-size:.84rem; color:var(--body); line-height:1.65; margin-bottom:10px}
.ct-office-phone{
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.08em; color:var(--gold-deep);
  display:flex; align-items:center; gap:6px; text-decoration:none;
  transition:color .2s;
}
.ct-office-phone:hover{color:var(--gold)}
.ct-office-phone svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.5px;fill:none}

/* Map container */
.ct-map-container{
  width:100%; height:clamp(320px,40vw,520px); border-radius:20px; overflow:hidden;
  position:relative; background:var(--char);
  background-image:url('https://images.unsplash.com/photo-1524230572899-a752b3835840?auto=format&fit=crop&w=1600&q=80');
  background-size:cover; background-position:center;
}
.ct-map-veil{
  position:absolute; inset:0; background:rgba(37,37,37,.52);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
}
.ct-map-pin-wrap{
  width:60px; height:60px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 12px rgba(207,173,102,.18), 0 0 0 24px rgba(207,173,102,.07);
  animation:mapPulse 2.5s ease-in-out infinite;
}
@keyframes mapPulse{0%,100%{box-shadow:0 0 0 8px rgba(207,173,102,.2),0 0 0 20px rgba(207,173,102,.07)}50%{box-shadow:0 0 0 16px rgba(207,173,102,.15),0 0 0 32px rgba(207,173,102,.04)}}
.ct-map-pin-wrap svg{width:24px;height:24px;stroke:var(--black);stroke-width:2px;fill:none}
.ct-map-label{
  font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.75); background:rgba(37,37,37,.65);
  padding:7px 16px; border-radius:9999px; backdrop-filter:blur(6px);
}
.ct-map-open{
  font-family:var(--sans); font-size:.84rem; font-weight:500; color:var(--gold);
  text-decoration:none; display:flex; align-items:center; gap:6px;
  transition:gap .2s var(--ease);
}
.ct-map-open:hover{gap:10px}
.ct-map-open svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ── FAQ ── */
.ct-faq-sec{
  background:var(--ivory); padding:clamp(80px,10vw,120px) 0;
}
.ct-faq-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,6vw,96px);
  display:grid; grid-template-columns:320px 1fr; gap:clamp(56px,8vw,100px); align-items:start;
}
.ct-faq-left{position:sticky; top:calc(var(--nav-h) + 32px)}
.ct-faq-sub{font-size:clamp(.88rem,1vw,.95rem); color:var(--body); line-height:1.75; margin-top:16px}

.ct-faq-list{display:flex;flex-direction:column;gap:0}
.ct-faq-item{border-bottom:1px solid var(--hairline)}
.ct-faq-item:first-child{border-top:1px solid var(--hairline)}
.ct-faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:clamp(16px,2.2vw,22px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.3;letter-spacing:-.01em;
  transition:color .2s;
}
.ct-faq-q:hover,.ct-faq-q.open{color:var(--gold-deep)}
.ct-faq-icon{
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .3s var(--ease);
}
.ct-faq-q.open .ct-faq-icon{background:var(--gold);border-color:var(--gold);transform:rotate(45deg)}
.ct-faq-icon svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.ct-faq-q.open .ct-faq-icon svg{stroke:var(--black)}
.ct-faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .4s var(--ease);
  font-size:clamp(.86rem,.98vw,.93rem);color:var(--body);line-height:1.78;
}
.ct-faq-a.open{max-height:280px;padding-bottom:18px}

/* ── CTA BAND ── */
.ct-cta{
  background:var(--black); padding:clamp(72px,9vw,108px) clamp(28px,6vw,96px);
  text-align:center; position:relative; overflow:hidden;
}
.ct-cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 110%,rgba(207,173,102,.07),transparent);
  pointer-events:none;
}
.ct-cta-h{
  font-family:var(--serif);font-weight:400;color:var(--white);
  font-size:clamp(2rem,4vw,4.5rem);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:18px; position:relative; z-index:2;
}
.ct-cta-h em{color:var(--gold-soft);font-style:normal}
.ct-cta-sub{
  font-size:clamp(.9rem,1.1vw,1.05rem);color:rgba(255,255,255,.5);
  max-width:520px;margin:0 auto 36px;line-height:1.75;
  position:relative; z-index:2;
}
.ct-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.ct-btn-outline{
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;
  border-radius:9999px;border:1.5px solid rgba(255,255,255,.25);color:var(--white);
  font-family:var(--sans);font-size:.9rem;font-weight:600;
  transition:all .3s var(--ease);background:transparent;cursor:pointer;
  text-decoration:none;
}
.ct-btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.ct-btn-outline svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ── Office cards ── */
.ct-offices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px;
  opacity:1 !important;
}
.ct-office{
  background:var(--ivory); border:1px solid var(--hairline); border-radius:16px;
  padding:clamp(20px,2.5vw,28px); transition:all .3s var(--ease);
}
.ct-office-tag{
  font-family:var(--sans); font-weight:700; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:10px; display:inline-flex; align-items:center; gap:6px;
}
/* ── Map ── */
.ct-map-sec{background:var(--white); padding:0 0 clamp(80px,10vw,120px)}
.ct-map-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap}
.ct-map-pin-wrap{
  width:60px; height:60px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 12px rgba(207,173,102,.18),0 0 0 24px rgba(207,173,102,.07);
  animation:mapPulse 2.5s ease-in-out infinite;
}
/* @keyframes mapPulse + .ct-map-pin-wrap svg + .ct-map-label already defined above — duplicate removed */

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .ct-faq-inner{grid-template-columns:1fr}
  .ct-faq-left{position:static}
}
@media(max-width:980px){
  .ct-hero-strip{grid-template-columns:1fr}
  .ct-main-inner{grid-template-columns:1fr; transform:translateY(-40px)}
  .ct-offices{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .ct-row{grid-template-columns:1fr}
  .ct-offices{grid-template-columns:1fr}
  .ct-main-inner{transform:translateY(-28px); gap:clamp(24px,4vw,40px)}
  .ct-form-top{flex-direction:column; gap:12px}
  .ct-cta-btns{flex-direction:column; align-items:center}
  .ct-map-head{flex-direction:column; align-items:flex-start}
  .ct-hero-h{font-size:2.1rem}
}
@media(max-width:380px){
  .ct-hero-h{font-size:1.9rem}
  .ct-tabs{gap:6px}
  .ct-tab{height:30px; padding:0 12px; font-size:.78rem}
}
@media(max-width:320px){
  .ct-hero-h{font-size:1.7rem}
}