/* =====================================================================
   Pulito & Peloso — Toelettatura cani e gatti, Muralto (TI)
   Sito statico: puro HTML/CSS/JS. Nessun framework, nessun build step.
   Palette dal brand: verde bosco + oro + crema (logo cane+gatto).
   Realizzato da SinaWeb Ticino.
   ===================================================================== */

/* -------------------------------------------------- Tokens */
:root{
  /* Radii */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* Layout */
  --maxw:1240px;
  --gutter:clamp(20px,4vw,40px);
  --section:clamp(72px,8vw,120px);
  --nav-h:86px;            /* altezza navbar fissa: usata per centrare le sezioni sotto la capsula */

  /* Motion */
  --t:220ms cubic-bezier(.4,.1,.3,1);
  --t-l:420ms cubic-bezier(.4,.1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* Colours — brand: verde bosco + oro, su carta crema */
  --bg:#F7F3EA;            /* crema calda */
  --bg-2:#EDF0E7;          /* salvia tenue (sezioni alternate) */
  --surface:#FBF8F0;       /* card chiare */
  --surface-2:#FFFFFF;

  --text:#1B2C20;          /* verde-nero */
  --text-soft:#51604F;     /* grigio-verde */
  --text-faint:#7C8A78;

  --green-900:#10271A;     /* fondo footer / CTA */
  --green-800:#163A26;     /* verde brand: hero / navbar */
  --green-700:#1E4C33;
  --green-600:#27603F;
  --green-300:#9FB9A4;

  --gold:#C7A24E;          /* oro brillante (su scuro) */
  --gold-soft:#D8BC7E;
  --gold-deep:#9A7327;     /* oro profondo (testo su chiaro) */

  --line:rgba(22,40,28,.12);
  --line-strong:rgba(22,40,28,.2);
  --line-light:rgba(255,255,255,.1);

  --shadow-sm:0 2px 10px -4px rgba(16,39,26,.25);
  --shadow:0 18px 50px -28px rgba(16,39,26,.5);
  --shadow-lg:0 40px 90px -40px rgba(16,39,26,.55);

  --font-sans:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Baloo 2','Nunito',sans-serif;
}

/* -------------------------------------------------- Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul{list-style:none}
::selection{background:var(--green-700);color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* -------------------------------------------------- Layout primitives */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

main > section{
  position:relative;
  /* Full-page sections: exactly one viewport tall, content centred. No extra
     buffer here — only the sections that own a wavy divider add a little height
     (see below), so short sections (reviews, FAQ, contact) stay compact. */
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:safe center;
  padding-top:calc(var(--nav-h) + clamp(0.5rem,1.5vh,1.1rem));
  padding-bottom:clamp(2.2rem,4.5vh,3.4rem);
  scroll-margin-top:var(--nav-h);
}
/* the hero is the landing screen — keep it exactly one viewport tall */
.hero{min-height:100vh;min-height:100svh}
/* Divider-bearing sections get a little extra height (≈ the wave's own height) so
   their BOTTOM wave clears the fold when the section is landed at its top — it then
   only sweeps into view while scrolling on to the next section. No wave sits at the
   hero→about edge (the exactly-1-viewport hero has no room to hide one). */
.about,.services,.why,.gallery{
  min-height:calc(100vh + clamp(44px,5vw,72px));
  min-height:calc(100svh + clamp(44px,5vw,72px));
  /* reserve the wave's height as bottom padding so it NEVER paints over the
     section's own content (the last buttons/links) — it sits in empty space */
  padding-bottom:calc(clamp(2.2rem,4.5vh,3.4rem) + clamp(44px,5vw,72px));
}
.faq{
  min-height:calc(100vh + clamp(52px,5.5vw,80px));
  min-height:calc(100svh + clamp(52px,5.5vw,80px));
  padding-bottom:calc(clamp(2.2rem,4.5vh,3.4rem) + clamp(52px,5.5vw,80px));
}
main > section > .container{width:100%}

/* =====================================================================
   Section transitions — layered wave dividers (playbook §5q).
   Instead of a hard line where two section colours meet, the NEXT section's
   colour rises into the current one as a soft wave, backed by a lighter second
   wave for depth and topped with a delicate gold crest (the brand accent — a
   custom shape reads as design, not a generic preset). Every section is ≥ one
   viewport and lands at its top, so each wave sits below the fold when settled
   and only sweeps in WHILE scrolling to the next section. On phones the clamp
   shrinks the wave to a calmer ~46px.
   ===================================================================== */
.about::after,.services::after,.why::after,.gallery::after,.faq::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  height:clamp(44px,5vw,72px);pointer-events:none;
  background-repeat:no-repeat;background-position:bottom;background-size:100% 100%;
}
/* cream section → sage next (about→servizi, why→galleria) */
.about::after,.why::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C220 30 400 34 600 58 800 82 980 96 1180 70 1300 54 1380 46 1440 56V120H0Z' fill='%23EDF0E7' fill-opacity='.5'/%3E%3Cpath d='M0 44C160 82 340 84 540 58 740 32 920 12 1120 30 1260 42 1360 60 1440 52V120H0Z' fill='%23EDF0E7'/%3E%3Cpath d='M0 44C160 82 340 84 540 58 740 32 920 12 1120 30 1260 42 1360 60 1440 52' fill='none' stroke='%23C7A24E' stroke-opacity='.45' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* sage section → cream next (servizi→perché noi, galleria→recensioni) */
.services::after,.gallery::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C220 30 400 34 600 58 800 82 980 96 1180 70 1300 54 1380 46 1440 56V120H0Z' fill='%23F7F3EA' fill-opacity='.5'/%3E%3Cpath d='M0 44C160 82 340 84 540 58 740 32 920 12 1120 30 1260 42 1360 60 1440 52V120H0Z' fill='%23F7F3EA'/%3E%3Cpath d='M0 44C160 82 340 84 540 58 740 32 920 12 1120 30 1260 42 1360 60 1440 52' fill='none' stroke='%23C7A24E' stroke-opacity='.45' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* cream faq → contatti (dark green) */
.faq::after{
  height:clamp(52px,5.5vw,80px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C220 30 400 34 600 58 800 82 980 96 1180 70 1300 54 1380 46 1440 56V120H0Z' fill='%231E4C33' fill-opacity='.55'/%3E%3Cpath d='M0 44C160 82 340 84 540 58 740 32 920 12 1120 30 1260 42 1360 60 1440 52V120H0Z' fill='%23173d27'/%3E%3Cpath d='M0 44C160 82 340 84 540 58 740 32 920 12 1120 30 1260 42 1360 60 1440 52' fill='none' stroke='%23C7A24E' stroke-opacity='.5' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* the services deck (mobile) scrolls its own way — no bottom wave there */
.services.is-deck::after{display:none}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-deep);opacity:.6}
.eyebrow.on-dark{color:var(--gold)}
.eyebrow.on-dark::before{background:var(--gold)}

