/* ============================================================
   Albertyn Pharmacy / Albertyn Apteek — Kleinmond
   Single-page stylesheet.

   Palette is taken from the client's own logo artwork
   (assets/brand/ — see the README there): charcoal, pharmacy red,
   and the SPAR green as a secondary. Warm neutral paper underneath.

   Design language — "clinical grid": clear, structured, quick.
   A plain white bar with a hairline, a split hero (copy beside a
   framed photograph, the rating set as a ruled row), tight 12px
   corners everywhere, flat tiles with a red top rule on hover, a
   light ruled stats row, the bento gallery, and a scroll-snap
   review carousel. Motion is a fast, short fade-up; no blur, no
   parallax on the hero, no magnetic buttons, no film grain.
   ============================================================ */

/* PALETTE */
:root{
  --base:#F6F5F3;
  --base-2:#EBE8E4;
  --card:#FDFCFB;
  --tint:rgba(214,43,38,.11);
  --tint-deep:#E8736F;
  --brand:#D62B26;
  --brand-deep:#B32821;
  --dark:#2B2926;
  --ink:#26241F;
  --muted:#6B665F;
  --em-light:#F7A9A5;
  --accent:#0D7734;
  --accent-deep:#0A6A2D;
  --star:#B37F18;

  /* The exact red of the logo roundel. Decorative use only — it is too
     light to carry white text, so UI fills use --brand instead. */
  --brand-pure:#FF3A36;
}
/* PALETTE END */

/* TYPE
   The wordmark is set in ITC Avant Garde Gothic, which is licensed and
   cannot be self-hosted here (see assets/brand/README.md). Jost is the
   closest open geometric face, so headings echo the logo without the
   licence problem. Swap these two lines to change the pairing. */
:root{
  --font-display:"Jost","Century Gothic",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
}

:root{
  --line:rgba(43,41,38,.13);
  --accent-soft:rgba(13,119,52,.12);
  --shadow-soft:0 30px 60px -25px rgba(43,41,38,.26);
  --shadow-card:0 22px 50px -30px rgba(43,41,38,.44);
  --ease:cubic-bezier(.32,.72,0,1);
  --r:12px;          /* the one corner radius on tiles, frames and cards */
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--base);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.008em}
/* Heading emphasis is upright brand red — Jost has no true italic to lean on. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--brand)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* No film grain here — the page is flat paper. */

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
/* Section labels: small tracked caps after a 4px red square. No pill. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;font-weight:700;
  color:var(--brand-deep);
}
.eyebrow::before{content:"";width:5px;height:5px;background:var(--brand);flex:none}
.eyebrow .dot{display:none}
/* the same label on a dark ground (quote band, visit card, closing band) */
.hero-eyebrow{color:#FBE9E8}
.hero-eyebrow::before{background:var(--em-light)}

section{position:relative}
/* short, quick fade-up — no blur */
.reveal{opacity:0;transform:translateY(16px)}

/* Skip link — off-screen until focused, then lands above everything including
   the promo bar (z-55). */
.skip-link{
  position:fixed;top:8px;left:50%;z-index:300;
  transform:translate(-50%,calc(-100% - 16px));
  background:var(--dark);color:#fff;font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:var(--r);box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0);outline:2px solid var(--em-light);outline-offset:2px}

/* Baseline keyboard focus ring. Components that need a different one (.btn,
   .rv-nav button, .promo .x, .wa-float) override it below. */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.nav-links a:focus-visible,.f-col a:focus-visible,.lkr-step span a:focus-visible,
.c-row .val a:focus-visible,.promo .d a:focus-visible{outline-offset:4px}
.rv-nav button:focus-visible,.rv-track:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(214,43,38,.45)}
.f-col a:focus-visible,.c-row .val a:focus-visible,.promo .d a:focus-visible{outline-color:var(--em-light)}

/* ---------- BRAND MARK ----------
   The real lockup from assets/brand/. Height is set and width left auto so
   the 8.4:1 wordmark and the 1:1 roundel can share the same slot. */
.brand-logo{display:block;height:32px;width:auto;flex:none}
.f-logo{display:block;height:40px;width:auto;margin-bottom:6px}

/* ---------- PROMO / EVENT BAR ----------
   A temporary announcement strip for one-off events — currently the athletics
   club marathon. It sits above the nav at the top of the page and slides away
   the moment you scroll, handing the top edge back to the nav. Deleting the
   .promo element in index.html removes it entirely; main.js adds
   body.has-promo only when the element is present, so the nav offset below
   never applies to a page without one. */
/* --promo-h is the height the nav has to clear. It starts at the one-line
   height and main.js overwrites it with the bar's measured height, so the copy
   can grow to two or three lines on a phone without the nav landing on top of
   it. Nothing here depends on the text fitting a fixed box. */
:root{--promo-h:44px}
.promo{
  position:fixed;top:0;left:0;right:0;z-index:55;min-height:44px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 54px;
  background:linear-gradient(96deg,var(--accent-deep),var(--accent) 62%,#128C3E);
  color:#fff;font-size:13.5px;font-weight:400;text-align:center;line-height:1.3;
  box-shadow:0 10px 24px -18px rgba(43,41,38,.9);
  transition:transform .5s var(--ease);
}
.promo b{font-family:var(--font-display);font-weight:500;font-size:14.5px;letter-spacing:.01em}
.promo .sep{opacity:.45}
.promo .d{color:rgba(255,255,255,.88);font-weight:300}
.promo .d a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.promo .x{
  position:absolute;right:12px;top:50%;margin-top:-14px;
  width:28px;height:28px;border-radius:6px;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
  transition:background .3s var(--ease);
}
.promo .x:hover{background:rgba(255,255,255,.3)}
.promo .x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.nav{transition:top .5s var(--ease)}
body.has-promo .nav{top:var(--promo-h)}
/* On the first scroll the bar slides up out of the way and the nav takes the
   top edge back, so a three-line notice on a phone does not sit over the page
   for the whole visit. main.js sets body.scrolled past 30px. */
body.has-promo.scrolled .promo{transform:translateY(-100%)}
body.has-promo.scrolled .nav{top:0}
/* The bar pushes the nav down, so the hero's top padding has to grow by the
   same amount or the nav bar lands on the hero eyebrow — which it does on a
   narrow phone, where the notice wraps to three lines. */
body.has-promo .hero{padding-top:calc(var(--nav-h) + 40px + var(--promo-h))}
@media(max-width:700px){
  /* Padding stays symmetric so centred text does not sit visibly left of
     centre; the close button overlaps the right gutter it already reserves. */
  .promo{flex-direction:column;gap:1px;padding:9px 44px;font-size:12px}
  /* 300-weight white on green is too thin to hold at 12px. */
  .promo .d{font-weight:400;color:rgba(255,255,255,.94)}
  .promo b{font-size:13px}
  .promo .sep{display:none}
}

/* ---------- NAV: plain white bar ----------
   Full width, 64px, a hairline underneath. Logo left, links centred, the
   three contact controls right. It sits directly under the promo bar while
   that is on the page (body.has-promo, above). */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease)}
