/* =========================================================
   BLACK WOOD — Office Furniture Manufacturer
   Design tokens
   ---------------------------------------------------------
   Color:
     --walnut-950 : #16110D   (near-black, deep charcoal-walnut)
     --walnut-900 : #241A12   (dark wood body)
     --walnut-800 : #3A2A1B   (mid dark wood, card surfaces on dark)
     --walnut-600 : #6B4226   (mid warm wood, borders/accents)
     --gold       : #D48F06   (brand gold, from logo)
     --gold-dark  : #A66D05   (hover/pressed gold)
     --gold-pale  : #F2D9A0   (pale gold for tints)
     --cream      : #F3ECDF   (warm paper background)
     --cream-2    : #EAE0CC   (slightly deeper paper, section alt)
     --ink        : #1C140D   (body text on light)
   Type:
     Display : "Fraunces"  (organic, wood-grain serif — headings)
     Body    : "Manrope"   (clean humanist sans — paragraphs/UI)
     Label   : "Manrope" small-caps tracked (utility/eyebrow)
   Signature:
     Hand-drawn wavy "wood grain" rule used as a section divider,
     echoing the curved lines of the egg chair in the logo.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --walnut-950:#16110D;
  --walnut-900:#241A12;
  --walnut-850:#2C2015;
  --walnut-800:#3A2A1B;
  --walnut-700:#4E3823;
  --walnut-600:#6B4226;
  --gold:#D48F06;
  --gold-dark:#A66D05;
  --gold-light:#E7AC33;
  --gold-pale:#F2D9A0;
  --cream:#F3ECDF;
  --cream-2:#EAE0CC;
  --ink:#1C140D;
  --ink-soft:#4A3B2E;
  --line:#D8C9AD;
  --shadow: 0 20px 50px -20px rgba(22,17,13,0.45);
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--walnut-950);
  letter-spacing:-0.01em;
}

p{margin:0 0 1em;color:var(--ink-soft);}

a{color:inherit;text-decoration:none;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--gold-dark);
  display:inline-block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-gold{
  background:var(--gold);
  color:var(--walnut-950);
}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);}
.btn-outline{
  background:transparent;
  border-color:rgba(243,236,223,.4);
  color:var(--cream);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline-dark{
  background:transparent;
  border-color:var(--walnut-700);
  color:var(--walnut-950);
}
.btn-outline-dark:hover{border-color:var(--gold-dark);color:var(--gold-dark);}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(22,17,13,.92);
  border-bottom:1px solid rgba(212,143,6,.18);
  transition:top .35s ease;
}
/* Blur lives on a pseudo-layer instead of the header itself.
   backdrop-filter (like transform/filter) creates a new containing
   block for any position:fixed descendant — which was trapping the
   mobile nav drawer inside the header's own box instead of letting
   it cover the viewport. Keeping the filter off the real element
   fixes that while preserving the glass-blur look. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:-1;
  pointer-events:none;
}
.site-header.header-hidden{
  top:-200px;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}
.brand{
  display:flex;align-items:center;gap:12px;
}
.brand img{height:46px;width:auto;}
.brand-name{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:21px;
  color:var(--cream);
  letter-spacing:.01em;
}
.brand-name span{color:var(--gold);}
.nav-links{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
  margin:0;padding:0;
}
.nav-links a{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.82;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0%;height:2px;background:var(--gold);
  transition:width .25s ease;
}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after,
.nav-links a.active::after{width:100%;}
.nav-links a.active{opacity:1;color:var(--gold-light);}
.nav-actions{display:flex;align-items:center;gap:18px;}
.nav-cta{display:none;}
@media(min-width:900px){.nav-cta{display:inline-flex;}}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;height:36px;
  background:none;border:none;cursor:pointer;
  padding:6px;
  position:relative;
}
.nav-toggle span{
  width:24px;height:2px;background:var(--cream);
  transition:transform .3s ease, opacity .2s ease;
  transform-origin:center;
}
.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;}

.nav-backdrop{
  position:fixed;
  top:var(--header-h, 78px);left:0;right:0;bottom:0;
  background:rgba(10,7,5,.55);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:140;
}
.nav-backdrop.open{opacity:1;visibility:visible;}
@media(min-width:900px){.nav-backdrop{display:none;}}

/* Mobile nav drawer — deliberately placed OUTSIDE <header> in the
   HTML (a direct sibling, not a descendant), so it can never be
   trapped by backdrop-filter/transform/filter on the header or any
   wrapper. It is position:fixed relative to the real viewport,
   independent of the header's own layout, now and going forward. */
