/* =========================================================
   HNS Glass & Aluminum Work — Stylesheet
   Plain hand-written CSS (no Tailwind, no build step).
   Palette: Black/Charcoal + White + Metallic Gold

   HOW THIS FILE IS ORGANIZED (use Ctrl/Cmd+F to jump to a section):
     1.  Variables & Reset
     2.  Base Typography
     3.  Layout Helpers        (.container, .section-title, etc.)
     4.  Navbar
     5.  Mobile Menu
     6.  Hero
     7.  Scroll Reveal Animations
     8.  Parallax
     9.  Buttons
     10. Services
     11. About
     12. Work / Gallery
     13. Why Choose
     14. CTA Band
     15. Contact
     16. Footer
     17. Lightbox
     18. Floating Buttons (Call / WhatsApp)
     19. Back to Top
     20. Misc / Accessibility

   Colors, spacing and fonts are all controlled from the
   variables below — change a value there and it updates
   everywhere it's used.
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES & RESET
   --------------------------------------------------------- */
:root{
  /* Brand colors */
  --black:#0d0d0d;
  --charcoal:#161616;
  --charcoal-2:#1e1e1e;
  --white:#ffffff;
  --gold:#c9a24b;
  --gold-light:#e0bd6e;
  --gold-dark:#a3812f;

  /* Neutral text / background colors used across sections */
  --text-body:#0d0d0d;
  --text-muted-1:#4b5563;   /* gray-600  — paragraph copy on white  */
  --text-muted-2:#6b7280;   /* gray-500  — labels                   */
  --text-muted-3:#9ca3af;   /* gray-400  — copy on dark backgrounds */
  --text-muted-4:#d1d5db;   /* gray-300  — lightbox caption         */
  --bg-cream:#f7f6f4;       /* soft off-white section background    */
  --success-bg:#f0fdf4;
  --success-border:#bbf7d0;
  --success-text:#15803d;
  --error:#dc2626;

  /* Layout */
  --container-max:80rem;    /* 1280px */
  --container-narrow-max:64rem; /* 1024px */
  --container-padding:1.25rem;
  --container-padding-lg:2rem;
}

/* Base reset — every element starts from zero margin/padding/border
   so the spacing you see anywhere on the page comes from an explicit
   rule below, not a browser default. (This is the same job Tailwind's
   own "Preflight" reset used to do — it's just written out plainly
   here now instead of being generated by a build step.) */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0 solid;
}
html{scroll-behavior:smooth;}
html,body{width:100%;max-width:100%;overflow-x:hidden;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--white);
  color:var(--text-body);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas,iframe{display:block;max-width:100%;}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-size:inherit;font-weight:inherit;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;background:transparent;cursor:pointer;}
input,select,textarea{cursor:auto;}

::selection{background:var(--gold);color:var(--black);}

/* Anchor offset so fixed navbar never covers a section on jump/scroll */
section[id]{scroll-margin-top:96px;}
@media (max-width:1024px){ section[id]{scroll-margin-top:80px;} }

/* Scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#111;}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px;}


/* ---------------------------------------------------------
   2. BASE TYPOGRAPHY
   --------------------------------------------------------- */
.text-gold{color:var(--gold);}
.bg-gold{background-color:var(--gold);}
.border-gold{border-color:var(--gold);}


/* ---------------------------------------------------------
   3. LAYOUT HELPERS
   Reusable building blocks used by several sections.
   --------------------------------------------------------- */

/* Centered max-width wrapper used by nearly every section */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-padding);
}
@media (min-width:1024px){
  .container{padding-inline:var(--container-padding-lg);}
}

/* Narrower variant, used by the CTA band */
.container-narrow{
  max-width:var(--container-narrow-max);
  margin-inline:auto;
  padding-inline:var(--container-padding);
}
@media (min-width:1024px){
  .container-narrow{padding-inline:var(--container-padding-lg);}
}

/* Centered heading block used above Services / Work / Why Choose */
.section-intro{
  max-width:42rem;
  margin:0 auto 4rem;
  text-align:center;
}
.section-intro.tight{margin-bottom:3rem;}