.serif{font-family:var(--font-serif);font-weight:700;font-style:normal}

h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.01em;color:var(--text)}
.h-display{
  font-family:var(--font-serif);font-weight:700;font-style:normal;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;letter-spacing:-.01em;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--text-soft);max-width:54ch}

.section-head{max-width:62ch;margin:0 auto clamp(1.6rem,3vw,2.4rem);text-align:center}
.section-head .lead{margin:1.1rem auto 0}
.section-head--center{text-align:center;margin-inline:auto}

/* -------------------------------------------------- Buttons */
.btn{
  --bg-btn:var(--green-800);--fg-btn:#FBF8F0;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:var(--r-pill);
  background:var(--bg-btn);color:var(--fg-btn);
  font-weight:500;font-size:.98rem;letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  will-change:transform;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-primary{--bg-btn:var(--gold);--fg-btn:var(--green-900);font-weight:600}
.btn-primary:hover{--bg-btn:var(--gold-soft)}
.btn-dark{--bg-btn:var(--green-800);--fg-btn:#F7F3EA}
.btn-ghost{
  --bg-btn:transparent;--fg-btn:var(--text);
  border-color:var(--line-strong);
}
.btn-ghost:hover{background:rgba(22,40,28,.04)}
.btn-ghost.on-dark{--fg-btn:#EAF0E9;border-color:rgba(255,255,255,.22)}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.07)}
.btn-lg{padding:1.02rem 1.8rem;font-size:1.04rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:500;color:var(--gold-deep);
  transition:gap var(--t),color var(--t);
}
.link-arrow svg{width:16px;height:16px;transition:transform var(--t)}
.link-arrow:hover{gap:.8rem}
.link-arrow:hover svg{transform:translateX(3px)}

/* =====================================================================
   NAVBAR — floating glass capsule (playbook §5a/5b)
   ===================================================================== */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  padding:14px var(--gutter) 0;pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  height:58px;max-width:720px;margin:0 auto;padding:0 14px;
  background:rgba(18,42,28,.62);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);
  transition:max-width .5s var(--ease-out),background var(--t);
}
.navbar.scrolled .nav-inner{max-width:640px}

/* grid placement — keep all on row 1 (playbook note) */
.nav-inner > .logo      {grid-row:1;grid-column:1;justify-self:start}
.nav-inner > .nav-links {grid-row:1;grid-column:2;justify-self:center}
.nav-inner > .nav-toggle{grid-row:1;grid-column:2;justify-self:center;display:none}
.nav-inner > .nav-cta   {grid-row:1;grid-column:3;justify-self:end}

.navbar.scrolled .nav-inner > .logo      {grid-column:2;justify-self:center}
.navbar.scrolled .nav-inner > .nav-links {display:none}
.navbar.scrolled .nav-inner > .nav-toggle{grid-column:1;justify-self:start;display:inline-flex}

.logo{display:inline-flex;align-items:center;gap:.5rem;color:#F4EFE2}
.logo-mark{width:28px;height:28px;flex:none;color:var(--gold)}
.logo-text{
  font-family:var(--font-serif);font-weight:600;font-size:1.12rem;letter-spacing:.01em;
  white-space:nowrap;color:#F4EFE2;
}
.logo-text em{font-style:italic;color:var(--gold)}
.navbar.scrolled .logo-text{display:none}

.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links > a{
  color:rgba(244,239,226,.74);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;
  transition:color var(--t),text-shadow var(--t);
}
.nav-links > a:hover{color:#fff;text-shadow:0 0 13px rgba(236,238,242,.45)}

.nav-cta{
  padding:.55rem 1.15rem;border-radius:var(--r-pill);
  background:var(--gold);color:var(--green-900);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.07em;
  transition:transform var(--t),background var(--t);white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px);background:var(--gold-soft)}

.nav-toggle{
  align-items:center;justify-content:center;gap:.55rem;
  color:rgba(244,239,226,.85);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:4px;width:20px}
.nav-toggle .bars span{height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform var(--t),opacity var(--t)}
body.menu-open .nav-toggle .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-toggle .bars span:nth-child(2){opacity:0}
body.menu-open .nav-toggle .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Full-screen overlay menu (FY-style) */
body.menu-open{overflow:hidden}
.menu-overlay{
  position:fixed;inset:0;z-index:200;display:flex;
  background:linear-gradient(160deg,#17402A 0%,#10271A 72%);
  opacity:0;visibility:hidden;transform:translateY(-1.4%);
  transition:opacity .42s var(--ease-out),visibility .42s,transform .42s var(--ease-out);
}
.menu-overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cellipse cx='60' cy='66' rx='12' ry='15'/%3E%3Cellipse cx='44' cy='44' rx='5' ry='7'/%3E%3Cellipse cx='60' cy='38' rx='5' ry='7'/%3E%3Cellipse cx='76' cy='44' rx='5' ry='7'/%3E%3Cellipse cx='84' cy='62' rx='4' ry='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:170px 170px;
}
.menu-overlay.open{opacity:1;visibility:visible;transform:none}
.menu-overlay-inner{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(1rem,3vw,1.6rem) var(--gutter) clamp(2rem,5vw,3.5rem);
}
.menu-overlay-top{display:flex;align-items:center;justify-content:space-between;height:58px;flex:none}
.menu-overlay-top .logo-text{color:#F4EFE2}
.menu-overlay-top .logo-mark{color:var(--gold)}
.menu-close{display:inline-flex;align-items:center;gap:.6rem;color:#F4EFE2;font-size:.95rem;letter-spacing:.02em}
.menu-close .x{position:relative;width:18px;height:18px}
.menu-close .x::before,.menu-close .x::after{content:"";position:absolute;top:8px;left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
.menu-close .x::before{transform:rotate(45deg)}
.menu-close .x::after{transform:rotate(-45deg)}
.menu-close:hover{color:var(--gold)}
.menu-overlay-body{flex:1;display:grid;grid-template-columns:1.5fr .8fr;align-items:center;gap:clamp(2rem,5vw,4rem)}
.menu-nav{display:flex;flex-direction:column}
.menu-nav a{
  display:flex;align-items:baseline;gap:1.1rem;padding:.3rem 0;
  font-family:var(--font-serif);font-weight:500;line-height:1.16;
  font-size:clamp(2.2rem,6vw,3.7rem);color:#ECE6D6;
  opacity:0;transform:translateY(22px);transition:color var(--t),padding-left var(--t);
}
.menu-overlay.open .menu-nav a{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) var(--mi,0s),transform .5s var(--ease-out) var(--mi,0s),color var(--t),padding-left var(--t)}
.menu-nav a .idx{font-family:var(--font-sans);font-weight:500;font-size:.9rem;color:var(--gold);letter-spacing:.1em;width:1.4ch}
.menu-nav a:hover{color:var(--gold);padding-left:.55rem}
.menu-aside{border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;color:rgba(232,237,228,.72)}
.menu-aside h4{color:var(--gold);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem}
.menu-aside p{font-size:.95rem;margin-bottom:1rem;max-width:32ch}
.menu-contact{display:block;color:#F4EFE2;font-weight:600;font-size:1.05rem;margin-bottom:.35rem;transition:color var(--t)}
.menu-contact:hover{color:var(--gold)}
.menu-addr{margin-top:1.2rem;font-size:.92rem;line-height:1.5}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  color:#EFEAD9;
  background:#0E2418;
  overflow:hidden;
  text-align:center;
}
/* real photo of the shop behind the logo, tinted with the brand green so the
   gold logo + text stay readable (playbook: real logo over gradient hero).
   Desktop = single still (frontal). Mobile = two portrait shots crossfading with
   a slow Ken-Burns zoom. Photos are CSS backgrounds so the hidden breakpoint's
   image is never downloaded (display:none skips bg fetch). */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg-still{
  position:absolute;inset:0;z-index:0;
  background:url("assets/photos/esterno-1920.webp?v=20260702e") center 42%/cover no-repeat;
}
.hero-slideshow{display:none;position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;will-change:opacity;
  animation:heroFade 16s ease-in-out infinite;
}
.hero-slide--a{background-image:url("assets/photos/esterno-mobile.webp?v=20260702h")}
.hero-slide--b{background-image:url("assets/photos/esterno-mobile-2.webp?v=20260702h");animation-delay:-8s}
/* crossfade only — no scale/zoom (avoids repaint jank while scrolling on mobile) */
@keyframes heroFade{
  0%,44% {opacity:1}
  50%    {opacity:0}
  94%    {opacity:0}
  100%   {opacity:1}
}
@media (max-width:640px){
  .hero-bg-still{display:none}
  .hero-slideshow{display:block}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(199,162,78,.14), transparent 55%),
    radial-gradient(72% 55% at 50% 48%, rgba(10,26,17,.42), transparent 72%),
    linear-gradient(165deg,rgba(18,46,30,.50) 0%,rgba(13,35,23,.60) 55%,rgba(10,28,19,.72) 100%);
}
.hero::after{ /* grain */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-logo{margin:0 auto;width:min(700px,90vw);line-height:0}
.hero-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
.hero-sub{margin:clamp(1.6rem,3.5vw,2.4rem) auto 0;font-size:clamp(1.05rem,1.7vw,1.22rem);color:rgba(232,237,228,.85);max-width:54ch}
.hero-cta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about-figure{
  position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(160deg,#1d4a30,#0f291b);
  border:1px solid rgba(199,162,78,.2);box-shadow:var(--shadow-lg);
  display:grid;place-items:center;
}
/* decorative motif when no photo yet */
.about-figure .motif{width:58%;color:rgba(199,162,78,.85)}
.about-figure.has-photo{display:block}
.about-figure.has-photo picture{display:block;width:100%;height:100%}
.about-figure.has-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.about-badge{
  position:absolute;left:18px;bottom:18px;z-index:2;
  background:rgba(247,243,234,.95);color:var(--green-900);
  padding:.7rem 1rem;border-radius:var(--r);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:.7rem;
}
.about-badge .g{width:26px;height:26px;flex:none}
.about-badge strong{display:block;font-size:1.05rem;line-height:1}
.about-badge span{font-size:.78rem;color:var(--text-soft)}
.about-text h2{margin-bottom:1.4rem}
.about-text p + p{margin-top:1.1rem}
.about-text .lead{margin-bottom:1.1rem}
.about-actions{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}

/* signature list */
.about-points{margin-top:2rem;display:grid;gap:.9rem}
.about-points li{display:flex;gap:.8rem;align-items:flex-start;color:var(--text-soft)}
.about-points svg{width:20px;height:20px;color:var(--gold-deep);flex:none;margin-top:2px}
.about-points strong{color:var(--text);font-weight:600}

/* =====================================================================
   WHY US — "Perché noi": prodotti naturali e biodegradabili
   ===================================================================== */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.why-media{
  position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;
  border:1px solid rgba(199,162,78,.2);box-shadow:var(--shadow-lg);background:#10271b;
}
.why-media picture{display:block;width:100%;height:100%}
.why-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.why-tag{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold);color:var(--green-900);
  padding:.5rem .95rem;border-radius:var(--r-pill);box-shadow:var(--shadow);
  font-weight:700;font-size:.82rem;letter-spacing:.02em;
}
.why-text h2{margin:1rem 0 1.2rem}
.why-text .eyebrow{margin-bottom:.2rem}
.why-points{counter-reset:why;margin-top:1.8rem;display:grid;gap:1.1rem}
.why-points li{display:flex;gap:1rem;align-items:flex-start;counter-increment:why;color:var(--text-soft)}
.why-points li::before{
  content:counter(why);font-family:var(--font-serif);font-weight:600;
  font-size:1.35rem;line-height:1;color:var(--gold-deep);
  flex:none;width:1.5ch;margin-top:1px;letter-spacing:-.02em;
}
.why-points strong{color:var(--text);font-weight:600}

/* =====================================================================
   SERVICES — editorial numbered cards (playbook §5f)
   ===================================================================== */
.services{background:var(--bg-2)}
.services-grid{counter-reset:feat;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.6rem)}
.service-card{
  counter-increment:feat;position:relative;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.8rem;box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex;flex-direction:column;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(199,162,78,.45)}
.service-num{font-family:var(--font-serif);font-weight:600;font-size:2rem;color:var(--gold-deep);line-height:1;letter-spacing:-.02em}
.service-num::before{content:counter(feat)}
.service-card h3{font-size:1.28rem;margin:1rem 0 .6rem;font-weight:600}
.service-card p{color:var(--text-soft);font-size:.97rem}
.service-card .svc-foot{margin-top:auto;padding-top:1.1rem;font-size:.85rem;color:var(--gold-deep);font-weight:600;letter-spacing:.02em}

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{background:var(--bg-2)}
/* Video reel gallery (self-hosted, GDPR-clean) */
.video-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2.5vw,1.8rem)}
.video-card{
  position:relative;margin:0;width:min(300px,82vw);aspect-ratio:9/16;
  border-radius:var(--r-lg);overflow:hidden;background:#10271b;
  border:1px solid rgba(199,162,78,.22);box-shadow:var(--shadow-lg);
}
.video-card .reel{width:100%;height:100%;object-fit:cover;display:block;background:#10271b}
.reel-sound{
  position:absolute;right:.7rem;bottom:.7rem;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#fff;cursor:pointer;
  background:rgba(16,39,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);transition:background var(--t),color var(--t),transform var(--t);
}
.reel-sound:hover{background:rgba(199,162,78,.9);color:var(--green-900);transform:scale(1.06)}
.reel-sound svg{width:19px;height:19px}
.reel-sound .ic-on{display:none}
.reel-sound.on{background:var(--gold);color:var(--green-900);border-color:var(--gold)}
.reel-sound.on .ic-muted{display:none}
.reel-sound.on .ic-on{display:block}
.gallery-note{margin-top:1.8rem;font-size:.92rem;color:var(--text-faint);display:flex;align-items:center;justify-content:center;gap:.5rem}
.gallery-note svg{width:16px;height:16px;color:var(--gold-deep);flex:none}
.gallery-note a{color:var(--gold-deep);font-weight:500}
.gallery-note a:hover{text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{padding-top:calc(var(--nav-h) + 1.25rem);padding-bottom:clamp(2.4rem,4vh,3.4rem)}
.reviews-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(1.6rem,3.5vw,2.4rem);gap:.9rem}
.reviews-rating{display:inline-flex;align-items:center;gap:.8rem}
.reviews-rating .g-logo{width:34px;height:34px}
.reviews-score{display:flex;align-items:baseline;gap:.5rem}
.reviews-score strong{font-size:1.7rem;font-family:var(--font-serif);font-weight:600;color:var(--text)}
.review-stars{color:var(--gold);letter-spacing:.06em;font-size:1.05rem}
.reviews-meta{font-size:.85rem;color:var(--text-soft)}

/* two-row auto-scroll marquee — seamless via uniform per-card margin */
.reviews-rows{
  display:flex;flex-direction:column;gap:clamp(.9rem,2vw,1.2rem);width:100%;max-width:100%;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.reviews-row{overflow:hidden}
.reviews-track{display:flex;width:max-content;will-change:transform}
.reviews-row[data-dir="left"] .reviews-track{animation:marqueeL var(--dur,42s) linear infinite}
.reviews-row[data-dir="right"] .reviews-track{animation:marqueeR var(--dur,42s) linear infinite}
@keyframes marqueeL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes marqueeR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.reviews-rows.is-static{-webkit-mask:none;mask:none}
.reviews-rows.is-static .reviews-row{overflow:visible}
.reviews-rows.is-static .reviews-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
.reviews-rows.is-static .review-card{margin-right:0}
.review-card{
  flex:none;width:min(330px,80vw);margin-right:clamp(.9rem,2vw,1.2rem);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.35rem 1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.7rem;
}
.review-card-top{display:flex;align-items:center;gap:.8rem}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green-700);color:var(--gold);font-weight:600;font-size:1.05rem;
}
.review-meta{display:flex;flex-direction:column;line-height:1.25}
.review-author{font-weight:600;color:var(--text)}
.review-date{font-size:.8rem;color:var(--text-faint)}
.review-card-top .g-mark{width:18px;height:18px;margin-left:auto}
.review-stars-row{color:var(--gold);letter-spacing:.05em;font-size:.95rem}
.review-text{color:var(--text-soft);font-size:.95rem;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.reviews-cta{margin-top:1.8rem;text-align:center}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-list{display:flex;flex-direction:column;gap:.7rem;max-width:760px;margin:0 auto}
.faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t);
}
.faq-item[open]{border-color:rgba(199,162,78,.4);box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.15rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-weight:600;color:var(--text);font-size:1.04rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;width:18px;height:18px;flex:none}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--gold-deep);border-radius:2px;transition:transform var(--t)}
.faq-icon::before{top:8px;left:0;width:18px;height:2px}
.faq-icon::after{top:0;left:8px;width:2px;height:18px}
.faq-item[open] .faq-icon::after{transform:scaleY(0)}
.faq-body{padding:0 1.3rem 1.25rem;color:var(--text-soft);font-size:.97rem}