.mobile-nav{
  position:fixed;
  top:var(--header-h, 78px);right:-100%;bottom:0;
  width:min(300px,80vw);
  background:rgba(20,15,11,.98);
  z-index:150;
  transition:right .35s ease;
  overflow-y:auto;
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
  display:none;
}
.mobile-nav.open{right:0;}
@media(max-width:900px){
  .mobile-nav{display:block;}
  .nav-toggle{display:flex;z-index:160;}
}
.mobile-nav-links{
  list-style:none;
  margin:0;padding:12px 28px 40px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mobile-nav-links a{
  display:block;
  width:100%;
  padding:17px 4px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.9;
  border-bottom:1px solid rgba(243,236,223,.14);
}
.mobile-nav-links a:hover{opacity:1;}
.mobile-nav-links a.active{opacity:1;color:var(--gold-light);}
.mobile-nav-links a.mobile-cta{
  margin-top:18px;
  border-bottom:none;
  text-align:center;
  border-radius:var(--radius);
  background:var(--gold);
  color:var(--walnut-950);
  opacity:1;
}

@media(max-width:900px){
  .nav-links{display:none;}
}

/* ---------------- Hero (video background) ---------------- */
.hero{
  position:relative;
  color:var(--cream);
  overflow:hidden;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  padding:110px 0 70px;
  background:var(--walnut-950);
}
.hero-video-wrap{
  position:absolute;inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--walnut-950);
}
.hero-video-wrap img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 35%;
}
.hero-video-wrap::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(22,17,13,.55) 0%, rgba(22,17,13,.72) 55%, rgba(22,17,13,.94) 100%),
    linear-gradient(90deg, rgba(22,17,13,.75) 0%, rgba(22,17,13,.25) 55%, rgba(22,17,13,.55) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
}
.hero h1{
  font-size:clamp(38px,5.4vw,64px);
  color:var(--cream);
  max-width:14ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold);
}
.hero p.lead{
  font-size:18px;
  max-width:46ch;
  color:rgba(243,236,223,.82);
  margin-bottom:34px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero-stats{
  display:flex;
  gap:38px;
  margin-top:56px;
  flex-wrap:wrap;
  position:relative;z-index:2;
}
.hero-stats .stat b{
  display:block;
  font-family:'Fraunces',serif;
  font-size:32px;
  color:var(--gold);
  font-weight:600;
}
.hero-stats .stat span{
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(243,236,223,.6);
}

/* ---------------- Wood grain divider (signature element) ------------- */
.grain-divider{
  width:100%;
  height:34px;
  display:block;
}
.grain-divider path{
  stroke:var(--gold-dark);
  stroke-width:1.4;
  fill:none;
  opacity:.55;
}
.section-light .grain-divider path{opacity:.35;}

/* ---------------- Sections ---------------- */
section{padding:96px 0;}
.section-alt{background:var(--cream-2);}
.section-dark{
  background:linear-gradient(180deg,var(--walnut-950),var(--walnut-900));
  color:var(--cream);
}
.section-dark p{color:rgba(243,236,223,.72);}
.section-dark h2,.section-dark h3{color:var(--cream);}

.section-head{
  max-width:640px;
  margin:0 0 56px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:14px;}

/* ---------------- About / Intro strip ---------------- */
.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;}}
.about-media{
  position:relative;
  border:1px solid var(--line);
  padding:14px;
  background:var(--cream);
}
.about-media .frame{
  aspect-ratio:4/5;
  background:var(--walnut-800);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.about-media img{width:100%;height:100%;object-fit:cover;}
.about-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;}
.about-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-weight:600;color:var(--walnut-950);
  font-size:15px;
}
.about-list li::before{
  content:"";
  width:8px;height:8px;
  margin-top:6px;
  background:var(--gold);
  flex:none;
}