.section-title{
  font-size:1.875rem;
  font-weight:700;
  margin-bottom:1rem;
}
@media (min-width:640px){
  .section-title{font-size:2.25rem;}
}
.section-desc{color:var(--text-muted-1);}

.section-label{
  display:inline-block;color:var(--gold);font-weight:600;letter-spacing:.12em;font-size:.8rem;
  text-transform:uppercase;margin-bottom:.6rem;position:relative;padding-bottom:.5rem;
}
.section-label::after{
  content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--gold);
}
.section-label.center{margin-left:auto;margin-right:auto;text-align:center;}


/* ---------------------------------------------------------
   4. NAVBAR
   --------------------------------------------------------- */
#navbar{position:fixed;top:0;left:0;width:100%;max-width:100%;z-index:1000;padding:1.15rem 0;background:transparent;transition:background-color .4s ease,box-shadow .4s ease,padding .4s ease;box-sizing:border-box}
#navbar.scrolled{background:rgba(13,13,13,.97);box-shadow:0 4px 20px rgba(0,0,0,.35);padding:.6rem 0;backdrop-filter:blur(6px)}

.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
  transform:translateX(-8px);
}
.brand-name{
  color:#fff;
  font-weight:600;
  line-height:1.25;
  font-size:.875rem;
  transition:color .3s ease;
}
@media (min-width:640px){
  .brand-name{font-size:1rem;}
}
@media (min-width:1024px){
  .brand-name{white-space:nowrap;}
}
a.brand:hover .brand-name{color:var(--gold);}

.navbar-logo{
  width:44px;height:44px;object-fit:contain;
  transition:transform .45s ease;
}
a.brand:hover .navbar-logo{transform:scale(1.08) rotate(-4deg);}

.logo-reveal{opacity:0;transform:translateY(-10px);animation:logoFadeIn 1s ease .1s forwards;}
@keyframes logoFadeIn{to{opacity:1;transform:translateY(0);}}

.nav-links{
  display:none;
  align-items:center;
  gap:2.25rem;
}
@media (min-width:1024px){
  .nav-links{display:flex;}
}

.nav-link{
  position:relative;color:#fff;font-weight:500;font-size:.92rem;letter-spacing:.02em;
  transition:color .3s ease;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);
  transition:width .3s ease;
}
.nav-link:hover, .nav-link.active{color:var(--gold);}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

.menu-toggle-btn{
  color:#fff;
  padding:.5rem;
  background:none;
  border:none;
  cursor:pointer;
}
@media (min-width:1024px){
  .menu-toggle-btn{display:none;}
}


/* ---------------------------------------------------------
   5. MOBILE MENU
   --------------------------------------------------------- */
#mobile-menu{
  max-height:0;overflow:hidden;transition:max-height .45s ease;
  background:rgba(13,13,13,.98);
}
#mobile-menu.open{max-height:560px;}
@media (min-width:1024px){
  #mobile-menu{display:none;}
}

.mobile-menu-inner{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:1.25rem 1.5rem;
}

.mobile-link{
  opacity:0;transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease;
}
#mobile-menu.open .mobile-link{opacity:1;transform:translateY(0);}
#mobile-menu.open .mobile-link:nth-child(1){transition-delay:.06s}
#mobile-menu.open .mobile-link:nth-child(2){transition-delay:.11s}
#mobile-menu.open .mobile-link:nth-child(3){transition-delay:.16s}
#mobile-menu.open .mobile-link:nth-child(4){transition-delay:.21s}
#mobile-menu.open .mobile-link:nth-child(5){transition-delay:.26s}

.mobile-nav-link{
  padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-menu-cta{
  justify-content:center;
  margin-top:1rem;
}


/* ---------------------------------------------------------
   6. HERO
   Fixed for cross-device responsiveness:
   - min-height uses dvh (falls back to vh) so mobile browser
     toolbars don't cause overflow/short gaps.
   - background uses background-size:cover (not a % value) so
     the image always fills the section on any aspect ratio.
   - the "zoom in" intro animation is now done with a transform
     instead of animating background-size, which is what let
     the background pull away from the edges on some screens.
   --------------------------------------------------------- */
#hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
#hero .hero-bg{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
}
@media(max-width:1024px){
  #hero .hero-bg{background-attachment:scroll}
}
@keyframes heroZoomBg{to{transform:scale(1);}}
#hero .hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.92) 100%);
  opacity:0;animation:fadeIn 1.2s ease .1s forwards;
}
@keyframes fadeIn{to{opacity:1;}}