/* =====================================================================
   CONTACT / CTA
   ===================================================================== */
.contact{
  color:#EFEAD9;
  background:
    radial-gradient(100% 80% at 85% 10%,rgba(199,162,78,.16),transparent 55%),
    linear-gradient(165deg,#184028,#10291B 70%);
  overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cellipse cx='60' cy='66' rx='12' ry='15'/%3E%3Cellipse cx='44' cy='44' rx='5' ry='7'/%3E%3Cellipse cx='60' cy='38' rx='5' ry='7'/%3E%3Cellipse cx='76' cy='44' rx='5' ry='7'/%3E%3Cellipse cx='84' cy='62' rx='4' ry='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:170px 170px;
}
.contact > .container{position:relative;z-index:2}
.contact-head{text-align:center;max-width:60ch;margin:0 auto clamp(2rem,4vw,3rem)}
.contact h2{color:#F5F0E2;font-family:var(--font-serif);font-weight:700;font-size:clamp(2rem,4.5vw,3.3rem);line-height:1.08}
.contact h2 .serif{color:inherit;font-weight:500}
.contact-sub{margin:1.1rem auto 0;color:rgba(232,237,228,.82);max-width:48ch}
.contact-cards{display:grid;gap:.85rem;max-width:560px;margin:0 auto}
.contact-card{
  position:relative;display:flex;align-items:center;gap:1.15rem;padding:1.15rem 1.35rem;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  box-shadow:0 14px 32px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background var(--t),transform var(--t),border-color var(--t),box-shadow var(--t);
}
a.contact-card{padding-right:3.6rem}
a.contact-card::after{
  content:"\203A";position:absolute;right:1.05rem;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;padding-bottom:3px;
  border:1px solid rgba(255,255,255,.22);color:var(--gold);font-size:1.25rem;line-height:1;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t);
}
a.contact-card:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(199,162,78,.18),rgba(199,162,78,.06));
  border-color:rgba(199,162,78,.55);
  box-shadow:0 22px 46px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.1);
}
a.contact-card:hover::after{background:var(--gold);border-color:var(--gold);color:var(--green-900);transform:translateY(-50%) translateX(2px)}
.contact-card .ic{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-soft),var(--gold));color:var(--green-900);
  box-shadow:0 6px 16px -6px rgba(199,162,78,.55);
}
.contact-card .ic svg{width:21px;height:21px}
.contact-card .cc-label{display:block;margin-bottom:2px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(199,162,78,.85);font-weight:600}
.contact-card .cc-value{font-weight:700;color:#F5F0E2;font-size:1.06rem;line-height:1.25}
.contact-card .cc-value small{display:block;font-weight:400;font-size:.82rem;color:rgba(232,237,228,.7);letter-spacing:0;text-transform:none;margin-top:2px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--green-900);color:rgba(232,237,228,.72);padding-block:clamp(3rem,6vw,4.5rem) 1.6rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-brand .logo{margin-bottom:1rem}
.footer-brand .logo-text{font-size:1.5rem}
.footer-tagline{font-size:.94rem;max-width:32ch;margin-bottom:1.2rem}
.footer-contact a{display:block;color:rgba(232,237,228,.85);transition:color var(--t)}
.footer-contact a:hover{color:var(--gold)}
.site-footer h4{color:#F4EFE2;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.site-footer ul li{margin-bottom:.55rem;font-size:.94rem}
.site-footer ul a{transition:color var(--t)}
.site-footer ul a:hover{color:var(--gold)}
.footer-social{display:flex;gap:.6rem;margin-top:1.2rem}
.footer-social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(232,237,228,.85);
  transition:background var(--t),color var(--t),transform var(--t);
}
.footer-social a:hover{background:var(--gold);color:var(--green-900);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem;color:rgba(232,237,228,.55);
}
.footer-bottom a{transition:color var(--t)}
.footer-bottom a:hover{color:var(--gold)}
.footer-bottom .made{color:rgba(232,237,228,.5)}
.footer-bottom .made a{color:var(--gold-soft)}

/* =====================================================================
   Legal pages
   ===================================================================== */
.legal-main{padding-top:clamp(6rem,10vw,8rem);padding-bottom:var(--section)}
.legal-main .container{max-width:760px}
.legal-main h1{font-family:var(--font-serif);font-size:clamp(2rem,5vw,3rem);margin-bottom:.6rem}
.legal-updated{color:var(--text-faint);font-size:.9rem;margin-bottom:2.5rem}
.legal-main h2{font-size:1.3rem;margin:2.2rem 0 .8rem;color:var(--text)}
.legal-main h3{font-size:1.05rem;margin:1.4rem 0 .5rem}
.legal-main p,.legal-main li{color:var(--text-soft);margin-bottom:.8rem;font-size:1rem}
.legal-main ul{padding-left:1.2rem;list-style:disc}
.legal-main li{margin-bottom:.4rem}
.legal-main a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.legal-back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;color:var(--gold-deep);font-weight:500}
.legal-back svg{width:16px;height:16px;transform:rotate(180deg)}

