/* =========================================================
   SMOKIN' ACES — MAIN STYLESHEET (Light / Cream Theme)
   Fonts: Anton (display / big headings) + Poppins (body)
   ========================================================= */

:root{
  --bg:         #f4efe3;   /* page background (warm cream) */
  --bg-alt:     #ece3d1;   /* cards / stats bar / service card body */
  --black:      #17130f;   /* header bg, headings */
  --brown:      #241a13;   /* dark pill buttons */
  --tan:        #ac9382;   /* accent (LEGACIES, icons) */
  --tan-dark:   #a9825a;
  --btn-muted:  #ab8e73;   /* muted mocha for the "View All Services" button */
  --text:       #2b2620;
  --text-muted: #7d7568;
  --border:     rgba(23,19,15,0.12);
  --white:      #fffdf9;
  --max-width:  1400px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',sans-serif;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 16px;
}

h1,h2,h3,h4{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:0.5px;
  line-height:1;
}

/* Every h1 on the site uses the grunge display font, with Anton as fallback */
h1{
  font-family:'Stones Crush', 'Anton', sans-serif;
}

.accent{ color:var(--tan); }

.eyebrow{
  display:inline-block;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:50px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:all .3s ease;
  border:1px solid transparent;
  white-space:nowrap;
}

.btn-dark{
  background:var(--brown);
  color:var(--white);
}
.btn-dark:hover{
  background:var(--black);
  transform:translateY(-2px);
}

.btn-cta{
  background:transparent;
  color:var(--tan) !important;
  padding:11px 22px;
  border:1px solid var(--tan);
}
.btn-cta:hover{
  background:var(--tan);
  color:var(--black) !important;
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn-outline:hover{
  border-color:var(--tan-dark);
  color:var(--tan-dark);
  transform:translateY(-2px);
}

.btn-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text);
}
.play-circle{
  width:34px; height:34px;
  border:1px solid var(--text);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  top:18px;
  left:18px;
  right:18px;
  z-index:1000;
  background:var(--black);
  border-radius:18px;
  box-shadow:0 15px 40px rgba(23,19,15,0.28);
}

.header-inner{
  max-width:calc(var(--max-width) - 36px);
  margin:0 auto;
  padding:14px 26px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}

.site-logo{ height:75px; width:auto; }

.logo-link{ flex-shrink:0; }

.main-nav{ justify-self:center; }

.main-nav ul{ display:flex; gap:36px; }

.main-nav a{
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--white);
  position:relative;
  padding-bottom:8px;
  transition:color .25s ease;
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--tan);
  transition:width .25s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--tan); }
.main-nav a.active::after, .main-nav a:hover::after{ width:100%; }

/* ---- Dropdown submenu (e.g. Services > Beer Fest) ---- */
.main-nav ul li{ position:relative; display:flex; align-items:center; }

/* Toggle button (arrow) — on desktop it's purely decorative, since
   hovering the whole <li> opens the dropdown via CSS. */
.dropdown-toggle{
  background:none;
  border:none;
  color:var(--white);
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:0 0 8px; /* matches the <a>'s padding-bottom so the icon aligns with the text */
  cursor:default;
  pointer-events:none;
}
.nav-caret{
  font-size:8px;
  transition:transform .25s ease;
}
.has-dropdown:hover .nav-caret{ transform:rotate(180deg); }

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:10px;
  min-width:170px;
  background:var(--black);
  border-radius:12px;
  padding:8px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:50;
}
.has-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-menu a{
  display:block;
  padding:10px 14px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--white);
  transition:color .2s ease;
}
.dropdown-menu a::after{ display:none; }
.dropdown-menu a:hover{
  background:none;
  color:var(--tan);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--white);
  font-size:40px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:150px;
  min-height:680px;
  background:var(--bg);
  overflow:hidden;
  display:flex;
  align-items:center;
}

/* Hero's own content wrapper — NOT the shared centered .container,
   so text sits close to the real left edge on wide screens instead
   of leaving a big empty gap before the photo starts. */
.hero-content-wrap{
  position:relative;
  z-index:2;
  width:100%;
  padding-left:clamp(16px, 6vw, 100px);
  padding-right:16px;
}

/* ---- Full-bleed photo area on the right, blending into cream bg ---- */
.hero-photo-wrap{
  position:absolute;
  top:0; right:0; bottom:0;
  width:60%;
  z-index:0;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.active{ opacity:1; }

.hero-fade-mask{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(244,239,227,0.75) 12%, rgba(244,239,227,0) 32%),
    linear-gradient(180deg, rgba(23,19,15,0) 45%, rgba(23,19,15,0.5) 100%);
  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:2;
}

