/* ==========================================================================
   THE GROOMING BAR - TGB Barbershop
   Shared stylesheet for every page.

   Palette is black and white throughout. Two deliberate exceptions, both
   requested by the client: product photography and the shop video on the
   Contact page keep their real colour. Everything else is monochrome.
   ========================================================================== */

:root{
  --bg:#000000;
  --bg-2:#080808;
  --bg-3:#101010;
  --ink:#ffffff;
  --ink-70:rgba(255,255,255,.72);
  --ink-55:rgba(255,255,255,.56);
  --ink-38:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.09);

  --display:'Anton','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gutter:clamp(20px,5vw,56px);
  --sect-y:clamp(64px,9vw,124px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:74px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
/* figure/blockquote carry a UA margin of 1em 40px that silently shrinks
   gallery tiles and quote cards to about half their column width. */
h1,h2,h3,h4,h5,p,figure,figcaption,blockquote{margin:0}

::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

.skip-link{
  position:fixed;top:-100px;left:12px;z-index:10000;
  background:#fff;color:#000;padding:10px 18px;font-weight:600;
  transition:top .2s;
}
.skip-link:focus{top:12px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gutter);
}
.wrap--narrow{max-width:820px}

/* ==========================================================================
   TYPE
   ========================================================================== */

.h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,7vw,4.6rem);
  line-height:.95;text-transform:uppercase;
}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.2rem);
  line-height:1;text-transform:uppercase;
}
.h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.65rem);
  line-height:1.08;text-transform:uppercase;
}

.eyebrow{
  font-size:.68rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-55);
  margin-bottom:1rem;
}
.lede{
  font-size:clamp(1rem,1.5vw,1.12rem);
  color:var(--ink-70);line-height:1.75;
  max-width:60ch;
}
.muted{color:var(--ink-55)}