.hero-content-wrap{
  position:relative;
  z-index:10;
  width:100%;
  display:flex;
  justify-content:center;
  padding:7rem 1.25rem 4rem;
}
@media (min-width:640px){
  .hero-content-wrap{padding-left:2rem;padding-right:2rem;}
}
@media (min-width:1024px){
  .hero-content-wrap{padding-left:3rem;padding-right:3rem;}
}
@media (min-width:1280px){
  .hero-content-wrap{padding-left:4rem;padding-right:4rem;}
}

.hero-content{
  max-width:42rem;
  text-align:center;
}

.hero-title{
  color:#fff;
  font-size:2.25rem;
  font-weight:700;
  line-height:1.12;
  margin-bottom:1.5rem;
}
@media (min-width:640px){ .hero-title{font-size:3rem;} }
@media (min-width:1024px){ .hero-title{font-size:3.75rem;} }

.hero-subtitle{
  color:#e5e7eb;
  font-size:1rem;
  line-height:1.625;
  margin-bottom:2.25rem;
  max-width:36rem;
  margin-inline:auto;
}
@media (min-width:640px){ .hero-subtitle{font-size:1.125rem;} }

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-bottom:3.5rem;
}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:2rem;
  row-gap:.75rem;
  color:rgba(255,255,255,.9);
  font-size:.875rem;
}
.hero-trust-item{display:flex;align-items:center;gap:.5rem;}

.hero-reveal{opacity:0;transform:translateY(24px);animation:heroReveal .8s ease forwards;}
@keyframes heroReveal{to{opacity:1;transform:translateY(0);}}


/* ---------------------------------------------------------
   7. SCROLL REVEAL ANIMATIONS
   Visible by default — this is CSS-only progressive enhancement.
   JS adds .pre-reveal (only to elements confirmed off-screen at
   load) and then removes it via IntersectionObserver as the user
   scrolls, so the animation still happens, but content never
   depends on JS to be seen. If script.js is ever blocked, slow,
   or errors out, every section still renders normally.
   --------------------------------------------------------- */
.reveal{opacity:1;transform:translate(0,0) scale(1);transition:opacity .8s cubic-bezier(.22,.68,.32,1), transform .8s cubic-bezier(.22,.68,.32,1);}
.reveal.pre-reveal{opacity:0;}
.reveal.pre-reveal.fade-up{transform:translateY(46px);}
.reveal.pre-reveal.fade-down{transform:translateY(-40px);}
.reveal.pre-reveal.fade-left{transform:translateX(-56px);}
.reveal.pre-reveal.fade-right{transform:translateX(56px);}
.reveal.pre-reveal.scale-in{transform:scale(.92);}
.reveal.in-view{opacity:1;transform:translate(0,0) scale(1);}

/* Image reveal (clip-path mask) — visible by default, JS pre-clips
   only off-screen images and animates them open on scroll. */
.img-reveal{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s cubic-bezier(.65,0,.35,1);
}
.img-reveal.pre-reveal{clip-path:inset(8% 8% 8% 8%);}
.img-reveal.revealed{clip-path:inset(0 0 0 0);}


/* ---------------------------------------------------------
   8. PARALLAX (background-attachment)
   Used by the About image and the CTA band background.
   --------------------------------------------------------- */
/* 1. Ensure the main container has a height and relative position */
.hero-bg {
  position: relative;
  height: 100vh; /* Takes full viewport height */
  width: 100%;
  overflow: hidden; /* Keeps the pseudo element inside bounds */
}

/* 2. The modern parallax engine using standard position: fixed */
.parallax::before {
  content: "";
  position: fixed; /* This anchors the image to the screen viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Inherit the background image applied in the HTML style attribute */
  background-image: inherit; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Puts the background image safely behind any text inside the hero */
  z-index: -1; 
}

/* 3. Turn it off safely for mobile and tablets if performance degrades */
@media (max-width: 1024px) {
  .parallax::before {
    position: absolute; /* Reverts to normal scrolling on mobile */
  }
}