.hero-text{ max-width:560px; padding-bottom:70px; }

.hero-eyebrow{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:16px;
}

.hero-title{
  font-family:'Stones Crush', 'Anton', sans-serif;
  font-size:clamp(46px, 9vw, 100px);
  text-transform:uppercase;
  color:var(--black);
  line-height:0.8;
}
.hero-title span{
  display:block;
  color:#ac9382;
}

.hero-desc{
  color:var(--text-muted);
  font-size:15.5px;
  max-width:400px;
  margin:26px 0 34px;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}

/* ---- Dots overlaid on the photo — positioned ABOVE the
       floating stats card so they never get covered, with a
       dark pill background so they stay visible on bright photos ---- */
.hero-dots{
  position:absolute;
  left:50%;
  bottom:120px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:rgba(17,13,10,0.4);
  border-radius:30px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:8;
}
.hero-dots span{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.7);
  display:block;
  cursor:pointer;
  transition:all .3s ease;
}
.hero-dots span:hover{ background:rgba(255,255,255,0.85); }
.hero-dots span.active{
  background:var(--tan);
  border-color:var(--tan);
  width:20px;
  border-radius:6px;
}

/* ---- Rotating badge over hero photo ---- */
.hero-badge{
  position:absolute;
  top:150px;
  right:6%;
  width:140px;
  height:140px;
  z-index:6;
}
.hero-badge svg{ width:100%; height:100%; animation:spin 16s linear infinite; }
.hero-badge-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:#ac9382;
  font-size:30px;
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* =========================================================
   STATS BAR — floating card
   ========================================================= */
.stats-bar{
  position:relative;
  z-index:20;
  padding:70px 16px 0;
}
.hero + .stats-bar{
  margin-top:-70px;
  padding:0 16px;
}
.stats-card{
  max-width:var(--max-width);
  margin:0 auto;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:20px;
  padding:34px 40px;
  box-shadow:0 20px 50px rgba(23,19,15,0.08);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.stat-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 20px;
  position:relative;
}
.stat-item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  height:60%;
  width:1px;
  background:var(--border);
}
.stat-icon{
  width:80px;
  height:80px;
  min-width:50px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  color:var(--black);
}
.stat-label{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:4px;
}
.stat-value{
  font-family:'Anton', sans-serif;
  font-size:45px;
  color:var(--black);
}

/* =========================================================
   ABOUT SECTION
   ========================================================= */
.about-section{ padding:80px 0 80px; }

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.about-image-wrap{
  position:relative;
  padding:0 0 24px 24px;
  margin:0 auto;
}

.about-image-wrap img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:460px;
  margin:0 auto;
  object-fit:fill;
  border-radius:6px;
}

/* Solid tan block peeking out behind the bottom-left corner */
.about-image-wrap::before{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:110px; height:110px;
  background:var(--tan);
  border-radius:8px;
  z-index:0;
}

/* Dot grid pattern floating in the left margin, outside the image */
.about-dots{
  position:absolute;
  top:110px; left:-36px;
  width:80px; height:190px;
  background-image:radial-gradient(rgba(23,19,15,0.22) 1.6px, transparent 1.6px);
  background-size:13px 13px;
  z-index:-1;
}

.about-content h2{
  font-size:clamp(28px, 3.6vw, 42px);
  text-transform:uppercase;
  color:var(--black);
  margin-bottom:22px;
}

.about-content p{
  color:var(--text-muted);
  margin-bottom:16px;
  font-size:15px;
}

/* ---- 4-column feature row (Creative Thinking, Seamless Planning, etc.) ---- */
.about-feature-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:32px;
}
.about-feature{
  position:relative;
  padding-right:24px;
}
.about-feature:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0; top:2px;
  height:calc(100% - 4px);
  width:1px;
  background:var(--border);
}
.about-feature i{
  font-size:22px;
  color:var(--black);
  margin-bottom:14px;
  display:block;
}
.about-feature h4{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--black);
  margin-bottom:6px;
}
.about-feature p{
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:0;
  line-height:1.5;
}

/* ---- Full-width stats row (under image + content, same section) ---- */
.about-stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:56px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:20px;
  padding:34px 30px;
  box-shadow:0 20px 50px rgba(23,19,15,0.06);
}
.about-stat{
  text-align:center;
  position:relative;
}
.about-stat:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-10px; top:50%;
  transform:translateY(-50%);
  height:60%;
  width:1px;
  background:var(--border);
}
.about-stat-icon{
  width:48px; height:48px;
  min-width:48px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  color:var(--tan-dark);
  margin:0 auto 14px;
}
.about-stat-value{
  font-family:'Anton', sans-serif;
  font-size:34px;
  color:var(--black);
}
.about-stat-label{
  font-size:12px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:4px;
}

