/* Tough It Out Tattoo — custom static build, dark ink edition.
   The site reads like the inside of the shop: black walls, bone type,
   blood red spent on purpose, flash-sheet paper cards pinned to the wall,
   film grain over everything. Fine Line and Lettering flip to paper pages
   deliberately — the exception that proves the theme. */

:root {
  --paper: #FBFAF8;
  --paper-2: #F2EFEA;
  --ink: #131010;
  --ink-2: #0C0A0A;
  --raised: #1C1716;
  --blood: #9B111E;
  --blood-hi: #C1121A;
  --bone: #F0ECE6;
  --chrome: #D9D9DE;
  --brass: #C19A5B;

  /* role tokens — dark by default, light pages override */
  --bg: var(--ink);
  --fg: var(--bone);
  --surface: #201B1A;
  --surface-2: #262019;
  --line: rgba(240, 236, 230, .12);
  --muted: #A69D96;

  --display: 'Playfair Display', Georgia, serif;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain over the whole page */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0 0 .45em; letter-spacing: .005em; }
h1 { font-size: clamp(46px, 7.2vw, 96px); }
h2 { font-size: clamp(34px, 4.8vw, 62px); }
h3 { font-size: clamp(22px, 2.6vw, 30px); }
p { margin: 0 0 1em; }
.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted); max-width: 62ch; }
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .26em;
  text-transform: uppercase; color: var(--blood-hi); margin-bottom: 14px;
}
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.eyebrow-bone { color: var(--bone); }

/* Red brush-stroke underline for section headings */
.brush {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14' viewBox='0 0 320 14'%3E%3Cpath d='M3 9 C 60 3, 130 12, 200 7 S 300 4, 317 8' fill='none' stroke='%239B111E' stroke-width='5' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: min(320px, 80%) 12px;
  padding-bottom: 18px;
}
.center .brush { background-position: center 100%; }

/* Ink splatter accent (positioned by .splat-wrap parents) */
.splat {
  position: absolute; width: 190px; height: 190px; pointer-events: none; opacity: .8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%239B111E'%3E%3Ccircle cx='100' cy='100' r='34'/%3E%3Ccircle cx='148' cy='74' r='9'/%3E%3Ccircle cx='158' cy='118' r='5'/%3E%3Ccircle cx='60' cy='64' r='7'/%3E%3Ccircle cx='44' cy='120' r='11'/%3E%3Ccircle cx='128' cy='152' r='6'/%3E%3Ccircle cx='76' cy='158' r='4'/%3E%3Ccircle cx='170' cy='94' r='3'/%3E%3Ccircle cx='34' cy='88' r='4'/%3E%3Cpath d='M100 66 C 96 40 104 34 102 12 L 108 12 C 106 36 112 44 106 66 Z'/%3E%3Cpath d='M132 118 C 152 128 166 126 186 140 L 182 146 C 164 134 150 138 128 126 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}

/* ── Header ─────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 90;
  background: rgba(12,10,10,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--bone);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo-link .logo-img { height: 48px; width: auto; }
@media (max-width: 480px) { .logo-link .logo-img { height: 40px; } }
.logo-word { font-family: var(--display); font-size: 22px; letter-spacing: .04em; color: var(--bone); }
.nav-desktop { display: none; align-items: center; gap: 2px; }
.nav-desktop a {
  padding: 7px 10px; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-size: 15.5px; font-weight: 600; letter-spacing: .01em;
  color: rgba(240,236,230,.78);
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav-desktop a:hover { color: #fff; border-color: rgba(240,236,230,.4); }
.nav-desktop a.active { color: #fff; border-color: var(--blood-hi); }
.nav-cta {
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  background: var(--blood); color: #fff !important; margin-left: 12px;
  border-bottom: none !important; padding: 11px 20px !important;
  clip-path: polygon(4% 0, 100% 6%, 97% 100%, 0 94%);
}
.nav-cta:hover { background: var(--blood-hi) !important; }
/* Tattoos dropdown */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop > a .caret { font-size: 10px; opacity: .6; margin-left: 2px; }
.drop-menu {
  position: absolute; top: 100%; left: 0; min-width: 240px; padding: 10px;
  background: rgba(12,10,10,.97); border: 1px solid var(--line); border-radius: 0 0 10px 10px;
  display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: flex; }
.drop-menu a {
  display: block; padding: 9px 14px !important; border-bottom: none !important;
  font-size: 16.5px !important; letter-spacing: .03em !important;
  color: rgba(240,236,230,.82); border-radius: 6px;
}
.drop-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.drop-menu a:first-child { color: var(--brass); font-weight: 800; }

/* Mobile menu: style sub-links under Tattoos */
.mm-styles { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 4px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-menu nav .mm-styles a {
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: rgba(240,236,230,.75);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 7px 14px;
  text-decoration: none;
}

/* Careers IG reel embed */
.reel-frame {
  justify-self: center; width: min(340px, 88vw); border-radius: 14px; overflow: hidden;
  outline: 8px solid var(--bone); outline-offset: -1px; transform: rotate(1.2deg);
  box-shadow: 0 28px 70px rgba(0,0,0,.55); background: #000;
}
.reel-frame iframe { width: 100%; height: 560px; border: 0; display: block; }
.reel-link { position: relative; display: block; text-decoration: none; }
.reel-link img { width: 100%; height: 560px; object-fit: cover; filter: brightness(.55); transition: filter .25s; }
.reel-link:hover img { filter: brightness(.7); }
.reel-play {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--blood); color: #fff; font-size: 30px; padding-left: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.reel-link:hover .reel-play { background: var(--blood-hi); }
.reel-caption {
  position: absolute; left: 20px; right: 20px; bottom: 22px; color: #fff;
  font-weight: 800; font-size: 16px; line-height: 1.5; text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.reel-caption em { font-style: normal; font-weight: 600; color: rgba(255,255,255,.75); font-size: 13.5px; }

/* Phone: nav item, mobile header icon, floating call button */
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--sans); font-size: 14.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--bone); text-decoration: none; padding: 9px 10px; border-bottom: none !important;
}
.nav-phone svg { width: 16px; height: 16px; color: var(--blood-hi); }
.nav-phone:hover { color: #fff; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.head-phone {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px; color: var(--bone);
}
.head-phone svg { width: 20px; height: 20px; }
@media (min-width: 1240px) { .head-phone { display: none; } }
/* Mobile header: clients land here to sign their forms, so the consent
   form is a white pill at the very top, not a link buried in the menu.
   Desktop already has it in the nav (.nav-consent). Marc, 2026-10-11. */