.nav.scrolled{box-shadow:0 14px 30px -26px rgba(43,41,38,.5)}
.nav-inner{
  position:relative;width:100%;max-width:1400px;margin:0 auto;padding:0 32px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
/* The lockup already carries the name, so the strapline sits beside it as a
   rule-separated tag rather than repeating the wordmark. */
.brand{display:flex;align-items:center;gap:11px;color:var(--brand-deep)}
.brand .txt small{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-left:11px;border-left:1px solid var(--line)}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:auto}
.nav-links a{font-size:13.5px;font-weight:600;color:var(--ink);opacity:.72;padding:4px 0;border-bottom:2px solid transparent;transition:opacity .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--brand);border-bottom-color:var(--brand)}
/* WhatsApp, email and phone travel together, so they need their own flex box. */
.nav-cta{display:flex;align-items:center;gap:8px;flex:none}
/* Contact rows that only appear inside the tap-to-open mobile panel. */
.nav-links .mob-only{display:none}
.nav-toggle{display:none;width:42px;height:42px;border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;place-items:center;flex:none}
.nav-toggle svg{transition:transform .4s var(--ease)}
.nav-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
@media(min-width:901px) and (max-width:1160px){
  .nav-links{gap:16px}
  .nav-links a{font-size:13px}
}
@media(max-width:900px){
  .nav-toggle{display:grid;order:3}
  /* the links drop as a full-width white panel hung under the bar */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;order:4;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:4px 32px 14px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(43,41,38,.45);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;opacity:1;border-radius:0}
  .nav-links a.active{color:var(--brand);border-bottom-color:var(--line)}
  .nav-links .mob-only{
    display:flex;align-items:center;gap:10px;
    color:var(--accent-deep);font-weight:600;
  }
  .nav-links .mob-only.mob-top{margin-top:6px;padding-top:17px;border-top:2px solid var(--line)}
  .nav-links .mob-only:last-child{border-bottom:none}
  .nav-links .mob-only svg{flex:none}
}
@media(max-width:560px){
  .nav-inner{padding:0 22px;gap:10px}
  .nav-links{padding:4px 22px 14px}
  .nav .btn{padding:11px 14px;font-size:13px}
  .nav .btn-icon{padding:0}
  .brand .txt small{display:none}
}
/* Four items in the bar is one too many on a narrow phone. The WhatsApp
   icon drops out first — the floating button lower down covers that screen. */
