/* ============================================
   JHA INTERIOR — CONTACT PAGE — SELF CONTAINED
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ===== VARIABLES ===== */
:root {
  --bg:        #0d0d0d;
  --bg2:       #141414;
  --bg3:       #1a1a1a;
  --gold:      #c9a84c;
  --gold2:     #e2c97e;
  --white:     #ffffff;
  --offwhite:  #f0ece4;
  --grey:      #aaaaaa;
  --grey2:     #666666;
  --grey3:     #2a2a2a;
  --border:    rgba(201,168,76,0.2);
  --borderS:   rgba(255,255,255,0.07);
  --fh:        'Cormorant Garamond', serif;
  --fb:        'Jost', sans-serif;
  --ease:      0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  --fast:      0.2s ease;
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--offwhite);font-family:var(--fb);font-weight:300;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{font-family:var(--fh);font-weight:500;line-height:1.15;color:var(--white);}
h1{font-size:clamp(2.4rem,5vw,5rem);}
h2{font-size:clamp(1.6rem,3vw,2.6rem);}
p{color:var(--grey);font-weight:300;line-height:1.8;}
a{text-decoration:none;color:inherit;transition:var(--fast);}
ul{list-style:none;}
img{display:block;width:100%;object-fit:cover;}

/* ===== LAYOUT ===== */
.container{max-width:1280px;margin:0 auto;padding:0 40px;}

/* ===== SHARED BITS ===== */
.gold-label{font-family:var(--fb);font-size:0.72rem;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px;}
.divider{width:56px;height:1px;background:var(--gold);margin:18px 0;}
.divider-center{margin:18px auto;}
.section-subtitle{color:var(--grey);font-weight:300;max-width:580px;font-size:0.97rem;}

/* ===== NAVBAR ===== */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--ease);}
.navbar.scrolled{background:rgba(13,13,13,0.96);backdrop-filter:blur(20px);padding:13px 40px;border-bottom:1px solid var(--borderS);}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.nav-logo-img{height:44px;width:auto;object-fit:contain;mix-blend-mode:lighten;filter:brightness(1.15);}
#name{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--fh);font-size:1.3rem;font-weight:500;letter-spacing:0.08em;color:var(--white);white-space:nowrap;pointer-events:auto;}
#name span{color:var(--gold);}
.nav-links{display:flex;align-items:center;gap:40px;}
.nav-links a{font-size:0.77rem;font-weight:400;letter-spacing:0.15em;text-transform:uppercase;color:var(--grey);position:relative;transition:color var(--fast);}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width var(--ease);}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:1002;flex-shrink:0;}
.nav-hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:var(--ease);}
.nav-mobile{display:none;position:fixed;inset:0;background:rgba(13,13,13,0.98);z-index:1001;flex-direction:column;align-items:center;justify-content:center;gap:28px;}
.nav-mobile.open{display:flex!important;}
.nav-mobile a{font-family:var(--fh);font-size:2.2rem;font-weight:400;color:var(--white);transition:color var(--fast);}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--gold);}
.nav-mobile-close{position:absolute;top:20px;right:24px;font-size:2.2rem;color:var(--grey);cursor:pointer;background:none;border:none;line-height:1;padding:8px 12px;transition:color 0.2s;}
.nav-mobile-close:hover{color:var(--gold);}

/* ===== PAGE HERO ===== */
.page-hero{padding:155px 0 75px;text-align:center;background:var(--bg2);border-bottom:1px solid var(--borderS);}

/* ===== CONTACT SECTION ===== */
.contact-section{padding:90px 0 100px;}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:64px;
  align-items:start;
}

/* --- INFO COL --- */
.contact-info h2{margin-bottom:4px;}

.info-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px;}
.info-icon{
  width:42px;height:42px;flex-shrink:0;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:0.88rem;
  transition:background var(--fast),border-color var(--fast);
  margin-top:2px;
}
.info-item:hover .info-icon{background:var(--gold);color:var(--bg);border-color:var(--gold);}
.info-label{
  display:block;font-size:0.68rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px;
}
.info-text p{font-size:0.9rem;color:var(--grey);line-height:1.65;}
.info-text a{color:var(--grey);transition:color var(--fast);}
.info-text a:hover{color:var(--gold);}

.contact-map{margin-top:28px;border:1px solid var(--borderS);overflow:hidden;filter:grayscale(50%) brightness(0.6);transition:filter 0.4s;}
.contact-map:hover{filter:grayscale(20%) brightness(0.75);}
.contact-map iframe{display:block;width:100%;height:250px;border:0;}

/* --- FORM CARD --- */
.form-card{
  background:var(--bg2);
  border:1px solid var(--borderS);
  padding:44px 40px 40px;
}

.form-title{margin-bottom:4px;}

/* fields */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;}
.field:last-of-type{margin-bottom:0;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;}

.field label{
  font-size:0.68rem;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--grey);
}
.star{color:var(--gold);}

.field input,
.field select,
.field textarea{
  background:var(--bg3);
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.1);
  color:var(--offwhite);
  font-family:var(--fb);
  font-size:0.92rem;
  font-weight:300;
  padding:13px 14px;
  width:100%;
  outline:none;
  transition:border-bottom-color var(--fast),background var(--fast);
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-bottom-color:var(--gold);
  background:#202020;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--grey2);font-weight:300;}

/* select arrow */
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23c9a84c' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-color:var(--bg3);
  padding-right:40px;
  color:var(--grey2);
}
.field select.picked{color:var(--offwhite);}

/* textarea */
.field textarea{resize:vertical;min-height:130px;line-height:1.7;}

