/* ============================================================
   Dogwalk Pets Nursery — styles
   Palette grounded in brand-system.md; green validated by staff polos.
   ============================================================ */

:root{
  --bg:#F6FAF5;
  --surface:#FFFFFF;
  --surface-2:#ECF4EC;
  --surface-3:#E3EFE5;
  --text:#15211D;
  --muted:#566963;
  --primary:#1C9A78;
  --primary-deep:#137a5e;
  --primary-soft:#E5F3ED;
  --secondary:#2B5677;
  --secondary-deep:#1c3e58;
  --accent:#F2B84B;
  --accent-deep:#d99a1f;
  --ink:#00242F;
  --ink-2:#0a3340;
  --border:#D8E7DF;
  --border-strong:#C2D8CD;
  --focus:#1C9A78;

  --shadow-sm:0 1px 2px rgba(0,36,47,.06), 0 2px 8px rgba(0,36,47,.05);
  --shadow-md:0 8px 24px rgba(0,36,47,.10), 0 2px 8px rgba(0,36,47,.05);
  --shadow-lg:0 24px 60px rgba(0,36,47,.18), 0 8px 24px rgba(0,36,47,.10);

  --r-sm:12px;
  --r-md:20px;
  --r-lg:32px;
  --r-xl:44px;
  --r-pill:999px;

  --maxw:1200px;
  --gut:clamp(20px,5vw,72px);
  --header-h:72px;

  --font-display:"Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-body:"Manrope", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.04; margin:0; letter-spacing:-.02em; text-wrap:balance}
p{margin:0; text-wrap:pretty}

:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--primary-deep); display:inline-flex; align-items:center; gap:.55em;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.muted{color:var(--muted)}
.section{padding:clamp(64px,9vw,120px) 0}
.section-head{max-width:660px; margin-bottom:clamp(36px,5vw,56px)}
.section-head h2{font-size:clamp(2rem,5.2vw,3.4rem); margin:.35em 0 .4em}
.section-head p{font-size:clamp(1.02rem,2.2vw,1.18rem); color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:1rem; line-height:1; padding:15px 24px;
  border-radius:var(--r-pill); border:1.5px solid transparent; min-height:50px;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(28,154,120,.28)}
.btn-primary:hover{background:var(--primary-deep); box-shadow:0 12px 26px rgba(28,154,120,.34); transform:translateY(-2px)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-2); transform:translateY(-2px)}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary-deep); transform:translateY(-2px)}
.btn-accent{background:var(--accent); color:#3a2c06; box-shadow:0 8px 20px rgba(242,184,75,.3)}
.btn-accent:hover{background:var(--accent-deep); transform:translateY(-2px)}
.btn-block{width:100%}

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em; padding:8px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:.86rem; font-weight:600; box-shadow:var(--shadow-sm);
}
.chip svg{width:1.05em;height:1.05em;color:var(--primary)}
.stars{color:var(--accent); letter-spacing:1px; font-size:.95em}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled{border-bottom-color:var(--border); background:color-mix(in srgb, var(--bg) 92%, transparent); box-shadow:0 2px 16px rgba(0,36,47,.05)}
.nav{display:flex; align-items:center; gap:24px; height:var(--header-h)}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand .logo-chip{
  width:42px;height:42px;border-radius:13px;background:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);border:1px solid var(--border);
  overflow:hidden; flex:none;
}
.brand .logo-chip img{width:30px;height:30px;object-fit:contain}
.brand .brand-name{font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; line-height:1}
.brand .brand-sub{display:block; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:.96rem; color:var(--text);
  transition:background .2s, color .2s;
}
.nav-links a:hover{background:var(--surface-2); color:var(--primary-deep)}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav-phone{display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:var(--text); padding:9px 6px; white-space:nowrap}
.nav-phone svg{flex:0 0 auto; width:20px; height:20px}
.nav-phone:hover{color:var(--primary-deep)}
.nav-toggle{display:none; width:46px;height:46px; border:1px solid var(--border-strong); background:var(--surface); border-radius:14px; align-items:center; justify-content:center}
.nav-toggle svg{width:22px;height:22px}