@media(max-width:430px){.nav .btn-icon{display:none}}

/* single-page anchors clear the fixed nav */
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.hero[id]{scroll-margin-top:0}

/* ---------- BUTTONS: 10px rectangles, icon inline ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;
  padding:13px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;line-height:1.2;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn .ic{display:grid;place-items:center;width:auto;height:auto;border-radius:0;background:transparent;transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(214,43,38,.45)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(43,41,38,.3)}
.btn-ghost:hover{background:rgba(43,41,38,.06)}
.btn-light{background:#fff;color:var(--brand-deep);border-color:var(--line)}
.btn-light:hover{border-color:var(--brand)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-on-dark:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* WhatsApp takes the SPAR green rather than WhatsApp's own #25D366, which is
   off-palette and only reaches 2.3:1 under white text. --accent reads as the
   same colour family and clears AA on light and dark backgrounds alike. */
.btn-wa{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-wa:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-wa:focus-visible{box-shadow:0 0 0 3px rgba(13,119,52,.55)}
/* Icon-only square, for the nav slot where there is no room for a label. */
.btn-icon{padding:0;width:42px;height:42px;border-radius:10px;gap:0;justify-content:center}
.btn-icon:hover .ic{transform:none}

/* ---------- HERO: split ----------
   Copy on the left on plain paper; the photograph on the right in a 12px
   frame. No scrim, no parallax, no badge — the rating is a ruled row under
   the calls to action. */
.hero{position:relative;background:var(--base);display:flex;align-items:center;min-height:100svh;padding:calc(var(--nav-h) + 40px) 0 56px}
/* wider than the rest of the page so the photograph has room on a large monitor */
.hero>.wrap{max-width:1400px;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.hero-inner{position:relative;z-index:2;color:var(--ink);max-width:640px}
.hero h1{font-size:clamp(34px,3.6vw,62px);color:var(--dark);font-weight:300;margin:18px 0 22px}
.hero h1 .ln{display:block}
@media(min-width:1200px){.hero h1 .ln{white-space:nowrap}}
.hero h1 em{color:var(--brand)}
@media(max-width:360px){.hero h1{font-size:31px}}
.hero p.lead{font-size:clamp(16px,1.4vw,18px);max-width:585px;color:#4A4640;font-weight:300}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
/* inline rating row */
.hero-rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.hero-rating .score{font-family:var(--font-display);font-size:30px;color:var(--brand);line-height:1}
.hero-rating .stars{display:flex;gap:2px;color:var(--star)}
.hero-rating .sep{opacity:.5}
.hero-rating b{font-weight:600;color:var(--ink)}
.hero-photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--base-2);border:1px solid var(--line);aspect-ratio:5/5.2;max-height:calc(100svh - var(--nav-h) - 96px);box-shadow:var(--shadow-soft)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media(max-width:900px){
  .hero{padding-bottom:56px;min-height:0;display:block}
  .hero-photo{max-height:none}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-inner{max-width:none}
  .hero-photo{aspect-ratio:4/3}
}

/* ---------- STATS: ruled row under the hero ---------- */
.stats{background:var(--base-2);color:var(--ink);padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{display:flex;align-items:baseline;gap:12px;padding:28px 28px;border-right:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:none}
.stat .v{font-family:var(--font-display);font-size:clamp(26px,2.4vw,32px);color:var(--brand);line-height:1;white-space:nowrap}
.stat .v small{font-size:.5em;color:var(--brand-deep);vertical-align:super;margin-left:2px}
.stat .v .ico{display:inline-grid;place-items:center;color:var(--brand);vertical-align:middle}
.stat .v .ico svg{width:28px;height:28px}
.stat .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(max-width:900px){.stat{padding:22px 18px}}
@media(max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none;border-bottom:1px solid var(--line);padding:16px 0}
  .stat:nth-child(odd){border-right:1px solid var(--line);padding-right:14px}
  .stat:nth-child(even){padding-left:14px}
  .stat:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:420px){.stat{flex-direction:column;align-items:flex-start;gap:6px}}

/* ---------- SERVICE MARQUEE ---------- */
.marquee{background:var(--base);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--base),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--base),transparent)}
.mq-track{display:flex;align-items:center;gap:0;white-space:nowrap;will-change:transform}
.mq-track span{font-family:var(--font-display);font-size:clamp(19px,2.3vw,29px);color:var(--brand-deep);opacity:.75;padding:0 26px;font-weight:400}
.mq-track span.sep{font-family:var(--font-body);font-size:13px;color:var(--accent);opacity:1;padding:0}

