/* ═══════════════════════════════════════════════════════
   LUXURY DESIGN SYSTEM & BASE STYLES
   ═══════════════════════════════════════════════════════ */
:root {
  --black:       #0e0a12;
  --black-rich:  #120e16;
  --charcoal:    #1a1525;
  --charcoal-l:  #251e30;
  --ivory:       #faf6f0;
  --ivory-warm:  #fffbf5;
  --ivory-dim:   #d8cfbe;
  /* On-pastel text colors — dark plum/charcoal for contrast */
  --text-dark:   #1c1228;
  --text-dark-2: #2e2040;
  --text-mid:    rgba(28, 18, 40, 0.82);
  --text-faint-d:rgba(28, 18, 40, 0.52);
  --crimson:     #8b1a2a;
  --crimson-l:   #b02235;
  --crimson-pale:rgba(139,26,42,0.18);
  --gold:        #dfba5f;
  --gold-l:      #ffd97d;
  --gold-d:      #b28e3b;
  --gold-antique:#b8943f;
  --champagne:   #f5e6be;
  --champagne-dim:rgba(245,230,190,0.15);
  --gold-glow:   rgba(223,186,95,0.22);
  --gold-glow-s: rgba(223,186,95,0.08);
  --crim-glow:   rgba(139,26,42,0.25);
  --border:      rgba(28,18,40,0.18);
  --border-h:    rgba(28,18,40,0.40);
  --border-s:    rgba(28,18,40,0.08);
  --text-on-dark:rgba(255, 252, 245, 0.96);
  --text-muted:  rgba(240, 235, 220, 0.78);
  --text-faint:  rgba(240, 235, 220, 0.50);
  --ease-lux:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-silk:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-gold:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:#e8e0ea;
  color:var(--text-dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--crimson),var(--gold));border-radius:2px}
::selection{background:rgba(223,186,95,0.25);color:#fff}

/* ═══════════════════════════════════════════════════════
   GLOBAL TEXT SHADOW — auto highlight over silk canvas
   ═══════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6,
p,span,a,li,label,
div.sec-label,div.ed-tag,div.hs-lbl,div.hs-num,
div.sc-lbl,div.sc-num,div.sc-sub,
.eyebrow-text,.hero-sub,.hero-h1,
.btn-gold,.btn-ghost,.btn-crimson,
.marquee-track,.mi,
.v-card h3,.v-body,.v-num,.vs,.v-action,
.ed-h,.ed-p,.ed-list li,
.why-card-luxe h4,.why-card-luxe p,.why-card-num,
.h-title,.h-body,.h-spec span,.h-spec label,
.ps-lbl,.ps-num,
.spec-lbl,.spec-val,
.map-label h3,.map-label p,.ec-name,.ec-tag,
.t-text,.t-name,.t-role,.t-loc,.t-quote-icon,
.ps-lbl-text,.ps-pill,
.faq-q,.faq-content p,
.eq-h,.eq-p,.eq-g,
.eq-badge,.eq-chk,
.wh-number,.wh-label,
.home-cat-details h3,.home-cat-link,
.prem-tab,.prod-h,.prod-desc,.prod-cat-name,
.hdr-title,.hdr-desc,.hdr-eyebrow,
.cat-tab,
button,input,textarea,select {
  text-shadow:
    0 1px 3px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.20);
}

/* Stronger shadow for large display headings */
h1,h2,.hero-h1,.eq-h,.h-title,.sec-h,.ed-h,.hdr-title {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.70),
    0 3px 10px rgba(0,0,0,0.50),
    0 8px 24px rgba(0,0,0,0.30);
}

/* Gold/gradient text needs shadow applied differently since -webkit-text-fill-color overrides color */
.hero-h1 strong,
.sec-h strong, .sec-h em,
.ed-h strong,
.h-title strong,
.eq-h strong {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 4px 14px rgba(0,0,0,0.35));
}


/* ═══════════════════════════════════════════════════════
   INTRO OVERLAY — cinematic entrance
   ═══════════════════════════════════════════════════════ */