/* =========================================================
   SERVICES SECTION
   ========================================================= */
.services-section{ padding:60px 0 60px; }

.services-heading{
  text-align:center;
  margin-bottom:56px;
}
.services-heading .eyebrow{ display:block; }

.services-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  max-width:980px;
  margin:0 auto;
}
.services-title-row i{
  color:var(--tan);
  font-size:14px;
  flex-shrink:0;
}
.services-title-row .line{
  height:1px;
  flex:1;
  background:var(--border);
}
.services-title-row h2{
  font-size:clamp(26px, 3.6vw, 40px);
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}

.service-card{
  position:relative;
  background:linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-alt) 55%, #fbf9f4 100%);
  border-radius:18px;
  padding:0 0 28px;
  text-align:center;
  overflow:visible;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:0 2px 14px rgba(23,19,15,0.05);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(23,19,15,0.12);
}

.service-card-img{
  position:relative;
  height:190px;
  border-radius:18px 18px 0 0;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}

/* Gradient fade at the bottom of the image, blending into the card */
.service-card-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(23,19,15,0) 50%, rgba(23,19,15,0.5) 100%);
}

/* Icon is now a SIBLING of the image (not nested inside it), so the
   image's overflow:hidden (needed for its rounded corners/gradient)
   never clips the icon that straddles the card's top edge. */
.service-icon{
  position:absolute;
  left:50%; top:0;
  transform:translate(-50%, -50%);
  width:50px; height:50px;
  background:var(--bg-alt);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  color:var(--black);
  box-shadow:0 6px 16px rgba(23,19,15,0.12);
  z-index:3;
}

.service-card-body{
  padding:22px 18px 0;
}

.service-card-body h3{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:14.5px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--black);
  margin-bottom:10px;
}

.service-card-body p{
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.6;
}

.services-cta{
  text-align:center;
  margin-top:46px;
}

.btn-muted{
  background:var(--btn-muted);
  color:var(--white);
}
.btn-muted:hover{
  background:var(--black);
  transform:translateY(-2px);
}

/* =========================================================
   GENERIC PAGE HERO (About / Services / Contact inner pages)
   ========================================================= */
.page-hero{
  padding:170px 0 90px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(23,19,15,0.75), rgba(23,19,15,0.88)),
    var(--page-hero-bg) center/cover no-repeat;
}
.page-hero h1{
  font-family:'Stones Crush', 'Anton', sans-serif;
  font-size:clamp(36px, 5.6vw, 58px);
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:20px;
}
.page-hero p{
  color:rgba(255,255,255,0.75);
  max-width:600px;
  margin:0 auto;
}

/* Line — star — line divider, used under page-hero headings */
.section-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:420px;
  margin:0 auto 24px;
}
.section-divider .line{
  height:1px;
  flex:1;
  background:rgba(255,255,255,0.25);
}
.section-divider i{
  color:var(--tan);
  font-size:13px;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-section{ padding:100px 0; }
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:50px;
}
.contact-info-card{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:18px;
  padding:40px;
}
.contact-info-card h3{
  font-size:20px;
  text-transform:uppercase;
  margin-bottom:24px;
  color:var(--black);
}
.contact-info-item{
  display:flex;
  gap:16px;
  margin-bottom:26px;
}
.contact-info-item i{
  width:44px; height:44px;
  min-width:44px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--tan-dark);
}
.contact-info-item h4{
  font-family:'Poppins',sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:4px;
  color:var(--black);
}
.contact-info-item p, .contact-info-item a{
  color:var(--text-muted);
  font-size:14.5px;
}

/* Social icon row used inside the "Follow Us" contact item */
.social-icons{
  display:flex;
  align-items:center;
  gap:10px;
}
.social-icons a{
  width:34px; height:34px;
  min-width:34px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  font-size:13px;
  transition:all .25s ease;
}
.social-icons a:hover{
  background:var(--tan);
  border-color:var(--tan);
  transform:translateY(-2px);
}

.contact-form{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  padding:40px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{
  display:block;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.form-group input, .form-group textarea{
  width:100%;
  padding:13px 16px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-family:'Poppins',sans-serif;
  font-size:14px;
}
.form-group input:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--tan-dark);
}
.form-group textarea{ resize:vertical; min-height:130px; }

/* =========================================================
   ABOUT PAGE EXTRA — values
   ========================================================= */