/* ---------------------------------------------------------
   9. BUTTONS
   --------------------------------------------------------- */
.btn-gold{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold);color:var(--black);font-weight:600;
  padding:.75rem 1.5rem;border-radius:.4rem;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow:0 4px 14px rgba(201,162,75,.0);
  cursor:pointer;border:none;font-family:inherit;font-size:.92rem;
}
.btn-gold:hover{
  background:var(--gold-light);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(201,162,75,.35);
}

.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid rgba(255,255,255,.6);color:#fff;font-weight:500;
  padding:.7rem 1.4rem;border-radius:.4rem;
  transition:all .3s ease;
}
.btn-outline:hover{
  border-color:var(--gold);color:var(--gold);
  transform:translateY(-3px);
  background:rgba(201,162,75,.08);
}

/* Shared arrow glyph inside buttons/links — nudges right on hover */
.arrow{transition:transform .3s ease;display:inline-block;}
.btn-gold:hover .arrow,
.btn-outline:hover .arrow,
.cta-btn:hover .arrow{transform:translateX(5px);}


/* ---------------------------------------------------------
   10. SERVICES
   --------------------------------------------------------- */
#services{padding:6rem 0;background:#fff;}

.services-grid{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:1.5rem;
}
@media (min-width:640px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:768px){ .services-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .services-grid{grid-template-columns:repeat(4,1fr);} }

.service-card{
  background:#fff;border:1px solid #ececec;border-radius:.6rem;
  padding:2rem 1.6rem;transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.1);
  border-color:var(--gold);
}
.service-icon{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--gold);border-radius:.5rem;color:var(--gold);
  transition:transform .4s ease, background .4s ease, color .4s ease;
  margin-bottom:1.25rem;
}
.service-card:hover .service-icon{
  transform:scale(1.1) rotate(-6deg);
  background:var(--gold);color:var(--black);
}
.service-title{font-weight:600;font-size:1.125rem;margin-bottom:.5rem;}
.service-desc{color:var(--text-muted-1);font-size:.875rem;line-height:1.625;}


/* ---------------------------------------------------------
   11. ABOUT
   --------------------------------------------------------- */
#about{padding:6rem 0;background:var(--bg-cream);overflow:hidden;}

.about-grid{
  display:grid;
  gap:3.5rem;
  align-items:center;
}
@media (min-width:1024px){
  .about-grid{grid-template-columns:repeat(2,1fr);}
}

.about-title{margin-bottom:1.5rem;line-height:1.25;}
.about-desc{margin-bottom:2.5rem;}

.about-image-frame{border-radius:.6rem;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.18);height:420px;}
@media (min-width:1024px){.about-image-frame{height:520px;}}
.about-image{width:100%;height:100%;object-fit:cover;}

.features-grid{
  display:grid;
  gap:2rem;
}
@media (min-width:640px){
  .features-grid{grid-template-columns:repeat(2,1fr);}
}

.feature-item{display:flex;gap:.9rem;align-items:flex-start;transition:transform .3s ease;}
.feature-item:hover{transform:translateY(-4px);}
.feature-icon{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(201,162,75,.12);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.feature-item:hover .feature-icon,
.contact-link:hover .feature-icon{
  background:var(--gold);color:var(--black);transform:scale(1.08);
}
.feature-title{font-weight:600;margin-bottom:.25rem;}
.feature-desc{color:var(--text-muted-1);font-size:.875rem;line-height:1.625;}


/* ---------------------------------------------------------
   12. WORK / GALLERY
   --------------------------------------------------------- */
#work{padding:6rem 0;background:#fff;}

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  margin-bottom:3rem;
}
.filter-btn{
  padding:.55rem 1.3rem;border-radius:999px;border:1px solid #d9d9d9;font-size:.85rem;font-weight:500;
  transition:all .3s ease;color:#333;background:#fff;cursor:pointer;font-family:inherit;
}
.filter-btn.active, .filter-btn:hover{
  background:var(--gold);border-color:var(--gold);color:var(--black);
  transform:translateY(-2px);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}