/* mobile menu sheet */
.mobile-menu{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(0,36,47,.5); backdrop-filter:blur(2px);
}
.mobile-menu.open{display:block}
.mobile-sheet{
  position:absolute; top:0; right:0; height:100%; width:min(86%,380px);
  background:var(--bg); padding:20px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.1,1);
  box-shadow:var(--shadow-lg);
}
.mobile-menu.open .mobile-sheet{transform:translateX(0)}
.mobile-sheet .ms-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.mobile-sheet a.ms-link{padding:15px 14px; border-radius:16px; font-weight:700; font-size:1.15rem; font-family:var(--font-display)}
.mobile-sheet a.ms-link:hover{background:var(--surface-2)}
.mobile-sheet .ms-foot{margin-top:auto; display:grid; gap:10px}
.ms-close{width:46px;height:46px;border-radius:14px;border:1px solid var(--border-strong);background:var(--surface);display:grid;place-items:center}
.ms-close svg{width:22px;height:22px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding-top:clamp(28px,4vw,52px); padding-bottom:clamp(48px,7vw,96px)}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,64px); align-items:center}
.hero-copy{max-width:580px}
.hero h1{font-size:clamp(2.6rem,6.6vw,4.7rem); margin:.42em 0 .5em}
.hero h1 .smile{position:relative; white-space:nowrap}
.hero h1 .smile svg{position:absolute; left:0; right:0; bottom:-.22em; width:100%; height:.34em}
.hero-lede{font-size:clamp(1.08rem,2.3vw,1.28rem); color:var(--muted); max-width:520px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px}
.hero-meta .chip{background:var(--surface)}