.values-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:50px;
}
.value-card{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 26px;
}
.value-card i{
  font-size:24px;
  color:var(--tan-dark);
  margin-bottom:16px;
  display:block;
}
.value-card h4{
  font-family:'Poppins',sans-serif;
  font-size:15px;
  text-transform:uppercase;
  margin-bottom:10px;
  color:var(--black);
}
/* =========================================================
   SERVICES PAGE — hero + numbered detailed list + dark CTA
   ========================================================= */

/* ---- Hero: "WHAT WE DO / SERVICES" + dancer illustration ---- */
.services-hero{ padding:150px 0 50px; overflow:hidden; }

.services-hero-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  align-items:center;
  gap:40px;
}

.services-hero-title{
  font-size:clamp(56px, 8vw, 100px);
  text-transform:uppercase;
  color:var(--black);
  line-height:0.9;
  margin:8px 0 20px;
}

.services-hero-text p{
  color:var(--text-muted);
  max-width:380px;
  font-size:15px;
}

.services-hero-illustration{
  position:relative;
  height:420px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.halftone-dots{
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--tan) 2.2px, transparent 2.2px);
  background-size:16px 16px;
  opacity:0.5;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 35%, black 78%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, black 35%, black 78%, transparent 100%);
  z-index:0;
}

.services-hero-illustration img{
  position:relative;
  z-index:1;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:bottom right;
}

/* ---- Numbered detailed rows ---- */
.services-detail-section{ padding:20px 0 70px; }

.services-detail-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-left:35px; /* room for the number circle to straddle the card's left border */
}

.service-detail-row{
  position:relative;
}

/* Number circle straddles the card's left border (half outside, half inside) */
.service-number{
  width:70px;
  height:70px;
  min-width:54px;
  border-radius:50%;
  background:var(--tan-dark);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Anton', sans-serif;
  font-size:30px;
  z-index:3;
  position:absolute;
  left:0; top:50%;
  transform:translate(-50%, -50%);
}

.service-detail-card{
  display:flex;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:transparent;
  transition:box-shadow .3s ease, transform .3s ease;
}
.service-detail-card:hover{
  box-shadow:0 14px 34px rgba(23,19,15,0.08);
  transform:translateY(-2px);
}

.service-detail-main{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  flex:1;
  padding:22px 24px 22px 52px;
  min-width:0;
}

.service-detail-icon{
  width:70px;
  height:70px;
  min-width:54px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  color:var(--black);
  flex-shrink:0;
}

.service-detail-content{
  flex:1 1 220px;
  min-width:170px;
}
.service-detail-content h3{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:25px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--black);
  margin-bottom:6px;
  line-height:1.25;
}
.service-detail-content p{
  color:var(--text-muted);
  font-size:13.5px;
  line-height:1.5;
}

.service-bullets{
  flex:1 1 200px;
  min-width:170px;
}
.service-bullets li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  color:var(--text-muted);
  margin-bottom:7px;
}
.service-bullets li:last-child{ margin-bottom:0; }
.service-bullets li::before{
  content:'';
  position:absolute;
  left:0; top:7px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--tan-dark);
}

.service-detail-img{
  width:340px;
  min-width:260px;
  align-self:stretch;
  flex-shrink:0;
}
.service-detail-img img{
  width:100%;
  height:100%;
  min-height:130px;
  object-fit:cover;
  display:block;
}

/* ---- Dark CTA band ---- */
.cta-band-dark{ padding:20px 0 90px; }

.cta-band-dark-inner{
  background:var(--black);
  border-radius:20px;
  display:grid;
  grid-template-columns:1fr auto 1.3fr 1fr;
  align-items:center;
  overflow:hidden;
  position:relative;
  min-height:150px;
}

.cta-band-dark-divider{
  width:1px;
  align-self:stretch;
  margin:34px 0;
  background:rgba(201,162,115,0.4);
}

.cta-band-dark-heading{ padding:30px; }
.cta-band-dark-heading span{
  display:block;
  color:var(--tan);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:8px;
}
.cta-band-dark-heading h2{
  color:var(--white);
  font-size:clamp(24px, 3vw, 34px);
  text-transform:uppercase;
}

.cta-band-dark-text{
  padding:30px;
  position:relative;
  z-index:2;
}
.cta-band-dark-text p{
  color:rgba(255,255,255,0.7);
  font-size:13.5px;
  line-height:1.5;
  margin-bottom:18px;
}

.btn-cta-outline{
  background:transparent;
  border:1px solid var(--tan);
  color:var(--tan);
}
.btn-cta-outline:hover{
  background:var(--tan);
  color:var(--black);
}

.cta-band-dark-img{
  position:relative;
  height:100%;
  min-height:150px;
}
.cta-band-dark-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cta-band-dark-img::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--black) 0%,
    rgba(23,19,15,0.92) 20%,
    rgba(23,19,15,0.55) 45%,
    rgba(23,19,15,0.15) 75%,
    rgba(23,19,15,0) 100%);
}

