/* Ember & Bean Coffee House — demo stylesheet (mobile-first) */
:root{
  --espresso:#2b1a12; --roast:#4a2c1d; --mocha:#6f4a35; --ember:#e8893a; --ember-dark:#c96d22;
  --cream:#f7efe4; --foam:#fffaf3; --latte:#e9dccb; --ink:#2a211c; --muted:#7a6a5f;
  --wa:#1fa855; --radius:18px; --shadow:0 18px 40px -18px rgba(43,26,18,.35);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --header-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--foam);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ember-dark)}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .5em;color:var(--espresso);font-weight:700}
h2{font-size:clamp(1.9rem,4.5vw,2.8rem);letter-spacing:-.01em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.container{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:1rem;top:-3rem;background:var(--espresso);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:200}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:6px}
.muted{color:var(--muted)}
.kicker{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ember-dark);font-weight:600;margin-bottom:.6rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font:inherit;font-weight:600;transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ember{background:var(--ember);color:var(--espresso);box-shadow:0 10px 24px -10px rgba(232,137,58,.8)}
.btn-ember:hover{background:#f19a4d}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:#fff;color:var(--espresso)}
.btn-outline{border-color:var(--espresso);color:var(--espresso);background:transparent}
.btn-outline:hover{background:var(--espresso);color:#fff}
.btn-whatsapp{background:var(--wa);color:#fff}
.btn-whatsapp:hover{background:#17924a}
.btn-sm{padding:.55rem 1.1rem;font-size:.92rem}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);display:flex;align-items:center;color:#fff;transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(43,26,18,.94);backdrop-filter:blur(10px);box-shadow:0 6px 24px -12px rgba(0,0,0,.5)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between}
.brand{color:#fff;display:block}
.brand img{height:46px;width:auto}
.nav-toggle{width:46px;height:46px;border:0;background:rgba(255,255,255,.1);border-radius:12px;display:grid;place-content:center;gap:5px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav{position:fixed;inset:var(--header-h) 0 auto;background:var(--espresso);padding:1rem 1.25rem 1.5rem;transform:translateY(-120%);transition:transform .35s ease;visibility:hidden}
.site-nav.open{transform:none;visibility:visible}
.site-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.site-nav a:not(.btn){display:block;color:#f3e6d3;text-decoration:none;padding:.75rem .25rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.08)}
.site-nav .btn{margin-top:.75rem;width:100%}
@media (min-width:960px){
  .nav-toggle{display:none}
  .site-nav{position:static;transform:none;visibility:visible;background:none;padding:0}
  .site-nav ul{display:flex;align-items:center;gap:1.6rem}
  .site-nav a:not(.btn){border:0;padding:.3rem 0;position:relative;font-size:.95rem}
  .site-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--ember);transition:right .25s}
  .site-nav a:not(.btn):hover::after,.site-nav a.active::after{right:0}
  .site-nav .btn{margin:0;width:auto}
}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:calc(var(--header-h) + 3rem) 0 3rem}
.hero-media{position:absolute;inset:0;background:url("../assets/img/hero.webp") center/cover no-repeat;transform:scale(1.04);animation:heroZoom 18s ease-out forwards}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,16,10,.55) 0%,rgba(28,16,10,.35) 35%,rgba(28,16,10,.85) 100%),linear-gradient(90deg,rgba(28,16,10,.7),transparent 70%)}
@keyframes heroZoom{to{transform:scale(1)}}
/* ---- Hero cup animation: steam + crema sheen ----------------------------
   .hero-media is a size container; .hero-stage reproduces background-size:cover
   for the 1280x720 hero photo (same centre, same scale), so 1cqw inside the stage
   = 12.8 source pixels. The latte surface in hero.webp is centred at (861,520) px,
   ~178 x 37 px. Everything moves with transform/opacity only. */
.hero-media{container:hero/size}
.hero-stage{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);container-type:inline-size;pointer-events:none;z-index:0}
.hero-stage-fx{z-index:1}
.cup-fx{position:absolute;left:67.27cqw;top:40.62cqw;width:0;height:0}
/* Cup and saucer are separate layers (cut from the photo, clean table behind them). They slide in from opposite sides,
   then float gently. The steam stage uses the same .hero-cup animation so the steam stays with the cup. */
.stage-bg{position:absolute;inset:0;width:100%;height:100%}
.hero-saucer{position:absolute;left:55.7cqw;top:43.98cqw;width:23.83cqw;height:auto;filter:drop-shadow(0 1.1cqw 1.3cqw rgba(24,12,6,.5));
  animation:saucerIn 1.5s cubic-bezier(.22,.85,.25,1) .25s both,saucerFloat 7s ease-in-out 1.75s infinite;will-change:transform}