/* ---------- ABOUT / STORY ---------- */
.about{padding:130px 0}
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:74px;align-items:center}
/* one flat frame, no shell */
.about-img-shell{background:none;border:0;padding:0;border-radius:var(--r);box-shadow:var(--shadow-soft)}
.about-img-shell .core{position:relative;border-radius:var(--r);overflow:hidden;background:var(--base-2);border:1px solid var(--line)}
.about-img-shell img{width:100%;height:560px;object-fit:cover;background:var(--base-2)}
.about-img-shell .tag{position:absolute;left:16px;bottom:16px;background:rgba(253,252,251,.96);border-radius:10px;padding:11px 16px;display:flex;align-items:center;gap:11px;border:1px solid var(--line)}
.about-img-shell .tag .av{width:36px;height:36px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.about-img-shell .tag b{font-size:13px;display:block}
.about-img-shell .tag span{font-size:11px;color:var(--muted)}
.about h2{font-size:clamp(33px,4.2vw,55px);margin:22px 0 26px}
.about p{color:#4A4640;font-size:16.5px;font-weight:300;margin-bottom:20px}
.about .sig{font-family:var(--font-display);font-style:italic;font-size:25px;color:var(--brand-deep);margin-top:6px;line-height:1.32}
.creds{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.cred b{font-family:var(--font-display);font-size:20px;display:block;color:var(--brand-deep)}
.cred span{font-size:12px;color:var(--muted)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px}.about-img-shell img{height:430px}}

/* ---------- CREW BAND ----------
   Sits between the about copy and the service cards, on the same paper as
   about, so the rule at the top is what separates the two. Cards are a
   fixed 4:5 box: every source photo in assets/img/crew-*.webp is already
   cropped to that ratio, so object-fit only has to correct for rounding. */
.crew{padding:110px 0 120px;border-top:1px solid var(--line)}
.crew-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.crew-card{
  background:var(--card);border:1px solid var(--line);
  padding:0 0 4px;border-radius:var(--r);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);will-change:transform;
}
.crew-card .core{border-radius:0;overflow:hidden;background:var(--base-2)}
.crew-card img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;transition:transform .8s var(--ease)}
.crew-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.crew-card:hover img{transform:scale(1.05)}
.crew-card figcaption{padding:16px 12px 14px}
.crew-card figcaption b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:18.5px;color:var(--brand-deep);line-height:1.2;
}
.crew-card figcaption span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);font-weight:300}
/* Editorial rhythm: the second and fourth cards drop half a step. This is
   margin, not transform, because every .reveal element has its transform
   written inline by GSAP the moment it scrolls in — a translateY here would
   be wiped the first time the card appears. Dropped below 900px, where the
   grid is only two wide and the offset reads as a mistake, not a decision. */
@media(min-width:901px){
  .crew-card:nth-child(even){margin-top:28px}
}
@media(max-width:900px){.crew{padding:80px 0 84px}.crew-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.crew-grid{grid-template-columns:1fr;gap:16px}}

/* ---------- SERVICE CARDS ---------- */
.services{padding:120px 0;background:var(--base-2)}
.sec-head{max-width:700px;margin-bottom:60px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(33px,4.4vw,57px);margin:20px 0 16px}
/* Emphasis that names the green cross itself, rather than carrying brand red. */
.sec-head h2 em.em-green{color:var(--accent)}
.sec-head p{color:var(--muted);font-size:16.5px;font-weight:300;max-width:570px}
.sec-head.center p{margin-left:auto;margin-right:auto}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* flat tiles: one sheet, a hairline, and a 3px brand-red rule that draws
   along the top edge on hover */