/* ---------------- Category / Gallery cards ---------------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--walnut-950);
}
@media(max-width:860px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{
  position:relative;
  background:var(--walnut-900);
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
  overflow:hidden;
  isolation:isolate;
}
.cat-card .cat-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  transition:transform .5s ease;
  filter:saturate(1.05);
}
.cat-card:hover .cat-bg{transform:scale(1.07);}
.cat-card .icon{
  position:absolute;
  top:26px;left:26px;
  width:38px;height:38px;
  opacity:.95;
  z-index:2;
}
.cat-card::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(22,17,13,.18) 0%, rgba(22,17,13,.55) 60%, rgba(22,17,13,.92) 100%);
  z-index:1;
}
.cat-card .tag{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:700;
  z-index:2;
  margin-bottom:6px;
  position:relative;
}
.cat-card h3{
  color:var(--cream);
  font-size:22px;
  margin:0;
  z-index:2;
  position:relative;
}
.cat-card{transition:transform .3s ease, box-shadow .3s ease;}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.cat-card .icon{transition:transform .3s ease;}

/* ---------------- Gallery page grid ---------------- */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:48px;
}
.filter-btn{
  padding:9px 20px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{border-color:var(--gold-dark);color:var(--gold-dark);}
.filter-btn.active{
  background:var(--walnut-950);
  border-color:var(--walnut-950);
  color:var(--gold-light);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr;}}

.gallery-item{
  background:var(--cream);
  border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gallery-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:var(--gold);
}
.gallery-thumb{
  aspect-ratio:4/3;
  background:linear-gradient(150deg,var(--walnut-800),var(--walnut-900));
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.gallery-thumb svg{width:46%;opacity:.92;}
.gallery-thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.gallery-item:hover .gallery-thumb img{transform:scale(1.06);}
.gallery-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 75% 15%, rgba(212,143,6,.25), transparent 55%);
  pointer-events:none;
}
.gallery-thumb.has-photo::after{
  background:linear-gradient(180deg, rgba(22,17,13,0) 55%, rgba(22,17,13,.55) 100%);
}

/* ---------------- Showrooms page ---------------- */
.showroom-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
}
@media(max-width:860px){.showroom-grid{grid-template-columns:1fr;}}
.showroom-card{
  background:var(--cream);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.showroom-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.showroom-photo{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
}
.showroom-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.showroom-body{padding:26px 28px 30px;}
.showroom-body .tag{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:700;
}
.showroom-body h3{font-size:22px;margin:8px 0 12px;}
.showroom-meta{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;}
.showroom-meta li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;color:var(--ink-soft);
}
.showroom-meta svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--gold-dark);}
.showroom-note{
  background:var(--cream-2);
  border:1px dashed var(--gold-dark);
  padding:16px 20px;
  font-size:13.5px;
  color:var(--ink-soft);
  margin-bottom:44px;
}
.gallery-body{padding:20px 22px 24px;}
.gallery-body .tag{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:700;
}
.gallery-body h3{font-size:19px;margin:8px 0 6px;}
.gallery-body p{font-size:14px;margin:0;}

/* ---------------- Process / Why us ---------------- */
.feature-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media(max-width:860px){.feature-row{grid-template-columns:repeat(2,1fr);}}
.feature{
  background:var(--cream);
  padding:34px 28px;
}
.feature .num{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--gold-dark);
  font-size:15px;
  margin-bottom:18px;
  display:block;
}
.feature h4{font-size:18px;margin-bottom:8px;}
.feature p{font-size:14.5px;margin:0;}