@media (min-width:640px){ .gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;} }
@media (min-width:1024px){ .gallery-grid{grid-template-columns:repeat(4,1fr);} }

.aspect-square{aspect-ratio:1/1;}

.gallery-item{position:relative;overflow:hidden;border-radius:.4rem;cursor:pointer;background:#111;}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-overlay{
  position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 60%);
  opacity:0;transition:opacity .4s ease;
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;
}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-cat{
  display:block;color:var(--gold);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;margin-bottom:.25rem;
}
.gallery-item-title{display:block;color:#fff;font-weight:600;font-size:.875rem;}
.gallery-view-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);
  width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--black);
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}
.gallery-item:hover .gallery-view-icon{opacity:1;transform:translate(-50%,-50%) scale(1);}

.view-more-wrap{text-align:center;margin-top:3.5rem;}


/* ---------------------------------------------------------
   13. WHY CHOOSE
   --------------------------------------------------------- */
.why-choose-section{padding:6rem 0;background:var(--black);position:relative;}
.why-choose-title{color:#fff;}

.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.25rem;
}
@media (min-width:1024px){
  .why-grid{grid-template-columns:repeat(4,1fr);}
}

.why-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:.6rem;padding:2rem 1.5rem;transition:all .35s ease;
  text-align:center;
}
.why-card:hover{
  border-color:var(--gold);transform:translateY(-6px);background:rgba(201,162,75,.06);
}
.why-icon{
  display:block;margin:0 auto 1rem;color:var(--gold);font-size:1.875rem;
}
.why-card-title{color:var(--gold);font-weight:600;margin-bottom:.5rem;}
.why-card-desc{color:var(--text-muted-3);font-size:.875rem;line-height:1.625;}


/* ---------------------------------------------------------
   14. CTA BAND
   --------------------------------------------------------- */
.cta-section{
  position:relative;
  background-color:var(--gold);
  padding-block:5rem;
  overflow:hidden;
}
@media (min-width:1024px){
  .cta-section{padding-block:7rem;}
}
.cta-bg{position:absolute;inset:0;}
.cta-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(201,162,75,.95), rgba(163,129,47,.93));
}
.watermark-logo{
  position:absolute;width:400px;height:400px;object-fit:contain;
  opacity:.09;pointer-events:none;filter:brightness(0);
  right:-70px;top:-70px;transform:rotate(-6deg);
}
@media (max-width:640px){
  .watermark-logo{width:260px;height:260px;right:-50px;top:-40px;}
}

.cta-content{
  position:relative;
  z-index:10;
  text-align:center;
}
.cta-title{
  font-size:1.5rem;font-weight:700;color:#000;margin-bottom:1rem;
}
@media (min-width:640px){ .cta-title{font-size:1.875rem;} }
@media (min-width:1024px){ .cta-title{font-size:2.25rem;} }
.cta-desc{
  color:rgba(0,0,0,.8);max-width:36rem;margin:0 auto 2rem;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#000;color:var(--gold);font-weight:600;
  padding:.875rem 1.75rem;border-radius:.375rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.cta-btn:hover{
  transform:translateY(-.25rem);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}


/* ---------------------------------------------------------
   15. CONTACT
   --------------------------------------------------------- */
#contact{padding:6rem 0;background:#fff;}

.contact-grid{
  display:grid;
  gap:3.5rem;
  margin-bottom:4rem;
}
@media (min-width:1024px){
  .contact-grid{grid-template-columns:repeat(2,1fr);}
}

.contact-title{margin-bottom:2rem;line-height:1.25;}

.contact-info{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin-bottom:2.5rem;
}
.contact-link{
  display:flex;
  align-items:center;
  gap:1rem;
}
.contact-link-label{font-size:.875rem;color:var(--text-muted-2);}
.contact-link-value{font-weight:600;transition:color .3s ease;}
.contact-link:hover .contact-link-value{color:var(--gold);}

.contact-form{
  background:var(--bg-cream);
  padding:1.5rem;
  border-radius:.375rem;
}
@media (min-width:640px){ .contact-form{padding:2rem;} }
@media (min-width:1024px){ .contact-form{padding:2.25rem;} }

.form-row{
  display:grid;
  gap:1.25rem;
  margin-bottom:1.25rem;
}
@media (min-width:640px){
  .form-row{grid-template-columns:repeat(2,1fr);}
}
.form-field-full{margin-bottom:1.5rem;}

.form-input{
  width:100%;background:#fff;border:1.5px solid #e2e2e2;border-radius:.4rem;
  padding:.85rem 1rem;font-size:.9rem;transition:border-color .3s ease, box-shadow .3s ease;
  font-family:inherit;
}
.form-input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15);
}
.form-input.error{border-color:var(--error);}
.error-text{color:var(--error);font-size:.75rem;margin-top:.25rem;display:none;}
.error-text.show{display:block;}