/* ---- Old about-page value cards (kept, still used on about.php) ---- */
.value-card p{ color:var(--text-muted); font-size:14px; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  padding:90px 0;
  text-align:center;
}
.cta-band h2{
  font-size:clamp(26px, 3.8vw, 42px);
  text-transform:uppercase;
  color:var(--black);
  margin-bottom:22px;
}

/* =========================================================
   FOOTER — single section only (CTA + divider + contact row)
   ========================================================= */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--border);
}
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:44px 24px;
  display:flex;
  align-items:center;
  gap:44px;
}

.footer-cta{
  display:flex;
  align-items:center;
  gap:44px;
  flex:1;
}

.footer-cta h2{
  font-size:clamp(22px, 2.6vw, 30px);
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
}

.footer-cta-details p{
  color:var(--text-muted);
  font-size:14px;
  margin-bottom:14px;
  max-width:260px;
}

.footer-divider{
  width:1px;
  align-self:stretch;
  background:var(--border);
}

.footer-contact-row{
  display:flex;
  gap:44px;
  flex-wrap:wrap;
}
.footer-contact-item{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-contact-icon{
  width:42px; height:42px;
  min-width:42px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--tan-dark);
  font-size:14px;
}
.footer-contact-label{
  font-size:11.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:3px;
}
.footer-contact-item a, .footer-contact-item span{
  font-size:14px;
  color:var(--black);
  font-weight:500;
}

.footer-social-icons{
  display:flex;
  gap:8px;
  flex-shrink:0;
  margin-top:4px;
}
.footer-social-icons a{
  width:26px; height:26px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  font-size:11px;
  transition:all .25s ease;
}
.footer-social-icons a:hover{
  background:var(--tan);
  border-color:var(--tan);
  color:var(--black);
  transform:translateY(-2px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
  .about-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .about-grid{
    gap:25px;
    align-items:center;
  }
  .about-feature-row{ grid-template-columns:repeat(2, 1fr); gap:20px; }
  .about-feature{ padding-right:20px; }
  .about-feature:nth-child(2)::after{ display:none; }
  .about-stats-row{ grid-template-columns:repeat(2, 1fr); row-gap:26px; padding:28px 20px; }
  .about-stat:nth-child(2)::after{ display:none; }
  /* Prevents horizontal overflow: this decorative dot pattern uses a
     negative left offset that only gets hidden below 768px — hide it
     here too so it can't push the page wider than the viewport on
     tablet-ish widths (768px–992px). */
  .about-image-wrap::before,
  .about-dots{ display:none; }
  .services-hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .services-hero-text p{ margin:0 auto; }
  .services-hero-illustration{ justify-content:center; margin-top:20px; }
  .service-detail-card{ flex-direction:column; }
  .service-detail-img{ width:100%; min-width:100%; height:200px; align-self:auto; }
  .cta-band-dark-inner{ grid-template-columns:1fr auto 1.2fr; }
  .cta-band-dark-img{ display:none; }
  .footer-inner{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:30px;
  }
  .footer-cta{
    flex-direction:column;
    text-align:center;
    gap:18px;
  }
  .footer-divider{ display:none; }
  .footer-contact-row{
    justify-content:center;
    flex-wrap:wrap;
    gap:26px;
  }
  .hero{
    flex-direction:column;
    align-items:stretch;
    min-height:auto;
    padding-bottom:50px;
  }
  .hero-content-wrap{ order:1; }
  .hero-photo-wrap{
    order:2;
    position:relative;
    width:100%;
    height:360px;
    margin-top:30px;
    border-radius:16px;
    overflow:hidden;
  }
  .hero-fade-mask{
    background:linear-gradient(180deg, rgba(23,19,15,0) 45%, rgba(23,19,15,0.5) 100%);
  }
  .hero-badge{
    top:16px;
    right:16px;
    width:92px;
    height:92px;
  }
  .hero-badge-center{ font-size:20px; }
  .hero-dots{ bottom:18px; }
  .hero-text{ padding-bottom:0; max-width:100%; }
  .services-grid{ grid-template-columns:repeat(3, 1fr); }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); row-gap:26px; }
  .stat-item:nth-child(2)::after{ display:none; }
  .hero + .stats-bar{ margin-top:0; }
}