.svc{
  position:relative;background:var(--card);border:1px solid var(--line);padding:0;border-radius:var(--r);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);will-change:transform;
}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.svc:hover::before{transform:scaleX(1)}
.svc .core{background:transparent;border-radius:0;padding:30px 26px 28px;height:100%;box-shadow:none}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:rgba(43,41,38,.2)}
.svc .ic{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:var(--tint);color:var(--brand-deep);margin-bottom:22px;transition:background .35s var(--ease),color .35s var(--ease)}
.svc:hover .ic{background:var(--brand);color:#fff}
.svc h3{font-size:22px;margin-bottom:9px}
.svc p{font-size:14.5px;color:var(--muted);font-weight:300}
.svc .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.svc .tags i{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--brand-deep);background:var(--tint);padding:5px 9px;border-radius:5px}
.svc.feat{background:var(--brand);border-color:var(--brand)}
.svc.feat::before{background:#fff}
.svc.feat .core{color:#fff}
.svc.feat .ic{background:rgba(255,255,255,.18);color:#fff}
.svc.feat:hover .ic{background:#fff;color:var(--brand)}
.svc.feat h3{color:#fff}
.svc.feat p{color:rgba(255,255,255,.87)}
.svc.feat .tags i{color:#fff;background:rgba(255,255,255,.18)}
.svc.feat .pill{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brand);background:#fff;padding:6px 11px;border-radius:5px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---------- LOCKER BAND ---------- */
.lkr{padding:124px 0}
.lkr-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.lkr-shell{background:none;border:0;padding:0;border-radius:var(--r);box-shadow:var(--shadow-soft)}
.lkr-shell .core{position:relative;border-radius:var(--r);overflow:hidden;background:var(--base-2);border:1px solid var(--line)}
.lkr-shell img{width:100%;height:530px;object-fit:cover;display:block}
.lkr-plate{
  position:absolute;left:18px;bottom:18px;background:var(--dark);color:#fff;
  font-weight:600;font-size:14.5px;letter-spacing:.02em;
  padding:10px 20px;border-radius:8px;display:flex;align-items:center;gap:9px;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.9)
}
.lkr-plate .pin{font-family:var(--font-display);letter-spacing:.34em;color:var(--em-light)}
.lkr-copy h2{font-size:clamp(33px,4.2vw,55px);margin:22px 0 22px}
.lkr-copy>p{color:#4A4640;font-size:16.5px;font-weight:300;max-width:520px}
.lkr-steps{margin:34px 0 0;padding-top:28px;border-top:1px solid var(--line);counter-reset:lkr}
.lkr-step{display:flex;gap:18px;align-items:flex-start;padding:14px 0}
.lkr-step .n{
  counter-increment:lkr;flex:none;width:38px;height:38px;border-radius:8px;
  display:grid;place-items:center;background:var(--tint);color:var(--brand-deep);
  font-family:var(--font-display);font-size:17px;
}
.lkr-step .n::before{content:counter(lkr)}
.lkr-step b{display:block;font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--brand-deep);margin-bottom:2px}
.lkr-step span{font-size:14px;color:var(--muted);font-weight:300}
/* Step 1 carries the WhatsApp and email links inline, so they need to read as
   links against the muted step copy. */
.lkr-step span a{
  color:var(--accent-deep);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(13,119,52,.4);text-underline-offset:2px;
  overflow-wrap:anywhere;transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.lkr-step span a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.lkr-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:900px){
  .lkr{padding:84px 0}
  .lkr-grid{grid-template-columns:1fr;gap:38px}
  .lkr-shell img{height:330px}
}

/* ---------- APPROACH / QUOTE BAND ---------- */
.approach{position:relative;padding:140px 0;color:#fff;overflow:hidden}
.approach-bg{position:absolute;inset:-12% 0 0 0;z-index:0;overflow:hidden;will-change:transform}
.approach-bg img{width:100%;height:120%;object-fit:cover;filter:grayscale(.2)}
.approach-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,19,17,.95),rgba(35,33,30,.84) 55%,rgba(179,40,33,.66))}
.approach-inner{position:relative;z-index:2}
.approach .quote{font-family:var(--font-display);font-size:clamp(24px,3.2vw,41px);font-style:italic;font-weight:300;max-width:920px;color:#fff;line-height:1.24}
.approach .quote span{color:var(--em-light);font-style:normal}
.approach .by{margin-top:22px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.step{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:30px 26px}
.step .n{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.13);color:var(--em-light);margin-bottom:18px}
.step h3{font-size:22px;color:#fff;margin:0 0 9px}
.step p{font-size:14px;color:rgba(255,255,255,.8);font-weight:300}
@media(max-width:760px){.steps{grid-template-columns:1fr}.approach{padding:96px 0}}

/* ---------- CLINIC / SERVICE LIST ---------- */
.menu-sec{padding:120px 0;background:var(--base-2)}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:8px}
@media(max-width:820px){.menu-cols{grid-template-columns:1fr}}
.menu-block{margin-bottom:34px}
.menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:8px}
.menu-head h3{font-size:clamp(21px,2.4vw,27px);color:var(--ink)}
.menu-head .who{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;white-space:nowrap}
.menu-row{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line)}
.menu-row .nm{font-family:var(--font-display);font-size:17.5px;color:var(--brand-deep)}
.menu-row .desc{flex:1;font-size:13px;color:var(--muted);font-weight:300;position:relative;top:-1px;text-align:right}
/* On a narrow phone the name and its note both wrap into two or three ragged
   lines fighting each other across the row. Below this width they stack, so
   each row reads as a label with a note under it. */
@media(max-width:540px){
  .menu-row{flex-direction:column;align-items:stretch;gap:2px;padding:11px 0}
  .menu-row .desc{text-align:left;top:0}
}
/* Clinic shot — a wide photo of the clinic room with the pharmacist inset
   over its bottom-right corner. Padding-right on the shell reserves the
   column the inset sits in, so the two never overlap awkwardly. */
.clinic-shot{position:relative;margin:52px 0 62px;padding-right:230px}
.shot-main{position:relative;border-radius:var(--r);overflow:hidden;background:var(--base);box-shadow:var(--shadow-soft)}
.shot-main img{width:100%;height:430px;object-fit:cover}
.shot-cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 26px 20px;
  font-size:13px;letter-spacing:.02em;color:#fff;font-weight:400;
  background:linear-gradient(180deg,rgba(22,21,19,0),rgba(22,21,19,.82));
}
.shot-inset{
  position:absolute;right:0;bottom:-34px;width:290px;
  background:var(--card);border:1px solid var(--line);
  padding:0 0 4px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card);
}
.shot-inset img{width:100%;height:290px;object-fit:cover;object-position:50% 22%;border-radius:0}
.shot-plate{display:block;padding:13px 10px 12px}
.shot-plate b{display:block;font-family:var(--font-display);font-weight:400;font-size:17px;color:var(--brand-deep);line-height:1.2}
.shot-plate span{display:block;margin-top:2px;font-size:12px;color:var(--muted);font-weight:300}
/* Below 900px the inset stops floating and sits under the photo as its own
   card, so nothing is cropped off the right edge on a phone. */