.form-submit{width:100%;justify-content:center;}
.form-success-msg{
  margin-top:1rem;font-size:.875rem;
  background:var(--success-bg);color:var(--success-text);
  border:1px solid var(--success-border);border-radius:.375rem;padding:.75rem;
}


/* ---------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------- */
footer{
  background:var(--black);
  color:var(--text-muted-3);
  padding-top:5rem;
  padding-bottom:2rem;
}

.footer-grid{
  display:grid;
  gap:2.5rem;
  margin-bottom:3.5rem;
}
@media (min-width:640px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .footer-grid{grid-template-columns:repeat(4,1fr);} }

.footer-brand{margin-bottom:1rem;}
.footer-brand-name{color:#fff;font-weight:600;font-size:.875rem;}
.footer-desc{font-size:.875rem;line-height:1.625;margin-bottom:1.25rem;}
.footer-network-desc{margin-bottom:1rem;}

.social-icons{display:flex;gap:.75rem;}
.social-icon{
  width:2.25rem;height:2.25rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:transform .3s ease,border-color .3s ease,color .3s ease,background-color .3s ease,box-shadow .3s ease;
}
.social-icon:hover{transform:translateY(-3px) scale(1.06);}
.social-fb:hover{background:#1877F2;border-color:#1877F2;box-shadow:0 6px 16px rgba(24,119,242,.35);}
.social-wa:hover{background:#25D366;border-color:#25D366;box-shadow:0 6px 16px rgba(37,211,102,.35);}
.social-ig:hover{background:#e96893;border-color:#f66d9b;color:#fff;box-shadow:0 6px 18px rgba(225,48,108,.4);}

.footer-heading{
  position:relative;display:inline-block;padding-bottom:.65rem;margin-bottom:1.35rem;
  color:#fff;font-weight:600;font-size:.875rem;letter-spacing:.025em;
}
.footer-heading::after{content:'';position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--gold);border-radius:2px;}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.875rem;
}
footer ul li a{display:inline-flex;transition:color .3s ease,transform .3s ease;color:inherit;}
footer ul li a:hover{transform:translateX(5px);color:var(--gold);}

/* Quick links arrow markers */
.footer-links-arrow li a{align-items:center;}
.footer-links-arrow li a::before{content:'\203a';color:var(--gold);font-weight:700;margin-right:.45rem;display:inline-block;transition:transform .3s ease;line-height:1;}
.footer-links-arrow li a:hover::before{transform:translateX(3px);}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  font-size:.75rem;
  color:var(--text-muted-2);
}
@media (min-width:640px){
  .footer-bottom{flex-direction:row;justify-content:space-between;}
}
.footer-legal-links{display:flex;gap:1rem;}
.footer-legal-links a{color:inherit;transition:color .3s ease;}
.footer-legal-links a:hover{color:var(--gold);}

footer a.brand{transition:opacity .3s ease;}
footer a.brand:hover{opacity:.9;}

/* Footer mobile centering */
@media (max-width:767px){
  footer{text-align:center;}
  footer .container{display:flex;flex-direction:column;align-items:center;}
  .footer-grid{justify-items:center;}
  .footer-grid>div{width:100%;display:flex;flex-direction:column;align-items:center;}
  footer .footer-heading{margin-left:auto;margin-right:auto;}
  footer ul{display:flex;flex-direction:column;align-items:center;}
  footer ul li a{justify-content:center;}
  .social-icons{justify-content:center;}
  footer a.brand{justify-content:center;}
}


/* ---------------------------------------------------------
   17. LIGHTBOX
   --------------------------------------------------------- */
#lightbox{
  position:fixed;inset:0;background:rgba(5,5,5,.95);z-index:9997;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s ease;
}
#lightbox.open{opacity:1;visibility:visible;}
#lightbox img{
  max-width:88vw;max-height:82vh;border-radius:.4rem;
  transform:scale(.92);transition:transform .35s ease;
}
#lightbox.open img{transform:scale(1);}