#intro-veil{
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:28px;
  transition:opacity 1.2s var(--ease-lux);
}
#intro-veil.fade-out{opacity:0;pointer-events:none}
.intro-thread-canvas{position:absolute;inset:0;width:100%;height:100%}
.intro-brand{
  position:relative;z-index:2;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,5vw,64px);
  font-weight:300;
  letter-spacing:12px;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s ease 0s, transform 1s var(--ease-lux) 0s;
  text-align:center;
  max-width:90vw;
  box-sizing:border-box;
}
.intro-brand em{color:var(--gold);font-style:normal}
.intro-sub{
  position:relative;z-index:2;
  font-size:10px;
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0;
  transition:opacity 0.8s ease 0.3s;
  text-align:center;
  max-width:90vw;
  box-sizing:border-box;
}
.intro-brand.show{opacity:1;transform:translateY(0)}
.intro-sub.show{opacity:1}
.intro-line{
  position:relative;z-index:2;
  width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width 1.2s var(--ease-lux) 0.5s;
  margin:0 auto;
}
.intro-line.expand{width:200px}

/* ═══════════════════════════════════════════════════════
   WEBGL CANVAS — full page, fixed, behind everything
   ═══════════════════════════════════════════════════════ */
#silk-stage{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  z-index:0;pointer-events:none;
}

/* ═══════════════════════════════════════════════════════
   AMBIENT OVERLAY — luxury depth atmosphere
   ═══════════════════════════════════════════════════════ */
#ambient-layer{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
  background:
    /* Deep dark crown at top — keeps nav text readable */
    radial-gradient(ellipse 100% 22% at 50% 0%,   rgba(14,10,20,0.82) 0%, transparent 100%),
    /* Left-edge plum shadow */
    radial-gradient(ellipse 40% 70% at 0%   50%,  rgba(20,12,32,0.50) 0%, transparent 80%),
    /* Right-edge plum shadow */
    radial-gradient(ellipse 40% 70% at 100% 50%,  rgba(20,12,32,0.50) 0%, transparent 80%),
    /* Bottom dark vignette — keeps footer legible */
    radial-gradient(ellipse 100% 28% at 50% 100%, rgba(14,10,20,0.90) 0%, transparent 100%),
    /* Centre-screen very subtle tint so centre body text has a substrate */
    radial-gradient(ellipse 70% 50% at 50% 50%,  rgba(14,10,20,0.18) 0%, transparent 100%);
  animation: ambientBreathe 18s ease-in-out infinite alternate;
}
@keyframes ambientBreathe {
  0%   { filter: brightness(0.95) saturate(1.0); }
  100% { filter: brightness(1.05) saturate(1.1); }
}

/* ═══════════════════════════════════════════════════════
   PARTICLES
   ═══════════════════════════════════════════════════════ */
#ptcl-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.silk-particle{
  position:absolute;border-radius:50%;
  animation:particleDrift linear infinite;opacity:0;
}
@keyframes particleDrift{
  0%  {transform:translateY(105vh) translateX(0) rotate(0deg);  opacity:0}
  5%  {opacity:0.6}
  95% {opacity:0.3}
  100%{transform:translateY(-10vh)  translateX(30px) rotate(360deg);opacity:0}
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */
#gnav{
  position:fixed;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 6%;z-index:1000;
  /* Always frosted so logo/links are readable against pastel silk */
  background:rgba(14,10,20,0.52);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transition:all 0.8s var(--ease-lux);
  opacity:0;transform:translateY(-10px);
  gap:18px;
}
#gnav.visible{opacity:1;transform:translateY(0)}
#gnav.scrolled{
  padding:18px 6%;
  background:rgba(10,7,16,0.92);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-bottom:1px solid rgba(223,186,95,0.18);
}

.nav-menu{display:flex;align-items:center}
.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;border:0;background:transparent;padding:6px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ivory);transition:all 0.3s ease;border-radius:2px}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}

.logo-block{cursor:pointer;text-decoration:none;display:block}
.logo-w{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;font-weight:600;
  letter-spacing:6px;text-transform:uppercase;
  color:var(--ivory);line-height:1;
}
.logo-w em{color:var(--gold-l);font-style:normal}
.logo-sub{
  font-size:10px;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--gold);
  margin-top:5px;display:block;opacity:0.85;
}