@media(max-width:900px){
  .clinic-shot{padding-right:0;margin-bottom:34px}
  .shot-main img{height:300px}
  .shot-inset{position:static;width:100%;max-width:320px;margin:16px auto 0;bottom:auto}
  .shot-inset img{height:240px}
}

.menu-note{margin-top:22px;font-size:13.5px;color:var(--muted);font-weight:300;font-style:italic;max-width:620px}
.menu-note b{font-style:normal;font-weight:600;color:var(--brand-deep)}
.menu-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- GALLERY ---------- */
.gallery{padding:120px 0}
/* The six tiles are sized to fill an exact 4x2 block with no gaps: one .wide
   at two columns, one .tall at two rows and four single cells make 8, which
   is 4 x 2 on the nose. Auto-placement lands them that way in DOM order, so
   no dense flow is needed here. Change the number of tiles or the order and
   the block stops closing — the count has to keep working out to a multiple
   of four. */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:44px}
.gallery-grid figure{overflow:hidden;border-radius:var(--r);position:relative;background:var(--base-2);cursor:zoom-in}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery-grid figure:hover img{transform:scale(1.06)}
.gallery-grid .tall{grid-row:span 2}
.gallery-grid .wide{grid-column:span 2}
.gallery-grid figcaption{position:absolute;left:12px;bottom:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:rgba(43,41,38,.72);padding:6px 10px;border-radius:6px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.gallery-grid figure:hover figcaption,
.gallery-grid figure:focus-visible figcaption{opacity:1;transform:translateY(0)}
/* main.js makes each tile a keyboard-operable button, so the caption has to
   appear on focus as well as hover or the label is mouse-only. */
.gallery-grid figure:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.gallery-grid figure:focus-visible img{transform:scale(1.06)}
/* Two columns cannot hold a tall and a wide tile in the same row, so the
   grid backfills here — without dense, the six tiles leave two holes beside
   the tall one. With it they close up into a full 2 x 4 block. */
@media(max-width:760px){
  .gallery{padding:80px 0}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;grid-auto-flow:dense}
  .gallery-grid .wide{grid-column:span 2}
}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(18,17,15,.94);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lightbox .close{position:absolute;top:24px;right:28px;width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;z-index:2}
.lightbox .close:hover{background:rgba(255,255,255,.24)}
.lightbox .close:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* The tile's own thumbnail goes up straight away and the full-size file
   swaps in behind this ring once it has decoded, so a slow connection shows
   the right photo softening into focus rather than the previous one. */
.lightbox.loading::after{
  content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:lb-spin .7s linear infinite;pointer-events:none;
}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lightbox.loading img{opacity:.55;transition:opacity .3s var(--ease)}

/* ---------- REVIEWS: scroll-snap carousel ----------
   main.js builds one clean 12px card per review from the SITE-DATA fence
   into .rv-track — a native horizontal scroller that snaps card to card.
   The arrows page it; the track itself is focusable and takes ←/→. */
.deck-sec{padding:110px 0 100px;background:var(--base);overflow:hidden}
/* The row breaks out of .wrap to the viewport edges (negative margins equal
   to the wrap's gutter) and pads back in by the same amount, so the first
   card lines up with the text above it while the last one runs off the right
   edge. scroll-padding matches, or snap would pull the first card 32px left. */