.head-consent {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  height: 46px; padding: 0 14px; border-radius: 999px; background: #fff; color: #8b1a1a;
  text-decoration: none; font-family: var(--sans); font-size: 12px; font-weight: 800;
  line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.head-consent:hover, .head-consent:focus-visible { background: #f4f1ec; color: #6f1414; }
/* Under 440px the logo, pill, phone and menu do not all fit. The floating
   call button and the menu's Call row still carry the phone. */
@media (max-width: 439px) { .head-phone { display: none; } }
@media (max-width: 400px) { .head-consent { padding: 0 11px; } .head-actions { gap: 7px; } }
@media (max-width: 360px) { .site-head .logo-img { width: 112px; height: auto; } }
@media (min-width: 1240px) { .head-consent { display: none; } }
.mm-phone {
  margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px solid rgba(240,236,230,.35); color: var(--bone); text-decoration: none;
  padding: 15px; font-weight: 800; font-size: 15px; letter-spacing: .04em;
}
.mm-phone svg { width: 18px; height: 18px; color: var(--blood-hi); }
.mm-phone + .mm-cta { margin-top: 12px; }
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 58px; height: 58px; border-radius: 999px; padding: 0 17px;
  background: var(--blood); color: #fff; text-decoration: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  transition: background .18s;
}
.call-fab::before {
  content: ""; position: absolute; inset: -5px; border-radius: 999px;
  border: 2px solid rgba(193, 18, 26, .55); animation: fab-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-pulse {
  0% { transform: scale(.9); opacity: .9; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .call-fab::before { animation: none; opacity: 0; } }
.call-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.call-fab .fab-label { display: none; font-weight: 800; font-size: 15px; white-space: nowrap; }
.call-fab:hover { background: var(--blood-hi); }
@media (min-width: 900px) { .call-fab .fab-label { display: inline; } }

/* Service-area town links */
.area-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.area-links a {
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--fg);
  transition: border-color .15s, color .15s;
}
.area-links a:hover { border-color: var(--blood-hi); color: var(--blood-hi); }

.burger {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  color: var(--bone); cursor: pointer;
}
.burger svg { width: 22px; height: 22px; }
@media (min-width: 1240px) {
  .nav-desktop { display: flex; }
  .burger { display: none; }
}

/* Fullscreen mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--ink-2); color: var(--bone);
  display: none; flex-direction: column; padding: 26px 26px 40px; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
body.menu-locked { overflow: hidden; }
.mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.mm-close {
  background: none; border: 1px solid rgba(255,255,255,.25); color: var(--bone);
  width: 46px; height: 46px; border-radius: 8px; font-size: 22px; cursor: pointer;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  font-family: var(--display); font-size: 36px; text-decoration: none; color: var(--bone);
  padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu nav a.small { font-family: var(--sans); font-size: 16px; font-weight: 600; color: rgba(240,236,230,.7); border: none; padding: 8px 4px; }
.mobile-menu .mm-cta {
  margin-top: 26px; text-align: center; background: var(--blood); color: #fff;
  padding: 17px; font-weight: 800; text-decoration: none;
  text-transform: uppercase; letter-spacing: .1em; font-size: 14px;
  clip-path: polygon(2% 0, 100% 8%, 98% 100%, 0 92%);
}

/* Promo + age banners */
.promo-bar {
  background: var(--brass); color: var(--ink); text-align: center;
  font-size: 19px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 16px;
}
.age-band {
  background: var(--blood); color: #fff; text-align: center;
  font-size: 18px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.3);
}
@media (max-width: 700px) {
  .promo-bar { font-size: 15px; padding: 12px 14px; }
  .age-band { font-size: 14px; padding: 10px 14px; }
}

/* ── Hero ───────────────────────────────────────────── */
.hero { position: relative; background: var(--ink-2); color: var(--bone); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
/* After the intro plays once, hold on the full wordmark instead of looping.
   The video never shows the whole logo in one frame, so the end state fades
   the video down to solid ink and places the complete wordmark in the open
   half of the hero, clear of the copy panel. */
/* The video's final frame stays as the settled background; the scrim
   deepens slightly so the panel, crest and walk-ins read over it. */
.hero-media video { transition: opacity 1.2s ease; }
.hero.done .hero-media video { opacity: .55; }
.hero-scrim { transition: opacity 1.2s ease; }
.hero-media .hero-end {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center 40%;
  padding: clamp(24px, 4vw, 72px);
  opacity: 0; transition: opacity 1.4s ease .5s;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.6));
}
.hero.done .hero-end { opacity: .95; }
/* Right-side stack: crest + walk-ins staggered like pinned flyers.
   display:contents below 1200px so the mobile/tablet hero-end rules
   keep addressing .hero-media directly. */
