/* ==========================================================================
   WeBrandBangalore — Design System
   Palette is drawn from the four-colour print process (CMYK) itself.
   ========================================================================== */

:root{
  --paper:      #FAFAF7;
  --paper-dim:  #F1EFE6;
  --ink:        #151513;
  --ink-soft:   #2A2A26;
  --slate:      #5B5B54;
  --line:       #DEDACB;
  --cyan:       #0093D0;
  --magenta:    #D6006F;
  --yellow:     #FFC72C;
  --key:        #151513;

  --font-head: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, Segoe UI, sans-serif;

  --maxw: 1180px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
/* Safety net: any inline <svg> icon we forgot to size explicitly falls back to a
   sane, font-relative size instead of the browser's 300x150 default — this was
   the cause of oversized icons in buttons, the footer and the social row. */
svg{ width:1.1em; height:1.1em; flex-shrink:0; vertical-align:-0.15em; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--ink);
}
p{ margin:0 0 1em; max-width:62ch; color:var(--ink-soft); }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.hide{ display:none !important; }

/* ---------- registration-mark motif (the recurring graphic device) ---------- */
.regmark{ display:inline-flex; align-items:center; gap:6px; }
.regmark svg{ width:20px; height:20px; flex:0 0 auto; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.rule--thick{ border-top:2px solid var(--ink); }
.crop-frame{
  position:relative;
  padding:40px 0;
}
.crop-frame::before,.crop-frame::after{
  content:'';
  position:absolute; left:0; right:0; height:1px; background:var(--line);
}
.crop-frame::before{ top:0; }
.crop-frame::after{ bottom:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  padding:13px 24px; border-radius:var(--radius);
  border:2px solid var(--ink); cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--magenta); border-color:var(--magenta); color:#fff; }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-yellow{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.btn-yellow:hover{ background:var(--ink); border-color:var(--ink); color:var(--yellow); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }

/* ---------- signature colour strip (also used as a page-fix for "add colour") ----------
   Four flex segments instead of one hard-stop gradient: gradients with % colour
   stops round to sub-pixels at fractional zoom/display-scaling (e.g. 125%/150%
   Windows scaling, some browser zoom levels), leaving a visible gap/seam between
   bands. Flex children snap edge-to-edge with no rounding gap at any scale. */
.brand-strip{ height:5px; display:flex; }
.brand-strip span{ flex:1 1 0; }
.brand-strip span:nth-child(1){ background:var(--cyan); }
.brand-strip span:nth-child(2){ background:var(--magenta); }
.brand-strip span:nth-child(3){ background:var(--yellow); }
.brand-strip span:nth-child(4){ background:var(--ink); }

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--ink); color:var(--paper);
  font-size:.82rem;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; padding-bottom:8px; gap:12px; flex-wrap:wrap;
}
.topbar a{ color:var(--paper); }
.topbar .tb-links{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.topbar .tb-links span.dot{ color:var(--yellow); }
.topbar strong{ color:var(--yellow); font-weight:700; }

/* ---------- header / nav ---------- */
.site-header{
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  position:sticky; top:0; z-index:100;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:14px; flex-wrap:nowrap;
}
.nav-panel-head{ display:none; }
.nav-panel-call{ display:none; } /* mobile-drawer-only CTA — must stay hidden on desktop */
.logo{
  display:flex; align-items:flex-start; gap:10px;
  color:var(--ink); min-width:0;
}
.logo .logo-mark-wrap{ flex:0 0 auto; margin-top:2px; }
.logo .logo-text{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.logo .logo-line1{ font-family:var(--font-head); font-weight:900; font-size:1.3rem; white-space:nowrap; }
.logo .logo-line1 .accent{ color:var(--magenta); }
.logo .logo-line2{
  font-family:var(--font-body); font-weight:700; font-size:.78rem; color:var(--ink-soft);
  white-space:nowrap;
}
.logo .logo-sub{
  display:block; font-family:var(--font-body); font-weight:600;
  font-size:.58rem; letter-spacing:.02em; color:var(--slate); margin-top:3px; white-space:nowrap;
}
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.main-nav a.nav-link{
  padding:9px 10px; font-weight:600; font-size:.88rem; border-radius:var(--radius);
  position:relative; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.main-nav a.nav-link:hover{ color:var(--magenta); }
/* selected/current page indicator: colour + weight + an underline bar (desktop) */
.main-nav a.nav-link.active{ color:var(--magenta); font-weight:800; }
@media (min-width:761px){
  .main-nav a.nav-link.active::after{
    content:''; position:absolute; left:10px; right:10px; bottom:1px; height:2px;
    background:var(--magenta); border-radius:2px;
  }
}
/* dropdown indicator chevron on "Services" */
.drop-chevron{ transition:transform .15s ease; }
.has-drop:hover .drop-chevron, .has-drop.open .drop-chevron{ transform:rotate(180deg); }
.has-drop{ position:relative; }
.nav-backdrop{ display:none; }
.drop{
  display:none; position:absolute; top:100%; left:0; min-width:260px;
  background:var(--paper); border:2px solid var(--ink); padding:8px; z-index:20;
}
.has-drop:hover .drop, .has-drop:focus-within .drop{ display:block; }
.drop a{ display:block; padding:9px 12px; font-size:.88rem; font-weight:500; border-radius:2px; }
.drop a:hover{ background:var(--paper-dim); color:var(--magenta); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .call-pill{
  display:flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem;
  border:2px solid var(--ink); padding:8px 12px; border-radius:var(--radius); white-space:nowrap;
}
.nav-cta .call-pill svg{ width:16px; height:16px; }
.burger{ display:none; background:none; border:2px solid var(--ink); border-radius:3px; width:44px; height:40px; cursor:pointer; position:relative; }
.burger span, .burger::before, .burger::after{
  content:''; position:absolute; left:9px; right:9px; height:2px; background:var(--ink);
}
.burger span{ top:19px; }
.burger::before{ top:12px; }
.burger::after{ top:26px; }

/* ---------- hero ---------- */
.hero{ padding:44px 0 52px; background:var(--paper); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.eyebrow-mark{ display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--slate); font-weight:700; font-size:.85rem; }
.hero h1{ font-size:clamp(1.9rem,3.8vw,2.9rem); }
.hero .lede{ font-size:1.08rem; max-width:52ch; }
.hero-cta-row{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.hero-stats div{ border-left:3px solid var(--magenta); padding-left:12px; }
.hero-stats div:nth-child(2){ border-left-color:var(--cyan); }
.hero-stats div:nth-child(3){ border-left-color:var(--yellow); }
.hero-stats strong{ display:block; font-family:var(--font-head); font-size:1.5rem; }
.hero-stats span{ font-size:.78rem; color:var(--slate); }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

/* ---------- sections ---------- */
section{ padding:52px 0; }
.section-alt{ background:var(--paper-dim); }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-ink p{ color:#C9C6BC; }
.section-ink h2, .section-ink h3{ color:var(--paper); }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head .kicker{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.82rem; letter-spacing:.02em; color:var(--magenta); margin-bottom:10px; }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2rem); }

/* ---------- photo / video gallery tiles (drop real files in to replace placeholders) ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.photo-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.photo-tile{
  position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-dim); border-radius:var(--radius);
}
.photo-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.photo-tile .placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; padding:14px; text-align:center; z-index:1;
}
.photo-tile .placeholder svg{ width:26px; height:26px; color:var(--slate); opacity:.5; }
.photo-tile .placeholder .ph-label{ font-size:.72rem; font-weight:700; color:var(--slate); }
.photo-tile .placeholder .ph-path{ font-size:.6rem; font-family:monospace; color:var(--slate); opacity:.75; word-break:break-all; }

.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.video-tile{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius);
  background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--paper); text-align:center; padding:14px;
}
.video-tile .play-badge{
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12);
  border:2px solid var(--paper); display:flex; align-items:center; justify-content:center;
}
.video-tile .play-badge svg{ width:16px; height:16px; margin-left:2px; }
.video-tile .vt-label{ font-size:.78rem; font-weight:700; }
.video-tile .vt-hint{ font-size:.62rem; font-family:monospace; color:#B8B5AC; opacity:.85; }

/* service grid */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.svc-card{
  border:1px solid var(--line); background:var(--paper); padding:26px 22px;
  border-radius:var(--radius); transition:border-color .15s ease, transform .15s ease;
}
.svc-card:hover{ border-color:var(--ink); transform:translateY(-3px); }
.svc-card .ic{
  width:52px; height:52px; margin-bottom:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.svc-card .ic svg{ width:24px; height:24px; }
.svc-card:nth-of-type(3n+1) .ic{ background:rgba(0,147,208,.14); color:var(--cyan); }
.svc-card:nth-of-type(3n+2) .ic{ background:rgba(214,0,111,.13); color:var(--magenta); }
.svc-card:nth-of-type(3n+3) .ic{ background:rgba(255,199,44,.22); color:var(--ink); }
.svc-card h3{ font-size:1.08rem; margin-bottom:8px; }
.svc-card p{ font-size:.92rem; margin-bottom:14px; }
.svc-card .lnk{ font-weight:700; font-size:.85rem; color:var(--ink); border-bottom:2px solid var(--yellow); }

/* process steps (genuine sequence -> numbered) */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step{ padding:0 22px 0 0; border-left:2px solid var(--line); padding-left:22px; }
.step:first-child{ border-left:none; padding-left:0; }
.step .num{ font-family:var(--font-head); font-size:2.1rem; color:var(--yellow); -webkit-text-stroke:1.5px var(--ink); display:block; margin-bottom:10px; }
.step h4{ font-size:1rem; margin-bottom:8px; }
.step p{ font-size:.88rem; }

/* areas grid (chips) */
.area-chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.area-chip{ border:1px solid var(--line); padding:9px 16px; border-radius:20px; font-size:.86rem; font-weight:600; background:var(--paper); }
.area-chip:hover{ border-color:var(--magenta); color:var(--magenta); }

/* testimonial */
.quote-card{ border:1px solid var(--line); padding:26px; background:var(--paper); border-radius:var(--radius); }
.quote-card p{ font-size:1rem; font-style:italic; }
.quote-card .who{ font-weight:700; font-style:normal; font-size:.85rem; color:var(--slate); margin-top:14px; }
.stars{ color:var(--yellow); letter-spacing:2px; margin-bottom:10px; display:block; }

/* CTA band */
.cta-band{ background:var(--ink); color:var(--paper); padding:52px 0; }
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-band h2{ color:var(--paper); font-size:clamp(1.3rem,2.6vw,1.7rem); margin-bottom:6px; }
.cta-band p{ color:#C9C6BC; margin:0; }
.cta-band .btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item.open{ border-left:3px solid var(--magenta); padding-left:14px; margin-left:-17px; }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 0; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--ink);
}
.faq-q .plus{ font-size:1.4rem; font-weight:400; transition:transform .2s ease; flex:0 0 auto; margin-left:16px; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a p{ padding-bottom:20px; max-width:70ch; }

/* breadcrumb */
.breadcrumb{ font-size:.82rem; color:var(--slate); padding:16px 0; }
.breadcrumb a:hover{ color:var(--magenta); }
.breadcrumb .sep{ margin:0 6px; }

/* page hero (inner pages, shorter) */
.page-hero{ padding:36px 0 44px; border-bottom:1px solid var(--line); background:var(--paper-dim); }
.page-hero h1{ font-size:clamp(1.6rem,3vw,2.2rem); max-width:800px; }
.page-hero p{ max-width:680px; }

/* two-col content */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split.rev .col-a{ order:2; }

/* specs / feature list */
.feat-list li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.feat-list li svg{ width:18px; height:18px; flex:0 0 auto; color:var(--cyan); margin-top:2px; }

/* pricing-ish "why bulk" tiles */
.tile-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tile{ text-align:center; padding:26px 14px; border:1px solid var(--line); border-top:3px solid var(--cyan); }
.tile:nth-child(2){ border-top-color:var(--magenta); }
.tile:nth-child(3){ border-top-color:var(--yellow); }
.tile:nth-child(4){ border-top-color:var(--ink); }
.tile strong{ display:block; font-family:var(--font-head); font-size:1.7rem; }
.tile span{ font-size:.8rem; color:var(--slate); }

/* footer */
.site-footer{ background:var(--ink); color:#C9C6BC; padding:56px 0 0; font-size:.9rem; border-top:5px solid; border-image:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow)) 1; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:40px; }
.foot-grid h4{ color:var(--paper); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.foot-grid ul li{ display:flex; align-items:flex-start; gap:8px; margin-bottom:9px; }
.foot-grid ul li svg{ width:17px; height:17px; margin-top:2px; color:var(--yellow); }
.foot-grid a:hover{ color:var(--yellow); }
.foot-logo{ color:var(--paper); font-family:var(--font-head); font-weight:800; font-size:1.2rem; margin-bottom:12px; display:block; }
.foot-bottom{ border-top:1px solid #3A3A34; padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; }
.foot-bottom a:hover{ color:var(--yellow); }
.social-row{ display:flex; gap:10px; margin-top:14px; }
.social-row a{ width:36px; height:36px; border:1px solid #3A3A34; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.social-row svg{ width:17px; height:17px; }
.social-row a:hover{ border-color:var(--yellow); color:var(--yellow); }

/* floating action buttons (call / whatsapp / mail) */
.fab-stack{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.fab{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:26px; height:26px; }
.fab-call{ background:var(--cyan); }
.fab-whatsapp{ background:#25D366; }
.fab-mail{ background:var(--magenta); }

/* mobile sticky call/whatsapp bar */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:190;
  border-top:2px solid var(--ink); background:var(--paper);
  grid-template-columns:1fr 1fr 1fr;
}
.mobile-cta-bar a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 0; font-size:.68rem; font-weight:700; border-right:1px solid var(--line);
}
.mobile-cta-bar a:last-child{ border-right:none; }
.mobile-cta-bar svg{ width:20px; height:20px; }
.mobile-cta-bar a.mb-call svg{ color:var(--cyan); }
.mobile-cta-bar a.mb-wa svg{ color:#25D366; }
.mobile-cta-bar a.mb-mail svg{ color:var(--magenta); }

/* back to top */
.back-top{
  position:fixed; left:18px; bottom:18px; z-index:190;
  width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:none; align-items:center; justify-content:center; opacity:.85;
}

/* form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1 / -1; }
label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; }
input,select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.95rem; background:#fff;
}
input:focus,select:focus,textarea:focus{ border-color:var(--ink); }
textarea{ min-height:120px; resize:vertical; }

/* map embed frame */
.map-frame{ border:2px solid var(--ink); overflow:hidden; }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* utility */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.badge{ border:1px solid var(--line); padding:6px 12px; font-size:.75rem; font-weight:700; border-radius:20px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:360px; margin:0 auto; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .step{ border-left:none; padding-left:0; border-top:2px solid var(--line); padding-top:18px; }
  .split{ grid-template-columns:1fr; }
  .split.rev .col-a{ order:0; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .tile-row{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .topbar .tb-links a:nth-child(3){ display:none; }
  .main-nav{ display:none; position:fixed; top:0; right:0; bottom:0; width:82%; max-width:340px;
    background:var(--paper); border-left:2px solid var(--ink); padding:0 24px 24px; overflow-y:auto; z-index:150; }
  .main-nav.open{ display:block; }
  .nav-panel-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:20px 0 18px; margin-bottom:6px; border-bottom:2px solid var(--ink);
    position:sticky; top:0; background:var(--paper);
  }
  .nav-panel-head .logo-line1{ font-size:1.1rem; }
  .nav-panel-head .logo-line2{ font-size:.7rem; }
  .nav-panel-close{
    flex:0 0 auto; width:34px; height:34px; border:2px solid var(--ink); border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:none; cursor:pointer;
  }
  .nav-panel-close svg{ width:16px; height:16px; }
  .nav-panel-call{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:14px 0 6px; padding:12px; background:var(--ink); color:var(--paper);
    font-family:var(--font-head); font-weight:700; font-size:.9rem; border-radius:var(--radius);
  }
  .nav-panel-call svg{ width:16px; height:16px; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav a.nav-link{ padding:14px 4px; border-bottom:1px solid var(--line); }
  .main-nav a.nav-link.active{ border-left:3px solid var(--magenta); padding-left:10px; background:rgba(214,0,111,.06); }
  .main-nav a.nav-link.active::after{ display:none; } /* desktop underline not used in the stacked mobile list */
  .has-drop .drop{ position:static; display:none; border:none; padding:0 0 0 14px; }
  .has-drop:hover .drop{ display:none; } /* disable desktop hover-open on touch widths */
  .has-drop.open .drop{ display:block; } /* only the JS-toggled .open class reveals it */
  .nav-cta .call-pill{ display:none; }
  .burger{ display:block; }
  .nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(21,21,19,.5); z-index:140; }
  .nav-backdrop.open{ display:block; }

  .logo .logo-line1{ font-size:1.05rem; }
  .logo .logo-line2{ font-size:.68rem; }
  .logo .logo-sub{ font-size:.54rem; }

  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
  .photo-grid,.video-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .tile-row{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr; gap:26px; padding-bottom:26px; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band .container{ flex-direction:column; align-items:flex-start; }

  section{ padding:44px 0; }
  .hero{ padding:36px 0 90px; }
  body{ padding-bottom:56px; } /* room for mobile cta bar */
  .mobile-cta-bar{ display:grid; }
  .fab-stack{ display:none; } /* replaced by bottom bar on mobile */
  .back-top{ bottom:66px; }
}

@media (max-width:560px){
  .nav-cta .btn-primary.btn-sm{ display:none; } /* redundant with the sticky bottom call/WhatsApp/mail bar */
}

@media (max-width:480px){
  .hero-stats{ gap:18px; }
  .logo .logo-line1{ font-size:.98rem; }
  .logo .logo-line2{ font-size:.64rem; }
}

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