.nav-links{display:flex;list-style:none;gap:40px;align-items:center}
.nav-links a{
  text-decoration:none;color:rgba(255,252,245,0.90);
  font-size:13.5px;text-transform:uppercase;letter-spacing:2.5px;
  font-weight:500;cursor:pointer;
  transition:color 0.4s ease;
  position:relative;padding-bottom:3px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

@media (max-width: 900px){
  #gnav{padding:20px 24px;align-items:center}
  .nav-toggle{display:flex}
  .nav-menu{display:none;position:absolute;top:calc(100% + 12px);left:20px;right:20px;padding:16px 18px;background:rgba(10,7,16,0.96);border:1px solid rgba(223,186,95,0.18);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.28)}
  .nav-menu.open{display:block}
  .nav-links{flex-direction:column;align-items:flex-start;gap:14px;padding:4px 0}
  .nav-links a,.nav-cta{font-size:13px;letter-spacing:1.5px}
  .nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px !important}
}

@media (max-width: 640px){
  #gnav{padding:16px 18px}
  .logo-w{font-size:22px;letter-spacing:3px}
  .logo-sub{font-size:9px;letter-spacing:2px}
  .nav-menu{left:12px;right:12px;padding:14px}
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--champagne));
  transition:width 0.5s var(--ease-lux);
}
.nav-links a:hover, .nav-links a.active-link{color:var(--gold-l)}
.nav-links a:hover::after, .nav-links a.active-link::after{width:100%}