/* hero collage with rounded "boutique window" frames */
.hero-art{position:relative}
.frame{position:relative; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-lg)}
.frame img{width:100%;height:100%;object-fit:cover}
.hero-art .main-frame{
  border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 64px;
  aspect-ratio:4/3.35; border:6px solid #fff;
}
.hero-art .sub-frame{
  position:absolute; left:-7%; bottom:-12%; width:42%; aspect-ratio:1/1.12;
  border-radius:30px 30px 30px 40px; border:6px solid #fff; box-shadow:var(--shadow-md); z-index:2;
}
.hero-art .rating-pop{
  position:absolute; right:-3%; top:8%; z-index:3;
  background:#fff; border-radius:20px; padding:13px 17px; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--border);
}
.rating-pop .big{font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1; display:flex; align-items:center; gap:.3em}
.rating-pop .sub{font-size:.74rem; font-weight:600; color:var(--muted)}
.blob{position:absolute; z-index:-1; border-radius:50%; filter:blur(8px); opacity:.5}
.hero-art .blob{width:62%; aspect-ratio:1; right:-8%; top:-10%; background:radial-gradient(circle at 30% 30%, #cdeee0, transparent 70%)}

/* ---------- marquee trust strip ---------- */
.trust{background:var(--ink); color:#dff1ea; overflow:hidden}
.trust .track{display:flex; gap:0; white-space:nowrap; animation:marq 32s linear infinite}
@media (prefers-reduced-motion: reduce){.trust .track{animation:none; flex-wrap:wrap; justify-content:center; white-space:normal}}
.trust .track:hover{animation-play-state:paused}
.trust-item{display:inline-flex; align-items:center; gap:.7em; padding:18px 30px; font-weight:600; font-size:.98rem; letter-spacing:.01em}
.trust-item svg{width:1.1em;height:1.1em;color:var(--accent);flex:none}
.trust-item .star{color:var(--accent)}
.trust-sep{color:rgba(223,241,234,.32)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--bg)}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  display:flex; flex-direction:column;
}
.svc-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--border-strong)}
.svc-media{position:relative; aspect-ratio:1.5/1; overflow:hidden}
.svc-media img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease}
.svc-card:hover .svc-media img{transform:scale(1.05)}
.svc-num{position:absolute; top:12px; left:12px; background:rgba(0,36,47,.62); color:#fff; backdrop-filter:blur(4px); font-family:var(--font-display); font-weight:700; font-size:.78rem; padding:5px 11px; border-radius:var(--r-pill); letter-spacing:.04em}
.svc-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.svc-body h3{font-size:1.32rem}
.svc-body p{color:var(--muted); font-size:.96rem}
.svc-tag{margin-top:auto; padding-top:12px; font-size:.82rem; font-weight:700; color:var(--primary-deep); letter-spacing:.02em; display:inline-flex; align-items:center; gap:.4em}

/* feature band */
.feature{margin-top:clamp(40px,6vw,72px)}
.feature-band{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
  background:linear-gradient(150deg, var(--ink), var(--ink-2)); color:#eaf6f1;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.feature-band .fb-text{padding:clamp(32px,4.5vw,56px); display:flex; flex-direction:column; justify-content:center; gap:16px}
.feature-band .eyebrow{color:var(--accent)}
.feature-band h3{font-size:clamp(1.8rem,3.6vw,2.7rem); color:#fff}
.feature-band p{color:rgba(234,246,241,.8); font-size:1.06rem}
.feature-band .fb-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.feature-band .fb-list span{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); padding:7px 13px; border-radius:var(--r-pill); font-size:.84rem; font-weight:600}
.feature-band .fb-media{position:relative; min-height:320px}
.feature-band .fb-media img{position:absolute; inset:0; width:100%;height:100%; object-fit:cover}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{background:linear-gradient(180deg, var(--surface-2), var(--bg))}
.gal-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filter-btn{
  padding:10px 18px; border-radius:var(--r-pill); border:1.5px solid var(--border-strong);
  background:var(--surface); font-weight:700; font-size:.9rem; color:var(--muted); transition:.2s;
}
.filter-btn:hover{border-color:var(--primary); color:var(--primary-deep)}
.filter-btn.active{background:var(--ink); border-color:var(--ink); color:#fff}
.masonry{margin-top:34px; columns:3; column-gap:16px}
@media (max-width:900px){.masonry{columns:2}}
@media (max-width:560px){.masonry{columns:1}}
.gal-item{
  break-inside:avoid; margin:0 0 16px; border-radius:var(--r-md); overflow:hidden; position:relative;
  cursor:pointer; box-shadow:var(--shadow-sm); background:var(--surface-2); display:block; width:100%; border:0; padding:0;
  transition:transform .3s ease, opacity .3s ease;
}
.gal-item img{width:100%; transition:transform .5s ease}
.gal-item:hover img{transform:scale(1.06)}
.gal-item::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,36,47,.34), transparent 45%);
  opacity:0; transition:opacity .3s;
}
.gal-item:hover::after{opacity:1}
.gal-item .gi-tag{
  position:absolute; left:12px; bottom:12px; z-index:2; color:#fff; font-weight:700; font-size:.82rem;
  opacity:0; transform:translateY(6px); transition:.3s;
  display:inline-flex; align-items:center; gap:.4em;
}
.gal-item:hover .gi-tag{opacity:1; transform:translateY(0)}
.gal-item.hide{display:none}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(0,20,26,.92); backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:82vh; border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.lb-cap{position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#dff1ea; font-weight:600; font-size:.95rem}
.lb-btn{position:absolute; width:52px;height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; transition:.2s}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn svg{width:24px;height:24px}
.lb-close{top:20px; right:20px}
.lb-prev{left:18px; top:50%; transform:translateY(-50%)}
.lb-next{right:18px; top:50%; transform:translateY(-50%)}
@media (max-width:640px){.lb-prev{left:10px} .lb-next{right:10px} .lb-btn{width:44px;height:44px}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--bg)}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.about-media{position:relative}
.about-media .a-main{border-radius:var(--r-lg) var(--r-lg) 56px var(--r-lg); overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow-lg); aspect-ratio:4/3}
.about-media .a-main img{width:100%;height:100%;object-fit:cover}
.about-media .a-badge{
  position:absolute; right:-14px; bottom:-22px; background:var(--accent); color:#3a2c06;
  border-radius:24px; padding:16px 20px; box-shadow:var(--shadow-md); max-width:210px; border:5px solid #fff;
}
.a-badge .ab-big{font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1}
.a-badge .ab-sub{font-size:.82rem; font-weight:700; margin-top:3px}
.about-copy h2{font-size:clamp(2rem,4.6vw,3rem); margin-bottom:.5em}
.about-copy p+p{margin-top:1em}
.about-copy .lead{font-size:1.16rem; color:var(--text)}
.about-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; box-shadow:var(--shadow-sm)}
.stat .s-num{font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--primary-deep); line-height:1}
.stat .s-lab{font-size:.82rem; color:var(--muted); font-weight:600; margin-top:5px}