.hero-side { display: contents; }
.hero-media img.hero-walkins {
  display: none;
  width: auto; height: auto; object-fit: contain;
  opacity: 0; transition: opacity 1s ease .8s;
  -webkit-mask-image: radial-gradient(ellipse 66% 58% at 50% 50%, #000 58%, transparent 95%);
  mask-image: radial-gradient(ellipse 66% 58% at 50% 50%, #000 58%, transparent 95%);
}
.hero.done .hero-walkins { opacity: 1; }
/* Wide screens: the settled wordmark sits beside the copy panel, not behind it. */
@media (min-width: 1200px) {
  .hero-side {
    display: flex; flex-direction: column; align-items: center;
    /* The panel's right edge lands at ~50% + 22px of the viewport; hug it. */
    position: absolute; left: calc(50% + 56px); right: auto; top: 50%; transform: translateY(-57%);
    width: min(36vw, 600px);
  }
  .hero-media .hero-end {
    position: static; inset: auto; transform: none;
    width: 100%; height: auto; padding: 0;
    /* the crest art has a baked black ground — feather it into the hero */
    -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 49%, #000 74%, transparent 94%);
    mask-image: radial-gradient(ellipse 64% 60% at 50% 49%, #000 74%, transparent 94%);
  }
  .hero-media img.hero-walkins {
    display: block; position: static;
    width: 76%; height: auto;
    margin-top: -104px; margin-right: -4%;
    align-self: flex-end;
    transform: rotate(-3.5deg);
  }
}
/* BOOK NOW — the hero's one call to action, straight to the calendar.
   Wide screens: pinned to the right edge over the art like a poster on the
   wall, visible from the first frame (the intro fade applies to the copy,
   not to the thing we want tapped). Phones: in the panel under the buttons. */
/* Phones: top-right corner of the hero art, in the first screen, no scroll.
   Marc, 2026-09-22: "BOOK NOW should be at the top of the page on mobile load." */
.hero-book {
  display: block; position: absolute; z-index: 4; line-height: 0;
  right: 3vw; top: 3vw; width: min(38vw, 190px);
  transform: rotate(-2deg);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.75));
}
.hero-book-inline { display: none; }
.hero-book-inline img, .hero-book img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
@media (min-width: 1200px) {
  .hero-book {
    right: 5.5vw; top: 50%; width: min(17vw, 300px);
    transform: translateY(-50%) rotate(-2deg);
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.7));
    transition: transform .25s ease, filter .25s ease;
  }
  .hero-book:hover, .hero-book:focus-visible { transform: translateY(-50%) rotate(-1deg) scale(1.05); filter: drop-shadow(0 18px 40px rgba(255,0,0,.35)); }
}
/* Keep the headline compact so the panel leaves the top band clear for the wordmark. */
.hero-panel h1 { font-size: clamp(28px, 3.4vw, 46px); max-width: none; }
/* $100 flyer pinned diagonally over the panel corner — click opens the voucher */
.hero-flyer { display: none; }
@media (min-width: 1200px) {
  .hero-flyer {
    display: block; position: absolute; top: -42px; right: -60px; z-index: 3;
    width: min(14vw, 200px); height: auto;
    transform: rotate(8deg);
    outline: 7px solid var(--bone); outline-offset: -1px; border-radius: 4px;
    box-shadow: 0 26px 60px rgba(0,0,0,.65);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .hero-flyer:hover { transform: rotate(5deg) scale(1.05); box-shadow: 0 34px 80px rgba(0,0,0,.75); }
}
.hero-panel .lede { font-size: 16.5px; }


.hero.done .hero-end { opacity: 1; }

/* Hero copy stays hidden until the intro has finished and the logo is fixed,
   then rises in inside a shaded glass panel so it reads against the chrome. */
.hero .hero-inner { opacity: 0; transform: translateY(18px); transition: opacity 1s ease .35s, transform 1s ease .35s; }
.hero.done .hero-inner { opacity: 1; transform: none; }
.hero .stamp { opacity: 0; transition: opacity 1s ease .8s; }
.hero.done .stamp { opacity: .92; }
.hero-panel {
  position: relative;
  max-width: 620px; padding: 28px 30px 24px; border-radius: 12px;
  background: rgba(10, 8, 8, .55);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  backdrop-filter: blur(14px) saturate(.9);
  border: 1px solid rgba(240, 236, 230, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
@media (max-width: 700px) { .hero-panel { padding: 26px 22px 24px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-panel { background: rgba(10, 8, 8, .82); }
}
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,10,.6) 0%, rgba(12,10,10,.25) 45%, rgba(12,10,10,.94) 100%); }
.hero-inner {
  position: relative; min-height: min(92vh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 150px; padding-bottom: 84px;
}
.hero h1 {
  max-width: 12ch; text-transform: uppercase; letter-spacing: .015em;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.hero h1 .red { color: var(--blood-hi); }
.hero .lede { color: rgba(240,236,230,.9); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 28px; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(240,236,230,.75); font-weight: 700; }
.hero-meta span::before { content: "✕"; color: var(--blood-hi); margin-right: 9px; font-size: 11px; }

/* Rubber stamp badge */
.stamp {
  position: absolute; right: 2vw; bottom: 170px; width: 150px; height: 150px;
  transform: rotate(12deg); opacity: .92; pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.4));
  display: none;
}
@media (min-width: 1100px) { .stamp { display: block; } }

/* ── Work marquee ───────────────────────────────────── */
.marquee { overflow: hidden; background: var(--ink-2); border-block: 1px solid var(--line); padding: 14px 0; position: relative; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: mq 55s linear infinite; }
.marquee-track img { height: 230px; width: auto; border-radius: 4px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .marquee-track img { height: 150px; } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Page hero (interior) ───────────────────────────── */
.page-hero { background: var(--ink-2); color: var(--bone); padding: 92px 0 62px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero h1 { text-transform: uppercase; }
.page-hero .lede { color: rgba(240,236,230,.82); }
.page-hero .rule { width: 84px; height: 4px; background: var(--blood-hi); margin-top: 26px; }
.page-hero.center .rule { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 0 32px;
  font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer; transition: transform .16s, background .18s, border-color .18s, color .18s;
  font-family: var(--sans);
  clip-path: polygon(3% 0, 100% 5%, 98% 100%, 0 95%);
}
.btn:active { transform: scale(.97); }
.btn-blood { background: var(--blood); color: #fff; }
.btn-blood:hover { background: var(--blood-hi); }
.btn-brass { background: var(--brass); color: var(--ink); }
.btn-brass:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; border: 1.5px solid rgba(240,236,230,.35); color: var(--fg); clip-path: none; }
.btn-ghost:hover { border-color: var(--fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ── Sections ───────────────────────────────────────── */
.section { padding: 92px 0; position: relative; }
.section.tint { background: var(--raised); }
.section.dark { background: var(--ink-2); }
.section.dark .lede { color: rgba(240,236,230,.78); }
.sec-head { margin-bottom: 48px; position: relative; }

/* Torn-paper divider between a section and the next */
.rip { height: 22px; background: var(--raised); position: relative; }
.rip::before {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  clip-path: polygon(0 0, 4% 62%, 9% 18%, 14% 78%, 19% 30%, 25% 88%, 31% 22%, 37% 70%, 43% 12%, 49% 82%, 55% 34%, 61% 92%, 67% 26%, 73% 74%, 79% 16%, 85% 84%, 91% 38%, 96% 72%, 100% 10%, 100% 0);
}

/* ── Big stat band ──────────────────────────────────── */
.stat-band { background: var(--ink-2); border-block: 1px solid var(--line); padding: 60px 0; }
.stat-band .wrap { display: grid; gap: 40px; text-align: center; }
@media (min-width: 780px) { .stat-band .wrap { grid-template-columns: repeat(3, 1fr); } }
.stat .big {
  font-family: var(--display); font-size: clamp(56px, 7vw, 96px); line-height: 1;
  color: var(--bone);
}
.stat .big em { font-style: normal; color: var(--blood-hi); }
.stat .sub { font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

/* ── Flash-sheet wall (styles) ──────────────────────── */
.flash-wall {
  display: grid; gap: 30px 22px; grid-template-columns: repeat(2, 1fr);
  padding-top: 14px;
}
@media (min-width: 760px) { .flash-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .flash-wall { grid-template-columns: repeat(4, 1fr); } }
.flash-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  background: var(--bone); color: var(--ink);
  padding: 10px 10px 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s ease, box-shadow .25s ease;
}
.flash-card:nth-child(4n+1) { --tilt: -1.6deg; }
.flash-card:nth-child(4n+2) { --tilt: 1.1deg; margin-top: 18px; }
.flash-card:nth-child(4n+3) { --tilt: -0.7deg; margin-top: 6px; }
.flash-card:nth-child(4n+4) { --tilt: 1.8deg; margin-top: 24px; }
.flash-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 54px rgba(0,0,0,.6); z-index: 2; }
.flash-card::before {
  /* tape */
  content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px;
  background: rgba(240,236,230,.16); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  transform: translateX(-50%) rotate(-4deg);
  border-left: 1px dashed rgba(0,0,0,.12); border-right: 1px dashed rgba(0,0,0,.12);
}
.flash-card img { width: 100%; aspect-ratio: 4/4.6; object-fit: cover; filter: saturate(.96); }
.flash-card .flash-label {
  font-family: var(--display); font-size: 24px; margin: 12px 4px 2px; line-height: 1.1;
}
.flash-card .flash-sub { font-size: 13px; color: #6E6560; margin: 0 4px; line-height: 1.45; }
.flash-card .flash-no {
  position: absolute; top: 16px; right: 14px; z-index: 2; font-family: var(--display);
  font-size: 15px; color: var(--blood); background: rgba(251,250,248,.88);
  padding: 1px 8px; letter-spacing: .06em;
}

/* ── Placement chart (mannequin) ────────────────────── */
.mann-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .mann-layout { grid-template-columns: minmax(0, 420px) 1fr; gap: 64px; } }
.mann-fig { position: sticky; top: 100px; }
@media (max-width: 899px) { .mann-fig { position: static; max-width: 360px; margin: 0 auto; } }
.mann-fig svg { width: 100%; height: auto; display: block; }
.mann-fig .fig ellipse, .mann-fig .fig rect, .mann-fig .fig path[d^="M100"] {
  fill: #262019; stroke: rgba(240,236,230,.22); stroke-width: 1.5;
}
.mann-fig .fig .limb { fill: none; stroke: #262019; stroke-linecap: round; }
.mann-fig .fig .limb + .limb { }
.mann-fig .fig-label {
  fill: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: .3em;
}
.mann-fig .hs {
  fill: var(--blood-hi); fill-opacity: .85; stroke: rgba(240,236,230,.85); stroke-width: 2;
  cursor: pointer; transition: r .15s, fill-opacity .15s;
  animation: hs-pulse 2.2s ease-in-out infinite;
}
.mann-fig .hs:hover { fill-opacity: 1; }
.mann-fig .hs.active { fill: var(--bone); stroke: var(--blood-hi); stroke-width: 4; animation: none; }
@keyframes hs-pulse { 0%, 100% { stroke-opacity: .85; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mann-fig .hs { animation: none; } }
.zone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .zone-grid { grid-template-columns: repeat(3, 1fr); } }
.zone-grid .gal-item { aspect-ratio: 4/5; }
.zone-grid .gal-item img { width: 100%; height: 100%; object-fit: cover; }
#zoneTitle { font-size: clamp(26px, 3vw, 38px); margin-bottom: 6px; }
#zoneDesc { max-width: 56ch; margin-bottom: 22px; }

/* ── Generic cards (kept for how-it-works, locations…) ─ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.card:hover { border-color: rgba(240,236,230,.3); transform: translateY(-3px); }
.card-img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ink-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.045); }
.card-img .veil { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(0,0,0,.82), transparent); }
.card-img .title-on-img {
  position: absolute; left: 20px; right: 20px; bottom: 15px; color: #fff;
  font-family: var(--display); font-size: 26px; text-shadow: 0 2px 8px rgba(0,0,0,.6); margin: 0;
}
.card-body { padding: 20px 22px 24px; }
.card-body p { color: var(--muted); font-size: 15px; margin: 0 0 .6em; }
.card-body p:last-child { margin-bottom: 0; }
.card-more { margin-top: 12px; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blood-hi); }

/* ── Gallery (portfolio) ────────────────────────────── */
.masonry { columns: 2; column-gap: 14px; }
@media (min-width: 700px) { .masonry { columns: 3; } }
@media (min-width: 1050px) { .masonry { columns: 4; } }
.masonry > * { break-inside: avoid; margin-bottom: 14px; }
.gal-item { display: block; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.gal-item img { width: 100%; transition: transform .45s, opacity .3s; }
.gal-item img.ll { min-height: 180px; background: #1B1615; }
.gal-item:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(8,6,6,.96); display: none; place-items: center; padding: 24px; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 94vw; max-height: 88vh; width: auto; border-radius: 4px; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 24px; cursor: pointer;
}

/* ── Reviews ────────────────────────────────────────── */
.review-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px 24px; margin-bottom: 16px; break-inside: avoid;
}
.review-card::before {
  content: "“"; position: absolute; top: 2px; left: 16px;
  font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--blood); opacity: .55;
}
.review-cols .review-card:nth-child(3n+1) { transform: rotate(-.4deg); }
.review-cols .review-card:nth-child(3n+2) { transform: rotate(.35deg); }
.review-stars { color: var(--brass); font-size: 15px; letter-spacing: 4px; margin: 0 0 10px 26px; }
.review-text { font-size: 15.5px; margin-bottom: 14px; }
.review-meta { font-size: 13px; color: var(--muted); font-weight: 700; display: flex; gap: 10px; flex-wrap: wrap; letter-spacing: .04em; }
.review-loc { color: var(--blood-hi); text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.review-cols { columns: 1; column-gap: 16px; }
@media (min-width: 700px) { .review-cols { columns: 2; } }
@media (min-width: 1050px) { .review-cols { columns: 3; } }
.review-summary { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 36px; }
.rs-tile { flex: 1 1 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.rs-tile .big { font-family: var(--display); font-size: 52px; line-height: 1; }
.rs-tile .stars { color: var(--brass); letter-spacing: 4px; margin: 6px 0; }
.rs-tile .sub { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip {
  border: 1.5px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px;
  padding: 10px 22px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; font-family: var(--sans);
}
.chip.active { background: var(--blood); color: #fff; border-color: var(--blood); }

/* ── Split layouts ──────────────────────────────────── */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split .media-frame { border-radius: 4px; overflow: hidden; box-shadow: 0 26px 64px rgba(0,0,0,.5); position: relative; }
.split .media-frame img, .split .media-frame video { width: 100%; height: 100%; object-fit: cover; }
.media-frame.tilt { transform: rotate(1.2deg); outline: 10px solid var(--bone); outline-offset: -1px; }

.video-band { position: relative; background: var(--ink-2); }
.video-band video { width: 100%; max-height: 78vh; object-fit: cover; display: block; }

/* ── Press strip ────────────────────────────────────── */
.press {
  border-left: 4px solid var(--brass); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 30px;
}
.press .kicker { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
.press a { color: var(--blood-hi); }

/* ── Location / NAP ─────────────────────────────────── */
.loc-card { padding: 30px 32px; }
.loc-card h3 { margin-bottom: 4px; }
.loc-addr { color: var(--muted); margin-bottom: 14px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hours-table td { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; font-weight: 700; }
.hours-table a { color: var(--blood-hi); }
.map-frame { border: 0; width: 100%; height: 340px; border-radius: 4px; filter: grayscale(.4) contrast(1.05); }

/* ── FAQ ────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px;
  padding: 22px 2px; font-weight: 700; font-size: 17.5px; align-items: baseline;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "✕"; font-size: 17px; color: var(--blood-hi); line-height: 1; transition: transform .2s; transform: rotate(45deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-item .faq-a { padding: 0 2px 24px; color: var(--muted); max-width: 68ch; }

/* ── Forms ──────────────────────────────────────────── */
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid .half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.field label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--surface); font: inherit; color: var(--fg);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blood-hi); }
.form-note { font-size: 13px; color: var(--muted); }
.form-status { font-weight: 700; padding: 14px 18px; border-radius: 8px; display: none; }
.form-status.ok { display: block; background: rgba(30,91,46,.25); color: #8FD3A0; }
.form-status.err { display: block; background: rgba(155,17,30,.2); color: #F2A0A6; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ── CTA band ───────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(120% 160% at 50% 120%, rgba(155,17,30,.4) 0%, rgba(12,10,10,0) 55%), var(--ink-2);
  border-block: 1px solid var(--line);
  padding: 100px 0;
}
.cta-band h2 { font-size: clamp(40px, 6vw, 84px); text-transform: uppercase; }
.cta-band .splat { right: 6%; top: 10%; opacity: .35; }

/* ── $100 offer voucher popup ───────────────────────── */
.offer-overlay {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: rgba(8, 6, 6, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease; padding: 20px;
}
.offer-overlay.show { opacity: 1; pointer-events: auto; }
.voucher {
  position: relative; width: min(440px, 94vw);
  background: var(--bone); color: var(--ink);
  border-radius: 10px; padding: 34px 30px 28px; text-align: center;
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
  transform: translateY(26px) scale(.96); transition: transform .4s cubic-bezier(.2,1,.3,1);
  /* perforated ticket edges */
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.offer-overlay.show .voucher { transform: translateY(0) scale(1); }
.voucher::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1.5px dashed rgba(19,16,16,.3); border-radius: 6px;
}
.voucher .v-brand { height: 42px; width: auto; margin: 0 auto 6px; }
.voucher .v-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--blood); }
.voucher .v-amount {
  font-family: var(--display); font-size: clamp(64px, 18vw, 92px); line-height: .95;
  margin: 6px 0 2px; color: var(--ink);
  transform: scale(2.1) rotate(-14deg); opacity: 0;
}
.offer-overlay.show .v-amount { animation: v-stamp .5s cubic-bezier(.2,1.4,.3,1) .45s forwards; }
@keyframes v-stamp { to { transform: scale(1) rotate(-2deg); opacity: 1; } }
.voucher .v-off {
  font-family: var(--display); font-size: 26px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
.voucher .v-sub { font-size: 14.5px; color: #6E6560; max-width: 34ch; margin: 0 auto 18px; }
.voucher .v-form { display: grid; gap: 10px; }
.voucher .v-err { color: #ff8a80; font-size: 14px; font-weight: 600; margin: 0; text-align: left; }
.voucher input[type=email], .voucher .v-form select {
  min-height: 52px; padding: 13px 16px; border-radius: 8px; width: 100%;
  border: 1.5px solid #cfc8c0; background: #fff; color: var(--ink); font: inherit; text-align: center;
}
.voucher input[type=email]:focus, .voucher .v-form select:focus { outline: none; border-color: var(--blood); }
.voucher .v-claim {
  min-height: 54px; border: none; cursor: pointer; width: 100%;
  background: var(--blood); color: #fff; font-family: var(--sans);
  font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(2% 0, 100% 6%, 98% 100%, 0 94%);
  transition: background .15s;
}
.voucher .v-claim:hover { background: var(--blood-hi); }
.voucher .v-no {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13px; color: #8b827d; text-decoration: underline; text-underline-offset: 3px; margin-top: 4px;
}
.voucher .v-fine { font-size: 11.5px; color: #a39a93; margin-top: 12px; }
.voucher .v-close {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px;
  background: none; border: none; cursor: pointer; font-size: 22px; color: #8b827d; line-height: 1;
}
.voucher .v-done { font-family: var(--display); font-size: 30px; margin: 18px 0 8px; }
@media (max-width: 700px) {
  .offer-overlay { place-items: end center; padding: 0; }
  .voucher {
    width: 100%; border-radius: 18px 18px 0 0; padding-bottom: max(28px, env(safe-area-inset-bottom));
    transform: translateY(100%);
    -webkit-mask: none; mask: none;
  }
  .offer-overlay.show .voucher { transform: translateY(0); }
}

/* Platform cards (reviews page) */
.plat-cards { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto; }
@media (min-width: 640px) { .plat-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .plat-cards { grid-template-columns: repeat(5, 1fr); } }
.plat-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--fg);
  transition: border-color .18s, transform .18s;
}
.plat-card:hover { border-color: var(--blood-hi); transform: translateY(-3px); }
.plat-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.plat-ic svg { width: 22px; height: 22px; }
.plat-tx { display: flex; flex-direction: column; line-height: 1.3; }
.plat-tx b { font-size: 15px; }
.plat-tx span { font-size: 12.5px; color: var(--muted); }

/* Auto-scrolling reviews wall */
.rev-wall-sec { overflow: hidden; }
.rev-wall { display: grid; gap: 14px; margin-top: 10px; }
.rw-row { overflow: hidden; }
.rw-track {
  display: flex; gap: 14px; width: max-content;
  animation: rw-scroll var(--dur, 100s) linear infinite;
}
.rw-rev .rw-track { animation-direction: reverse; }
.rw-row:hover .rw-track { animation-play-state: paused; }
@keyframes rw-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rw-track { animation: none; flex-wrap: wrap; width: auto; } }
.rw-card {
  width: 360px; flex-shrink: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.rw-top { display: flex; align-items: center; gap: 12px; }
.rw-av {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px;
  font-family: var(--sans);
}
.rw-name { display: block; font-weight: 700; font-size: 15px; }
.rw-cardstars { display: inline-flex; gap: 2px; margin-top: 3px; }
.rw-cardstars svg { width: 15px; height: 15px; fill: #FBBC05; }
.rw-card blockquote { margin: 0; font-size: 14px; line-height: 1.55; }
.rw-gfoot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; color: var(--muted); font-size: 12.5px;
}
.rw-g { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rw-gicon { width: 15px; height: 15px; }
.rw-row {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
@media (max-width: 700px) { .rw-card { width: 300px; } }

/* Social icon row */
.social-row { display: flex; gap: 16px; justify-content: center; margin-top: 28px; }
.social-row a {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--fg);
  transition: border-color .18s, color .18s, transform .18s;
}
.social-row a:hover { border-color: var(--blood-hi); transform: translateY(-3px); }
.social-row svg { width: 24px; height: 24px; }

/* ── Footer ─────────────────────────────────────────── */
.site-foot { background: var(--ink-2); color: rgba(240,236,230,.75); padding: 64px 0 40px; border-top: 1px solid var(--line); }
.site-foot a { color: rgba(240,236,230,.85); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: 36px; margin-bottom: 44px; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-grid h4 { color: var(--bone); font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.foot-brand img { height: 54px; margin-bottom: 14px; }
.foot-brand p { font-size: 14px; max-width: 34ch; }
.foot-legal { border-top: 1px solid var(--line); padding-top: 26px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
.foot-maps { display: grid; gap: 22px; margin-bottom: 40px; }
@media (min-width: 800px) { .foot-maps { grid-template-columns: 1fr 1fr; } }
.foot-maps h4 { color: var(--bone); font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.foot-maps .map-frame { height: 220px; }
.foot-areas { border-top: 1px solid var(--line); padding-top: 26px; margin-bottom: 30px; }
.foot-areas h4 { color: var(--bone); font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; }
.foot-areas p { font-size: 13.5px; line-height: 2; margin-bottom: 18px; }
.foot-areas a { white-space: nowrap; }
.consent-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 400;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; display: none; flex-wrap: wrap; gap: 12px 20px; align-items: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); font-size: 14px;
}
.consent-bar.show { display: flex; }
.consent-bar .btn { min-height: 42px; padding: 0 20px; font-size: 12px; }
@media (min-width: 700px) { .consent-bar { left: auto; right: 22px; max-width: 480px; } }

/* ── Per-style page themes ──────────────────────────── */
.style-hero-img { border-radius: 4px; overflow: hidden; max-width: 520px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.style-hero-img img { width: 100%; }
.style-layout { display: grid; gap: 44px; align-items: start; }
@media (min-width: 940px) { .style-layout { grid-template-columns: minmax(0,1.15fr) minmax(0, 480px); gap: 64px; } }
.prose h2 { font-size: clamp(24px, 3vw, 36px); margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose p { max-width: 68ch; }
.prose .accent-note {
  border-left: 3px solid var(--blood-hi); padding: 4px 0 4px 20px; color: var(--muted);
  font-family: var(--serif); font-style: italic; font-size: 18px;
}

body.style-black_grey_realism .page-hero { background: #080707; }
body.style-black_grey_realism .page-hero .rule { background: linear-gradient(90deg,#fff,#555); }
body.style-black_grey_realism .style-hero-img img { filter: grayscale(1) contrast(1.1); }
body.style-black_grey_realism .eyebrow { color: #9c9ca2; }
body.style-black_grey_realism .prose .accent-note { border-color: #9c9ca2; }

body.style-portrait .page-hero { background: #171110; }
body.style-portrait .page-hero .rule { background: var(--brass); }
body.style-portrait .style-hero-img img { filter: sepia(.14) contrast(1.05); }
body.style-portrait .eyebrow { color: var(--brass); }

body.style-traditional .page-hero .rule { height: 7px; background: repeating-linear-gradient(90deg, var(--blood-hi) 0 18px, var(--brass) 18px 36px); }
body.style-traditional .prose h2 { text-transform: uppercase; letter-spacing: .05em; }
body.style-traditional .style-hero-img { outline: 5px solid var(--bone); outline-offset: -2px; }

body.style-cover_up .page-hero { background: linear-gradient(105deg, #241d1c 0 55%, #0C0A0A 55.2% 100%); }

body.style-custom .page-hero .rule { background: var(--brass); }
body.style-custom .eyebrow { color: var(--brass); }
body.style-custom .style-hero-img { outline: 2px dashed var(--brass); outline-offset: 8px; }

body.style-new_school .page-hero { background: #170D20; }
body.style-new_school .page-hero .rule { background: linear-gradient(90deg,#7A3BC8,#12A4A8,#E8B00F); }
body.style-new_school .style-hero-img { transform: rotate(-1.2deg); }
body.style-new_school .eyebrow { color: #B88AE8; }

body.style-new_traditional .page-hero { background: #0E1B16; }
body.style-new_traditional .page-hero .rule { background: linear-gradient(90deg,#1F6F54,var(--brass)); }
body.style-new_traditional .style-hero-img { border: 1px solid var(--brass); padding: 8px; background: var(--raised); }
body.style-new_traditional .eyebrow { color: #6FBF9F; }

/* Fine Line and Lettering flip to paper — the deliberate exceptions */
body.style-fine_line, body.style-lettering {
  --bg: var(--paper); --fg: var(--ink);
  --surface: #FFFFFF; --surface-2: var(--paper-2);
  --line: #E4DFD7; --muted: #6E6560;
}
body.style-fine_line .section.tint, body.style-lettering .section.tint { background: var(--paper-2); }
body.style-fine_line .page-hero, body.style-lettering .page-hero { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
body.style-fine_line .page-hero .lede, body.style-lettering .page-hero .lede { color: var(--muted); }
body.style-fine_line .page-hero .rule { height: 1px; width: 140px; background: var(--ink); }
body.style-fine_line h1, body.style-fine_line h2 { font-weight: 400; letter-spacing: .03em; text-transform: none; }
body.style-fine_line .eyebrow { color: var(--ink); font-weight: 700; }
body.style-fine_line .prose .accent-note { border-color: var(--ink); }
body.style-lettering .page-hero h1 { font-family: var(--serif); font-style: italic; font-weight: 600; text-transform: none; }
body.style-lettering .page-hero .rule { background: var(--ink); height: 2px; }
body.style-lettering .eyebrow { color: var(--ink); }
body.style-fine_line .btn-ghost, body.style-lettering .btn-ghost { border-color: #cfc8c0; color: var(--ink); }
body.style-fine_line .btn-ghost:hover, body.style-lettering .btn-ghost:hover { border-color: var(--ink); }
body.style-fine_line .chip, body.style-lettering .chip { color: var(--ink); }
body.style-fine_line .flash-card, body.style-lettering .flash-card { box-shadow: 0 14px 34px rgba(19,16,16,.18); }
body.style-fine_line .card:hover, body.style-lettering .card:hover { border-color: #b9b1a6; }
body.style-fine_line .site-foot, body.style-lettering .site-foot,
body.style-fine_line .site-head, body.style-lettering .site-head,
body.style-fine_line .mobile-menu, body.style-lettering .mobile-menu { --fg: var(--bone); }

/* Artist page */
.artist-hero { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .artist-hero { grid-template-columns: 400px 1fr; gap: 64px; } }
.artist-photo {
  overflow: hidden; box-shadow: 0 26px 64px rgba(0,0,0,.55);
  outline: 10px solid var(--bone); outline-offset: -1px; transform: rotate(-1.3deg);
}
.style-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.style-chips a, .style-chips li {
  border: 1px solid rgba(240,236,230,.3); color: var(--bone);
  padding: 8px 16px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.style-chips a:hover { border-color: var(--blood-hi); color: var(--blood-hi); }
.bio-more { display: none; }
.bio-toggle { background: none; border: none; color: var(--blood-hi); font-weight: 800; cursor: pointer; font: inherit; padding: 0; }
.bio-open .bio-more { display: block; }

/* Utility */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.small { font-size: 14px; } .muted { color: var(--muted); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 500; background: var(--brass); color: var(--ink); padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { left: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card-img img, .gal-item img, .flash-card { transition: none !important; }
}

/* Mobile hero — must stay LAST so it outranks the base hero rules on cascade order. */
/* Mobile: same intro-then-logo sequence as desktop, tighter layout. */
@media (max-width: 700px) {
  .hero-inner { min-height: 0; padding-top: clamp(330px, 104vw, 440px); padding-bottom: 40px; }
  /* Mobile: the intro plays as a native 16:9 band up top, not a full-screen crop. */
  .hero-media video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 56.25vw; object-fit: cover; object-position: 50% 50%;
  }
  .hero.done .hero-media video { opacity: .3; }
  /* Settled stack (crest + walk-ins) sits above the panel on mobile. */
  .hero-side {
    display: flex; flex-direction: column; align-items: center;
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    width: min(62vw, 280px);
  }
  .hero-media .hero-end {
    position: static; inset: auto; transform: none;
    width: 100%; height: auto; padding: 0;
    -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 49%, #000 74%, transparent 94%);
    mask-image: radial-gradient(ellipse 64% 60% at 50% 49%, #000 74%, transparent 94%);
  }
  .hero-media img.hero-walkins {
    display: block; position: static;
    width: 82%; height: auto;
    margin-top: -40px; margin-right: -8%;
    align-self: flex-end;
    transform: rotate(-3.5deg);
  }
  .hero-panel { padding: 24px 20px 22px; }
  .hero-panel .lede { font-size: 16px; }
  .hero .btn-row { margin-top: 22px; }
  .hero .btn-row .btn { width: 100%; }
  .hero-meta { margin-top: 20px; gap: 8px 18px; font-size: 12px; }
}

/* ── The shop chat ──────────────────────────────────────────────────────────
   Stacked ABOVE the call button, not beside it. The call button is 58px tall
   and already owns the bottom-right corner at z150, so anything sharing that
   spot is invisible and unclickable — which is exactly what happened the first
   time. Quiet until tapped: this is the shop's site, not a chat product. */
.tc-fab{position:fixed;right:18px;bottom:88px;z-index:151;width:56px;height:56px;border-radius:50%;
  border:0;background:#9b111e;color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.34)}
.tc-fab svg{width:25px;height:25px}
.tc-fab:hover{background:#b4141f}
/* A class that sets display beats the UA's [hidden] rule, so the panel stayed
   on screen with hidden=true and nothing could close it. Say it explicitly. */
.tc-panel[hidden]{display:none!important}
.tc-panel{position:fixed;right:18px;bottom:154px;z-index:152;width:min(370px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:#17110f;color:#f4f1ec;border:1px solid rgba(240,232,226,.16);border-radius:14px;
  overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.tc-head{padding:13px 44px 13px 16px;border-bottom:1px solid rgba(240,232,226,.14);position:relative}
.tc-head b{display:block;font-size:15px}
.tc-head span{display:block;margin-top:2px;font-size:12px;color:#b3aaa3}
.tc-x{position:absolute;right:8px;top:8px;width:32px;height:32px;border:0;background:none;
  color:#b3aaa3;font-size:22px;line-height:1;cursor:pointer}
.tc-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.tc-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600;word-break:break-word}
.tc-link:hover{text-decoration-thickness:2px}
.tc-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:14.5px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word}
.tc-shop{align-self:flex-start;background:#241a18;border-bottom-left-radius:4px}
.tc-you{align-self:flex-end;background:#9b111e;color:#fff;border-bottom-right-radius:4px}
.tc-openers{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.tc-op{border:1px solid rgba(240,232,226,.22);background:none;color:#e6dfd8;border-radius:999px;
  padding:6px 11px;font-size:12.5px;cursor:pointer}
.tc-op:hover{border-color:#f4f1ec;color:#fff}
.tc-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid rgba(240,232,226,.14)}
.tc-in{flex:1;min-width:0;background:#241a18;border:1px solid rgba(240,232,226,.16);border-radius:9px;
  padding:10px 12px;color:#f4f1ec;font:inherit;font-size:14.5px}
.tc-in::placeholder{color:#8d837c}
.tc-in:focus{outline:0;border-color:#9b111e}
.tc-send{border:0;background:#9b111e;color:#fff;border-radius:9px;padding:0 15px;font:inherit;
  font-weight:700;font-size:14px;cursor:pointer}
@media (max-width:520px){.tc-fab{width:52px;height:52px;right:14px;bottom:82px}
  .tc-panel{right:10px;left:10px;width:auto;bottom:142px;max-height:calc(100vh - 200px)}}
@media (prefers-reduced-motion:reduce){.tc-fab,.tc-panel{transition:none}}

/* Consent form link in the header.
   Written as .nav-consent it lost to `.nav-desktop a`, which sets a near-white
   colour and is one point more specific — so the text was white on a white
   pill and the button read as disabled. Matched on the element inside its own
   nav, it wins on specificity without needing !important. */
.nav-desktop a.nav-consent,
.mm-panel a.nav-consent {
  margin-left: 14px; padding: 9px 17px;
  border: 1px solid #fff; border-bottom: 1px solid #fff; border-radius: 999px;
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; text-decoration: none;
  background: #fff; color: #8b1a1a;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-desktop a.nav-consent:hover,
.nav-desktop a.nav-consent:focus-visible {
  background: #f4f1ec; color: #6f1414; border-color: #f4f1ec;
}

/* The reference picture on the inquiry form. */
.field .opt { font-weight: 400; opacity: .55; font-size: .85em; }
.form-hint { display: block; margin-top: .35rem; font-size: .8rem; opacity: .62; }
.ref-prev { margin-top: .6rem; }
.ref-prev img { max-width: 190px; border-radius: 10px; display: block; }

/* The deposit policy, said before the card and not in mouse type. It is the
   one term most likely to be argued about later, so it reads as a sentence
   somebody actually meant rather than a disclaimer to scroll past. */
.sx-policy{margin:14px 0 4px;padding:11px 13px;border-left:3px solid #8b1a1a;background:rgba(139,26,26,.08);
  border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.5;color:#e9e2dc}

/* The name has to be the name on the ID — said where it is being typed,
   not in a policy nobody reads. Too many bookings were arriving under a
   nickname, and a nickname on a state form is a form that has to be done
   again with the client already in the chair. */
.field.id-note { font-size: 13px; line-height: 1.45; opacity: .72; margin-top: -6px; }

/* Why the card price is above the agreed price. Small, under the number,
   never a separate line item — an itemised fee is a surcharge, and a
   surcharge is capped at 3% on credit and banned outright on debit. */
.sx-row.sx-fee span:first-child { font-size: 12px; opacity: .7; font-weight: 400; }

/* ── Artist cards: Book Now beside Bio & portfolio (2026-10-01) ── */
.artist-card .card-img { display: block; text-decoration: none; color: inherit; }
.artist-card .card-body { display: flex; flex-direction: column; flex: 1; }
.card-acts { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.card-acts .card-more { margin-top: 0; text-decoration: none; }
.card-acts .card-more:hover { color: var(--fg); }
.btn.card-book, .btn.btn-big { min-height: 60px; padding: 0 38px; font-size: 16px; letter-spacing: .14em; font-weight: 900; }
@media (max-width: 480px) {
  .card-acts { flex-direction: column; align-items: stretch; }
  .card-acts .card-more { text-align: center; }
}

/* Consent line in the $100 popup, right above Claim (2026-10-01). */
.voucher .v-consent { margin: 4px 0 10px; line-height: 1.45; text-align: left; }