.lightbox-close-btn,.lightbox-nav-btn{
  position:absolute;color:#fff;width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;
  background:transparent;cursor:pointer;
  transition:border-color .3s ease,color .3s ease;
}
.lightbox-close-btn:hover,.lightbox-nav-btn:hover{border-color:var(--gold);color:var(--gold);}
.lightbox-close-btn{top:1.5rem;right:1.5rem;}
.lightbox-nav-btn{top:50%;transform:translateY(-50%);}
.lightbox-prev-btn{left:1rem;}
@media (min-width:640px){ .lightbox-prev-btn{left:2rem;} }
.lightbox-next-btn{right:1rem;}
@media (min-width:640px){ .lightbox-next-btn{right:2rem;} }

.lightbox-figure{text-align:center;}
.lightbox-caption{color:var(--text-muted-4);margin-top:1rem;font-size:.875rem;}


/* ---------------------------------------------------------
   18. FLOATING BUTTONS (Call + WhatsApp)
   --------------------------------------------------------- */
#float-stack{
  position:fixed;bottom:24px;right:24px;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
}
#float-stack a{
  position:relative;display:flex;align-items:center;color:#fff;
  border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.3);
  padding:14px;overflow:hidden;transition:padding .35s ease, transform .3s ease;
  text-decoration:none;
}
#float-stack a:hover{transform:scale(1.06);}
#float-stack a span{
  max-width:0;opacity:0;white-space:nowrap;overflow:hidden;
  transition:max-width .35s ease, opacity .35s ease, margin .35s ease;
  font-size:.85rem;font-weight:600;
}
#float-stack a:hover span{max-width:160px;opacity:1;margin-left:.6rem;}
#float-stack a::before{
  content:'';position:absolute;inset:0;border-radius:999px;
}

#whatsapp-float{background:#25D366;}
#whatsapp-float::before{
  box-shadow:0 0 0 0 rgba(37,211,102,.6);
  animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

#call-float{background:var(--gold);color:var(--black);}
#call-float::before{
  box-shadow:0 0 0 0 rgba(201,162,75,.6);
  animation:call-pulse 2.4s infinite;
  animation-delay:1.2s;
}
@keyframes call-pulse{
  0%{box-shadow:0 0 0 0 rgba(201,162,75,.5);}
  70%{box-shadow:0 0 0 16px rgba(201,162,75,0);}
  100%{box-shadow:0 0 0 0 rgba(201,162,75,0);}
}

@media (max-width:480px){
  #float-stack{bottom:16px;right:16px;gap:10px;}
  #float-stack a{padding:12px;}
}


/* ---------------------------------------------------------
   19. BACK TO TOP
   --------------------------------------------------------- */
#back-to-top{
  position:fixed;bottom:24px;left:24px;z-index:900;
  width:46px;height:46px;border-radius:50%;background:var(--black);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .35s ease;border:1px solid var(--gold);cursor:pointer;
}
#back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
#back-to-top:hover{background:var(--gold);color:var(--black);}


/* ---------------------------------------------------------
   20. MISC / ACCESSIBILITY
   --------------------------------------------------------- */
#loader{
  position:fixed;inset:0;background:var(--black);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader.hide{opacity:0;visibility:hidden;}
.loader-logo{
  width:78px;height:78px;object-fit:contain;
  animation:loaderPulse .9s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 20px rgba(201,162,75,.35));
}
@keyframes loaderPulse{from{opacity:.42;transform:scale(.88);}to{opacity:1;transform:scale(1);}}

#scroll-progress{
  position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  width:0%;z-index:9998;transition:width .1s ease-out;
}

.hidden{display:none;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

a,button,.filter-btn,.gallery-item{cursor:pointer;}

/* Visible keyboard focus for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .parallax{background-attachment:scroll !important;}
}