.nav-cta{
  padding:10px 24px !important;
  background:transparent !important;
  border:1.5px solid var(--gold) !important;
  color:var(--gold-l) !important;
  letter-spacing:2.5px !important;
  border-radius:0px !important;
  transition:all 0.4s var(--ease-lux) !important;
  font-family:inherit !important;
  font-size:13px !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
.nav-cta:hover{
  background:var(--gold) !important;
  color:var(--black) !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 15px var(--gold-glow);
}
.nav-cta::after{display:none !important}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
footer{
  background:#020102;border-top:1px solid var(--border);
  position:relative;z-index:3;
}
.ft-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  padding:80px 8%;gap:48px;
}
@media (max-width: 1024px) {
  .ft-top {
    grid-template-columns: 1fr 1fr;
    padding: 60px 6%;
    gap: 40px;
  }
  .ft-bot {
    padding: 24px 6%;
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .ft-legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}
@media (max-width: 768px) {
  .ft-top {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 32px;
    text-align: center;
  }
  .ft-brand-desc {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .ft-badge {
    margin-left: auto;
    margin-right: auto;
  }
  .ft-col h5 {
    margin-bottom: 16px;
  }
  .ft-col ul {
    align-items: center;
  }
  .intro-brand {
    font-size: clamp(22px, 6vw, 36px) !important;
    letter-spacing: 6px !important;
  }
  .intro-sub {
    font-size: 8.5px !important;
    letter-spacing: 3.5px !important;
  }
  .intro-line.expand {
    width: 150px !important;
  }
}
@media (max-width: 480px) {
  .intro-brand {
    font-size: clamp(16px, 8vw, 24px) !important;
    letter-spacing: 4px !important;
  }
  .intro-sub {
    font-size: 7.5px !important;
    letter-spacing: 2px !important;
  }
  .intro-line.expand {
    width: 110px !important;
  }
}
.ft-brand-desc{
  font-size:14px;line-height:1.8;color:var(--text-muted);
  margin-top:20px;margin-bottom:24px;max-width:320px;
  font-weight:300;
}
.ft-badge{
  font-size:10.5px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gold);border:1px solid rgba(223, 186, 95, 0.35);
  padding:6px 14px;
  display:inline-block;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  text-align:center;
}
.ft-col h5{
  font-size:13px;text-transform:uppercase;letter-spacing:2.5px;
  color:var(--gold-l);margin-bottom:20px;
}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.ft-col li{
  font-size:13.5px;color:var(--text-muted);cursor:pointer;
  transition:color 0.4s ease;
}
.ft-col li:hover{color:var(--gold)}

.ft-bot{
  border-top:1px solid var(--border-s);
  padding:32px 8%;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:20px 32px;
}
.ft-copy{
  font-size:12px;color:var(--text-faint);letter-spacing:0.5px;
  line-height:1.5;
}
.ft-legal{display:flex;gap:12px 24px;flex-wrap:wrap}
.ft-legal span{font-size:12px;color:var(--text-faint);cursor:pointer;transition:color 0.4s ease}
.ft-legal span:hover{color:var(--gold)}

/* ═══════════════════════════════════════════════════════
   SIDE DRAWER / SPEC PORTAL
   ═══════════════════════════════════════════════════════ */
.drawer{
  position:fixed;top:0;right:-520px;width:520px;height:100vh;
  background:#060408;border-left:1px solid var(--border);
  z-index:9999;box-shadow:-20px 0 50px rgba(0,0,0,0.8);
  display:flex;flex-direction:column;
  transition:right 0.8s var(--ease-lux);
}
.drawer.open{right:0}
@media (max-width: 768px) {
  .drawer {
    width: 100% !important;
    right: -100% !important;
  }
  .drawer.open {
    right: 0 !important;
  }
  .dr-body {
    padding: 24px !important;
  }
  .dr-top {
    padding: 20px 24px !important;
  }
  .dr-actions {
    padding: 20px 24px !important;
  }
}
.dr-top{
  padding:32px 40px;border-bottom:1px solid var(--border-s);
  display:flex;justify-content:space-between;align-items:center;
}
.dr-brand-lbl{
  font-size:8px;text-transform:uppercase;letter-spacing:2px;
  color:var(--text-muted);
}
.dr-close{
  background:transparent;border:none;color:var(--gold);
  font-size:9px;text-transform:uppercase;letter-spacing:2px;
  cursor:pointer;
}
.dr-close:hover{color:var(--gold-l)}

.dr-body{
  padding:40px;overflow-y:auto;flex-grow:1;
  display:flex;flex-direction:column;
}
.dr-tag{
  font-size:8px;text-transform:uppercase;letter-spacing:3px;
  color:var(--gold-l);margin-bottom:16px;
}
.dr-title{
  font-family:'Cormorant Garamond',serif;
  font-size:36px;font-weight:300;color:var(--ivory);
  margin-bottom:32px;line-height:1.1;
}
.dr-table{width:100%;border-collapse:collapse;margin-bottom:32px}
.dr-table td{
  padding:16px 0;border-bottom:1px solid var(--border-s);
  font-size:11.5px;
}
.dr-table td:first-child{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;width:40%}
.dr-table td:last-child{color:var(--ivory);font-weight:500}

.dr-note{
  background:rgba(223,186,95,0.03);
  border:1px solid var(--border-s);
  padding:24px;margin-top:auto;
}
.dr-note p{
  font-size:11px;line-height:1.7;color:var(--text-muted);
  font-weight:300;
}
.dr-actions{
  padding:32px 40px;border-top:1px solid var(--border-s);
  background:#09060c;
}
.dr-form-title{
  font-size:9.5px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gold-l);margin-bottom:20px;font-weight:600;text-align:center;
}
.dr-form-group{
  margin-bottom:14px;
}
.dr-form-group input, .dr-form-group textarea{
  width:100%;padding:14px 18px;background:rgba(14,11,16,0.85);
  border:1px solid var(--border);color:var(--ivory-warm);
  font-family:inherit;font-size:11.5px;letter-spacing:0.5px;
  outline:none;transition:border-color 0.3s ease;
}
.dr-form-group input:focus, .dr-form-group textarea:focus{
  border-color:var(--gold-l);
}
.btn-dr-submit{
  width:100%;padding:16px;background:var(--gold);border:1px solid var(--gold);
  color:var(--black);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:2.5px;cursor:pointer;transition:all 0.4s var(--ease-lux);
  box-shadow:0 4px 15px rgba(223,186,95,0.15);
  display:flex;align-items:center;justify-content:center;
}
.btn-dr-submit:hover{
  background:transparent;color:var(--gold-l);
  box-shadow:0 4px 20px rgba(223,186,95,0.25);
}