@media (max-width: 768px){
  .site-header{ top:12px; left:12px; right:12px; border-radius:14px; }
  .main-nav{
    position:fixed;
    top:122px; left:12px; right:12px;
    background:var(--black);
    border-radius:14px;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav.open{ max-height:420px; }
  .main-nav ul{ flex-direction:column; gap:0; padding:6px 22px; }
  .main-nav ul li{ border-bottom:1px solid rgba(255,255,255,0.1); flex-wrap:wrap; }
  .main-nav ul li a{ display:block; padding:16px 0; }
  .menu-toggle{ display:block; margin-left:auto; }
  .btn-cta{ display:none; }

  /* Submenu on mobile: hidden by default, opens on TAP of the arrow
     (not automatically) — text link still navigates normally. */
  .has-dropdown{ justify-content:space-between; }
  .has-dropdown > a{ flex:1; }
  .dropdown-toggle{
    pointer-events:auto;
    cursor:pointer;
    padding:14px 8px;
  }
  .dropdown-toggle.active .nav-caret{ transform:rotate(180deg); }
  .dropdown-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:transparent;
    border-radius:0;
    width:100%;
    order:3;
    margin:0;
    padding:0 0 0 16px;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .dropdown-menu.open{ max-height:200px; padding-bottom:8px; }
  .dropdown-menu a{
    padding:10px 0;
    font-size:11.5px;
    color:rgba(255,255,255,0.75);
  }

  /* ---- Reduce oversized desktop section spacing on mobile ---- */
  .about-section{ padding:40px 0 40px; }
  .services-section{ padding:40px 0 30px; }
  .services-hero{ padding:126px 0 30px; }
  .services-detail-section{ padding:10px 0 40px; }
  .cta-band-dark{ padding:10px 0 50px; }
  .stats-bar{ padding:40px 24px 0; }
  .stats-card{ padding:26px 0px; }
  .stat-item{
    padding:0 10px;
    gap:10px;
    min-width:0;
  }
  .stat-icon{
    width:56px;
    height:56px;
    min-width:56px;
    font-size:26px;
    border-radius:12px;
  }
  .stat-value{ font-size:22px; }
  .stat-label{ font-size:10px; line-height:1.3; }
  .contact-section{ padding:50px 0; }
  .cta-band{ padding:50px 0; }
  .page-hero{ padding:126px 0 40px; }

  /* ---- Services detail rows: stack cleanly on mobile ---- */
  .services-detail-list{ padding-left:24px; }
  .service-number{ width:44px; height:44px; min-width:44px; font-size:15px; }
  .service-detail-card{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
  }
  .service-detail-main{ padding:18px 20px 18px 34px; gap:14px; }
  .service-detail-content h3{
    font-family:'Poppins', sans-serif;
    font-weight:700;
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:0.3px;
    color:var(--black);
    margin-bottom:6px;
    line-height:1.25;
  }
  .service-detail-img{ width:100%; min-width:100%; height:180px; align-self:auto; }
  .halftone-dots{ opacity:0.4; }
  .services-hero-illustration{ height:220px; align-items:center; }
  .services-hero-illustration img{ height:220px; }

  /* ---- Dark CTA band: stack ---- */
  .cta-band-dark-inner{ grid-template-columns:1fr; text-align:center; }
  .cta-band-dark-divider{ display:none; }
  .cta-band-dark-heading{ padding:26px 26px 0; }
  .cta-band-dark-text{ padding:16px 26px 30px; }
  .cta-band-dark-text .btn{ margin:0 auto; }

  /* ---- Center page content on mobile ---- */
  .hero-text{ text-align:center; margin:0 auto; }
  .hero-actions{ justify-content:center; }
  .about-content{ text-align:center; }
  .about-image-wrap{ padding:0; margin:0 auto 24px; max-width:420px; }
  .about-image-wrap img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:250px;
    margin:0 auto;
    object-fit:fill;
    border-radius:6px;
  }
  .about-image-wrap::before,
  .about-dots{ display:none; }
  .contact-info-card{ text-align:center; }
  .contact-info-item{ text-align:left; }
  .value-card{ text-align:center; }
  .about-feature-row{ grid-template-columns:1fr; text-align:center; }
  .about-feature{ padding-right:0; }
  .about-feature::after{ display:none; }
  .about-stats-row{ grid-template-columns:repeat(2, 1fr); row-gap:24px; padding:26px 18px; }
  .about-stat:nth-child(2)::after{ display:none; }
  .footer-contact-row{ flex-direction:column; align-items:center; gap:20px; }
  .stat-item{ justify-content:center; }

  /* ---- Services grid: proper spacing between rows on mobile ---- */
  .services-grid{
    grid-template-columns:repeat(2, 1fr);
    row-gap:20px;
    column-gap:14px;
  }
  .service-card-img{ height:170px; }
  .services-title-row{ gap:14px; }
  .services-title-row h2{ white-space:normal; }
  .values-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .services-grid{
    grid-template-columns:1fr;
    row-gap:18px;
  }
  .service-card-img{ height:200px; }
  .services-title-row{ flex-wrap:wrap; gap:10px; }
  .services-title-row .line{ display:none; }
  .hero-actions{ flex-direction:column; align-items:center; gap:16px; }
  .hero-photo-wrap{ height:280px; }
  .hero-badge{ width:76px; height:76px; top:12px; right:12px; }
  .hero-badge-center{ font-size:16px; }
}