/* quote */
.quote-band{margin-top:clamp(40px,6vw,68px); background:var(--secondary); color:#eaf2f8; border-radius:var(--r-lg); padding:clamp(34px,5vw,60px); position:relative; overflow:hidden; box-shadow:var(--shadow-lg)}
.quote-band .qmark{position:absolute; top:-10px; right:24px; font-family:var(--font-display); font-size:11rem; line-height:1; color:rgba(255,255,255,.08); font-weight:800}
.quote-band blockquote{margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,3.2vw,2.1rem); line-height:1.28; max-width:880px; letter-spacing:-.01em; color:#fff}
.quote-band .qmeta{margin-top:20px; display:flex; align-items:center; gap:12px; font-size:.95rem}
.quote-band .qmeta .stars{font-size:1.05rem}

/* ============================================================
   VISIT / CONTACT
   ============================================================ */
.visit{background:linear-gradient(180deg, var(--bg), var(--surface-2))}
.visit-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,52px); align-items:start}
.info-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-md)}
.info-row{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--border)}
.info-row:last-of-type{border-bottom:0}
.info-ic{width:44px;height:44px;border-radius:13px;background:var(--primary-soft); color:var(--primary-deep); display:grid; place-items:center; flex:none}
.info-ic svg{width:21px;height:21px}
.info-row h4{font-size:1.04rem; margin-bottom:3px; font-family:var(--font-body); font-weight:700}
.info-row p, .info-row a{color:var(--muted); font-size:.97rem}
.info-row a:hover{color:var(--primary-deep)}
.info-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px}
.map-ph{
  margin-top:18px; border-radius:var(--r-md); overflow:hidden; position:relative; min-height:170px;
  background:
    repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 14px, var(--surface-3) 14px, var(--surface-3) 28px);
  border:1px dashed var(--border-strong); display:grid; place-items:center; text-align:center;
}
.map-ph .mp-inner{background:rgba(255,255,255,.86); border-radius:14px; padding:14px 18px; font-size:.82rem; font-weight:700; color:var(--muted); letter-spacing:.03em; display:inline-flex; align-items:center; gap:.5em}
.map-ph .mp-inner svg{width:1.1em;height:1.1em;color:var(--primary)}