/* =====================================================================
   Reveal-on-scroll (playbook §5g)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(46px);transition:opacity 1100ms cubic-bezier(.2,.7,.2,1),transform 1100ms cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:translateY(38px) scale(.965);transition:opacity 1100ms cubic-bezier(.2,.7,.2,1),transform 1100ms cubic-bezier(.2,.7,.2,1)}
.reveal-scale.in{opacity:1;transform:translateY(0) scale(1)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-figure{max-width:380px;aspect-ratio:4/5;margin-inline:auto}
  .why-grid{grid-template-columns:1fr;gap:2.5rem}
  .why-media{max-width:520px;margin-inline:auto;order:-1}
  .contact-inner{grid-template-columns:1fr;gap:2.5rem}
  .faq-grid{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:820px){
  .services-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .menu-overlay-body{grid-template-columns:1fr;gap:2rem;align-content:center}
  .menu-aside{max-width:420px}
}

/* Compact capsule for phones/small tablets: icon-only logo + hamburger */
@media (max-width:760px){
  /* keep the default 1fr auto 1fr grid so the centre logo is truly centred */
  .nav-inner > .nav-links{display:none}
  .nav-inner > .nav-toggle{display:inline-flex;grid-column:1;justify-self:start}
  .nav-inner > .logo{grid-column:2;justify-self:center}
  .nav-inner > .nav-cta{grid-column:3;justify-self:end}
  .navbar.scrolled .nav-inner{max-width:720px}
  .navbar.scrolled .nav-inner > .logo{grid-column:2;justify-self:center}
  .navbar.scrolled .nav-inner > .nav-toggle{grid-column:1;justify-self:start}
  .navbar .logo-text{display:none}
  .navbar .nav-toggle-label{display:none}

  /* Services — card deck (height set by JS via .is-deck) */
  .services.is-deck{min-height:0;padding:0;display:block}
  .services.is-deck .services-sticky{
    position:sticky;top:0;height:100vh;height:100svh;
    display:flex;align-items:center;overflow:hidden;
  }
  .services.is-deck .services-sticky > .container{
    display:flex;flex-direction:column;align-items:center;
    height:100%;padding-block:calc(var(--nav-h) + 14px) 22px;
  }
  .services.is-deck .section-head{margin-bottom:0;max-width:30ch;flex:none}
  .services.is-deck .section-head .lead{display:none}
  .services.is-deck .h-display{font-size:clamp(1.6rem,6.5vw,2rem)}
  /* stage fills the space below the heading; the card sits centred in it */
  .services.is-deck .services-grid{
    position:relative;display:block;flex:1;width:100%;max-width:420px;margin:.6rem auto 0;
  }
  .services.is-deck .service-card{
    position:absolute;top:50%;left:50%;width:min(380px,88vw);margin:0;
    min-height:min(420px,52vh);justify-content:center;   /* taller; content centred */
    padding:2.4rem 2rem;opacity:0;transform:translate(-50%,-50%);
    transition:none;will-change:transform,opacity;        /* shadow is set per-card in JS */
  }
  .services.is-deck .service-card .service-num{font-size:2.4rem}
  .services.is-deck .service-card h3{font-size:1.5rem;margin:1.1rem 0 .7rem}
  .services.is-deck .service-card p{font-size:1.05rem;line-height:1.55}
  .services.is-deck .service-card .svc-foot{margin-top:1.4rem;font-size:.95rem}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-tile.wide{grid-column:span 2}
  .footer-grid{grid-template-columns:1fr}
  .menu-nav a{font-size:2rem}
  .hero-logo{width:92vw}
  .hero-sub{font-size:1.02rem}
  .btn-lg{padding:.9rem 1.5rem;font-size:1rem}
}

/* magnetic buttons set transform inline; respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal,.reveal-scale{opacity:1;transform:none}
  html{scroll-behavior:auto}
  /* no crossfade: show the first mobile shot as a static image */
  .hero-slide{animation:none}
  .hero-slide--a{opacity:1;transform:none}
  .hero-slide--b{opacity:0}
}