/* =========================================================
   PROMO POPUP — opens on page load (home page)
   ========================================================= */
.promo-popup-overlay{
  position:fixed;
  inset:0;
  z-index:3000;
  background:rgba(10,8,6,0.8);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .3s ease;
}
.promo-popup-overlay.active{
  display:flex;
  opacity:1;
}

.promo-popup{
  position:relative;
  width:100%;
  max-width:640px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:scale(0.92);
  transition:transform .3s ease;
}
.promo-popup-overlay.active .promo-popup{
  transform:scale(1);
}

.promo-popup-bg{
  width:100%;
  height:auto;
  display:block;
}

.promo-popup-close{
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  min-width:38px;
  border-radius:50%;
  background:#000;
  color:#fff;
  border:2px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
  z-index:5;
  transition:transform .2s ease;
}
.promo-popup-close:hover{
  transform:scale(1.1);
}

.promo-popup-buttons{
  position:absolute;
  left:16%;
  right:16%;
  bottom:9%;
  display:flex;
  gap:8px;
  z-index:4;
}

.promo-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:9px 6px;
  border-radius:50px;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:9.5px;
  text-transform:uppercase;
  line-height:1.25;
  letter-spacing:0.2px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.promo-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

.promo-btn-dark{ background:#111; color:#fff; }
.promo-btn-gold{ background:#f0b429; color:#1a1200; }

.promo-btn-icon{
  width:16px; height:16px;
  min-width:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  flex-shrink:0;
  background:rgba(255,255,255,0.18);
}
.promo-btn-gold .promo-btn-icon{ background:rgba(0,0,0,0.15); }

@media (max-width: 560px){
  .promo-popup-buttons{
    left:12%;
    right:12%;
    bottom:6%;
    gap:6px;
  }
  .promo-btn{
    font-size:8.5px;
    padding:8px 5px;
    gap:4px;
  }
  .promo-btn-icon{
    width:14px; height:14px;
    min-width:14px;
    font-size:7px;
  }
  .promo-popup-close{
    width:32px; height:32px;
    min-width:32px;
    font-size:14px;
    top:10px; right:10px;
  }
}

/* =========================================================
   BEER FEST EVENT PAGE
   ========================================================= */

/* Page-wide black background — sirf is page ke liye (body.beerfest-page) */
body.beerfest-page{
  background:#000 !important;
  min-height:100vh;
}

/* ---- Banner ---- */
.event-banner{
  position:relative;
  margin-top:150px; /* clear black gap so the image starts well below the floating header */
  overflow:hidden;
}
.event-banner-img{
  width:100%;
  height:auto;
  display:block;
}
.event-banner-cta{
  position:absolute;
  left:6%;
  bottom:5%;
  z-index:3;
}

.btn-yellow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#F8BB3C;
  color:#000;
  padding:16px 30px;
  border-radius:50px;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  box-shadow:0 12px 26px rgba(0,0,0,0.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-yellow:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,0.45);
}

/* ---- Event stats: individual rounded yellow pill badges on black bg ---- */
.beer-stats-section{
  padding:60px 24px;
}
.beer-stats-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.beer-stat-pill{
  background:#F8BB3C;
  border-radius:100px;
  padding:36px 20px;
  text-align:center;
}
.beer-stat-value{
  font-family:'Anton', sans-serif;
  font-size:80px;
  line-height:1;
  color:#000;
}
.beer-stat-label{
  font-family:'Poppins', sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#000;
  margin-top:8px;
}

/* ---- Artist lineup ---- */
.artist-lineup-section{ padding:80px 0; }

.artist-lineup-heading-img{
  display:block;
  max-width:480px;
  width:100%;
  margin:0 auto 46px;
}

.artist-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.artist-grid-item{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:1 / 1;
  background:#000000;
}
.artist-grid-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .4s ease;
}
.artist-grid-item:hover img{
  transform:scale(1.06);
}

/* ---- Festival closing section: heading above the image (no overlay) ---- */
.festival-final-section{
  padding:60px 0 0;
  text-align:center;
}