/* ---------------- CTA band ---------------- */
.cta-band{
  background:var(--walnut-950);
  color:var(--cream);
  padding:70px 0;
  position:relative;
  overflow:hidden;
}
.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  position:relative;z-index:2;
}
.cta-inner h2{color:var(--cream);margin:0;font-size:clamp(24px,3.4vw,34px);max-width:16ch;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------------- Footer ---------------- */
footer{
  background:var(--walnut-950);
  color:rgba(243,236,223,.75);
  padding:70px 0 0;
  border-top:1px solid rgba(212,143,6,.15);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:56px;
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{font-size:14px;max-width:32ch;color:rgba(243,236,223,.6);}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{
  width:38px;height:38px;
  border:1px solid rgba(243,236,223,.25);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.footer-social a:hover{border-color:var(--gold);background:rgba(212,143,6,.12);}
footer h5{
  font-family:'Manrope',sans-serif;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:20px;
  font-weight:700;
}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
footer ul a{font-size:14.5px;color:rgba(243,236,223,.75);transition:color .2s ease;}
footer ul a:hover{color:var(--gold);}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.footer-contact svg{flex:none;margin-top:2px;width:16px;height:16px;color:var(--gold);}
.footer-bottom{
  border-top:1px solid rgba(243,236,223,.12);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:rgba(243,236,223,.45);
}

/* ---------------- Page hero (interior pages) ---------------- */
.page-hero{
  color:var(--cream);
  padding:76px 0 60px;
  position:relative;
  overflow:hidden;
  background:var(--walnut-950);
}
.page-hero-media{
  position:absolute;inset:0;
  z-index:0;
}
.page-hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 38%;
}
.page-hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(22,17,13,.90), rgba(36,26,18,.82) 55%, rgba(22,17,13,.94));
}
.page-hero .container{position:relative;z-index:1;}
.page-hero .eyebrow{color:var(--gold-light);}
.page-hero .eyebrow::before{background:var(--gold-light);}
.page-hero h1{color:var(--cream);font-size:clamp(32px,4.6vw,50px);max-width:16ch;}
.breadcrumb{
  font-size:13px;color:rgba(243,236,223,.55);
  margin-top:16px;
}
.breadcrumb a{color:var(--gold-light);}

/* ---------------- Contact page ---------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--cream);
  border:1px solid var(--line);
  padding:36px;
}
.contact-info-list{list-style:none;margin:0;padding:0;display:grid;gap:22px;}
.contact-info-list li{display:flex;gap:16px;align-items:flex-start;}
.contact-info-list .ic{
  width:44px;height:44px;flex:none;
  background:var(--walnut-950);
  display:flex;align-items:center;justify-content:center;
}
.contact-info-list .ic svg{width:20px;height:20px;color:var(--gold);}
.contact-info-list h4{margin:0 0 4px;font-size:15.5px;font-family:'Manrope',sans-serif;font-weight:700;color:var(--walnut-950);}
.contact-info-list p{margin:0;font-size:14.5px;}
.contact-info-list a{color:var(--ink-soft);}
.contact-info-list a:hover{color:var(--gold-dark);}

.form-field{margin-bottom:20px;}
.form-field label{
  display:block;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:8px;color:var(--walnut-950);
}
.form-field input,.form-field select,.form-field textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  padding:13px 14px;
  font-family:'Manrope',sans-serif;
  font-size:14.5px;
  color:var(--ink);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--gold);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.map-wrap{
  border:1px solid var(--line);
  margin-top:40px;
  filter:sepia(.25) saturate(.7) brightness(.95);
}
.map-wrap iframe{width:100%;height:320px;border:0;display:block;}

/* ---------------- Products page listing ---------------- */
.product-detail-note{
  background:var(--cream-2);
  border:1px dashed var(--gold-dark);
  padding:18px 22px;
  font-size:13.5px;
  color:var(--ink-soft);
  margin-bottom:48px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ---------------- Floating WhatsApp button ---------------- */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:58px;height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.55);
  z-index:300;
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float svg{width:30px;height:30px;}
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 16px 34px -6px rgba(0,0,0,.6);
}
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  opacity:.55;
  animation:wa-pulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.5;}
  100%{transform:scale(1.7);opacity:0;}
}
@media(prefers-reduced-motion: reduce){
  .whatsapp-float::before{animation:none;display:none;}
}
@media(max-width:560px){
  .whatsapp-float{width:52px;height:52px;right:16px;bottom:16px;}
  .whatsapp-float svg{width:26px;height:26px;}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}