.prose p{color:var(--ink-70);line-height:1.8;margin-bottom:1.1em;max-width:68ch}
.prose h2{margin:2.2em 0 .7em}
.prose h3{margin:1.8em 0 .5em;font-family:var(--body);font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:0}
.prose ul{margin:0 0 1.3em;padding-left:1.2em;list-style:disc;color:var(--ink-70)}
.prose li{margin-bottom:.5em;line-height:1.75}
.prose a{border-bottom:1px solid var(--line);transition:border-color .3s}
.prose a:hover{border-color:#fff}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  --y:14px;--x:28px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:var(--y) var(--x);
  font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid #fff;cursor:pointer;
  text-align:center;
  /* The ::before fill parks below the button - without this it shows as a
     block hanging under every button. */
  overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);
  transition:transform .4s var(--ease-out);
}
.btn--solid{background:#fff;color:#000}
.btn--solid::before{background:#000}
.btn--solid:hover{color:#fff}
.btn--solid:hover::before{transform:translateY(0)}

.btn--ghost{background:transparent;color:#fff;border-color:var(--line)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:#000;border-color:#fff}
.btn--ghost:hover::before{transform:translateY(0)}

.btn--sm{--y:10px;--x:18px;font-size:.68rem}
.btn--lg{--y:17px;--x:36px}
.btn--block{display:flex;width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:560px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.header.is-stuck{
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
/* Inner pages start against a solid ground, so the bar is opaque immediately. */
.page--solid .header{background:rgba(0,0,0,.9);border-bottom-color:var(--line-soft)}

.header__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--gutter);height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand__mark{width:38px;transition:transform .5s var(--ease-out),filter .5s var(--ease)}
.brand:hover .brand__mark{transform:scale(1.06);filter:drop-shadow(0 0 12px rgba(255,255,255,.5))}
.brand__text{display:none;line-height:1.2}
.brand__text strong{
  display:block;font-family:var(--display);font-weight:400;
  font-size:.94rem;letter-spacing:.05em;text-transform:uppercase;
}
.brand__text em{
  display:block;font-style:normal;font-size:.55rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-38);
}
@media(min-width:640px){ .brand__text{display:block} }

.nav{display:none;gap:28px}
.nav a{
  position:relative;font-size:.74rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-70);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:#fff;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media(min-width:1060px){ .nav{display:flex} }

.header__actions{display:flex;align-items:center;gap:12px}
.header__actions .btn{display:none}
@media(min-width:640px){ .header__actions .btn{display:inline-flex} }

/* Social icons in the bar. Hidden on small screens - they're in the mobile
   menu and the footer, and the header has no room for them. */
.social-nav{display:none;align-items:center;gap:14px;margin-right:4px}
.social-nav a{
  display:grid;place-items:center;
  width:26px;height:26px;color:var(--ink-70);
  transition:color .3s var(--ease),transform .3s var(--ease-out);
}
.social-nav a:hover{color:#fff;transform:translateY(-2px)}
.social-nav svg{width:19px;height:19px;fill:currentColor}
@media(min-width:1060px){ .social-nav{display:flex} }

.mobile-menu .social-nav{
  display:flex;justify-content:center;gap:22px;margin:0;
}
.mobile-menu .social-nav a{width:34px;height:34px}
.mobile-menu .social-nav svg{width:24px;height:24px}

.burger{width:44px;height:44px;display:grid;place-content:center;gap:6px;margin-right:-8px;border:0;background:none;cursor:pointer}
.burger span{display:block;width:23px;height:1.5px;background:#fff;transition:transform .4s var(--ease-out)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media(min-width:1060px){ .burger{display:none} }

.mobile-menu{
  position:fixed;inset:0;z-index:890;background:var(--bg);
  padding:calc(var(--header-h) + 30px) var(--gutter) 34px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transition:opacity .35s var(--ease);
}
.mobile-menu[hidden]{display:none}
.mobile-menu.is-open{opacity:1}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{
  padding:18px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-size:clamp(1.6rem,7vw,2.2rem);
  line-height:1;text-transform:uppercase;
}
.mobile-menu nav a[aria-current="page"]{color:var(--ink-55)}
.mobile-menu__foot{display:grid;gap:14px;padding-top:24px}
.mobile-menu__tel{text-align:center;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}

/* ==========================================================================
   HERO - home
   ========================================================================== */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88svh,760px);
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 64px) 0 76px;
}
.hero__media{position:absolute;inset:0;z-index:-3}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.52);
}
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.88) 100%);
}
.hero__inner{text-align:center;max-width:940px;margin-inline:auto}
.hero__logo{width:clamp(64px,9vw,92px);margin:0 auto 26px}
.hero__slogan{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6.6vw,4.8rem);
  line-height:.98;text-transform:uppercase;
  margin-bottom:1.1rem;
}
.hero__sub{
  font-size:clamp(.95rem,1.7vw,1.1rem);
  color:var(--ink-70);max-width:56ch;margin:0 auto 2.2rem;
}
.hero .btn-row{justify-content:center}

/* ==========================================================================
   PAGE HEAD - inner pages
   ========================================================================== */