.rv-track{
  --gutter:max(32px,calc((100vw - 1176px) / 2));
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
  padding:6px var(--gutter) 18px;margin:8px calc(-1 * var(--gutter)) 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{
  flex:0 0 min(380px,82vw);scroll-snap-align:start;box-sizing:border-box;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 26px;color:var(--ink);
}
.rv-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rv-av{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-display);font-size:18px;color:#fff;background:var(--brand);flex:none}
.rv-stars{display:flex;gap:2px;color:var(--star)}
.rv-copy{font-family:var(--font-display);font-size:16px;font-weight:300;line-height:1.5;color:var(--ink)}
.rv-by{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);margin-top:22px}
.rv-by b{display:block;font-size:14.5px;font-weight:600;color:var(--brand-deep)}
.rv-by span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-top:2px}
.rv-nav{display:flex;align-items:center;gap:10px;margin-top:22px}
.rv-nav button{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--card);border:1px solid rgba(43,41,38,.3);color:var(--dark);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.rv-nav button:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.rv-nav button:disabled{opacity:.35;cursor:default;background:var(--card);color:var(--dark);border-color:rgba(43,41,38,.3)}
.rv-count{margin-left:auto;font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .rv-track{--gutter:22px;padding-bottom:16px}
}

/* ---------- CONTACT / VISIT ---------- */
.contact{padding:100px 0 40px}
.c-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:stretch}
.c-card{background:var(--dark);color:#fff;border-radius:var(--r);padding:48px 44px;display:flex;flex-direction:column}
.c-card h2{font-size:clamp(30px,3.6vw,46px);color:#fff;margin:18px 0 14px}
.c-card h2 em{color:var(--em-light)}
.c-card .sub{color:rgba(255,255,255,.74);font-weight:300;margin-bottom:30px}
.c-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.13)}
.c-row .ic{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--em-light);flex-shrink:0}
/* Label above value. These are spans, so without display:block they run
   inline and the .val margin-top below is silently ignored — which broke
   "028 271 4666" across two lines once the label grew to "Phone & WhatsApp". */
.c-row .k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:600}
.c-row .val{font-size:16px;color:#fff;margin-top:2px;overflow-wrap:anywhere}
.c-row .val a:hover{color:var(--em-light)}
.c-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:32px}
.map-shell{background:var(--base-2);border:1px solid var(--line);padding:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft)}
.map-shell iframe{width:100%;height:100%;min-height:490px;border:0;border-radius:0;display:block;filter:grayscale(.15) contrast(1.02)}
@media(max-width:900px){.c-grid{grid-template-columns:1fr}.map-shell iframe{min-height:340px}.c-card{padding:38px 28px}}

/* hours table — also carries the delivery days in the row below it */
.hours-list{margin-top:6px}
.hours-list .hrow{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:3px 0;color:rgba(255,255,255,.86)}
.hours-list .hrow span:first-child{color:rgba(255,255,255,.7);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* The Sunday window is an hour long, so it gets a marker rather than being
   read as another all-day row. */
.hours-list .hrow.open-window span:last-child{color:var(--em-light);font-weight:600}
.hours-list .hrow span:last-child{text-align:right}
@media(max-width:420px){
  .hours-list .hrow{flex-direction:column;gap:0;padding:6px 0}
  .hours-list .hrow span:last-child{text-align:left}
}

/* good-to-know cards */
.gtk{padding:90px 0 120px}
.gtk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.gtk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gtk-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.gtk-card .ic{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:18px}
.gtk-card h3{font-size:20px;margin-bottom:8px}
.gtk-card p{font-size:14.5px;color:var(--muted);font-weight:300;overflow-wrap:anywhere}
.gtk-card p b{font-weight:600;color:var(--brand-deep)}
@media(max-width:860px){.gtk-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gtk-grid{grid-template-columns:1fr}}

/* ---------- CTA STRIP ----------
   The closing band now sits on a photo of the front counter rather than flat
   paper, so it ramps down into the charcoal footer instead of stepping into
   it. The copy here is centred, not ranged left like the hero, so the scrim
   is symmetric rather than diagonal: an even vertical wash with the brand
   red picking up at both edges. The eyebrow, headline and body all invert. */
.cta-strip{position:relative;padding:124px 0;background:var(--dark);text-align:center;overflow:hidden}
.cta-bg{position:absolute;inset:-12% 0 0 0;z-index:0;overflow:hidden;will-change:transform}
.cta-bg img{width:100%;height:120%;object-fit:cover;filter:grayscale(.15)}
.cta-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(22,21,19,.87) 0%,rgba(22,21,19,.78) 46%,rgba(22,21,19,.91) 100%),
    linear-gradient(90deg,rgba(179,40,33,.5) 0%,rgba(30,28,26,.34) 42%,rgba(30,28,26,.34) 58%,rgba(179,40,33,.5) 100%);
}
.cta-strip>.wrap{position:relative;z-index:2}
.cta-strip .eyebrow{color:#FBE9E8}
.cta-strip .eyebrow::before{background:var(--em-light)}
.cta-strip h2{font-size:clamp(31px,4.4vw,57px);margin:18px auto 16px;max-width:800px;color:#fff;font-weight:300}
.cta-strip h2 em{color:var(--em-light)}
.cta-strip p{color:rgba(255,255,255,.82);font-weight:300;max-width:560px;margin:0 auto 32px}
.cta-strip .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}


/* ---------- FOOTER ---------- */
footer{background:var(--dark);color:rgba(255,255,255,.7);padding:60px 0 40px}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.13)}
.f-brand{color:#fff;max-width:360px}
.f-brand .at{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--em-light);font-weight:600;display:block;margin-top:3px}
.f-brand p{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:300;margin-top:16px}
.f-links{display:flex;gap:58px;flex-wrap:wrap}
/* Column labels are real headings inside the contentinfo landmark, so they
   are h2 rather than the h5 they used to be — an h5 after the page's h2s is a
   level skip. font-family is restated because the global h1–h4 rule would
   otherwise pull them onto the display face. */