/* submit */
.submit-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:15px 24px;margin-top:26px;
  background:var(--gold);color:var(--bg);
  font-family:var(--fb);font-size:0.8rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  border:none;cursor:pointer;outline:none;
  transition:background var(--fast),transform var(--fast);
}
.submit-btn:hover{background:var(--gold2);transform:translateY(-2px);}
.submit-btn:active{transform:translateY(0);}
.submit-btn i{transition:transform 0.2s;}
.submit-btn:hover i{transform:translateX(4px);}

/* success */
.success-msg{
  display:none;align-items:center;gap:12px;
  padding:16px 18px;margin-top:18px;
  background:rgba(201,168,76,0.07);
  border:1px solid rgba(201,168,76,0.25);
  color:var(--gold);font-size:0.86rem;
}
.success-msg i{font-size:1.1rem;flex-shrink:0;}

/* ===== FOOTER ===== */
.footer{background:#1a1a1a;border-top:1px solid var(--borderS);padding:76px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:56px;padding-bottom:56px;border-bottom:1px solid var(--borderS);}
.footer-logo-img{height:58px;width:auto;object-fit:contain;mix-blend-mode:lighten;filter:brightness(1.15);margin-bottom:14px;display:block;}
.footer-tagline{color:#bbb;font-size:0.88rem;line-height:1.7;margin-bottom:22px;}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{width:42px;height:42px;border:1px solid rgba(201,168,76,0.45);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1.1rem;transition:var(--ease);}
.footer-socials a:hover{background:var(--gold);color:var(--bg);}
.footer-heading{font-family:var(--fb);font-size:0.72rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:#fff;margin-bottom:22px;}
.footer-links{display:flex;flex-direction:column;gap:11px;}
.footer-links a{color:#bbb;font-size:0.9rem;transition:color var(--fast);}
.footer-links a:hover{color:var(--gold);}
.footer-contact-item{display:flex;gap:11px;margin-bottom:13px;align-items:flex-start;}
.footer-contact-item i{color:var(--gold);font-size:0.82rem;margin-top:4px;flex-shrink:0;}
.footer-contact-item span{color:#bbb;font-size:0.88rem;line-height:1.6;}
.footer-bottom{padding:22px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,0.1);}
.footer-bottom p{font-size:0.78rem;color:#888;}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:0.76rem;color:#888;transition:color var(--fast);}
.footer-bottom-links a:hover{color:var(--gold);}

/* ===== WHATSAPP ===== */
.whatsapp-btn{position:fixed;bottom:30px;right:30px;width:54px;height:54px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:999;box-shadow:0 4px 20px rgba(201,168,76,0.35);transition:var(--ease);animation:pulse 2.5s infinite;}
.whatsapp-btn:hover{transform:scale(1.1);background:var(--gold2);animation:none;}
.whatsapp-btn svg{width:25px;height:25px;fill:var(--bg);}
@keyframes pulse{0%,100%{box-shadow:0 4px 20px rgba(201,168,76,0.35);}50%{box-shadow:0 4px 32px rgba(201,168,76,0.65);}}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media(max-width:1024px){
  .contact-grid{gap:44px;}
  .form-card{padding:36px 30px;}
  /* Hamburger on tablet too */
  .nav-links{display:none!important;}
  .nav-hamburger{display:flex!important;}
  #name{display:block!important;font-size:clamp(0.85rem,2.5vw,1.2rem)!important;}
}

/* Mobile landscape / small tablet */
@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:44px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}

/* Mobile */
@media(max-width:768px){
  .container{padding:0 18px;}

  /* Navbar */
  .navbar{padding:11px 16px!important;}
  .navbar.scrolled{padding:9px 16px!important;}
  .nav-logo-img{height:34px!important;}
  #name{display:block!important;font-size:0.9rem!important;letter-spacing:0.05em!important;}
  .nav-links{display:none!important;}
  .nav-hamburger{display:flex!important;}

  /* Hero */
  .page-hero{padding:115px 0 55px;}
  .page-hero h1{font-size:2.1rem;}

  /* Section */
  .contact-section{padding:52px 0 70px;}

  /* Form */
  .form-card{padding:28px 18px 28px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .field{margin-bottom:18px;}

  /* Map */
  .contact-map iframe{height:200px;}

  /* Footer */
  .footer{padding:52px 0 0;}
  .footer-grid{grid-template-columns:1fr!important;gap:26px!important;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;}
  .footer-bottom-links{flex-wrap:wrap;gap:10px;}

  /* WA */
  .whatsapp-btn{bottom:18px;right:14px;width:48px;height:48px;}
  .whatsapp-btn svg{width:22px;height:22px;}
}

/* Small phones */
@media(max-width:400px){
  .page-hero h1{font-size:1.85rem;}
  h2{font-size:1.5rem!important;}
  .form-card{padding:22px 14px;}
  .submit-btn{font-size:0.75rem;padding:14px 18px;}
}

/* ===== NAVBAR MASTER OVERRIDE (contact.css) ===== */
@media(min-width:1025px){
  .nav-links{display:flex!important;}
  .nav-hamburger{display:none!important;}
  #name{display:block!important;font-size:1.3rem!important;}
}
@media(max-width:1024px){
  .nav-links{display:none!important;}
  .nav-hamburger{display:flex!important;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:1002;}
  .nav-hamburger span{display:block;width:24px;height:2px;background:#fff;}
  #name{display:block!important;font-size:clamp(0.85rem,2.5vw,1.15rem)!important;letter-spacing:0.07em!important;}
}
@media(max-width:400px){
  #name{font-size:0.82rem!important;}
  .nav-logo-img{height:32px!important;}
}