.hero-cup{position:absolute;inset:0;transform-origin:67.5cqw 50cqw;
  animation:cupIn 1.7s cubic-bezier(.2,.9,.25,1.05) .8s both,cupFloat 6s ease-in-out 2.5s infinite;will-change:transform}
.cup-img{position:absolute;left:59.14cqw;top:38.52cqw;width:20.39cqw;height:auto;filter:drop-shadow(0 .5cqw .7cqw rgba(24,12,6,.28))}
.hero-stage-fx .steam{animation:steamIn 1.5s ease-out 2.4s both}
@keyframes saucerIn{from{opacity:0;transform:translate3d(-42cqw,0,0)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes cupIn{from{opacity:0;transform:translate3d(42cqw,-2cqw,0) rotate(5deg)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes saucerFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-.45cqw,0) rotate(-.15deg)}}
@keyframes cupFloat{0%,100%{transform:translate3d(0,0,0) rotate(0)}35%{transform:translate3d(.15cqw,-.9cqw,0) rotate(.35deg)}70%{transform:translate3d(-.1cqw,-.4cqw,0) rotate(-.25deg)}}
@keyframes steamIn{from{opacity:0}to{opacity:1}}
.crema{position:absolute;left:-6.85cqw;top:-1.38cqw;width:13.7cqw;height:2.76cqw;border-radius:50%;overflow:hidden;mix-blend-mode:soft-light;opacity:.38}
.crema .sheen{position:absolute;left:0;top:50%;width:13.7cqw;height:13.7cqw;margin-top:-6.85cqw;border-radius:50%;
  background:radial-gradient(circle at 30% 50%,rgba(255,244,225,.95),rgba(255,244,225,0) 38%),radial-gradient(circle at 75% 40%,rgba(255,236,210,.5),rgba(255,236,210,0) 30%);
  transform:scaleY(.2) rotate(0deg);animation:cremaSpin 22s linear infinite;opacity:.55}
.crema .ripple{position:absolute;left:50%;top:50%;width:13.7cqw;height:13.7cqw;margin:-6.85cqw 0 0 -6.85cqw;border-radius:50%;box-shadow:inset 0 0 .25cqw .12cqw rgba(255,245,230,.5);
  transform:scaleY(.2) scale(.2);opacity:0;animation:cremaRipple 7s ease-out infinite 1.5s}
@keyframes cremaSpin{to{transform:scaleY(.2) rotate(360deg)}}
@keyframes cremaRipple{0%{transform:scaleY(.2) scale(.15);opacity:0}15%{opacity:.35}100%{transform:scaleY(.2) scale(1);opacity:0}}
.steam{position:absolute;left:-5.6cqw;bottom:.4cqw;width:10cqw;height:17cqw;mix-blend-mode:screen}
.steam .defs{position:absolute}
.wisp{position:absolute;bottom:0;width:4.2cqw;height:15cqw;overflow:visible;opacity:0;filter:blur(.55cqw);transform-origin:50% 100%;
  animation:steamRise 7.5s cubic-bezier(.35,.1,.45,1) infinite;will-change:transform,opacity}
.wisp path{fill:none;stroke:url(#steam-grad);stroke-width:10;stroke-linecap:round}
.wisp:nth-of-type(2){left:1.4cqw;animation-duration:8.5s;animation-delay:-1.2s}
.wisp:nth-of-type(3){left:3.6cqw;animation-duration:7s;animation-delay:-3.6s;width:3cqw}
.wisp:nth-of-type(4){left:5.6cqw;animation-duration:9s;animation-delay:-5.4s}
.wisp:nth-of-type(5){left:2.6cqw;animation-duration:8s;animation-delay:-6.6s;width:4cqw}
.wisp:nth-of-type(6){left:4.6cqw;animation-duration:10s;animation-delay:-2.4s;width:2.6cqw}
.wisp:nth-of-type(2) path,.wisp:nth-of-type(5) path{stroke-width:14}
@keyframes steamRise{
  0%{opacity:0;transform:translate3d(0,8%,0) scale(.7,.45) skewX(0)}
  18%{opacity:.62}
  50%{opacity:.45;transform:translate3d(-.6cqw,-14%,0) scale(1,.85) skewX(-6deg)}
  80%{opacity:.2}
  100%{opacity:0;transform:translate3d(.8cqw,-34%,0) scale(1.45,1.05) skewX(8deg)}}
/* Portrait/narrow screens crop the cup out of the photo: hide the effect there */
@container hero (max-aspect-ratio:5/6){.hero-stage{display:none}}
@supports not (container-type:size){.hero-stage{display:none}}
@media (prefers-reduced-motion:reduce){.hero-stage{display:none}}

.hero-content{position:relative;max-width:1160px}
.hero h1{color:#fff;font-size:clamp(2.7rem,9vw,5.4rem);font-weight:500;letter-spacing:-.02em;margin-bottom:1.2rem}
.hero h1 em{color:var(--ember);font-style:italic;padding-right:.12em}
.hero .lead{font-size:clamp(1.05rem,2.2vw,1.25rem);max-width:36rem;color:#f3e6d3}
.eyebrow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#f3e6d3;margin-bottom:1.2rem}
.open-pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:.35rem .8rem;border-radius:999px;letter-spacing:.06em;text-transform:none;font-weight:600}
.open-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#9be27c;box-shadow:0 0 0 4px rgba(155,226,124,.25)}
.open-pill.closed::before{background:#f0a07a;box-shadow:0 0 0 4px rgba(240,160,122,.25)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 2.4rem}
.hero-facts{list-style:none;margin:0;padding:1.2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid rgba(255,255,255,.2);max-width:36rem}
.hero-facts strong{display:block;font-family:var(--serif);font-size:1.5rem;color:#fff}
.hero-facts span{font-size:.8rem;color:#e6d6c3}

/* Sections */
.section{padding:clamp(4rem,9vw,7rem) 0}
.section-head{text-align:center;max-width:40rem;margin:0 auto 2.8rem}
.section-head p:last-child{color:var(--muted)}
.section-head.light h2{color:#fff}

/* About */
.about{background:var(--foam)}
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%}
.about-badge{position:absolute;right:-.5rem;bottom:-1.2rem;background:var(--ember);color:var(--espresso);width:104px;height:104px;border-radius:50%;display:grid;place-content:center;text-align:center;box-shadow:var(--shadow);font-family:var(--serif)}
.about-badge strong{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans)}
.about-badge span{font-size:1.8rem;font-weight:700;line-height:1}
.ticks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem}
.ticks li{padding-left:2rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.2rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--latte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23c96d22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
@media (min-width:860px){.about-grid{grid-template-columns:1fr 1.1fr;gap:4.5rem}}

/* Menu */
.menu{background:var(--cream)}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem .2rem 1rem;margin-bottom:1.5rem;scrollbar-width:none;justify-content:flex-start}
.tabs::-webkit-scrollbar{display:none}
@media (min-width:860px){.tabs{justify-content:center}}
.tabs [role="tab"]{flex:0 0 auto;font:inherit;font-weight:600;font-size:.95rem;padding:.65rem 1.2rem;border-radius:999px;border:1.5px solid var(--latte);background:var(--foam);color:var(--roast);cursor:pointer;transition:all .2s}
.tabs [role="tab"]:hover{border-color:var(--mocha)}
.tabs [role="tab"][aria-selected="true"]{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.menu-panel{display:grid;gap:2rem;background:var(--foam);border-radius:calc(var(--radius) + 6px);padding:1.25rem;box-shadow:var(--shadow);animation:fadeUp .4s ease}
.menu-panel[hidden]{display:none}
.panel-img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:1px dashed var(--latte)}
.menu-list li:last-child{border-bottom:0}
.menu-list h3{font-size:1.1rem;margin:0 0 .15rem}
.menu-list p{margin:0;color:var(--muted);font-size:.92rem}
.price{font-family:var(--serif);font-weight:700;color:var(--ember-dark);white-space:nowrap;font-size:1.1rem}
.menu-list .note{display:block;color:var(--mocha);font-size:.88rem;font-style:italic;padding-top:1rem}
@media (min-width:860px){.menu-panel{grid-template-columns:.9fr 1.1fr;padding:2rem;gap:3rem;align-items:start}.panel-img{aspect-ratio:4/5;position:sticky;top:calc(var(--header-h) + 1rem)}}

/* Specials */
.specials{background:radial-gradient(ellipse at top,#4a2c1d,var(--espresso) 70%);color:#f3e6d3}
.specials .kicker{color:var(--ember)}
.cards{display:grid;gap:1.5rem}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:rgba(255,250,243,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,background .3s}
.card:hover{transform:translateY(-6px);background:rgba(255,250,243,.1)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
.card h3{color:#fff;font-size:1.3rem;margin:.6rem 0 .4rem}
.card p{font-size:.95rem;color:#e0cfbb}
.card-price{margin-top:auto;margin-bottom:0!important;font-family:var(--serif);font-size:1.6rem;color:var(--ember)!important;font-weight:700}
.tag{align-self:flex-start;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(232,137,58,.16);color:#f7b47a;padding:.3rem .7rem;border-radius:999px}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;grid-auto-rows:160px}
.g-item{position:relative;display:block;overflow:hidden;border-radius:14px}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.g-item:hover img{transform:scale(1.06)}
.g-item::after{content:attr(data-caption);position:absolute;inset:auto 0 0;padding:2rem .9rem .7rem;color:#fff;font-size:.85rem;font-weight:500;background:linear-gradient(transparent,rgba(28,16,10,.8));opacity:0;transition:opacity .3s}
.g-item:hover::after,.g-item:focus-visible::after{opacity:1}
.g-wide{grid-column:span 2}
.g-tall{grid-row:span 2}
@media (min-width:860px){.gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:1rem}}

/* Reviews */
.reviews{background:var(--cream)}
.demo-note{font-size:.85rem;font-style:italic}
.review-grid{display:grid;gap:1.5rem}
@media (min-width:860px){.review-grid{grid-template-columns:repeat(3,1fr)}}
.review{margin:0;background:var(--foam);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);position:relative}
.review::before{content:"\201C";position:absolute;top:-.3rem;right:1.2rem;font-family:var(--serif);font-size:6rem;color:var(--latte);line-height:1}
.stars{color:var(--ember);letter-spacing:.15em;margin-bottom:.8rem}
.review blockquote{margin:0 0 1.2rem;font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--roast)}
.review figcaption{font-size:.9rem;color:var(--muted)}
.review figcaption strong{color:var(--espresso)}

/* Visit */
.visit-grid{display:grid;gap:2.5rem;align-items:stretch}
@media (min-width:860px){.visit-grid{grid-template-columns:1fr 1.2fr;gap:4rem}}
.hours{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem}
.hours th,.hours td{padding:.85rem 0;border-bottom:1px solid var(--latte);text-align:left;font-weight:500}
.hours td{text-align:right;font-family:var(--serif);font-weight:700;color:var(--roast)}
.hours tr.today th,.hours tr.today td{color:var(--ember-dark)}
.hours tr.today th::after{content:"Today";margin-left:.6rem;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--ember);color:var(--espresso);padding:.15rem .5rem;border-radius:999px;vertical-align:middle}
address{font-style:normal;margin-bottom:1.5rem;line-height:1.7}
address .muted{font-size:.85rem}
.visit-links{display:flex;flex-wrap:wrap;gap:.7rem}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:340px;background:var(--latte)}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:sepia(.25) saturate(.9)}

/* Contact */
.contact{background:linear-gradient(180deg,var(--foam),var(--cream))}
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start}}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.9rem}
.contact-list li{display:flex;flex-direction:column}
.contact-list span{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.contact-list a{color:var(--espresso);font-weight:600;text-decoration:none;font-size:1.05rem;word-break:break-word}
.contact-list a:hover{color:var(--ember-dark)}
.enquiry{background:var(--foam);border-radius:calc(var(--radius) + 6px);padding:1.5rem;box-shadow:var(--shadow);border:1px solid var(--latte)}
.enquiry h3{font-size:1.5rem;margin-bottom:1rem}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;min-width:0}
.field-row{display:grid;gap:0 1rem}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}.field-row.three{grid-template-columns:1.3fr 1fr .8fr}}
label{font-weight:600;font-size:.9rem;color:var(--roast)}
input,select,textarea{font:inherit;width:100%;padding:.8rem .9rem;border-radius:12px;border:1.5px solid var(--latte);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 4px rgba(232,137,58,.18)}
input[aria-invalid="true"]{border-color:#c0392b}
.form-error{color:#a3271b;font-weight:600;font-size:.92rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.form-actions .btn{flex:1 1 180px}
.form-hint{font-size:.82rem;margin:1rem 0 0}
@media (min-width:560px){.enquiry{padding:2.2rem}}

/* Footer */
.site-footer{background:var(--espresso);color:#d9c8b4;padding:3.5rem 0 1.5rem;font-size:.95rem}
.site-footer .muted{color:#a89482}
.footer-grid{display:grid;gap:2rem}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-logo{height:52px;width:auto;margin-bottom:1rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-footer a{color:#f3e6d3;text-decoration:none}
.site-footer a:hover{color:var(--ember)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.2rem;font-size:.82rem;color:#a89482}
.footer-base p{margin:0}
.credit{opacity:.75;letter-spacing:.02em}

/* Floating WhatsApp */
.wa-float{position:fixed;right:1rem;bottom:1rem;z-index:90;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}

/* Lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:90vh}
.lightbox::backdrop{background:rgba(20,12,8,.88)}
.lightbox img{max-height:80vh;width:auto;margin:auto;border-radius:12px}
.lightbox-caption{color:#f3e6d3;text-align:center;margin:.8rem 0 0}
.lightbox-close{position:fixed;top:1rem;right:1rem;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--espresso);font-size:1.8rem;line-height:1;cursor:pointer}

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

/* Map fallback (shows if the embed is blocked or offline) */
.map-wrap{position:relative}
.map-wrap::before{content:"Benoni, Gauteng";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem;color:var(--mocha);background:repeating-linear-gradient(45deg,transparent 0 22px,rgba(111,74,53,.06) 22px 44px)}
.map-wrap iframe{position:relative}
@media (max-width:420px){.hero-facts span{font-size:.72rem}.hero-facts strong{font-size:1.3rem}}