.pagehead{
  padding:calc(var(--header-h) + clamp(48px,7vw,86px)) 0 clamp(34px,5vw,58px);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-2);
}
.pagehead .lede{margin-top:1.2rem}
.crumbs{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38);margin-bottom:1rem}
.crumbs a:hover{color:#fff}

/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */

.section{padding-block:var(--sect-y)}
.section--alt{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.section__head{margin-bottom:clamp(32px,4.5vw,56px);max-width:760px}
.section__head .lede{margin-top:1rem}
.section__foot{margin-top:clamp(34px,4.5vw,56px);display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.split-head{display:grid;gap:18px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
@media(min-width:860px){ .split-head{grid-template-columns:1fr auto} }

/* ==========================================================================
   SERVICE CARDS - shared pieces
   Modelled on the reference layout: name above, image, then a white footer
   carrying price / duration and a Book pill.
   ========================================================================== */

.pill{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  padding:11px 22px;border-radius:999px;
  background:#000;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out);
}
.pill:hover{background:#333;transform:translateY(-1px)}

.mcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;background:#fff;
}
.mcard__meta{min-width:0}
.mcard__meta b{display:block;font-size:1.02rem;font-weight:700;color:#000;line-height:1.2}
.mcard__meta span{display:block;font-size:.72rem;color:#666;line-height:1.35;margin-top:2px}

/* ---- The service card row ----
   A grid, not a slider: every card is fully visible at every width, with only
   a hair of padding at the edges. The carousels live inside the cards. */

.svc-strip{
  display:grid;
  gap:clamp(10px,1vw,18px);
  padding-inline:clamp(8px,1vw,18px);
  grid-template-columns:1fr;
  align-items:start;
}
/* One card at a time on phones - two is too cramped to read. */
@media(min-width:768px){ .svc-strip{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .svc-strip{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1280px){ .svc-strip{grid-template-columns:repeat(5,1fr)} }

/* Shared width for the homepage blocks so services, products and stores all
   line up with each other instead of each sitting at its own width. */
.home-wide{
  max-width:1340px;margin-inline:auto;
  padding-inline:clamp(18px,2.4vw,32px);
}

/* Every homepage card row sits on the same 1340px measure so services,
   products and stores line up down the left and right edges. The banners
   above them stay full-bleed. */
.svc-section > .svc-strip{max-width:1340px;margin-inline:auto;padding-inline:clamp(18px,2.4vw,32px)}

/* Two stores, so never more than two across. */
.svc-strip--stores{max-width:1340px;margin-inline:auto;align-items:stretch}
@media(min-width:768px){ .svc-strip--stores{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .svc-strip--stores{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1280px){ .svc-strip--stores{grid-template-columns:repeat(2,1fr)} }

/* ---- Store card: photo on top, black body with crest, name, address, CTA ---- */

.scard{
  border:1px solid #fff;
  background:var(--bg);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.scard__pic{aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.scard__pic img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.92);
  transition:transform .8s var(--ease-out);
}
.scard:hover .scard__pic img{transform:scale(1.04)}

.scard__pic--soon{
  display:grid;place-items:center;gap:12px;
  background:linear-gradient(160deg,var(--bg-3),var(--bg));
}
.scard__pic--soon img{width:64px;height:auto;object-fit:contain;filter:none;opacity:.6;transform:none}
.scard:hover .scard__pic--soon img{transform:none}
.scard__pic--soon p{
  font-size:.62rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-38);
}

.scard__info{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:clamp(26px,3.4vw,40px) clamp(18px,2.4vw,30px) clamp(28px,3.4vw,40px);
  gap:14px;
}
.scard__crest{width:clamp(54px,5vw,66px)}
.scard__title{
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.scard__addr{font-style:normal;color:var(--ink-70);line-height:1.7;font-size:.95rem}
.scard__actions{
  margin-top:auto;padding-top:4px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.scard__cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;
  border:1px solid #fff;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.scard__cta:hover{background:#fff;color:#000}
.scard__cta--alt{border-color:var(--line);color:var(--ink-70)}
.scard__cta--alt:hover{border-color:#fff;background:#fff;color:#000}
@media(max-width:420px){
  .scard__actions{flex-direction:column;align-items:stretch}
}

/* On the Services page the cards sit on white and read as a list: a narrower
   grid, centred on the page, with smaller images than the homepage row. */
.cat__cards .svc-strip{
  max-width:1120px;margin-inline:auto;
  padding-inline:clamp(16px,3vw,32px);
  gap:clamp(20px,2.4vw,34px);
}
@media(min-width:1280px){ .cat__cards .svc-strip{grid-template-columns:repeat(3,1fr)} }
/* The shorter 3:2 crop cuts far more off a tall phone portrait, so sit it
   lower - at 32% these shots showed the ceiling above the client's head. */
.mcard--listed .mcard__media{aspect-ratio:3/2}
.mcard--listed .mcard__slide{object-position:50% 47%}

.mcard__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.15;text-transform:uppercase;
  margin-bottom:12px;
}
.mcard--tile .mcard__name{color:#fff;text-align:center;min-height:2.3em;display:flex;align-items:flex-end;justify-content:center}
.mcard--listed .mcard__name{color:#111;font-family:var(--body);font-size:.92rem;font-weight:700;letter-spacing:.06em;margin-bottom:.5rem}
.mcard__desc{font-size:.86rem;line-height:1.6;color:#666;margin-bottom:16px;min-height:3.2em}

.mcard__body{background:#fff;border-radius:14px;overflow:hidden}
.mcard--listed .mcard__body{box-shadow:0 10px 30px -14px rgba(0,0,0,.45);border:1px solid #ececec}

.mcard__media{
  position:relative;
  aspect-ratio:5/4;
  overflow:hidden;background:#e9e9e9;
}
.mcard__slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:grayscale(1) contrast(1.05);
  opacity:0;transition:opacity .45s var(--ease);
}
.mcard__slide.is-active{opacity:1}

.mcard__arw{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  border:0;cursor:pointer;
  /* Several service photos are shot on white, so a bare white chevron
     disappears. The disc keeps it legible on any image. */
  background:rgba(0,0,0,.42);
  color:#fff;font-size:1.5rem;line-height:0;padding-bottom:3px;
  transition:background .25s,transform .25s var(--ease-out);
}
.mcard__arw:hover{background:rgba(0,0,0,.78)}
.mcard__arw--prev{left:8px}
.mcard__arw--next{right:8px}
.mcard__arw--prev:hover{transform:translateY(-50%) translateX(-2px)}
.mcard__arw--next:hover{transform:translateY(-50%) translateX(2px)}

.mcard__dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:9px;z-index:2;
  display:flex;gap:6px;align-items:center;
  padding:5px 8px;border-radius:999px;
  background:rgba(0,0,0,.42);
}
.mcard__dot{
  width:6px;height:6px;border-radius:50%;padding:0;
  border:0;cursor:pointer;
  background:rgba(255,255,255,.45);
  transition:background .25s,transform .25s;
}
.mcard__dot.is-active{background:#fff;transform:scale(1.25)}

/* ---- Full-bleed section banner ----
   A wide, short lockup: crest on the left, a hairline divider, then the
   title with a letterspaced strapline and a small diamond flourish. */

.banner{
  position:relative;isolation:isolate;overflow:hidden;
  border-block:1px solid var(--line-soft);
}
.banner__bg{position:absolute;inset:0;z-index:-2}
.banner__bg img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.30) contrast(1.14);
}
.banner__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.55) 74%,#000 100%),
    radial-gradient(120% 150% at 50% 50%,transparent 30%,rgba(0,0,0,.55) 100%);
}

.banner__inner{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(140px,15vw,215px);
  padding:clamp(26px,3.6vw,40px) var(--gutter);
}
.banner__logo{width:clamp(56px,6.4vw,92px);flex-shrink:0}
.banner__rule{
  width:1px;align-self:stretch;flex-shrink:0;
  margin-inline:clamp(20px,3.4vw,52px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.32) 22%,rgba(255,255,255,.32) 78%,transparent);
}
.banner__text{display:flex;flex-direction:column;align-items:center}
.banner__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5.6vw,4.2rem);
  line-height:.98;text-transform:uppercase;letter-spacing:.015em;
}
.banner__tag{
  margin-top:.7rem;
  font-size:clamp(.58rem,1.05vw,.76rem);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-70);
  text-align:center;
}
.banner__flourish{
  position:relative;display:block;
  width:min(430px,72vw);height:1px;margin-top:1rem;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 18%,rgba(255,255,255,.34) 82%,transparent);
}
.banner__flourish::after{
  content:"";position:absolute;left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#fff;
}
/* Stack it on phones - the vertical divider stops making sense. */
@media(max-width:720px){
  .banner__inner{flex-direction:column;text-align:center;gap:14px}
  .banner__rule{display:none}
}

/* ---- Services page: category band + cards on white ---- */

.cat__band{
  background:var(--bg);
  text-align:center;
  padding:clamp(38px,5vw,58px) var(--gutter);
}
.cat__icon{
  width:clamp(64px,7vw,86px);aspect-ratio:1;
  border-radius:50%;background:#fff;
  display:grid;place-items:center;margin:0 auto 16px;
}
.cat__icon svg{
  width:52%;height:52%;
  fill:none;stroke:#000;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.cat__icon svg circle{fill:none}
.cat__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1;text-transform:uppercase;color:#fff;
}

.cat__cards{background:#fff;color:#000;padding-block:clamp(38px,5vw,62px)}
.mcard--listed .mcard__foot{border-top:1px solid #ececec}

/* Homepage services block: the banner sits flush to the section top. */
.svc-section{padding-bottom:var(--sect-y)}
.svc-section .svc-strip{margin-top:clamp(22px,3vw,38px)}

/* ==========================================================================
   SERVICE CARDS - dark grid (unused on the current pages, kept for reuse)
   ========================================================================== */

.svc{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:480px){ .svc{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .svc{grid-template-columns:repeat(3,1fr)} }

.svc__item{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-2);
  padding:clamp(22px,3vw,32px);
  min-height:clamp(230px,25vw,300px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  transition:transform .45s var(--ease-out);
}
.svc__img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:50% 32%;
  filter:grayscale(1) contrast(1.05) brightness(.44);
  opacity:.66;transform:scale(1.04);
  transition:opacity .55s var(--ease),filter .55s var(--ease),transform 1s var(--ease-out);
}
.svc__item::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.93) 100%);
}
.svc__item:hover{transform:translateY(-5px)}
.svc__item:hover .svc__img{opacity:1;transform:scale(1);filter:grayscale(1) contrast(1.05) brightness(.56)}
.svc__num{
  position:absolute;top:clamp(18px,2.4vw,26px);left:clamp(22px,3vw,32px);
  font-size:.66rem;font-weight:600;letter-spacing:.26em;color:var(--ink-38);
}
.svc__desc{font-size:.86rem;line-height:1.6;color:var(--ink-55);max-width:34ch}

/* A card with no photo yet - keeps the grid honest instead of showing a gap. */
.svc__item--plain .svc__img{display:none}
.svc__item--plain{background:var(--bg-3)}

/* ==========================================================================
   PRODUCTS - the one place colour is allowed
   ========================================================================== */

.prod{display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:600px){ .prod{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .prod{grid-template-columns:repeat(3,1fr)} }
/* The homepage shows four in a single row - it never splits into a 2 x 2
   block, it goes straight from one per row on a phone to all four across. */
@media(min-width:600px){ .home-wide .prod{grid-template-columns:1fr} }
@media(min-width:900px){ .home-wide .prod{grid-template-columns:repeat(4,1fr)} }

/* Compact preview card: shot, name, price, Order Now. Nothing else. */
.prod__card--compact .prod__body{
  padding:20px clamp(14px,1.6vw,20px) 22px;
  gap:6px;text-align:center;align-items:center;
}
.prod__card--compact .prod__name{font-size:1.15rem}
.prod__card--compact .prod__price{font-size:1.35rem;margin-bottom:6px}
.prod__card--compact .prod__order{width:100%;margin-top:auto}

.prod__more{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;padding:6px 4px;
  border:0;background:none;cursor:pointer;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#666;
  transition:color .25s var(--ease);
}
.prod__more:hover{color:#000}
.prod__more-i{
  display:grid;place-items:center;
  width:17px;height:17px;border-radius:50%;
  border:1.4px solid currentColor;
  font-family:Georgia,'Times New Roman',serif;
  font-size:.7rem;font-weight:700;font-style:italic;letter-spacing:0;
  line-height:1;
}

/* ---- Product details modal ---- */
/* Doubled class so it outranks .modal__panel, which is defined further down
   the file at the same specificity and would otherwise keep it dark. */
.modal__panel.modal__panel--wide{max-width:860px;background:#fff;color:#000;border-color:#fff}
.modal__panel--wide .modal__close{color:#666}
.modal__panel--wide .modal__close:hover{color:#000}

.pm{display:grid;gap:clamp(20px,3vw,34px)}
@media(min-width:760px){ .pm{grid-template-columns:0.9fr 1.1fr;align-items:start} }
.pm__shot{
  background:#fff;border:1px solid #ececec;
  aspect-ratio:4/3;display:grid;place-items:center;padding:14px;overflow:hidden;
}
.pm__shot img{width:100%;height:100%;object-fit:contain}
.pm__shot--cover img{object-fit:cover}
.pm__text{display:flex;flex-direction:column;gap:10px}
.pm__text .prod__name{font-size:1.6rem}
.pm__text .prod__order{margin-top:6px;align-self:flex-start;--x:30px}

.prod__card{
  display:flex;flex-direction:column;
  background:#fff;color:#000;
  border:1px solid var(--line-soft);
  overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.prod__card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(255,255,255,.3)}

.prod__shot{
  position:relative;
  aspect-ratio:4/3;
  background:#fff;
  display:grid;place-items:center;
  padding:18px;
  overflow:hidden;
}
.prod__shot img{
  width:100%;height:100%;
  object-fit:contain;
  /* Full colour, exactly as the client asked. */
}
.prod__shot--cover img{object-fit:cover}

.prod__soon{
  display:grid;place-items:center;gap:8px;
  width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 12px,#ececec 12px,#ececec 24px);
  color:#666;text-align:center;padding:20px;
}
.prod__soon b{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#333}
.prod__soon span{font-size:.76rem;line-height:1.5;max-width:24ch}

.prod__body{padding:22px clamp(18px,2.4vw,26px) 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod__tagline{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#777;margin-top:-4px;
}
.prod__list{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.prod__list li{
  position:relative;padding-left:20px;
  font-size:.84rem;line-height:1.5;color:#4a4a4a;
}
.prod__list li::before{
  content:"";position:absolute;left:3px;top:.34em;
  width:5px;height:9px;
  border-right:1.7px solid #000;border-bottom:1.7px solid #000;
  transform:rotate(45deg);
}
/* Needs to outrank `.prod__card .btn`, which paints buttons black-on-white -
   without the extra specificity this reads as black text on a black fill. */
.prod__order{
  margin-top:4px;
  background:#000;color:#fff;border-color:#000;
  --y:14px;
}
.prod__order::before{background:#fff}
.prod__order:hover{color:#000;border-color:#000}
.prod__name{
  font-family:var(--display);font-weight:400;
  font-size:1.35rem;line-height:1;text-transform:uppercase;
}
.prod__price{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.prod__copy{font-size:.9rem;line-height:1.6;color:#4a4a4a;flex:1}
.prod__stock{
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#666;padding-top:12px;border-top:1px solid #e4e4e4;
}
/* :not(.prod__order) so this doesn't repaint the Order Now button black on
   black - it sits later in the file at equal specificity and would win. */
.prod__card .btn:not(.prod__order){--y:12px;--x:20px;border-color:#000;color:#000}
.prod__card .btn:not(.prod__order)::before{background:#000}
.prod__card .btn:not(.prod__order):hover{color:#fff}

/* ==========================================================================
   WORK SLIDER (home) + GALLERY GRID (gallery page)
   ========================================================================== */


/* ==========================================================================
   BOOKING FORM
   ========================================================================== */

.book{
  border:1px solid var(--line-soft);
  background:var(--bg-2);
  padding:clamp(24px,4vw,44px);
}
.book__grid{display:grid;gap:18px}
@media(min-width:680px){ .book__grid{grid-template-columns:repeat(2,1fr)} }
.field{display:grid;gap:8px}
.field--full{grid-column:1/-1}
.field label{
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);
}
/* Exclude radios/checkboxes - a full-width, padded radio button breaks the
   store picker layout. */
.field input:not([type="radio"]):not([type="checkbox"]),.field select,.field textarea{
  /* color-scheme:dark makes the native date/time pickers and their calendar
     icons render light-on-dark instead of a white box. */
  color-scheme:dark;
  width:100%;padding:13px 14px;
  background:var(--bg);border:1px solid var(--line);
  color:#fff;font-size:.95rem;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.field select option{background:#0b0b0b;color:#fff}
.book__note{margin-top:16px;font-size:.8rem;color:var(--ink-38);line-height:1.6}
.store-pick{display:grid;gap:10px}
@media(min-width:520px){ .store-pick{grid-template-columns:repeat(2,1fr)} }
.store-pick label{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 16px;border:1px solid var(--line);cursor:pointer;
  font-size:.88rem;letter-spacing:0;text-transform:none;color:var(--ink-70);font-weight:400;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.store-pick label:hover{border-color:var(--ink-55)}
/* A native radio with accent-color:#fff renders nearly the same checked or
   not on a black panel - you cannot tell which shop is selected. Custom dot. */
.store-pick input{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;border-radius:50%;
  border:1px solid var(--line);background:transparent;
  display:grid;place-items:center;
  margin:3px 0 0;padding:0;flex-shrink:0;cursor:pointer;
  transition:border-color .2s var(--ease);
}
.store-pick input::after{
  content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .2s var(--ease-out);
}
.store-pick input:checked{border-color:#fff}
.store-pick input:checked::after{transform:scale(1)}
.store-pick label:has(input:checked){border-color:#fff;background:rgba(255,255,255,.06)}
.store-pick input:checked + span{color:#fff}
.store-pick b{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px;color:#fff}

/* ==========================================================================
   BOOKING MODAL
   Opens in place from any Book button, so nobody loses their spot on the page.
   ========================================================================== */

.modal{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,5vh,64px) clamp(12px,4vw,32px);
  overflow-y:auto;
  opacity:0;transition:opacity .3s var(--ease);
}
.modal[hidden]{display:none}
.modal.is-open{opacity:1}

.modal__panel{
  position:relative;
  width:100%;max-width:640px;
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:clamp(26px,4vw,44px);
  transform:translateY(14px);
  transition:transform .35s var(--ease-out);
}
.modal.is-open .modal__panel{transform:none}
.modal__panel .h2{margin-bottom:1.4rem}
.modal__form{display:block}
.modal__close{
  position:absolute;top:10px;right:12px;
  width:42px;height:42px;
  font-size:1.8rem;line-height:1;
  color:var(--ink-55);border:0;background:none;cursor:pointer;
  transition:color .3s,transform .3s var(--ease-out);
}
.modal__close:hover{color:#fff;transform:rotate(90deg)}

/* ==========================================================================
   LOCATIONS
   ========================================================================== */

.stores{display:grid;gap:clamp(24px,3.5vw,40px)}
@media(min-width:940px){ .stores{grid-template-columns:repeat(2,1fr)} }

.store{border:1px solid var(--line-soft);display:flex;flex-direction:column;background:var(--bg-2)}
.store__media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.store__media img,.store__media video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.82)}
/* Vaalgate hasn't been photographed yet - show the crest rather than a gap. */
.store__media--soon{
  display:grid;place-items:center;gap:14px;
  background:linear-gradient(160deg,var(--bg-3),var(--bg));
  border-bottom:1px solid var(--line-soft);
}
.store__media--soon img{width:76px;height:auto;object-fit:contain;filter:none;opacity:.65}
.store__media--soon p{
  font-size:.66rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-38);
}

.store__body{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:18px;flex:1}
.store__tag{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-38)}
.store__addr{font-style:normal;color:var(--ink-70);line-height:1.75}
.store__hours{display:grid;gap:.5rem}
.store__hours li{
  display:flex;justify-content:space-between;gap:16px;
  padding-bottom:.5rem;border-bottom:1px solid var(--line-soft);font-size:.9rem;
}
.store__hours span{color:var(--ink-55)}
.store__hours b{font-weight:600;white-space:nowrap}
.store .btn-row{margin-top:auto}

.map{border:1px solid var(--line-soft);overflow:hidden;background:var(--bg-3);aspect-ratio:16/9;min-height:260px}
.map iframe{
  width:100%;height:100%;border:0;
  /* Google's tiles are colourful - invert them into the site palette. */
  filter:grayscale(1) invert(1) contrast(.86) brightness(.94);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid{display:grid;gap:clamp(28px,4vw,52px)}
@media(min-width:940px){ .contact-grid{grid-template-columns:1fr 1fr} }

/* The client asked for this one video to keep its real colour. */
.contact__video{border:1px solid var(--line-soft);overflow:hidden;background:var(--bg-3);aspect-ratio:4/5}
.contact__video video{width:100%;height:100%;object-fit:cover;filter:none}

.contact__list{display:grid;gap:26px}
.contact__row h3{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-38);margin-bottom:.6rem;font-family:var(--body)}
/* :not(.btn) - this rule was repainting the WhatsApp button's label the same
   white as its own background, so the button rendered as a blank box. */
.contact__row p,.contact__row a:not(.btn){font-size:1.05rem;color:var(--ink-70)}
.contact__row a:not(.btn):hover{color:#fff}

/* The one green on the site. WhatsApp's own colour, because a monochrome
   WhatsApp button doesn't read as WhatsApp. */
.btn--whatsapp{
  background:#25D366;color:#0b3d1f;border-color:#25D366;
}
.btn--whatsapp::before{background:#1da851}
.btn--whatsapp:hover{color:#fff;border-color:#1da851}
.btn--whatsapp svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border:1px solid var(--line);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .3s,background .3s,color .3s;
}
.socials a:hover{background:#fff;color:#000;border-color:#fff}

/* Icon version, same marks as the header bar. */
.socials--icons{gap:12px}
.socials--icons a{
  padding:0;border:1px solid var(--line);border-radius:50%;
  width:46px;height:46px;
  align-items:center;justify-content:center;
  color:var(--ink-70);
}
.socials--icons a:hover{background:#fff;color:#000;border-color:#fff}
.socials--icons svg{width:20px;height:20px;fill:currentColor}

/* ==========================================================================
   CTA STRIP
   ========================================================================== */

.cta{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding-block:clamp(64px,10vw,124px);
}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:grayscale(1) contrast(1.06) brightness(.36)}
.cta__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#000,rgba(0,0,0,.5) 45%,#000)}
.cta .lede{margin:1rem auto 2rem;text-align:center}
.cta .btn-row{justify-content:center}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{background:var(--bg);border-top:1px solid var(--line-soft);padding-top:clamp(48px,6vw,76px)}
.footer__grid{display:grid;gap:clamp(30px,4vw,44px);padding-bottom:clamp(38px,5vw,60px)}
@media(min-width:720px){ .footer__grid{grid-template-columns:1.4fr 1fr 1fr} }
@media(min-width:1040px){ .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr} }

.footer__brand{display:grid;gap:16px;justify-items:start}
.footer__logo{width:70px}
.footer__slogan{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;line-height:1.25}
.footer__slogan span{
  display:block;font-family:var(--body);font-size:.58rem;font-weight:600;
  letter-spacing:.28em;color:var(--ink-38);margin-top:.5rem;
}
.footer h4{font-size:.64rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-38);margin-bottom:1rem}
.footer__col p,.footer__col li{font-size:.88rem;line-height:1.7;color:var(--ink-55);margin-bottom:.35rem}
.footer__col a:hover{color:#fff}
.footer__base{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  padding-block:22px;border-top:1px solid var(--line-soft);
}
.footer__base p,.footer__base a{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-38)}
.footer__base a:hover{color:#fff}
.footer__policies{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ==========================================================================
   REVEAL + REDUCED MOTION
   ========================================================================== */

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}