.f-col .f-h{font-family:var(--font-body);font-size:11px;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;color:var(--em-light);margin-bottom:16px;font-weight:700}
.f-col a,.f-col span{display:block;font-size:14px;margin-bottom:10px;color:rgba(255,255,255,.72);overflow-wrap:anywhere}
.f-col a{transition:color .3s var(--ease)}
.f-col a:hover{color:#fff}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:30px;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ---------- FLOATING WHATSAPP ----------
   Sending a script through is the one action worth keeping within reach the
   whole way down the page. It stays hidden over the hero — where the CTAs
   already say it — and fades in once you scroll past. */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:58;
  display:flex;align-items:center;
  width:58px;height:58px;border-radius:14px;
  background:var(--accent);color:#fff;
  box-shadow:0 20px 36px -14px rgba(13,119,52,.85),0 1px 0 rgba(255,255,255,.22) inset;
  overflow:hidden;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,
             width .45s var(--ease),background .35s var(--ease);
}
.wa-float.show{opacity:1;visibility:visible;transform:none}
.wa-float .ic{width:58px;height:58px;flex:none;display:grid;place-items:center}
.wa-float .lb{font-size:14.5px;font-weight:600;padding-right:24px;opacity:0;transition:opacity .3s var(--ease)}
.wa-float:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(13,119,52,.55)}
@media(pointer:fine){
  .wa-float:hover{width:232px;background:var(--accent-deep)}
  .wa-float:hover .lb{opacity:1}
}
@media(max-width:900px){
  .wa-float{right:16px;bottom:16px;width:54px;height:54px}
  .wa-float .ic{width:54px;height:54px}
}

@media(max-width:760px){
  .wrap{padding:0 22px}
  .about,.services,.deck-sec,.contact,.menu-sec{padding:80px 0}
  .gtk{padding:70px 0 90px}
  .cta-strip{padding:84px 0}
}

/* main.js also reads this query: with reduced motion on it skips the parallax,
   the marquee drift and the hero intro, and paints the counters at their final
   value instead of counting up. What is left here is the CSS half —
   transitions and the reveal state, which has to be cleared or anything GSAP
   would have faded in stays invisible. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .crew-card:hover,.svc:hover,.gtk-card:hover{transform:none}
  .crew-card:hover img,.gallery-grid figure:hover img{transform:none}
  .rv-track{scroll-behavior:auto}
}

/* ---------- MAILTO FALLBACK TOAST ----------
   Shown when a mailto: click gets no response from the OS — most often no
   default mail app configured. Cursor:pointer + click-to-dismiss since the
   copied address is the useful part, not the notice itself. */
.mail-toast{
  position:fixed;left:50%;bottom:28px;z-index:210;
  transform:translate(-50%,16px);opacity:0;visibility:hidden;
  max-width:min(460px,calc(100vw - 40px));
  background:var(--dark);color:#fff;
  padding:16px 20px;border-radius:var(--r);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.08) inset;
  font-size:13.5px;line-height:1.5;font-weight:300;
  cursor:pointer;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.mail-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mail-toast b{font-weight:600;color:var(--em-light);overflow-wrap:anywhere}