/* Rami's Cut - direction 3 (Rami's own reference), brand kit rev 03.
   One fixed look for everyone: near-black, neon pink leads, cyan supports, yellow decorates.
   Rules from the kit: filled pink buttons use #E01070 (white passes 4.69); ink on cyan or yellow is always near-black;
   glow on at most two elements per screen; brush face never carries a price, address or time; no square corners;
   no barber poles, moustaches or scissors icons; untreated warm photos never sit next to the pink (duotone them). */

:root {
  color-scheme: dark;
  --ink: #0E0E13;
  --surface: #17171F;
  --surface-2: #21212C;
  --pink: #FF2E93;
  --pink-fill: #E01070;
  --cyan: #35E0DC;
  --yellow: #FFD449;
  --white: #FFFFFF;
  --paper: #F4F1F6;
  --muted: #9A97A8;
  --hair: rgba(244, 241, 246, 0.13);
  --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --glow-pink: 0 0 28px rgba(255, 46, 147, 0.42);
  --glow-cyan: 0 0 28px rgba(53, 224, 220, 0.34);
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --brush: "Caveat Brush", "Comic Sans MS", cursive;
  --measure: 1760px;   /* built for a 1920 x 1080 screen first: 1760 + 2 x 80 gutters = 1920, no dead margins */
  --gutter: 22px;
}
@media (min-width: 760px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }
@media (min-width: 1600px) { :root { --gutter: 80px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
::selection { background: var(--pink-fill); color: var(--white); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.shell { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
.h { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; }
.brush { font-family: var(--brush); font-weight: 400; text-transform: none; letter-spacing: 0; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* buttons: pills only */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.btn--pink { background: var(--pink-fill); color: var(--white); box-shadow: var(--glow-pink); }
.btn--pink:hover { transform: translateY(-1px); }
.btn--ghost { border: 2px solid var(--hair); color: var(--paper); }
.btn--ghost:hover { border-color: var(--cyan); }
.btn--cyan { background: var(--cyan); color: var(--ink); }

/* header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: transparent; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease; }
.top.is-solid { background: rgba(14, 14, 19, 0.86); backdrop-filter: blur(10px); border-bottom-color: var(--hair); }
/* 09-13: Solitaire-style header. Nav left, logo centred, Book Now right, on a 1fr auto 1fr grid so the lockup sits on the true centre line. */
.top .shell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; min-height: 96px; }
.top .nav { justify-self: start; margin-left: 0; }
.top .lockup { justify-self: center; }
.top .btn { justify-self: end; }
/* Rami 09-13: logo bigger and more noticeable. --logo scales the whole lockup; 1 = the old size. */
:root { --logo: 1.45; }
.lockup { display: flex; align-items: center; gap: calc(11px * var(--logo)); }
/* neon crown: outline strokes only, yellow glow under a pale tube core, balls on the tips */
.crown { width: calc(44px * var(--logo)); height: calc(34px * var(--logo)); flex: none; filter: drop-shadow(0 0 6px rgba(255,212,73,.55)) drop-shadow(0 0 16px rgba(255,212,73,.3)); shape-rendering: geometricPrecision; transform: translateZ(0); background: radial-gradient(60% 60% at 50% 60%, rgba(14,14,19,.75), transparent 72%); overflow: visible; filter: drop-shadow(0 0 3px rgba(255,212,73,.85)) drop-shadow(0 0 9px rgba(255,212,73,.45)); }
.lockup b { display: block; font-weight: 900; font-size: calc(18px * var(--logo)); letter-spacing: 0.04em; line-height: 1; }
.lockup span { display: block; font-size: calc(10px * var(--logo)); font-weight: 700; letter-spacing: 0.24em; color: var(--paper); opacity: .85; margin-top: calc(4px * var(--logo)); }
.nav { display: flex; gap: 26px; margin-left: auto; font-weight: 600; font-size: 15px; color: var(--muted); }
.nav a:hover { color: var(--paper); }
.top .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* hero: the generated shop scene fills the whole band, content floats over it */
.hero { padding: 44px 0 26px; }
.hero--full { position: relative; padding: 72px 0 64px; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,14,19,.92) 0%, rgba(14,14,19,.7) 24%, rgba(14,14,19,0) 40%, rgba(14,14,19,0) 66%, rgba(14,14,19,.5) 84%, rgba(14,14,19,.8) 100%),
    linear-gradient(180deg, rgba(14,14,19,.5) 0%, rgba(14,14,19,0) 22%, rgba(14,14,19,0) 78%, rgba(14,14,19,.8) 100%); }   /* the centre column and the chair band carry no shade at all; the treated image does the edge smoke */
.hero--full .shell { width: 100%; }
/* three lanes, fixed at desktop: text lane 380px on the left, the chair owns the open centre, a 300px rail on the right.
   Nothing crosses a lane. Headline top-left, proof card and button bottom-left, rail centred on the mirror. */
.hero--full { padding: 126px 0; }   /* symmetric, so the grid centre is the viewport centre (header is fixed and floats over the photo) */
.hero--full .hero__grid { grid-template-columns: 440px minmax(0, 1fr) 320px; gap: 0; align-items: stretch; min-height: calc(100svh - 252px); }
.hero--full .hero__copy { grid-column: 1; justify-content: center; gap: 16px; }
.hero--full .hero__title { font-size: clamp(44px, 4.5vw, 86px); }
.hero--full .proof { background: rgba(23,23,31,.8); backdrop-filter: blur(8px); border: 1px solid var(--hair); padding: 14px 16px; gap: 12px; }
.hero--full .proof p { font-size: 14.5px; line-height: 1.45; }
.hero--full .proof .stars { font-size: 13px; }
.hero--full .proof small { font-size: 12px; margin-top: 4px; }
.hero--full .hero__cta { margin-top: 2px; gap: 14px; }
.hero--full .hero__cta .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.hero--full .hero__cta .sub { font-size: 13.5px; }
.hero--full .picker { grid-column: 3; align-self: center; background: rgba(23,23,31,.8); backdrop-filter: blur(10px); border: 1px solid var(--hair); padding: 20px; gap: 10px; }
.hero--full .picker h2 { font-size: 18px; margin-bottom: 2px; }
.hero--full .style { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 5px 14px 5px 5px; font-size: 15px; }
.hero--full .style .thumb { width: 52px; height: 52px; }
.hero--full .picker .note { font-size: 11.5px; line-height: 1.4; }
.hero--full .style { background: rgba(33,33,44,.85); }
.hero--full .hero__cta .sub { color: var(--paper); text-shadow: 0 1px 8px rgba(14,14,19,.9); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1.35fr 0.95fr; gap: 28px; align-items: stretch; }
.hero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.hero__title { font-size: clamp(56px, 6.2vw, 96px); }
/* the neon wall from Rami's reference: four hand-lettered lines, each its own face, colour, lean and tube glow */
.hero__title { transform: none; text-transform: none; letter-spacing: 0; line-height: 1; display: flex; flex-direction: column; align-items: flex-start; }
.hero__title span { display: block; white-space: nowrap; font-weight: 400; }
.hero__title .l1, .hero__title .l2, .hero__title .l3 { text-transform: uppercase; }
.hero__title .l1 { font-family: 'Permanent Marker', 'Outfit', sans-serif; font-size: 1.5em; letter-spacing: 0; color: var(--white);
  -webkit-text-stroke: 1.5px var(--pink); text-shadow: 0 0 10px rgba(255,46,147,.9), 0 0 26px rgba(255,46,147,.7), 0 0 60px rgba(255,46,147,.4);
  transform: rotate(-3deg); transform-origin: left bottom; }
.hero__title .l2 { font-family: 'Permanent Marker', 'Outfit', sans-serif; font-size: 1.32em; letter-spacing: 0; color: #FFF6C8;
  -webkit-text-stroke: 1.5px var(--yellow); text-shadow: 0 0 10px rgba(255,212,73,.9), 0 0 26px rgba(255,212,73,.6), 0 0 56px rgba(255,212,73,.35);
  transform: rotate(-2deg) translateX(0.08em); transform-origin: left bottom; margin-top: -0.05em; }
.hero__title .l3 { font-family: 'Permanent Marker', 'Outfit', sans-serif; font-size: 0.78em; letter-spacing: 0; color: var(--cyan);
  text-shadow: 0 0 10px rgba(53,224,220,.95), 0 0 26px rgba(53,224,220,.7), 0 0 60px rgba(53,224,220,.4);
  transform: rotate(-3deg) translateX(0.04em); transform-origin: left bottom; margin-top: 0.02em; }
.hero__title .l4 { font-family: var(--brush); font-size: 1.35em; color: var(--pink);
  text-shadow: 0 0 10px rgba(255,46,147,1), 0 0 28px rgba(255,46,147,.8), 0 0 64px rgba(255,46,147,.5);
  transform: rotate(-6deg) translateX(0.1em); transform-origin: left bottom; margin-top: -0.12em; }
.proof { background: var(--surface); border-radius: var(--r-md); padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.proof .stars { color: var(--yellow); font-size: 15px; letter-spacing: 0.08em; }
.proof p { font-size: 15px; color: var(--paper); }
.proof small { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }
.stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); min-height: 520px; border: 3px solid var(--yellow); box-shadow: 0 0 0 1px rgba(255,212,73,.35), 0 0 34px rgba(255,212,73,.45), inset 0 0 40px rgba(255,212,73,.18); }
/* the lit dance floor from the reference: coloured tiles fading up into the scene */
.stage .floor { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; opacity: .7; mix-blend-mode: screen;
  background-image: linear-gradient(90deg, #FF2E93 0 12.5%, #35E0DC 0 25%, #FFD449 0 37.5%, #7B3BFF 0 50%, #35E0DC 0 62.5%, #FF2E93 0 75%, #7B3BFF 0 87.5%, #FFD449 0);
  background-size: 100% 50%; background-position: 0 0, 0 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%);
  transform: perspective(600px) rotateX(55deg); transform-origin: bottom center; filter: blur(1px); }
.stage .floor::after { content: ""; position: absolute; inset: 50% 0 0 0; background-image: inherit; background-position: -12.5% 0; }
/* generated art already carries its own colour and floor: show it straight, no duotone, no CSS floor */
.stage.gen img { filter: none; }
.stage.gen::after, .stage.gen .floor { display: none; }
.stage.gen::before { background: linear-gradient(180deg, rgba(14,14,19,0) 60%, rgba(14,14,19,0.55) 100%); }
.style .thumb.gen img { filter: none; }
.style .thumb.gen::after { display: none; }
.stage img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.16) brightness(0.9); position: absolute; inset: 0; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--pink), var(--cyan)); mix-blend-mode: color; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(14,14,19,0) 45%, rgba(14,14,19,0.78) 100%); }
.stage .sign { position: absolute; z-index: 3; top: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(14,14,19,0.72); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 22px 10px; }
.stage .sign .crown { width: 28px; height: 22px; }
.stage .sign b { font-weight: 900; font-size: 16px; letter-spacing: 0.08em; }
.stage .tag { position: absolute; z-index: 3; left: 22px; bottom: 20px; font-family: var(--brush); font-size: 34px; color: var(--pink); text-shadow: var(--glow-pink); }
.picker { background: var(--surface); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.picker h2 { font-size: 20px; margin-bottom: 4px; }
.style { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; background: var(--surface-2); border-radius: 999px; padding: 6px 16px 6px 6px; color: var(--paper); font-weight: 700; font-size: 15px; transition: background .15s ease; }
.style:hover { background: #2A2A38; }
.style .thumb { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; position: relative; background: var(--surface); }
.style .thumb img { width: 100%; height: 100%; object-fit: cover; }   /* Rami 09-13: normal photos, no pink duotone on the picker */
.style .chev { color: var(--cyan); font-weight: 900; }
.picker .note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hero__cta { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.hero__cta .sub { color: var(--muted); font-size: 15px; }

/* reassurance row */
.promises { border-bottom: 1px solid var(--hair); background: var(--surface); padding-block: 30px; }
.promises .shell { display: grid; gap: 26px; }
.promises__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.promises__line { margin: 0; font-size: 36px; line-height: 1; color: var(--pink); text-shadow: 0 0 10px rgba(255,46,147,.9), 0 0 28px rgba(255,46,147,.5); transform: rotate(-2deg); transform-origin: left center; }
.promises__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.promise { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.promise .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); flex: none; }
.promise:nth-child(2) .dot { background: var(--pink); }
.promise:nth-child(3) .dot { background: var(--yellow); }

/* sections: a heading block (heading, then its lede tight underneath), then the body; rhythm comes from the space above headings being larger than below */
.sec { padding-block: 112px 96px; }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec--band { padding-block: 72px; }
.sec__head { display: grid; gap: 14px; margin-bottom: 48px; max-width: 880px; }
.sec h2.h { font-size: clamp(34px, 3.6vw, 66px); max-width: 18ch; }
.sec .lede { color: var(--muted); max-width: 52ch; font-size: 19px; }

/* services */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--surface); border-radius: var(--r-lg); padding: 34px 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.card:nth-child(1) h3 { color: var(--cyan); }
.card:nth-child(2) h3 { color: var(--pink); }
.card:nth-child(3) h3 { color: var(--yellow); }
.card p { color: var(--muted); font-size: 16px; }

/* board */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 96px; max-width: 1240px; }
.board div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-weight: 600; }
.board div span:last-child { font-weight: 900; color: var(--cyan); }
.notice { margin-top: 22px; display: inline-flex; gap: 10px; align-items: center; background: var(--surface); border-radius: 999px; padding: 10px 18px; font-size: 14px; color: var(--muted); }