.festival-final-heading{
  font-size:clamp(26px, 4.5vw, 52px);
  line-height:1.25;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:40px;
}

.festival-final-img{
  width:100%;
  height:auto;
  display:block;
}

/* ---- Responsive ---- */
@media (max-width: 992px){
  .beer-stats-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  .artist-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 768px){
  .event-banner{ margin-top:135px; }
  .event-banner-cta{ left:5%; right:5%; bottom:5%; }
  .btn-yellow{
    display:flex;
    text-align:center;
    justify-content:center;
    font-size:13px;
    padding:14px 18px;
  }
  .beer-stats-section{ padding:40px 16px; }
  .beer-stat-pill{ padding:26px 14px; border-radius:60px; }
  .beer-stat-value{ font-size:36px; }
  .beer-stat-label{ font-size:12px; }
  .artist-lineup-section{ padding:50px 0; }
  .artist-lineup-heading-img{ margin-bottom:28px; }
  .festival-final-section{ padding-top:36px; }
  .festival-final-heading{ margin-bottom:26px; }
}

@media (max-width: 480px){
  .artist-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .beer-stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .beer-stat-value{ font-size:30px; }
  .beer-stat-label{ font-size:10.5px; }
}

/* ---- "UNLIMITED BEER" scrolling marquee strip ---- */
.marquee-strip{
  background:#F8BB3C;
  overflow:hidden;
  padding:7px 0;
}
.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:36px;
  animation:marquee-scroll 22s linear infinite;
}
.marquee-track span{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'Anton', sans-serif;
  font-size:22px;
  letter-spacing:1px;
  color:#000;
  text-transform:uppercase;
  white-space:nowrap;
}
.marquee-track span i{
  font-size:11px;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width: 768px){
  .marquee-track{ animation-duration:16s; gap:24px; }
  .marquee-track span{ font-size:15px; gap:10px; }
}

/* Wider content column — ONLY on the Beer Fest page, ONLY on desktop.
   Scoped via body.beerfest-page so every other page's .container
   (max-width:1200px) stays completely untouched. */
@media (min-width: 993px){
  body.beerfest-page .container{
    max-width:1400px;
  }
}

/* =========================================================
   FORM TOAST — success/error popup notification
   ========================================================= */
.form-toast{
  position:fixed;
  top:110px;
  right:24px;
  z-index:4000;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
  font-family:'Poppins', sans-serif;
  font-size:14px;
  font-weight:500;
  max-width:360px;
  color:#fff;
  animation:toastSlideIn .4s ease;
}
.toast-success{ background:#2e9e5b; }
.toast-error{ background:#c0392b; }
.form-toast i:first-child{ font-size:18px; flex-shrink:0; }
.toast-close{
  background:none;
  border:none;
  color:#fff;
  opacity:0.85;
  cursor:pointer;
  margin-left:auto;
  font-size:14px;
  flex-shrink:0;
  padding:4px;
}
.toast-close:hover{ opacity:1; }

@keyframes toastSlideIn{
  from{ transform:translateX(120%); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
.form-toast.hide{
  animation:toastSlideOut .35s ease forwards;
}
@keyframes toastSlideOut{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(120%); opacity:0; }
}

@media (max-width: 480px){
  .form-toast{ left:16px; right:16px; top:100px; max-width:none; }
}

/* =========================================================
   LARGE / ULTRA-WIDE SCREENS
   1400px was capping content on big monitors (1920px+),
   leaving a large empty gap on both sides. Scale the content
   width up gradually as the screen gets bigger instead of
   staying flat at 1400px forever.
   ========================================================= */
@media (min-width: 1600px){
  :root{ --max-width: 1600px; }
}
@media (min-width: 1920px){
  :root{ --max-width: 1760px; }
}

/* =========================================================
   FLOATING CALL + WHATSAPP BUTTONS — every page, fixed corner
   ========================================================= */
.float-actions{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:3500;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.float-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:floatPulse 2.4s ease-in-out infinite;
}
.float-btn:hover{
  transform:scale(1.08);
  box-shadow:0 14px 30px rgba(0,0,0,0.32);
}

.float-call{ background:#2ecc71; }
.float-whatsapp{ background:#25D366; font-size:28px; }

@keyframes floatPulse{
  0%, 100%{ box-shadow:0 10px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.35); }
  50%{ box-shadow:0 10px 24px rgba(0,0,0,0.25), 0 0 0 10px rgba(37,211,102,0); }
}

@media (max-width: 480px){
  .float-actions{ right:16px; bottom:16px; gap:12px; }
  .float-btn{ width:50px; height:50px; font-size:21px; }
  .float-whatsapp{ font-size:25px; }
}