/* Curtain */
#curtain{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:9998;opacity:0;pointer-events:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity 0.8s ease;
}
#curtain.active{opacity:1;pointer-events:auto}

/* Scroll reveal classes */
.rv{
  opacity:0;transform:translateY(24px);
  transition:opacity 1.2s var(--ease-lux), transform 1.2s var(--ease-lux);
}
.rv.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:0.15s}
.d2{transition-delay:0.3s}
.d3{transition-delay:0.45s}
.d4{transition-delay:0.6s}
.d5{transition-delay:0.75s}
.d6{transition-delay:0.9s}

/* CONTACT MODAL OVERLAY */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 1, 4, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  animation: fadeInModal 0.4s var(--ease-lux) forwards;
}
.modal-content {
  background: #060408;
  border: 1px solid var(--border);
  padding: 48px;
  width: 100%;
  max-width: 480px;
  position: relative;
  margin: auto;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9);
  animation: slideUpModal 0.5s var(--ease-lux) forwards;
}
.modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.modal-close:hover {
  color: var(--gold-l);
}
.modal-hdr {
  text-align: center;
  margin-bottom: 32px;
}
.modal-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--ivory-warm);
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.modal-brand em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-l);
}
.modal-hdr h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-l);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.modal-hdr p {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.modal-form-group {
  margin-bottom: 16px;
}
.modal-form-group input, .modal-form-group textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(14, 11, 16, 0.85);
  border: 1.5px solid var(--border);
  color: var(--ivory-warm);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  outline: none;
  transition: border-color 0.3s ease;
}
.modal-form-group input:focus, .modal-form-group textarea:focus {
  border-color: var(--gold-l);
}
.btn-modal-submit {
  width: 100%;
  padding: 16px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  cursor: pointer;
  transition: all 0.4s var(--ease-lux);
  box-shadow: 0 4px 15px rgba(223, 186, 95, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-modal-submit:hover {
  background: transparent;
  color: var(--gold-l);
  box-shadow: 0 4px 20px rgba(223, 186, 95, 0.25);
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUpModal {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ─── CONTACT MODAL RESPONSIVE OVERRIDES ─── */

/* Tablets & Medium Screens (max-width: 900px) */
@media (max-width: 900px) {
  .modal-overlay {
    padding: 30px 16px;
  }
  .modal-content {
    padding: 36px 28px;
    max-width: 440px;
  }
  .modal-close {
    top: 20px;
    right: 20px;
  }
  .modal-hdr {
    margin-bottom: 24px;
  }
  .modal-brand {
    font-size: 24px;
  }
  .modal-hdr h3 {
    font-size: 20px;
  }
}

/* Mobile Phones (max-width: 480px) */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 16px 12px;
  }
  .modal-content {
    padding: 28px 20px 20px 20px;
    max-width: 100%;
  }
  .modal-close {
    top: 12px;
    right: 12px;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 6px 10px;
    background: rgba(223, 186, 95, 0.08);
    border: 1px solid rgba(223, 186, 95, 0.2);
    border-radius: 4px;
  }
  .modal-hdr {
    margin-bottom: 20px;
    text-align: left;
    padding-right: 60px; /* Leave space for the close button */
  }
  .modal-brand {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .modal-hdr h3 {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .modal-hdr p {
    font-size: 11px;
    line-height: 1.5;
  }
  .modal-form-group {
    margin-bottom: 12px;
  }
  .modal-form-group input, .modal-form-group textarea {
    padding: 12px 14px;
    font-size: 11px;
  }
  .btn-modal-submit {
    padding: 14px;
    font-size: 9.5px;
    letter-spacing: 2px;
  }
  
  /* Form Checkbox layout improvement on mobile */
  #modal-enquiry-form .checkbox-group {
    align-items: flex-start !important;
    padding: 10px !important;
    margin: 12px 0 !important;
  }
  #modal-enquiry-form .checkbox-group label {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
  }
  #modal-enquiry-form .checkbox-group input {
    margin-top: 1px !important;
  }
}