/* gallery */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.duo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.16) brightness(0.92); }
.duo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--pink), var(--cyan)); mix-blend-mode: color; }
.duo figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.duo.tall { grid-row: span 2; aspect-ratio: auto; }

/* award */
.award { background: var(--surface); border-radius: var(--r-lg); padding: 56px 64px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.award h2 { font-size: clamp(28px, 3.4vw, 44px); }
.award p { color: var(--muted); margin-top: 10px; max-width: 52ch; }
.years { display: flex; gap: 10px; flex-wrap: wrap; }
.years span { border-radius: 999px; padding: 10px 18px; font-weight: 900; background: var(--yellow); color: var(--ink); }
.years span:last-child { background: var(--surface-2); color: var(--paper); font-weight: 700; }

/* shops */
.shops { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.shop { background: var(--surface); border-radius: var(--r-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; }
.shop h3 { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }
.shop p { color: var(--muted); font-size: 15px; flex: 1; }
.shop a { font-weight: 700; color: var(--cyan); }
.hours { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 26px; color: var(--muted); font-size: 15px; }
.hours b { color: var(--paper); }

/* school */
.school { border-radius: var(--r-lg); padding: 56px 64px; background: linear-gradient(120deg, #23143A, var(--surface) 70%); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.school h2 { font-size: clamp(28px, 3.4vw, 44px); }
.school p { color: var(--muted); margin-top: 10px; max-width: 52ch; }

/* footer */
footer { border-top: 1px solid var(--hair); padding: 40px 0 44px; color: var(--muted); font-size: 14px; }
footer .shell { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; }
footer img { width: 56px; height: 56px; border-radius: 50%; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* neon flicker on every line, like tubes warming up: mostly steady, short dips, each line on its own clock so they never blink together.
   Only opacity animates, so each line keeps its own colour of glow. */
@keyframes neon-flicker {
  0%, 18%, 20%, 22.5%, 47%, 49%, 71%, 72.5%, 100% { opacity: 1; }
  19%, 48% { opacity: .35; }
  21% { opacity: .8; }
  72% { opacity: .6; }
}
/* one clock for the whole sign: the animation sits on the h1, so all four lines dip and recover together */
.hero__title { animation: neon-flicker 8s linear infinite; }
.js .hero__title { animation: none; }
.js .hero__title.is-lit { animation: neon-flicker 8s linear infinite; }
@keyframes tile-shift { from { background-position: 0 0, 0 100%; } to { background-position: 25% 0, 25% 100%; } }
.stage .floor { animation: tile-shift 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .hero__title, .js .hero__title.is-lit, .js .hero__title.is-on span, .hero__pulse, .stage .floor { animation: none; } .rv { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1440px) {
  /* laptops: narrower lanes so the chair keeps its room */
  .hero--full .hero__grid { grid-template-columns: 380px minmax(0, 1fr) 300px; }
  .hero--full .hero__title { font-size: clamp(44px, 3.85vw, 74px); }
}
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
  .hero__copy { grid-column: 1 / -1; }
  .cards, .shops { grid-template-columns: repeat(2, 1fr); }
  .promises__row { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .duo.tall { grid-row: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  :root { --logo: 1.15; }   /* phones: the 1.45 lockup wrapped RAMIS CUT onto two lines at 375 */
  .lockup b { white-space: nowrap; }
  .top .shell { grid-template-columns: 1fr auto; gap: 12px; min-height: 0; padding-block: 12px; row-gap: 10px; }
  .top .lockup { grid-column: 1; grid-row: 1; justify-self: start; }
  .top .btn { grid-column: 2; grid-row: 1; margin-left: auto; }
  .top .nav { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 16px; font-size: 14px; overflow-x: auto; }
  .hero { padding-top: 28px; }
  .hero--full { min-height: 0; padding: 120px 0 40px; }
  .hero__shade { background: linear-gradient(180deg, rgba(14,14,19,.82) 0%, rgba(14,14,19,.55) 45%, rgba(14,14,19,.9) 100%); }
  .hero__grid, .hero--full .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .hero--full .hero__copy, .hero--full .picker { grid-column: auto; }   /* 09-13: grid-column 3 on the picker was forcing implicit columns on phones, pushing it off the right edge */
  .hero--full .hero__title { font-size: clamp(52px, 15vw, 72px); }
  .sec { padding-block: 72px 64px; }
  .sec__head { margin-bottom: 30px; }
  .hero__title { font-size: clamp(52px, 15vw, 72px); }
  .stage { min-height: 380px; }
  .cards, .shops, .board { grid-template-columns: 1fr; }
  .promises__row { grid-template-columns: 1fr; gap: 12px; }
  .promises__line { font-size: 28px; }
  .award, .school, footer .shell { grid-template-columns: 1fr; }
  .sec { padding-block: 60px; }
}

/* ============================================================================
   Production pass (09-11): fixed header, sign power-on, hero loop, floor pulse,
   scroll reveals, open-now badge, shops map, style panel, mobile book bar, hover craft, footer.
   ============================================================================ */
.sec, .promises { scroll-margin-top: 90px; }

/* hero: video loop fades in over the still once it can play; faint pulse across the lit floor */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; opacity: 0; transition: opacity 1.4s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__pulse { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(255,46,147,.22), transparent 70%),
    radial-gradient(40% 60% at 18% 100%, rgba(53,224,220,.16), transparent 70%),
    radial-gradient(40% 60% at 82% 100%, rgba(255,212,73,.14), transparent 70%);
  animation: none; display: none; }   /* Rami 09-13: no disco, the floor pulse is retired */
@keyframes floor-pulse { from { opacity: .4; } to { opacity: 1; } }

/* sign power-on: each tube stutters alive in turn (JS adds .is-on after fonts load), then .is-lit hands over to the synced flicker */
.js .hero__title span { opacity: 0; }
.js .hero__title.is-on span { opacity: 1; animation: neon-on 1s steps(1, end) both; }
.js .hero__title.is-on .l1 { animation-delay: 0s; }
.js .hero__title.is-on .l2 { animation-delay: .45s; }
.js .hero__title.is-on .l3 { animation-delay: .95s; }
.js .hero__title.is-on .l4 { animation-delay: 1.4s; }
@keyframes neon-on { 0% { opacity: 0; } 8% { opacity: .9; } 14% { opacity: .12; } 22% { opacity: .8; } 30% { opacity: .25; } 40% { opacity: 1; } 55% { opacity: .5; } 62% { opacity: 1; } 100% { opacity: 1; } }

/* scroll reveals (JS adds .rv to opted-in elements, .is-in when they enter; --i staggers siblings) */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.is-in { opacity: 1; transform: none; }

/* open-now badge */
.open { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-height: 18px; }
.open::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.open.is-open { color: var(--cyan); }
.open.is-open::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.open.is-closed { color: var(--yellow); }
.open.is-closed::before { background: var(--yellow); }

/* shops: dark map on the left, the five shops as a click-to-fly list on the right */
.shops-wrap { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; align-items: stretch; }
#map { min-height: 560px; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--hair); }
.shops { display: flex; flex-direction: column; gap: 12px; }
.shop { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; min-height: 0; padding: 20px 24px; cursor: pointer; border: 1px solid transparent; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.shop p { flex: none; margin-top: 2px; }
.shop__links { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; }
.shop__links a:last-child { color: var(--muted); font-weight: 600; }
.shop__links a:hover { color: var(--paper); }
.shop:hover, .shop.is-active { border-color: rgba(255, 46, 147, .45); transform: translateX(3px); }
.shop.is-active { box-shadow: 0 0 0 1px rgba(255, 46, 147, .25), var(--glow-pink); }
.pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--pink), 0 0 18px var(--pink); }
.leaflet-container { font-family: var(--sans); background: var(--surface); }
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.05) saturate(.35); }   /* dark map from the standard OSM tiles */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--paper); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { font-size: 14px; line-height: 1.5; margin: 14px 18px; }
.leaflet-popup-content a { color: var(--cyan); font-weight: 700; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-bar a { background: var(--surface-2); color: var(--paper); border-bottom-color: var(--hair); }
.leaflet-bar a:hover { background: #2A2A38; color: var(--paper); }
.leaflet-control-attribution { background: rgba(14,14,19,.75); color: var(--muted); font-size: 10px; }
.leaflet-control-attribution a { color: var(--muted); }

/* style panel */
.pick { position: relative; border: 0; padding: 0; margin: auto; background: transparent; max-width: min(960px, calc(100vw - 32px)); width: 100%; color: var(--paper); }
.pick::backdrop { background: rgba(14, 14, 19, .82); backdrop-filter: blur(6px); }
.pick__card { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hair); }
.pick__img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.pick__body { padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 14px; }
.pick__name { font-size: 44px; }
.pick__meta { color: var(--cyan); font-weight: 700; font-size: 16px; }
.pick__blurb { color: var(--muted); font-size: 17px; }
.pick__actions { margin-top: auto; padding-top: 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pick__note { font-size: 12.5px; color: var(--muted); }
.pick__close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); background: rgba(14, 14, 19, .75); color: var(--paper); font-size: 24px; line-height: 1; cursor: pointer; }
.pick__close:hover { border-color: var(--cyan); }

/* mobile book bar (shows once the hero has scrolled away) */
.bookbar { display: none; }

/* hover craft */
.btn--pink:hover { box-shadow: 0 0 36px rgba(255, 46, 147, .62), 0 0 0 2px rgba(255, 46, 147, .35); }
.btn--cyan:hover { box-shadow: 0 0 30px rgba(53, 224, 220, .5); transform: translateY(-1px); }
.nav a { position: relative; padding-bottom: 2px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav a:hover::after { transform: scaleX(1); }
.card { border: 1px solid transparent; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(53, 224, 220, .38); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.card:nth-child(2):hover { border-color: rgba(255, 46, 147, .42); }
.card:nth-child(3):hover { border-color: rgba(255, 212, 73, .42); }
.duo img { transition: filter .5s ease, transform .7s ease; }
.duo::after { transition: opacity .5s ease; }
.duo:hover img { filter: none; transform: scale(1.03); }
.duo:hover::after { opacity: 0; }
.style { transition: background .15s ease, transform .15s ease; }
.style:hover { transform: translateX(3px); }

/* footer */
footer { padding: 60px 0 36px; }
footer .shell { display: block; }
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.foot h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin: 0 0 14px; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a:hover { color: var(--paper); }
.foot__brand { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.foot__brand img { width: 56px; height: 56px; border-radius: 50%; }
.foot__brand b { display: block; font-weight: 900; font-size: 16px; letter-spacing: .04em; color: var(--paper); }
.foot__brand span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.foot__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.foot__bottom a { color: var(--muted); }
.foot__bottom a:hover { color: var(--paper); }

/* 404 */
.oops { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 0 80px; }
.oops .hero__title { align-items: center; margin: 0 auto 28px; font-size: clamp(44px, 4.5vw, 86px); }
.oops p { color: var(--muted); font-size: 18px; max-width: 40ch; margin: 0 auto 28px; }

@media (max-width: 1100px) {
  .shops-wrap { grid-template-columns: 1fr; }
  #map { min-height: 420px; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  #map { min-height: 360px; }
  .shop { grid-template-columns: 1fr; gap: 8px; }
  .shop__links { flex-direction: row; align-items: center; gap: 16px; }
  .pick__card { grid-template-columns: 1fr; }
  .pick__img { aspect-ratio: 4 / 3; }
  .pick__body { padding: 26px 22px 24px; }
  .pick__name { font-size: 34px; }
  .foot { grid-template-columns: 1fr; gap: 28px; }
  .bookbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 14, 19, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--hair); transform: translateY(110%); transition: transform .3s ease; }
  .bookbar.is-show { transform: none; }
  .bookbar .btn { flex: 1; min-height: 48px; padding: 0 16px; font-size: 15px; }
  .has-panel .bookbar { display: none; }
}

/* ============================================================================
   Below the fold (09-11): powder and spray. Every section gets a tone, a spray layer (colour blobs pushed through an
   SVG turbulence + displacement filter so they read as airbrushed mist / thrown powder), a hand-lettered neon heading
   in that tone, and a brush swash under it. Same tube recipe as the hero so the page reads as one sign shop.
   ============================================================================ */
.sec, .promises { position: relative; overflow: hidden; isolation: isolate; }
.sec > .shell, .promises > .shell { position: relative; z-index: 1; }
.sec + .sec { border-top: 0; }

/* spray layer: two or three soft blobs, displaced into smoke, drifting very slowly */
.spray { position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none; opacity: .85; filter: url(#spray); mix-blend-mode: screen;
  background-repeat: no-repeat; animation: spray-drift 38s ease-in-out infinite alternate; will-change: transform; }
.spray::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .9; }
@keyframes spray-drift { from { transform: translate3d(-1.5%, 1%, 0) scale(1); } to { transform: translate3d(1.5%, -1.5%, 0) scale(1.06); } }
[data-tone="cyan"] .spray { background-image:
  radial-gradient(38% 46% at 8% 22%, rgba(53,224,220,.55), transparent 70%),
  radial-gradient(30% 40% at 92% 78%, rgba(255,46,147,.4), transparent 70%),
  radial-gradient(22% 30% at 60% 8%, rgba(255,212,73,.22), transparent 70%); }
[data-tone="yellow"] .spray { background-image:
  radial-gradient(40% 50% at 86% 20%, rgba(255,212,73,.5), transparent 70%),
  radial-gradient(30% 42% at 10% 84%, rgba(53,224,220,.38), transparent 70%),
  radial-gradient(20% 28% at 50% 100%, rgba(255,46,147,.28), transparent 70%); }
[data-tone="pink"] .spray { background-image:
  radial-gradient(40% 50% at 12% 80%, rgba(255,46,147,.55), transparent 70%),
  radial-gradient(28% 40% at 90% 12%, rgba(123,59,255,.45), transparent 70%),
  radial-gradient(22% 30% at 62% 50%, rgba(53,224,220,.22), transparent 70%); }
[data-tone="violet"] .spray { background-image:
  radial-gradient(44% 60% at 50% 50%, rgba(123,59,255,.5), transparent 70%),
  radial-gradient(30% 40% at 6% 30%, rgba(255,46,147,.4), transparent 70%),
  radial-gradient(28% 40% at 94% 70%, rgba(53,224,220,.36), transparent 70%); }
[data-tone="promise"] .spray { opacity: .55; background-image:
  radial-gradient(18% 80% at 12% 50%, rgba(53,224,220,.45), transparent 70%),
  radial-gradient(18% 80% at 38% 50%, rgba(255,46,147,.4), transparent 70%),
  radial-gradient(18% 80% at 63% 50%, rgba(255,212,73,.38), transparent 70%),
  radial-gradient(18% 80% at 88% 50%, rgba(123,59,255,.42), transparent 70%); }

/* hand-lettered neon headings, one tone per section, with a brush swash underneath */
.sec h2.h { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: 0; line-height: 1; text-transform: uppercase; position: relative; display: inline-block; padding-bottom: 14px; transform: rotate(-1.5deg); transform-origin: left bottom; }
.sec h2.h::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: 0; height: 12px; border-radius: 999px; opacity: .9;
  background: currentColor; filter: blur(1px); transform: skewX(-12deg) rotate(-.6deg); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
[data-tone="cyan"] h2.h { color: var(--cyan); text-shadow: 0 0 8px rgba(53,224,220,.9), 0 0 26px rgba(53,224,220,.55), 0 0 60px rgba(53,224,220,.3); }
[data-tone="yellow"] h2.h { color: #FFF3B8; text-shadow: 0 0 8px rgba(255,212,73,.95), 0 0 26px rgba(255,212,73,.6), 0 0 60px rgba(255,212,73,.3); }
[data-tone="yellow"] h2.h::after { background: var(--yellow); }
[data-tone="pink"] h2.h { color: #FFE0F0; text-shadow: 0 0 8px rgba(255,46,147,.95), 0 0 26px rgba(255,46,147,.65), 0 0 60px rgba(255,46,147,.35); }
[data-tone="pink"] h2.h::after { background: var(--pink); }
[data-tone="violet"] h2.h { color: #EADFFF; text-shadow: 0 0 8px rgba(123,59,255,.95), 0 0 26px rgba(123,59,255,.65), 0 0 60px rgba(123,59,255,.35); }
[data-tone="violet"] h2.h::after { background: #7B3BFF; }
.sec .lede { color: var(--paper); opacity: .8; }

/* promises: chalk dots become powder puffs */
.promises { background: var(--ink); border-bottom: 0; padding-block: 34px; }
.promise { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: .04em; font-size: 17px; text-transform: none; }
.promise .dot { width: 14px; height: 14px; box-shadow: 0 0 12px currentColor; }
.promise:nth-child(1) { color: var(--cyan); } .promise:nth-child(2) { color: var(--pink); } .promise:nth-child(3) { color: var(--yellow); } .promise:nth-child(4) { color: #B18CFF; }
.promise:nth-child(4) .dot { background: #7B3BFF; }
.promise .dot { background: currentColor; }

/* services: spray tags instead of grey cards */
.card { background: rgba(23,23,31,.72); backdrop-filter: blur(6px); border: 1px solid var(--hair); position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; bottom: -70px; left: auto; top: auto; border-radius: 50%; filter: blur(28px); opacity: .55; background: var(--tag, var(--cyan)); pointer-events: none; transition: opacity .3s ease, transform .4s ease; }
.card:hover::before { opacity: .85; transform: scale(1.25); }
.card h3 { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: 0; text-transform: uppercase; font-size: 30px; position: relative; text-shadow: 0 0 10px currentColor; }
.card p { position: relative; color: var(--paper); opacity: .78; }
.card:nth-child(1) { --tag: var(--cyan); } .card:nth-child(2) { --tag: var(--pink); } .card:nth-child(3) { --tag: var(--yellow); } .card:nth-child(4) { --tag: #7B3BFF; }
.card:nth-child(4) h3 { color: #C9B3FF; }

/* the board: a neon menu board with a yellow tube frame and marker prices */
.board { position: relative; max-width: 1180px; padding: 40px 48px 32px; border-radius: var(--r-lg); background: rgba(14,14,19,.72); backdrop-filter: blur(6px);
  border: 3px solid var(--yellow); box-shadow: 0 0 0 1px rgba(255,212,73,.35), 0 0 34px rgba(255,212,73,.45), inset 0 0 40px rgba(255,212,73,.14); gap: 6px 64px; }
.board div { border-bottom: 1px dashed rgba(244,241,246,.22); padding: 16px 0; font-size: 18px; }
.board div span:last-child { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 26px; color: var(--cyan); text-shadow: 0 0 8px rgba(53,224,220,.85), 0 0 22px rgba(53,224,220,.45); }
.notice { background: rgba(23,23,31,.8); border: 1px solid var(--hair); color: var(--paper); }

/* gallery: brush captions, corner powder on hover */
.duo figcaption { font-family: var(--brush); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--pink); text-shadow: 0 0 10px rgba(255,46,147,.8); }
.duo { border: 1px solid var(--hair); }
.duo::before { content: ""; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px; border-radius: 50%; background: var(--cyan); filter: blur(40px); opacity: 0; z-index: 1; transition: opacity .5s ease; pointer-events: none; mix-blend-mode: screen; }
.duo:hover::before { opacity: .45; }

/* bands: the award and the school sit on powder, not a grey box */
.award, .school { background: rgba(23,23,31,.55); backdrop-filter: blur(8px); border: 1px solid var(--hair); }
.award h2, .school h2 { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
.award h2 { color: #FFF3B8; text-shadow: 0 0 8px rgba(255,212,73,.95), 0 0 26px rgba(255,212,73,.55); }
.school h2 { color: #EADFFF; text-shadow: 0 0 8px rgba(123,59,255,.95), 0 0 26px rgba(123,59,255,.55); }
.award p, .school p { color: var(--paper); opacity: .8; }
.years span { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 20px; box-shadow: 0 0 18px rgba(255,212,73,.45); }
.years span:last-child { background: transparent; border: 2px solid var(--cyan); color: var(--cyan); box-shadow: 0 0 18px rgba(53,224,220,.4); }

/* shops: cards on glass, map already dark */
.shop { background: rgba(23,23,31,.72); backdrop-filter: blur(6px); border: 1px solid var(--hair); }
.shop h3 { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: 0; font-size: 22px; color: var(--paper); }
.shop:hover h3, .shop.is-active h3 { color: var(--pink); text-shadow: 0 0 10px rgba(255,46,147,.8); }
.shops-head .open, .sec__head .open { margin-top: 4px; }

/* footer stays quiet: the page ends on ink */
footer { position: relative; z-index: 1; background: var(--ink); }

@media (prefers-reduced-motion: reduce) { .spray { animation: none; } }
@media (max-width: 720px) {
  .spray { inset: -6% -4%; opacity: .7; }
  .sec h2.h { transform: none; }
  .board { padding: 24px 20px 18px; }
}

/* re-homed from the hero: the proof card lives in the award band now */
.award .proof { max-width: 460px; background: rgba(14,14,19,.6); border: 1px solid var(--hair); padding: 20px 22px; }
.award .proof p { font-size: 16px; }
.award .proof .years { margin-top: 14px; }
.award .proof .years span { font-size: 16px; padding: 8px 14px; }
@media (max-width: 720px) { .award .proof { max-width: none; } }

/* thrown powder: generated bursts on pure black, screen-blended so only the powder shows, drifting slowly.
   The spray mist stays underneath at lower strength so the two read as one cloud. */
.sec .spray, .promises .spray { opacity: .55; }
.powder { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; width: min(60%, 1150px); height: auto; opacity: .92; will-change: transform;
  animation: powder-drift 34s ease-in-out infinite alternate; }
.powder--a { left: -14%; bottom: -30%; top: auto; --flip: -1; }   /* bottom-left, never under the heading */
.powder--b { right: -16%; bottom: -26%; animation-delay: -17s; }
.powder--c { right: -10%; top: -30%; --flip: -1; animation-delay: -9s; width: min(50%, 900px); }
.powder--small { width: min(34%, 620px); top: auto; bottom: -20%; left: -10%; }
@keyframes powder-drift { from { transform: translate3d(0, 0, 0) rotate(0deg) scaleX(var(--flip, 1)); } to { transform: translate3d(2.5%, -2%, 0) rotate(2.5deg) scaleX(var(--flip, 1)); } }
@media (prefers-reduced-motion: reduce) { .powder { animation: none; } }
@media (max-width: 720px) { .powder { width: 90%; opacity: .8; } .powder--c, .powder--small { display: none; } }

/* legibility on powder: a dark cloud sits behind every section heading block and every card title, above the bursts */
.sec__head { position: relative; }
.sec__head::before { content: ""; position: absolute; inset: -48px -80px -32px -60px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14,14,19,.92), rgba(14,14,19,.6) 60%, transparent); filter: blur(22px); pointer-events: none; }
.sec h2.h, .award h2, .school h2 { text-shadow: 0 0 8px currentColor, 0 0 26px currentColor, 0 2px 4px rgba(14,14,19,1), 0 0 22px rgba(14,14,19,1), 0 0 46px rgba(14,14,19,.95); }
[data-tone="cyan"] h2.h { text-shadow: 0 0 8px rgba(53,224,220,.9), 0 0 26px rgba(53,224,220,.55), 0 2px 4px rgba(14,14,19,1), 0 0 22px rgba(14,14,19,1), 0 0 46px rgba(14,14,19,.95); }
[data-tone="yellow"] h2.h { text-shadow: 0 0 8px rgba(255,212,73,.95), 0 0 26px rgba(255,212,73,.6), 0 2px 4px rgba(14,14,19,1), 0 0 22px rgba(14,14,19,1), 0 0 46px rgba(14,14,19,.95); }
[data-tone="pink"] h2.h { text-shadow: 0 0 8px rgba(255,46,147,.95), 0 0 26px rgba(255,46,147,.65), 0 2px 4px rgba(14,14,19,1), 0 0 22px rgba(14,14,19,1), 0 0 46px rgba(14,14,19,.95); }
[data-tone="violet"] h2.h { text-shadow: 0 0 8px rgba(123,59,255,.95), 0 0 26px rgba(123,59,255,.65), 0 2px 4px rgba(14,14,19,1), 0 0 22px rgba(14,14,19,1), 0 0 46px rgba(14,14,19,.95); }
.card h3 { text-shadow: 0 0 10px currentColor, 0 1px 3px rgba(14,14,19,1), 0 0 18px rgba(14,14,19,1); }
.card::before { opacity: .38; }
.card:hover::before { opacity: .6; }
.sec .lede { text-shadow: 0 1px 2px rgba(14,14,19,.9), 0 0 14px rgba(14,14,19,.9); }

/* flow between sections: bursts and mist are allowed to spill past their section box into the neighbours,
   so nothing cuts off on a section edge. Only the page's horizontal edges clip. */
html, body { overflow-x: clip; }
.sec, .promises { overflow: visible; }
.hero--full { overflow: hidden; }
.sec > .shell, .promises > .shell { z-index: 2; }
.powder { z-index: 1; }
.sec--band .powder { z-index: 0; }

/* one stacking order for the whole page: every burst (z 1) sits under every section's content (z 2), whichever section it spilled from */
.sec, .promises { isolation: auto; }
.sec > .shell, .promises > .shell { position: relative; z-index: 2; }
.spray { z-index: 0; }
.powder, .sec--band .powder { z-index: 1; }
/* shops: the cyan burst is wide enough to come out past the map's right edge, between the map and the shop list */
#shops .powder--a { width: min(82%, 1560px); left: -12%; bottom: -44%; }

/* powder polish: keep bursts from stacking into mud, and let each one drift on its own clock */
#gallery .powder--c { top: -4%; right: -14%; }            /* violet sits beside the gallery heading instead of climbing into the board's yellow */
#services .powder--b { bottom: -34%; right: -18%; }       /* pink low behind the last cards, clear of the heading */
#school .powder--small { opacity: .7; }
.powder--a { animation-duration: 36s; }
.powder--b { animation-duration: 44s; animation-delay: -19s; }
.powder--c { animation-duration: 52s; animation-delay: -31s; }
@keyframes powder-drift { from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1) scaleX(var(--flip, 1)); } to { transform: translate3d(2.5%, -2%, 0) rotate(2.5deg) scale(1.04) scaleX(var(--flip, 1)); } }

/* award proof card: one column. Stars as a row on top, quote, caption, then the year pills */
.award .proof { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.award .proof .stars { font-size: 15px; letter-spacing: .12em; line-height: 1; text-shadow: 0 0 10px rgba(255,212,73,.7); }
.award .proof p { font-size: 17px; line-height: 1.45; color: var(--paper); }
.award .proof small { margin-top: 0; font-size: 13px; }
.award .proof .years { margin-top: 10px; }

/* map: violet ink instead of the green-brown inversion. Same OSM tiles, tinted to the palette, vignetted at the edges */
.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.5) contrast(1.22) sepia(1) hue-rotate(225deg) saturate(1.8); }
#map { position: relative; border-color: rgba(123,59,255,.35); box-shadow: 0 0 0 1px rgba(123,59,255,.15), 0 0 40px rgba(123,59,255,.18); }
#map::after { content: ""; position: absolute; inset: 0; z-index: 450; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 140px rgba(14,14,19,.9); background: radial-gradient(80% 80% at 50% 50%, transparent 55%, rgba(14,14,19,.55)); }
.leaflet-container { background: #14101F; }
.leaflet-bar a { background: #1E1830; border-bottom-color: rgba(123,59,255,.3); }
.leaflet-bar a:hover { background: #2A2145; }
.leaflet-control-attribution { background: rgba(20,16,31,.8); }

/* map v2: vector map in the kit's colours (MapLibre). Paper ground inside the neon card, pink pins, ink popups. */
.leaflet-tile-pane { filter: none; }
#map { background: #F6F2F9; border-color: rgba(255,46,147,.45); box-shadow: 0 0 0 1px rgba(255,46,147,.25), 0 0 40px rgba(255,46,147,.25); }
#map::after { box-shadow: inset 0 0 90px rgba(14,14,19,.35); background: none; }
#map canvas { border-radius: inherit; }
.maplibregl-map { font-family: var(--sans); }
.maplibregl-ctrl-group { background: rgba(14,14,19,.85); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-group button + button { border-top-color: var(--hair); }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib { background: rgba(246,242,249,.85); color: #4A4658; font-size: 10px; border-radius: 8px 0 0 0; }
.maplibregl-ctrl-attrib a { color: #4A4658; }
.maplibregl-popup-content { background: var(--surface-2); color: var(--paper); border-radius: 14px; padding: 14px 18px; font-size: 14px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.maplibregl-popup-content a { color: var(--cyan); font-weight: 700; }
.maplibregl-popup-close-button { color: var(--muted); font-size: 18px; right: 4px; top: 2px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface-2); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface-2); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-2); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-2); }
.maplibregl-marker.pin { cursor: pointer; }
.pin span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink), 0 0 18px var(--pink); border-color: var(--pink-fill); }
/* comparison variant (?map=duo): the same map pushed into the gallery's pink-to-cyan duotone */
#map.map--duo canvas { filter: grayscale(1) contrast(1.1); }
#map.map--duo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(140deg, var(--pink), var(--cyan)); mix-blend-mode: color; border-radius: inherit; }
#map.map--failed::after { content: "Map could not load. Addresses and directions are on the right."; display: grid; place-items: center; color: var(--muted); font-size: 14px; background: var(--surface); }

/* pins in cyan now that the roads carry the pink */
.pin span { background: var(--cyan); border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cyan), 0 0 18px rgba(53,224,220,.9); }

/* review polish 09-11: heading order in the footer, minimum text sizes, panel title in the sign face */
.foot h2.foot__h { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin: 0 0 14px; font-weight: 700; }
.lockup span { font-size: 11px; }
.hero--full .picker .note { font-size: 12.5px; }
.pick__name { font-family: 'Permanent Marker', var(--sans); font-weight: 400; letter-spacing: 0; color: var(--cyan); text-shadow: 0 0 8px rgba(53,224,220,.9), 0 0 26px rgba(53,224,220,.5); }

/* 09-11 evening asks: clean gallery captions, a Book Now anchored at the bottom centre of the hero */
.duo figcaption { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 3px rgba(14,14,19,.9), 0 0 12px rgba(14,14,19,.8); }
.hero__book { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); z-index: 2; }
.hero__book .btn { min-height: 52px; padding: 0 30px; font-size: 16px; }
@media (max-width: 720px) { .hero__book { display: none; } }

/* first-visit curtain: ink, the crown warming up in the middle, lifted by JS once the hero still has decoded */
.curtain { display: none; position: fixed; inset: 0; z-index: 100; background: var(--ink); place-items: center; pointer-events: none; }
.curtain-on .curtain { display: grid; }
.curtain-on.curtain-done .curtain { animation: curtain-lift .55s ease forwards; }
.curtain__crown { width: 108px; height: 84px; opacity: 0; animation: neon-on 1s steps(1, end) both, curtain-breathe 2.4s ease-in-out 1s infinite; filter: drop-shadow(0 0 6px rgba(255,212,73,.9)) drop-shadow(0 0 22px rgba(255,212,73,.5)); }
@keyframes curtain-lift { to { opacity: 0; visibility: hidden; } }
@keyframes curtain-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* while the curtain is up the sign stays dark; the power-on starts when JS lifts the curtain */
.curtain-on:not(.curtain-done) .hero__title span { opacity: 0; }

/* curtain lockup: crown, then the wordmark flickers on beneath it */
.curtain__lockup { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.curtain__name { font-weight: 900; font-size: 34px; letter-spacing: .08em; line-height: 1; color: var(--white); opacity: 0;
  text-shadow: 0 0 6px rgba(255,255,255,.7), 0 0 18px rgba(255,212,73,.55), 0 0 36px rgba(255,212,73,.3);
  animation: neon-on 1s steps(1, end) .45s both; }
.curtain__sub { font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--muted); opacity: 0; animation: neon-on .8s steps(1, end) .9s both; margin-top: -4px; }
@media (max-width: 720px) { .curtain__name { font-size: 26px; } }

/* ---------- secondary pages (FAQ, one page per shop): same shell, header solid from the start, a short neon title band instead of the full-bleed hero ---------- */
.page { padding: 150px 0 40px; }
.page .shell { display: grid; gap: 22px; }
.page .crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.page .crumbs a:hover { color: var(--paper); }
.page .hero__title { font-size: clamp(36px, 5vw, 96px); margin: 0; }  /* 36px floor so "PORT COQUITLAM" fits a 375 shell */
.page .lede { color: var(--muted); font-size: 20px; max-width: 60ch; }
.page .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* FAQ: visible answers, no accordion, so people and answer engines both get the text */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; max-width: 1400px; }
.qa { background: var(--surface); border-radius: var(--r-lg); padding: 30px 32px 28px; display: grid; gap: 10px; align-content: start; }
.qa h3 { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; }
.qa p { color: var(--muted); font-size: 16px; }
.qa p b { color: var(--paper); font-weight: 700; }
.qa a { color: var(--cyan); font-weight: 700; }
.qa a:hover { color: var(--paper); }
[data-tone="cyan"] .qa h3 { color: var(--cyan); }
[data-tone="pink"] .qa h3 { color: #FFB3D6; }
[data-tone="yellow"] .qa h3 { color: #FFF3B8; }
[data-tone="violet"] .qa h3 { color: #D9C6FF; }

/* shop page: facts left, map right */
.shop-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 1.35fr; gap: 24px; align-items: stretch; }
.facts { background: var(--surface); border-radius: var(--r-lg); padding: 36px 36px 32px; display: grid; gap: 22px; align-content: start; }
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; font-size: 18px; font-weight: 600; }
.facts dd a { color: var(--cyan); }
.facts dd a:hover { color: var(--paper); }
.facts dd small { display: block; color: var(--muted); font-size: 14px; font-weight: 500; }
.facts .actions { margin: 0; }
.shop-wrap #map { min-height: 520px; }
.prose { max-width: 72ch; display: grid; gap: 16px; }
.prose p { color: var(--muted); font-size: 18px; }
.prose p b { color: var(--paper); }
.prose a { color: var(--cyan); font-weight: 700; }
.prose a:hover { color: var(--paper); }
.others { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.others a.shop { display: grid; grid-template-columns: 1fr; cursor: pointer; }
.others a.shop span { color: var(--cyan); font-weight: 700; font-size: 14px; }

@media (max-width: 1100px) {
  .shop-wrap { grid-template-columns: 1fr; }
  .shop-wrap #map { min-height: 420px; }
  .others { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .page { padding-top: 120px; }
  .faq { grid-template-columns: 1fr; }
  .facts { padding: 26px 22px; }
  .facts dl { grid-template-columns: 1fr; gap: 4px 0; }
  .facts dt { padding-top: 10px; }
  .others { grid-template-columns: 1fr; }
}

/* 09-13 Chad: board section keeps its left-aligned title, the price board and its notice sit on the centre line */
#board .board { margin-inline: auto; }
#board .notice { display: flex; width: fit-content; margin-inline: auto; }

/* 09-13 Chad: light, normal map. Plain Positron tiles, hairline frame, no glow, no vignette; pins go pink so they read on pale grey. */
#map { background: #F4F1F6; border-color: var(--hair); box-shadow: none; }
#map::after { box-shadow: none; background: none; }
.pin span { background: var(--pink); border-color: #fff; box-shadow: 0 0 0 2px var(--pink), 0 6px 16px rgba(14,14,19,.35); }
.maplibregl-ctrl-group { background: #fff; box-shadow: 0 4px 14px rgba(14,14,19,.18); }
.maplibregl-ctrl-group button + button { border-top-color: rgba(14,14,19,.12); }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { filter: none; }

/* 09-13 Chad: cyan pins on the light map; the hours line under the map goes into pills because it was hard to read */
.pin span { background: var(--cyan); border-color: #fff; box-shadow: 0 0 0 2px var(--cyan), 0 6px 16px rgba(14,14,19,.35); }
.hours { gap: 12px; margin-top: 22px; }
.hours span { display: inline-flex; align-items: center; gap: 8px; background: rgba(23,23,31,.85); border: 1px solid var(--hair); border-radius: 999px; padding: 10px 18px; color: var(--paper); font-size: 15px; font-weight: 600; }
.hours span b { color: var(--cyan); font-weight: 800; }

/* ---------- 09-13 mobile + tablet pass (measured at 375 and 768, appended last so it wins by order) ---------- */
.lockup b { white-space: nowrap; }
@media (max-width: 1100px) {
  :root { --logo: 1.2; }                                        /* 1.45 wrapped RAMIS CUT onto two lines at 768 */
  .hero--full { min-height: 0; padding: 130px 0 48px; }
  .hero--full .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 24px; }   /* the 3-lane grid had a 0px centre at 768 and the picker sat on the chair */
  .hero--full .hero__copy, .hero--full .picker { grid-column: auto; }
  .hero--full .picker { max-width: 420px; }
  .award, .school { grid-template-columns: 1fr; padding: 40px 36px; gap: 22px; }      /* was a 162px text column beside the proof card at 768 */
}
@media (max-width: 720px) {
  .award, .school { padding: 30px 22px; }                       /* 56/64 padding left a 201px inner column at 375 */
  .card { padding: 26px 22px 24px; }
  .card h3 { font-size: 24px; }
  .board div { padding: 12px 0; font-size: 16px; }
  .board div span:last-child { font-size: 22px; }
  .sec h2.h { font-size: 32px; }
  .sec .lede { font-size: 17px; }
  .foot__bottom { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
}
@media (max-width: 720px) {
  .page .hero__title span { white-space: normal; }             /* "PORT COQUITLAM" at 36px nowrap was 435px wide and pushed the whole page shell past 375 */
  .page .hero__title { font-size: 32px; }                       /* COQUITLAM line measured 334px at 34px, shell is 331 */
  .qa { padding: 22px 20px 20px; }
}

/* ---------- 09-13 Chad's phone review: burger nav, hero as photo + strip, brush font preloaded ---------- */
.burger { display: none; }
@media (max-width: 1100px) {
  /* header: logo left, Book Now + burger right; the nav becomes a full-screen drawer */
  .top .shell { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; padding-block: 12px; }
  .top .lockup { justify-self: auto; margin-right: auto; }
  .top .btn { margin-left: 0; min-height: 42px; padding: 0 16px; font-size: 14px; }
  .burger { display: grid; place-items: center; gap: 5px; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(23,23,31,.7); cursor: pointer; padding: 0; z-index: 41; position: relative; }
  .burger { display: block; }                                   /* icon box: three absolutely placed bars so the open state is a true X */
  .burger::before { content: ""; }
  .burger span { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: var(--paper); transition: transform .25s ease, opacity .2s ease, top .25s ease; }
  .burger span:nth-child(1) { top: 14px; }
  .burger span:nth-child(2) { top: 21px; }
  .burger span:nth-child(3) { top: 28px; }
  .nav-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav-open .burger span:nth-child(2) { opacity: 0; }
  .nav-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  .top .nav { position: fixed; inset: 0; width: 100vw; height: 100dvh; box-sizing: border-box; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 100px 28px 40px; background: rgba(14,14,19,.96); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; margin: 0; overflow: auto; }
  .nav-open .top .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .top .nav a { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--paper); padding: 8px 0; border-bottom: 1px solid var(--hair); }
  .top .nav a:nth-child(1) { color: var(--cyan); } .top .nav a:nth-child(2) { color: #FFF3B8; } .top .nav a:nth-child(3) { color: #FFB3D6; }
  .top .nav a::after { display: none; }
  .nav-open .top { background: transparent; border-bottom-color: transparent; }
  /* scroll lock is done in JS (body position:fixed) - toggling overflow:hidden on html/body left the page unscrollable afterwards in Chrome */
  .nav-open body { position: fixed; left: 0; right: 0; width: 100%; }
  .top .nav { overscroll-behavior: contain; }
}
@media (max-width: 1100px) {
  /* hero (phones AND tablets, 09-13): the photo is its own band (headline at its foot, Book Now under it), then the style picker as a strip of four thumbs below the photo */
  :root { --photo-h: calc(100svh - 68px); }
  .hero--full { display: block; padding: 0; min-height: 0; }
  .hero__bg, .hero__shade { height: var(--photo-h); bottom: auto; }
  .hero__shade { background: linear-gradient(180deg, rgba(14,14,19,.55) 0%, rgba(14,14,19,.1) 30%, rgba(14,14,19,.25) 55%, rgba(14,14,19,.94) 100%); }
  .hero--full .hero__grid { display: block; }
  .hero--full .hero__copy { min-height: var(--photo-h); display: flex; flex-direction: column; justify-content: flex-end; padding: 90px 0 92px; gap: 0; }
  .hero--full .hero__title { font-size: clamp(44px, 12.5vw, 56px); }
  .hero__book { display: block; position: absolute; top: calc(var(--photo-h) - 80px); left: var(--gutter); transform: none; bottom: auto; }
  .hero__book .btn { min-height: 50px; padding: 0 26px; }
  .hero--full .picker { position: relative; z-index: 1; max-width: none; margin: 0 calc(var(--gutter) * -1); border-radius: 0; border: 0; border-top: 1px solid var(--hair); background: var(--surface); backdrop-filter: none; padding: 16px var(--gutter) 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
  .hero--full .picker h2, .hero--full .picker .note { grid-column: 1 / -1; }
  .hero--full .picker h2 { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; text-shadow: none; }
  .hero--full .picker .note { font-size: 12px; margin-top: 2px; }
  .hero--full .style { display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; padding: 0; border-radius: 0; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.15; }
  .hero--full .style:hover { transform: none; background: transparent; }
  .hero--full .style .thumb { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--pink); }
  .hero--full .style .chev { display: none; }
}

/* drawer extras: the three shop phones and Instagram, phone and tablet only */
.nav__extra { display: none; }
@media (max-width: 1100px) {
  .nav__extra { display: grid; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hair); }
  .top .nav .nav__extra a { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--muted); border: 0; padding: 0; }
  .top .nav .nav__extra a b { color: var(--paper); font-weight: 700; margin-right: 6px; }
  .top .nav .nav__extra a:hover { color: var(--paper); }
  .nav-open .top .btn { visibility: hidden; }
}

/* 09-13 Chad phone round 2: headline as two centred rows (CUTS FADES / GOOD VIBES Always), Book Now centred under it, all at the foot of the photo below the chair */
@media (max-width: 1100px) {
  .hero__book { display: block; }
  .hero--full .hero__copy { align-items: center; text-align: center; padding: 90px 0 86px; }
  .hero--full .hero__title { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; column-gap: 12px; row-gap: 0; font-size: 30px; }
  .hero--full .hero__title span { white-space: nowrap; }
  .hero--full .hero__title .l1, .hero--full .hero__title .l2 { font-size: 46px; }
  .hero--full .hero__title .l3 { font-size: 27px; }
  .hero--full .hero__title .l4 { font-size: 40px; }              /* marker face: 48px pushed row two to 351px on a 331px shell */
  .hero__book { left: 50%; transform: translateX(-50%); top: calc(var(--photo-h) - 74px); }
}
/* tablets (721 to 1100): same two-row headline, scaled to the width; bigger thumbs in the strip */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero--full .hero__title { column-gap: 18px; }
  .hero--full .hero__title .l1, .hero--full .hero__title .l2 { font-size: 66px; }
  .hero--full .hero__title .l3 { font-size: 38px; }
  .hero--full .hero__title .l4 { font-size: 56px; }
  .hero--full .hero__copy { padding-bottom: 96px; }
  .hero__book { top: calc(var(--photo-h) - 80px); }
  .hero--full .style .thumb { width: 88px; height: 88px; }
  .hero--full .style { font-size: 14px; }
}

/* 09-13 Chad: Caveat Brush stays on desktop; under 1100px (and on any iOS/iPadOS Safari, which refuses that woff2) Always uses Permanent Marker like GOOD VIBES */
@media (max-width: 1100px) {
  .hero__title .l4 { font-family: 'Permanent Marker', var(--sans); }
}
@supports (-webkit-touch-callout: none) {
  .hero__title .l4 { font-family: 'Permanent Marker', var(--sans); font-size: 1.02em; }
  .hero--full .hero__title .l4 { font-size: 40px; }
  @media (min-width: 721px) and (max-width: 1100px) { .hero--full .hero__title .l4 { font-size: 56px; } }
  .page .hero__title .l4 { font-size: 1.02em; }
}

/* 09-13 Chad: Book Now under the price board (all widths) */
.board__cta { display: flex; justify-content: center; margin-top: 28px; }
.board__cta .btn { min-height: 54px; padding: 0 34px; font-size: 17px; }

/* 09-13 Chad: the four promises on phones were a plain list; now a 2x2 of glass tiles with the powder puff on top */
@media (max-width: 720px) {
  /* Chad picked option B (09-13): four glow chips in the neon colours, phone only */
  .promises { padding-block: 22px 24px; }
  .promises__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .promise { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid currentColor; background: rgba(23,23,31,.7); font-size: 16px; line-height: 1.1; letter-spacing: .03em; box-shadow: 0 0 14px -4px currentColor, inset 0 0 14px -8px currentColor; }
  .promise .dot { display: none; }
}

/* 09-13 the "page break": each .spray box clipped its colour blobs at its own top and bottom edges, leaving a straight line at every section boundary (worst on the FAQ and shop pages). Fade the box out at both ends so no edge can ever print. */
.spray { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); }

/* 09-13 Chad: pin bubbles were the stock white MapLibre popup (maplibre-gl.css loads after ours). Dark card, name in the marker face, two real buttons. #map raises specificity above the library. */
#map .maplibregl-popup { max-width: 300px !important; z-index: 5; }
#map .maplibregl-popup-content { background: rgba(14,14,19,.96); color: var(--paper); border: 1px solid rgba(53,224,220,.35); border-radius: 18px; padding: 16px 18px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(53,224,220,.12); font-family: var(--sans); backdrop-filter: blur(8px); }
#map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: rgba(14,14,19,.96); }
#map .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: rgba(14,14,19,.96); }
#map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: rgba(14,14,19,.96); }
#map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: rgba(14,14,19,.96); }
#map .maplibregl-popup-close-button { color: var(--paper); font-size: 20px; width: 30px; height: 30px; right: 4px; top: 4px; border-radius: 50%; background: transparent; }
#map .maplibregl-popup-close-button:hover { background: rgba(244,241,246,.1); }
.pop { display: grid; gap: 4px; padding-right: 22px; min-width: 220px; }
.pop__name { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--cyan); text-shadow: 0 0 10px rgba(53,224,220,.6); }
.pop__addr { font-size: 14px; font-weight: 600; color: var(--paper); }
.pop__hours { font-size: 12px; color: var(--muted); }
.pop__btns { display: flex; gap: 8px; margin-top: 10px; }
.pop__btns .btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
.pop__btns .btn--ghost { border-color: rgba(244,241,246,.3); color: var(--paper); }

/* 09-13 Chad: Call Now sheet (phones). Scrim + bottom card with the three shops. */
.callsheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.callsheet__scrim { position: absolute; inset: 0; background: rgba(14,14,19,.7); backdrop-filter: blur(4px); }
.callsheet__card { position: relative; margin: 0 10px calc(10px + env(safe-area-inset-bottom)); padding: 18px 18px calc(14px); background: rgba(23,23,31,.98); border: 1px solid var(--hair); border-radius: 22px; box-shadow: 0 -10px 40px rgba(0,0,0,.5); display: grid; gap: 8px; animation: sheet-up .22s ease; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.callsheet__title { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 24px; color: var(--cyan); text-shadow: 0 0 10px rgba(53,224,220,.6); margin-bottom: 4px; }
.callsheet__card > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); color: var(--paper); font-weight: 700; font-size: 16px; }
.callsheet__card > a:active { background: #2A2A38; }
.callsheet__card > a em { font-style: normal; color: var(--cyan); font-weight: 800; font-variant-numeric: tabular-nums; }
.callsheet__close { margin-top: 6px; }
@media (min-width: 721px) { .callsheet { display: none; } }
.callsheet[hidden] { display: none; }   /* display:grid above was beating the hidden attribute, so the sheet showed on load and Close did nothing */

/* phones: reveals are quicker and travel less, so a slow phone never shows a blank gap that fills in after the scroll */
@media (max-width: 720px) {
  /* phones: the script never adds .rv, and if a stale script ever does, this keeps everything visible anyway */
  .rv { opacity: 1; transform: none; transition: none; }
}

/* DIAGNOSTIC (09-13): ?fx=off adds html.fx-off and strips the GPU-heavy layers on phones so Chad can A/B scroll performance. Not the default. */
@media (max-width: 1100px) {
  .fx-off .spray, .fx-off .powder { display: none !important; }
  .fx-off .hero--full .picker, .fx-off .award, .fx-off .school, .fx-off .board, .fx-off .top.is-solid, .fx-off .callsheet__scrim, .fx-off .hero--full .proof { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .fx-off .sec h2.h, .fx-off .award h2, .fx-off .school h2, .fx-off .promise, .fx-off .board div span:last-child, .fx-off .hero__title span { text-shadow: 0 0 6px currentColor !important; }
  .fx-off .hero__title { animation: none !important; }
  .fx-off .powder { will-change: auto; }
}

/* ---------- 09-13 PHONE + TABLET PERFORMANCE LAYER (Chad's go after the ?fx=off A/B on an iPhone 11 in Low Power Mode). Same look, cheap paint. Desktop untouched. ---------- */
@media (max-width: 1100px) {
  /* mist: the soft gradient blobs stay, the live SVG turbulence filter (CPU raster at full section size) goes */
  .spray { filter: none; opacity: .7; }
  /* powders: keep the images, drop the forced layer per image */
  .powder { will-change: auto; }
  /* glass blur -> solid dark tint */
  .hero--full .picker, .hero--full .proof, .award, .school, .board, .top.is-solid, .top .nav, .callsheet__scrim, #map .maplibregl-popup-content { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero--full .picker, .award, .school, .board { background: rgba(23,23,31,.94); }
  .top.is-solid { background: rgba(14,14,19,.96); }
  .top .nav { background: rgba(14,14,19,.985); }
  /* glows: one shadow each instead of three to five stacked blurs */
  .sec h2.h, .award h2, .school h2, .promise, .board div span:last-child, .pop__name, .callsheet__title, .promises__line, .duo figcaption { text-shadow: 0 0 10px currentColor; }
  /* hero words keep their own neon colours (CUTS white with a pink glow, FADES cream with a yellow glow), two shadows instead of three */
  .hero__title .l1 { text-shadow: 0 0 10px rgba(255,46,147,.9), 0 0 26px rgba(255,46,147,.7); }
  .hero__title .l2 { text-shadow: 0 0 10px rgba(255,212,73,.9), 0 0 26px rgba(255,212,73,.6); }
  .hero__title .l3 { text-shadow: 0 0 10px rgba(53,224,220,.95), 0 0 26px rgba(53,224,220,.7); }
  .hero__title .l4 { text-shadow: 0 0 10px rgba(255,46,147,1), 0 0 28px rgba(255,46,147,.8); }
  .crown { filter: drop-shadow(0 0 6px rgba(255,212,73,.55)); }
  /* hero flicker: one pass after the power-on, then it holds steady */
  .js .hero__title.is-lit { animation: none; }   /* no flicker on phones (Chad) */
  .btn--pink { box-shadow: 0 0 16px rgba(255,46,147,.35); }
}

/* 09-13 Booksy: hidden widget slots + the shop chooser (bottom sheet on phones, centred card on desktop) */
.booksheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.booksheet[hidden] { display: none; }
.booksheet__scrim { position: absolute; inset: 0; background: rgba(14,14,19,.72); }
.booksheet__card { position: relative; margin: 0 10px calc(10px + env(safe-area-inset-bottom)); padding: 18px 18px 14px; background: rgba(23,23,31,.98); border: 1px solid var(--hair); border-radius: 22px; box-shadow: 0 -10px 40px rgba(0,0,0,.5); display: grid; gap: 8px; animation: sheet-up .22s ease; }
.booksheet__title { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 26px; color: var(--pink); text-shadow: 0 0 10px rgba(255,46,147,.6); }
.booksheet__note { font-size: 14px; color: var(--muted); margin: -4px 0 6px; }
.booksheet__card > a, .booksheet__card > button[data-book-shop] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--paper); font-family: var(--sans); font-weight: 700; font-size: 16px; cursor: pointer; text-align: left; width: 100%; }
.booksheet__card > button[data-book-shop] em { font-style: normal; color: var(--ink); background: var(--pink); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 14px; }
.booksheet__card > a em { font-style: normal; color: var(--cyan); font-weight: 800; font-variant-numeric: tabular-nums; }
.booksheet__card > a:active, .booksheet__card > button[data-book-shop]:active { background: #2A2A38; }
.booksheet__close { margin-top: 6px; }
@media (min-width: 721px) {
  .booksheet { align-items: center; justify-items: center; }
  .booksheet__card { width: min(440px, calc(100vw - 40px)); margin: 0; animation: none; }
  .booksheet__scrim { backdrop-filter: blur(6px); }
}
/* Booksy booking frame: our fixed modal around Booksy's inline widget (their dialog mode scroll-jumped phones to the page bottom) */
.bookframe { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.bookframe[hidden] { display: none; }
.frame-open body { position: fixed; left: 0; right: 0; width: 100%; }
.bookframe__scrim { position: absolute; inset: 0; background: rgba(14,14,19,.8); }
.bookframe__card { position: relative; width: min(820px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); display: grid; grid-template-rows: auto 1fr auto; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.bookframe__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; background: var(--ink); color: var(--paper); }
.bookframe__title { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 20px; color: var(--cyan); text-shadow: 0 0 10px rgba(53,224,220,.6); }
.bookframe__close { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); background: rgba(23,23,31,.9); cursor: pointer; padding: 0; }
.bookframe__close span { position: absolute; left: 11px; top: 19px; width: 18px; height: 2px; border-radius: 2px; background: var(--paper); }
.bookframe__close span:nth-child(1) { transform: rotate(45deg); }
.bookframe__close span:nth-child(2) { transform: rotate(-45deg); }
.bookframe__body { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.bookframe__slot, .bookframe__slot .booksy-widget-container { height: 100%; }
.bookframe__slot .booksy-widget-container-inline iframe, .bookframe__slot iframe { display: block; width: 100% !important; height: 100% !important; min-height: 100%; border: 0; }
.bookframe__fallback { display: block; padding: 10px 16px; font-size: 13px; text-align: center; background: var(--ink); color: var(--cyan); }
.bookframe__fallback[hidden] { display: none; }
@media (max-width: 720px) {
  .bookframe__card { width: 100vw; height: 100dvh; border-radius: 0; }
  .bookframe__bar { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* 09-13 Chad (live check): the powder bursts run to the edge of their image, so under the screen blend the rectangle printed.
   Fade every powder layer out toward its own edges so no image boundary can ever show. */
.powder { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 34%, rgba(0,0,0,.55) 56%, transparent 74%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 34%, rgba(0,0,0,.55) 56%, transparent 74%); }

/* 09-13: reviews section in the old gallery slot. Real Booksy quotes, one per shop. */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rev { margin: 0; background: rgba(23,23,31,.82); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 28px 28px 24px; display: grid; gap: 14px; align-content: start; }
.rev__stars { color: var(--yellow); font-size: 16px; letter-spacing: .14em; line-height: 1; text-shadow: 0 0 10px rgba(255,212,73,.7); }
.rev blockquote { margin: 0; font-size: 19px; line-height: 1.45; color: var(--paper); }
.rev blockquote::before { content: "\201C"; color: var(--pink); margin-right: 2px; }
.rev blockquote::after { content: "\201D"; color: var(--pink); margin-left: 2px; }
.rev figcaption { font-size: 14px; color: var(--muted); }
.rev figcaption b { color: var(--cyan); margin-right: 8px; }
.reviews__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; font-weight: 700; }
.reviews__links a { color: var(--cyan); }
.reviews__links a::after { content: " \2197"; color: var(--muted); }
.reviews__links a:hover { color: var(--paper); }
@media (max-width: 1100px) { .reviews { grid-template-columns: 1fr; } .rev { padding: 22px 20px; } .rev blockquote { font-size: 17px; } }