/* form */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-md)}
.form-card h3{font-size:1.6rem; margin-bottom:6px}
.form-card .fc-sub{color:var(--muted); font-size:.96rem; margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block; font-weight:700; font-size:.88rem; margin-bottom:7px}
.field label .req{color:var(--primary-deep)}
.input, .textarea, .select{
  width:100%; padding:14px 15px; border:1.5px solid var(--border-strong); border-radius:14px;
  background:var(--bg); font-family:inherit; font-size:1rem; color:var(--text); transition:border .2s, box-shadow .2s, background .2s;
}
.input:focus, .textarea:focus, .select:focus{outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(28,154,120,.12)}
.textarea{min-height:108px; resize:vertical}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566963' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{display:inline-flex; align-items:center; gap:.4em; padding:10px 15px; border:1.5px solid var(--border-strong); border-radius:var(--r-pill); font-weight:600; font-size:.9rem; cursor:pointer; margin:0; transition:.2s}
.seg input:checked + label{background:var(--primary-soft); border-color:var(--primary); color:var(--primary-deep)}
.seg input:focus-visible + label{outline:3px solid var(--focus); outline-offset:2px}
.err{color:#b4361f; font-size:.82rem; font-weight:600; margin-top:6px; display:none}
.field.invalid .input, .field.invalid .textarea, .field.invalid .select{border-color:#d4583f; box-shadow:0 0 0 4px rgba(212,88,63,.1)}
.field.invalid .err{display:block}
.form-note{font-size:.8rem; color:var(--muted); margin-top:14px; line-height:1.5}
.form-success{display:none; text-align:center; padding:30px 10px}
.form-success.show{display:block}
.form-success .fs-ic{width:64px;height:64px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin:0 auto 16px}
.form-success .fs-ic svg{width:32px;height:32px}
.form-success h3{font-size:1.5rem;margin-bottom:8px}
.form-success p{color:var(--muted)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink); color:#cfe6dd; padding:clamp(52px,7vw,80px) 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.foot-brand .logo-chip{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;margin-bottom:16px}
.foot-brand .logo-chip img{width:34px;height:34px;object-fit:contain}
.foot-brand h3{color:#fff; font-size:1.4rem; margin-bottom:8px}
.foot-brand p{color:rgba(207,230,221,.7); font-size:.95rem; max-width:320px}
.foot-col h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:16px; font-family:var(--font-body); font-weight:700}
.foot-col a, .foot-col p{display:block; color:rgba(207,230,221,.82); padding:6px 0; font-size:.96rem}
.foot-col a:hover{color:#fff}
.socials{display:flex; gap:10px; margin-top:6px}
.socials a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.2s}
.socials a:hover{background:var(--primary); transform:translateY(-2px)}
.socials svg{width:20px;height:20px;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; color:rgba(207,230,221,.6)}

/* ============================================================
   FLOATING PHONE CHIP + MOBILE ACTION BAR
   ============================================================ */
.float-call{
  position:fixed; right:22px; bottom:26px; z-index:70;
  display:inline-flex; align-items:center; gap:.55em; padding:14px 20px;
  background:var(--primary); color:#fff; border-radius:var(--r-pill); font-weight:700;
  box-shadow:0 14px 30px rgba(28,154,120,.4); transform:translateY(140%); transition:transform .4s cubic-bezier(.3,1.2,.5,1);
}
.float-call.show{transform:translateY(0)}
.float-call:hover{background:var(--primary-deep)}
.float-call svg{width:1.2em;height:1.2em}

.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.action-bar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:9px 4px; border-radius:14px; font-weight:700; font-size:.74rem; text-align:center;
}
.action-bar a svg{width:20px;height:20px}
.action-bar .ab-call{background:var(--primary); color:#fff}
.action-bar .ab-enq{background:var(--ink); color:#fff}
.action-bar .ab-dir{background:var(--surface); color:var(--text); border:1px solid var(--border-strong)}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:880px){
  :root{--header-h:64px}
  .nav-links, .nav-cta .nav-phone, .nav-cta .btn{display:none}
  .nav-toggle{display:flex}
  .hero-grid{grid-template-columns:1fr; gap:0}
  .hero-art{order:-1; margin-bottom:42px; max-width:520px}
  .hero-copy{max-width:none}
  .hero-art .sub-frame{width:38%}
  .feature-band{grid-template-columns:1fr}
  .feature-band .fb-media{min-height:260px; order:-1}
  .about-grid{grid-template-columns:1fr}
  .about-media{max-width:520px}
  .about-media .a-badge{right:8px}
  .visit-grid{grid-template-columns:1fr}
  .action-bar{display:grid}
  .float-call{display:none}
  body{padding-bottom:74px}
  .quote-band .qmark{font-size:8rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .svc-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .info-actions{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(3,1fr); gap:8px}
  .stat{padding:13px 11px}
  .stat .s-num{font-size:1.3rem}
  .hero-cta .btn{flex:1 1 auto}
  .hero-art .rating-pop{padding:10px 13px}
  .rating-pop .big{font-size:1.3rem}
}

/* BytesGlue QA map patch */
.bg-map-embed{display:block!important;position:relative!important;width:100%!important;min-height:240px!important;border-radius:12px!important;overflow:hidden!important;background:#e9edf1!important;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset!important}
.bg-map-embed iframe{display:block!important;width:100%!important;min-height:260px!important;border:0!important}
.bg-map-embed + .bg-map-embed,
.bg-map-embed + .pin,
.bg-map-embed + .lbl,
.bg-map-embed + .corner-note,
.bg-map-embed + .placeholder,
.bg-map-embed + .center,
.bg-map-embed + [class*="map-note"],
.bg-map-embed + [class*="map-tag"]{display:none!important}
.map .placeholder .pin,.map-ph .pin,.map-pin,.map-marker,.map-ph__pin,.map-ph__pin .dot,.map-ph__pin .pin,.map-ph .mi{max-width:18px!important;max-height:18px!important;width:18px!important;height:18px!important;box-shadow:none!important}
.map .placeholder .pin svg,.map-ph .pin svg,.map-pin svg,.map-marker svg,.map-ph__pin svg,.map-ph .mi{width:12px!important;height:12px!important}
.map-note,.map-tag,[class*="map-note"],[class*="map-tag"]{display:none!important}