/* ═══════════════════════════════════════════════════════════════════════════
   SPARKLE PRO NAIL & SPA · 638 Jamacha Rd, El Cajon · shared design system
   ---------------------------------------------------------------------------
   Sampled off two things this salon already owns: the lightbox sign on the
   Jamacha Rd frontage, and eleven photographs of their own work.

     · NAIL & SPA   — heavy sign-painter capitals in a deep, slightly orange
                      SIGN RED, filling the face of the box.
     · SPARKLE PRO  — small, letterspaced, sitting between two NAVY RULES that
                      run the width of the panel. Those twin rules are the
                      site's structural motif: they edge the header, the
                      section heads and the footer. They are theirs.
     · the face     — white. Not black, not black-and-gold. Every other nail
                      salon template on the internet is black and gold; this
                      salon's own sign is a bright white box in the sun, and
                      the reviews call the room "serene and pristine".
                      So the ground is PORCELAIN.

   The second motif is the ARCH: a shape rounded at the top and squared at the
   bottom — a nail. Photographs, avatars and the hero all take it. It is a form
   nothing else in this repo uses and it is not decoration; it is the product.

   The palette's fourth colour is a soft BLUSH, which is not on the sign. It is
   in every single photograph they have ever posted, which is a better source
   than a sign for the colour a room is remembered as.

   Mr Cut (sites/mrcut) is cream with a barber pole; Fresh Cuts (sites/freshcuts)
   is aged newsprint with a scalloped edge; Align (sites/align) is black and gold.
   The same salesperson shows these in the same week, so they must not read as one
   template four times.

   No build step (house convention): this file is shared by every page and the
   header/footer markup is duplicated per page.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground — porcelain, blush, and the white face of the sign box */
  --paper:    #FBF6F4;
  --paper-2:  #F6E9E6;   /* alternating sections — the blush */
  --card:     #FFFFFF;
  --stucco:   #F0DEDA;   /* the deeper blush: photo mats, skeletons, insets */
  --rule:     #EEDFDB;   /* hairlines */
  --rule-2:   #DCC3BE;
  --ink-box:  #101E3C;   /* the one dark surface: footer + the strip */

  /* --red is the sign red. On this site it is LACQUER: it is the colour of a
     finished nail, so it is used on the things you are meant to touch and on
     the price, and almost nowhere else. */
  --red:      #C8202B;
  --red-d:    #99141D;
  --red-dd:   #6B0C12;
  --red-l:    #E4565F;
  --red-wash: #FBEAEA;

  /* --blue is the navy of the twin rules on the sign */
  --blue:     #12306B;
  --blue-d:   #0A1E48;
  --blue-l:   #4C6AA8;
  --blue-wash:#EAEEF6;

  /* --gold is the sparkle in the glitter sets, and it is used exactly as sparkle
     is used on a nail: sparingly, as an accent on top of a colour, never as the
     colour itself. */
  --gold:     #C9A227;
  --gold-l:   #E8CB72;
  --gold-wash:#F8F0DC;

  /* type */
  --ink:      #1A1417;
  --ink-2:    #4B3F44;
  --mute:     #8A7A80;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* No third family; the label voice is Outfit at 500 with heavy tracking.
     --cond exists because booking.css asks for it by name and is shared across
     every tenant in this repo. */
  --cond:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* THE ARCH — a nail, as a border-radius. One definition, used by every photo
     frame on the site so they cannot drift apart. */
  --arch: 999px 999px 14px 14px;
  --radius: 14px;

  --wrap: 1180px;
  --nav-h: 86px;
  --gut: 28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.68;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

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

/* ── the brand type treatments ─────────────────────────────────────────────
   `.hot` is the sign red, flat. A didone at display size has enough contrast of
   its own; a shadow under it fills in the hairlines and turns it to mud.
   `.sparkle` is the small letterspaced line the sign puts between its rules. */
.hot{color:var(--red)}
.sparkle{
  font-family:var(--sans);font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--blue);font-size:.72em;display:inline-block;
}
.blue{color:var(--blue)}

/* Optical sizing is the point of this face: the hairlines have to stay hairlines
   at 5rem and thicken at 1rem, or the headline shatters and the label goes bald. */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.005em}
h1{font-size:clamp(2.7rem,6.4vw,5rem);font-variation-settings:'opsz' 88}
h2{font-size:clamp(2rem,4.1vw,3.1rem);font-variation-settings:'opsz' 64}
h3{font-size:1.5rem;font-variation-settings:'opsz' 24}
h4{font-variation-settings:'opsz' 18}

.eyebrow{
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--red);
  display:block;margin-bottom:16px;
}
.eyebrow.dim{color:var(--mute)}
.lede{color:var(--ink-2);font-size:1.1rem;max-width:62ch;font-weight:300}
.small{font-size:.92rem;color:var(--mute)}
strong,b{font-weight:500}

/* ── the twin navy rules, with a sparkle between them ──────────────────────
   Straight off the sign. Replaces Mr Cut's barber pole and Fresh Cuts' scallop
   everywhere those appeared. */
.divider{display:flex;align-items:center;gap:16px;margin:26px 0}
.divider::before{content:"";flex:1;height:5px;
  border-top:1px solid var(--blue);border-bottom:1px solid var(--blue)}
/* the four-point sparkle, drawn rather than shipped */
.divider i{
  width:14px;height:14px;flex:none;background:var(--gold);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.divider.left::before{flex:0 0 90px}
.pdiv{max-width:250px;margin:22px auto}

/* ── buttons ───────────────────────────────────────────────────────────────
   Pills. Fully rounded, lacquered, with a soft coloured shadow underneath — a
   painted nail rather than a painted sign. Deliberately as far from Fresh Cuts'
   square lozenge and Mr Cut's hard offset as the same component can get. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:.86rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:17px 34px;border:0;border-radius:999px;cursor:pointer;position:relative;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .2s,color .2s;
  white-space:nowrap;line-height:1.15;
}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(153,20,29,.26)}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px);box-shadow:0 13px 28px rgba(153,20,29,.32)}
.btn-red:active{transform:translateY(0);box-shadow:0 4px 12px rgba(153,20,29,.3)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(10,30,72,.26)}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-ghost{color:var(--blue);background:transparent;box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-sm{padding:12px 22px;font-size:.76rem;letter-spacing:.16em}
.btn:disabled{opacity:.34;cursor:not-allowed;transform:none;box-shadow:none}

/* ── header ────────────────────────────────────────────────────────────────
   The sign box: a white bar closed by the twin navy rules. Opaque, not
   translucent — on a light page a translucent bar lets content read straight
   through it and the header stops looking like a header. */
header{position:sticky;top:0;z-index:200;background:var(--card);
  box-shadow:0 1px 0 rgba(26,20,23,.05)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
  border-top:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);background:var(--card)}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:26px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:auto;height:48px}
.brand .bt{line-height:1}
.brand .bn{font-family:var(--display);font-size:1.5rem;font-variation-settings:'opsz' 28;
  letter-spacing:-.01em;display:block;color:var(--red)}
.brand .bs{font-family:var(--sans);font-size:.56rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--blue);margin-top:6px;display:block}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);position:relative;padding:8px 0;transition:color .2s;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--red)}
/* a lacquer line that grows from the centre — the polish going on */
.navlinks a::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:var(--red);border-radius:2px;transition:width .26s cubic-bezier(.2,.8,.3,1),left .26s cubic-bezier(.2,.8,.3,1)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{width:100%;left:0}
.navlinks .navbook{display:none}
.navtoggle{display:none;background:none;border:0;color:var(--ink);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:1000px){
  .navlinks{
    position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--card);
    flex-direction:column;gap:0;padding:0 0 10px;border-bottom:1.5px solid var(--blue);
    transform:translateY(-120%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .navlinks.open{transform:translateY(0)}
  .navlinks a::after{display:none}
  .navtoggle{display:inline-flex}
  header .btn{display:none}
}

/* ── sections ──────────────────────────────────────────────────────────── */
section{padding:clamp(62px,8.5vw,110px) 0;position:relative}
.sec-head{margin-bottom:50px;max-width:70ch}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;max-width:none;flex-wrap:wrap}
.alt{background:var(--paper-2)}

/* Mr Cut paints stucco here and Align paints marble. The equivalent surface in
   this room is LACQUER: a soft blush bloom and a faint gold sheen, the way a
   finished nail catches the light off the lamp. */
.veined{position:relative;overflow:hidden}
.veined::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background:
    radial-gradient(ellipse 58% 44% at 86% 6%,  rgba(201,162,39,.10),  transparent 64%),
    radial-gradient(ellipse 48% 52% at 4% 94%,  rgba(200,32,43,.055),  transparent 66%);
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{
  min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;
  text-align:left;padding:clamp(40px,5vw,76px) 0;position:relative;overflow:hidden;
  background:linear-gradient(176deg,var(--card) 0%,var(--paper) 42%,var(--paper-2) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 46% at 74% 24%, rgba(201,162,39,.13), transparent 68%),
    radial-gradient(ellipse 40% 34% at 6% 88%,  rgba(200,32,43,.07),  transparent 70%);
}
.hero .wrap{position:relative;z-index:1}
.hero-mark{
  width:clamp(50px,7vw,72px);height:auto;margin:0 0 24px;
  filter:drop-shadow(0 8px 18px rgba(16,30,60,.14));
  animation:markIn 1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes markIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
.hero h1{margin-bottom:6px}
.hero .tagline{
  font-family:var(--sans);font-size:clamp(.8rem,1.3vw,.96rem);font-weight:500;
  letter-spacing:.4em;text-transform:uppercase;color:var(--blue);margin:20px 0 0;
}
.hero .lede{margin:24px 0 0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.scrollcue{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mute);
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.scrollcue::after{content:"";width:1.5px;height:34px;
  background:linear-gradient(180deg,var(--red),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:700px){.scrollcue{display:none}}

/* the service line, as a navy strip closed by the twin rules in gold */
.strip{background:var(--ink-box);color:#E8DFE0;padding:22px 0;overflow:hidden;position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:5px;
  border-top:1px solid rgba(201,162,39,.55);border-bottom:1px solid rgba(201,162,39,.55)}
.strip::before{top:0}.strip::after{bottom:0}
.strip .row{display:flex;justify-content:center;flex-wrap:wrap;padding:4px 0;
  font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.strip .row span{padding:0 22px;position:relative}
.strip .row span+span::before{
  content:"";position:absolute;left:-1px;top:50%;width:11px;height:11px;margin-top:-5px;
  background:var(--gold);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}

/* ── cards ─────────────────────────────────────────────────────────────────
   White, softly rounded, a blush hairline and a shadow that is coloured rather
   than grey. Nothing here has a hard edge: it is a room people go to be
   looked after in. */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:32px 28px;position:relative;
  box-shadow:0 4px 20px rgba(120,60,70,.07);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s;
}
.card:hover{transform:translateY(-4px);border-color:var(--rule-2);
  box-shadow:0 18px 40px rgba(120,60,70,.14)}
.card .num{font-family:var(--display);font-size:1.2rem;color:var(--red);display:block;margin-bottom:12px}

/* ── technician cards ──────────────────────────────────────────────────────
   `.barber` is the shared class name across every tenant in this repo — the
   dashboard, booking.js and team.js all emit it. It means "the person you are
   booking", not "a barber". Renaming it here would fork the engine for a word. */
.barber{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 4px 20px rgba(120,60,70,.07);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s;
}
.barber:hover{transform:translateY(-4px);border-color:var(--rule-2);
  box-shadow:0 18px 40px rgba(120,60,70,.14)}
.barber .photo{
  aspect-ratio:4/3;background:var(--paper-2);
  display:grid;place-items:center;position:relative;overflow:hidden;
  border-bottom:1px solid var(--rule);
  /* ONE definition of the disc, shared by the image and the ring so they cannot
     disagree. Sized off WIDTH — a percentage HEIGHT on a centred grid item has no
     definite basis to resolve against. */
  --disc:min(66%,190px);
}
/* THE ARCH. A portrait here is nail-shaped: rounded over the top, squared at the
   base. It is the one form on this site that could not belong to any other trade. */
.barber .photo img{
  width:var(--disc);height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--arch);position:relative;z-index:1;
}
.barber .photo::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--disc);aspect-ratio:4/5;border-radius:var(--arch);
  pointer-events:none;z-index:2;border:1.5px solid var(--gold);
}
.barber .photo.no-photo{aspect-ratio:4/3;background:var(--red-wash)}
/* The ring above frames a PHOTOGRAPH. With no photo the monogram draws its own
   arch (below) and two nested outlines read as a target, not a placeholder. */
.barber .photo.no-photo::after{display:none}
.barber .photo .mono{
  font-family:var(--display);font-size:clamp(2rem,4.4vw,3rem);color:var(--red);
  position:relative;z-index:1;line-height:1;
}
.barber .photo.no-photo .mono::after{
  content:"";position:absolute;left:50%;top:50%;width:2.5em;height:3.1em;
  transform:translate(-50%,-50%);border:1.5px solid var(--gold);border-radius:var(--arch);
}
.barber .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.barber h3{font-size:1.4rem;margin:0}
.barber .barber-name{font-size:2rem;margin:0}
.barber .role{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue)}
.barber .bio{font-size:.95rem;color:var(--ink-2);flex:1}
.barber .meta{font-family:var(--sans);font-size:.9rem;color:var(--mute);padding-top:13px;
  border-top:1px solid var(--rule)}
.barber .meta b{color:var(--ink);font-weight:500}
.barber .meta .cats{display:block}
.barber .acts{display:flex;gap:12px;align-items:center;margin-top:6px}

/* ── service menu ─────────────────────────────────────────────────────────
   A spa list, so it is set like one: the name in the didone, leader dots, and
   the price in lacquer. */
.menu-cat{margin-bottom:46px}
.menu-cat h3{color:var(--blue);font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.menu-row{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.menu-row .nm{flex:0 1 auto;min-width:0;font-family:var(--display);font-size:1.25rem}
.menu-row .fill{flex:1;border-bottom:1px dotted var(--rule-2);transform:translateY(-6px);min-width:20px}
.menu-row .pr{font-family:var(--display);font-size:1.25rem;color:var(--red);white-space:nowrap;text-align:right}
.menu-row .by{display:block;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.14em;
  color:var(--mute);text-transform:uppercase;margin-top:2px}
.menu-row .desc{flex-basis:100%;font-size:.92rem;color:var(--mute);margin-top:-2px}

/* ── footer ────────────────────────────────────────────────────────────────
   The one dark surface, closed at the top by the twin rules in gold. */
footer{background:var(--ink-box);color:#BEB2B6;padding:68px 0 30px;font-size:.95rem;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  border-top:1px solid rgba(201,162,39,.55);border-bottom:1px solid rgba(201,162,39,.55)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr;gap:42px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
footer h4{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-l);margin-bottom:14px}
footer a:hover{color:#fff}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem;color:#867A7E}

/* ── hours ─────────────────────────────────────────────────────────────── */
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:.97rem}
.hours-row .d{color:var(--mute)}
footer .hours-row{border-bottom-color:rgba(255,255,255,.1)}
footer .hours-row .d{color:#867A7E}
.hours-row.today{color:var(--ink);font-weight:500}
footer .hours-row.today{color:#fff}
.hours-row.today .d{color:var(--red)}
footer .hours-row.today .d{color:var(--gold-l)}

/* ── reveal on scroll ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-mark{animation:none}
  .scrollcue::after{animation:none}
  html{scroll-behavior:auto}
}

/* ── page header (inner pages) ─────────────────────────────────────────── */
.pagehead{padding:clamp(54px,7.5vw,100px) 0 clamp(32px,4vw,54px);text-align:center;
  position:relative;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--paper-2))}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(201,162,39,.12), transparent 70%)}
.pagehead .wrap{position:relative;z-index:1}
.crumb{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.crumb a:hover{color:var(--red)}

/* ── review proof ─────────────────────────────────────────────────────────
   Visible content only, never schema aggregateRating: Google's structured-data
   policy forbids a business marking up an aggregate rating it pulled from a
   third party, and doing it risks a manual action. */
.rating{display:flex;align-items:center;gap:11px;margin-top:24px;
  font-size:.92rem;color:var(--ink-2);flex-wrap:wrap}
.rating .stars{color:var(--gold);letter-spacing:.12em;font-size:1.05rem}
.rating b{color:var(--ink);font-weight:500}

/* ── work photo ───────────────────────────────────────────────────────── */
.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.workgrid{grid-template-columns:1fr;gap:32px}}
.workshot{position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:0 22px 50px rgba(120,60,70,.18)}
.workshot img{width:100%;height:auto;display:block}

/* ═══════════════════════════════════════════════════════════════════════════
   THE WORK
   Eleven photographs of this salon's own sets, off their Google profile. On a
   barbershop site a gallery is decoration; here it IS the product — nobody picks
   a nail salon off a price list. Arched, because that is the shape of the thing
   in every one of the pictures.
   ═══════════════════════════════════════════════════════════════════════════ */
.worksgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;
}
.worksgrid figure{
  margin:0;overflow:hidden;border-radius:var(--arch);position:relative;
  background:var(--paper-2);box-shadow:0 8px 24px rgba(120,60,70,.12);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.worksgrid figure::after{
  content:"";position:absolute;inset:0;border-radius:var(--arch);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.4);
}
.worksgrid figure:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(120,60,70,.2)}
.worksgrid img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* Nine on a wide screen is a wall; six on a phone is a scroll. The last three are
   dropped rather than shrunk — a nail photograph below about 150px is a smudge. */
@media(max-width:640px){
  .worksgrid{grid-template-columns:1fr 1fr;gap:12px}
  .worksgrid figure:nth-child(n+7){display:none}
}

/* ── social proof band ────────────────────────────────────────────────────── */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card)}
.proofrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.proofrow > div{padding:34px 14px;position:relative}
.proofrow > div + div::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--rule)}
.proofrow b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3vw,2.7rem);
  line-height:1;color:var(--red);font-variation-settings:'opsz' 48}
.proofrow span{display:block;margin-top:10px;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
@media(max-width:760px){.proofrow{grid-template-columns:1fr 1fr}
  .proofrow > div:nth-child(3)::before{display:none}}

/* ── the service finder ───────────────────────────────────────────────────── */
.svcfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:44px;justify-content:center}
.fchip{background:var(--card);border:1px solid var(--rule-2);border-radius:999px;color:var(--ink-2);
  padding:11px 22px;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:all .18s}
.fchip:hover{border-color:var(--red);color:var(--red)}
.fchip.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(153,20,29,.24)}

.svccat{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--blue);margin:0 0 20px;display:flex;align-items:center;gap:16px}
.svccat::after{content:"";flex:1;height:5px;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.svcblock{margin-bottom:52px}
.svcblock[hidden]{display:none}

.svcitem{border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);
  padding:26px 26px 24px;margin-bottom:14px;box-shadow:0 3px 14px rgba(120,60,70,.05);
  transition:box-shadow .22s,transform .22s,border-color .22s}
.svcitem:hover{transform:translateY(-2px);border-color:var(--rule-2);
  box-shadow:0 14px 32px rgba(120,60,70,.12)}
.svchead{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.svcitem h3{font-size:1.55rem;margin:0}
.svcfrom{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.svcfrom b{font-family:var(--display);font-size:1.35rem;color:var(--red);letter-spacing:0}
.svcdesc{color:var(--ink-2);font-size:.97rem;margin-top:8px;max-width:64ch}
.svcwho{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);margin:20px 0 11px}

/* one row per technician who does it — their price, their time, a direct link */
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:9px}
.offer{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:999px;
  border:1px solid var(--rule);background:var(--paper);transition:all .18s}
.offer:hover{border-color:var(--red);background:#fff;box-shadow:0 8px 18px rgba(120,60,70,.13)}
.offer .oav{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--paper-2);display:grid;place-items:center;
  font-family:var(--display);font-size:.9rem;color:var(--red);box-shadow:0 0 0 1px var(--gold)}
.offer .oav img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.offer .oinfo{flex:1;min-width:0;line-height:1.25}
.offer .onm{display:block;font-size:.98rem;font-weight:500}
.offer .odur{display:block;font-family:var(--sans);font-size:.74rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.offer .opr{font-family:var(--display);font-size:1.2rem;color:var(--red);flex:none}

/* ── skeletons ────────────────────────────────────────────────────────────
   The shape of the thing arriving, not the words "Loading…". On a slow phone
   this is most of the perceived speed. */
.skel{border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);overflow:hidden}
.skel .sk{background:linear-gradient(90deg,var(--stucco) 25%,#F8F1E5 37%,var(--stucco) 63%);
  background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite}
.skel .sk-photo{aspect-ratio:4/3}
.skel .sk-body{padding:24px}
.skel .sk-line{height:12px;margin-bottom:11px}
.skel .sk-line.w60{width:60%}.skel .sk-line.w40{width:40%}.skel .sk-line.w85{width:85%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.skel .sk{animation:none}.hero h1 .chrome{animation:none}}

/* ── sticky mobile book bar ───────────────────────────────────────────────
   The header CTA is hidden under 1000px (the nav collapses), which leaves phones
   with no persistent way to book. Highest-leverage element on a barbershop site:
   most traffic is a phone and the goal is one tap. Behaviour (start down, rise
   only after the in-page CTA scrolls up and out) is in initStickyBook(). */
.mbook{display:none}
@media(max-width:1000px){
  .mbook{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:var(--red);color:#fff;text-align:center;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    box-shadow:0 -10px 30px rgba(107,12,18,.26);
    border-top:1px solid rgba(201,162,39,.6);
    transform:translateY(115%);
    transition:transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .mbook.is-up{transform:none}
  /* carries the bar's colour past the bottom of the LAYOUT viewport. A fixed
     element at bottom:0 is anchored to the small viewport; when iOS Safari's
     toolbar collapses, the visual viewport grows and the page scrolls through
     the strip that opens underneath. */
  .mbook::after{
    content:"";position:absolute;left:0;right:0;top:100%;
    height:100vh;height:100lvh;background:var(--red);pointer-events:none;
  }
  /* the Arcbay video bubble is fixed to the same corner this bar owns; it reads
     this variable through the shadow boundary, so lifting it is a variable rather
     than a fork of the shared embed */
  :root{--arcbay-bubble-bottom-mobile:88px}
  body{padding-bottom:74px}
  /* the booking page has its own submit button; a duplicate CTA there is noise */
  body[data-page="book"] .mbook{display:none}
  body[data-page="book"]{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.mbook{transition:none}}

.barber .photo img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.barber:hover .photo img{transform:scale(1.04)}

@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HERO PHOTOGRAPH
   Not the storefront. Mr Cut and Fresh Cuts lead with their signs because a sign
   is the only picture either shop has; this salon has ELEVEN photographs of its
   own work, and a set of nails is a far better argument than a lightbox sign in a
   strip-mall parking lot. So the sign goes on /contact, where somebody is looking
   for the door, and the hero is the work. Arched, like everything else here.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,68px);align-items:center;width:100%;
}
.hero-copy{max-width:34rem;text-align:left}
.hero-copy .hero-mark{margin-left:0}
.hero-copy .lede{margin-left:0;text-align:left}
.hero-copy .hero-cta{justify-content:flex-start}
.hero-copy .rating{justify-content:flex-start}
.hero-copy h1{font-size:clamp(3.1rem,5.4vw,5.4rem);letter-spacing:.01em}

/* Text first, photo second — the name and the reason to book get read before
   the picture, and the picture is what you look at while deciding. */
.hero-shot{order:2}
.hero-shot{
  margin:0;position:relative;overflow:hidden;
  border-radius:var(--arch);
  box-shadow:0 26px 60px rgba(120,60,70,.22), inset 0 0 0 1px rgba(201,162,39,.45);
}
.hero-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 46%;
}
/* Client photographs, taken on phones under salon lamps, so the white balance is
   all over the place. A faint warm wash at the top ties whichever one is in the
   hero back to the porcelain around it without touching the colour of the polish,
   which is the one thing in the frame that has to stay true. */
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--arch);
  background:linear-gradient(196deg,rgba(201,162,39,.13),transparent 44%);
}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:28px}
  .hero-shot{order:-1;max-width:none}
  .hero-shot img{aspect-ratio:5/4;object-position:50% 44%}
  .hero-copy{max-width:none}
  .hero-copy .eyebrow{letter-spacing:.24em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PASS
   Ported wholesale from sites/align/styles.css, which was measured at
   390x844 / DPR 3 / touch against a live phone. The findings are about layout,
   not palette — 44px tap targets, a hero that fits one screen, a roster that is
   a comparison rather than a scroll — so they transfer intact, and re-deriving
   them on a different cream site would be re-doing solved work.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* hero: copy first, photo as a band under it. Photo-first spent the whole of
     screen one on branding and pushed the wordmark and the Book button off it. */
  .hero{min-height:0;padding:24px 0 38px}
  .hero-split{grid-template-columns:1fr;gap:24px}
  .hero-shot{order:2;max-width:none;margin-top:4px}
  .hero-shot img{aspect-ratio:5/4;object-position:50% 44%}
  .hero-shot{box-shadow:0 16px 36px rgba(120,60,70,.2), inset 0 0 0 1px rgba(201,162,39,.45)}

  /* the nav bar already shows the pole AND the name 60px above this */
  .hero-copy .hero-mark{display:none}
  .hero-copy h1{font-size:clamp(2.3rem,11vw,3.1rem)}
  .hero-copy .lede{margin-top:14px;font-size:1.02rem}
  .hero-copy .hero-cta{margin-top:18px}
  .hero .scrollcue{display:none}

  /* tap targets: 44px minimum. Padding, not font-size — nothing about the type
     changes. The barber name is the link that matters most on this site and was
     the easiest to mis-tap at 32px. */
  .barber h3 a,
  .navlinks a,
  footer a{display:inline-block;min-height:44px;line-height:44px}
  .crumb a{display:inline-block;min-height:44px;line-height:44px;padding-right:4px}
  .fchip{min-height:44px;padding-top:0;padding-bottom:0}
  .btn-sm{padding:13px 20px}
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;min-height:44px;line-height:44px}

  /* Barber cards stay STACKED here (the 2-up rework is at 560px below). Only the
     bio drops: on a roster where nobody has written one it rendered as an empty
     gap pushing the price and the Book button down. */
  .barber .bio{display:none}

  .sec-head{margin-bottom:26px}
  section{padding:42px 0}
  footer{padding:44px 0 26px}

  .pagehead{padding:28px 0 22px}
  .pagehead h1{font-size:clamp(2.1rem,11vw,3rem)}
  .pagehead .pdiv{margin:14px auto;max-width:180px}
  .pagehead .lede{font-size:1rem}

  /* the service finder was 8.4 screens for sixteen services — dense, correct
     information dressed at desktop scale. Tighten the frame, not the content. */
  .svcfilter{margin-bottom:20px;gap:8px}
  .fchip{padding-left:14px;padding-right:14px}
  .svcblock{margin-bottom:26px}
  .svccat{margin-bottom:12px;gap:10px}
  .svcitem{padding:14px 13px 13px;margin-bottom:9px}
  .svcitem h3{font-size:1.3rem}
  .svchead{gap:5px 12px}
  .svcdesc{font-size:.93rem;margin-top:5px}
  .svcwho{margin:11px 0 7px}
  .offers{gap:7px}
  .offer{padding:8px 11px;gap:10px}
  .offer .oav{width:36px;height:36px}
}

/* ── the team preview as a swipeable rail on a phone ─────────────────────
   Five stacked cards are three full screens. A rail keeps ALL FIVE — nobody gets
   cut for being fifth, which is the whole point — inside one. */
@media (max-width:760px){
  #teamPreview.grid{
    display:grid;grid-auto-flow:column;grid-auto-columns:80vw;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    padding-block:6px 12px;                /* room for the 6px card shadow */
    scrollbar-width:none;
  }
  #teamPreview.grid::-webkit-scrollbar{display:none}
  #teamPreview .barber{scroll-snap-align:center}
  #teamPreview .barber .photo{--disc:min(56%,136px)}
}

/* ── mobile header ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  :root{--nav-h:64px}
  .brand img{height:40px}
  .brand .bn{font-size:1.25rem}
  .brand .bs{font-size:.6rem;margin-top:3px}
  .brand{min-height:44px}

  /* the burger, drawn: three rules from one element plus its two pseudo-elements,
     so the lines cannot drift apart. 19px of glyph inside a 44px target — the
     target belongs to the finger, the glyph to the eye. */
  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;position:relative;
    width:44px;height:44px;padding:0;background:none;border:0;
    color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .navtoggle:hover,.navtoggle[aria-expanded="true"]{color:var(--red)}
  .burger,.burger::before,.burger::after{
    content:"";position:absolute;left:50%;width:20px;height:2.5px;margin-left:-10px;
    border-radius:1px;background:currentColor;
    transition:transform .26s cubic-bezier(.2,.8,.3,1),top .26s cubic-bezier(.2,.8,.3,1),background .2s;
  }
  .burger{top:50%;margin-top:-1.25px}
  .burger::before{left:0;margin-left:0;top:-6.5px}
  .burger::after{left:0;margin-left:0;top:6.5px}
  /* open: the middle line goes, the outer two cross. The button that opened it is
     the button that closes it, and it has to look like it. */
  .navtoggle[aria-expanded="true"] .burger{background:transparent}
  .navtoggle[aria-expanded="true"] .burger::before{top:0;transform:rotate(45deg)}
  .navtoggle[aria-expanded="true"] .burger::after{top:0;transform:rotate(-45deg)}

  /* the panel: a list below the bar, hairline-separated, 48px rows. Deliberately
     not a full-screen overlay — five links behind a modal is something you have
     to get out of. */
  .navlinks{box-shadow:0 22px 34px rgba(0,0,0,.14)}
  .navlinks a{
    display:flex;align-items:center;min-height:48px;line-height:1.2;
    padding:0 24px;width:100%;font-size:1.05rem;letter-spacing:.14em;
    border-top:1px solid var(--rule);color:var(--ink);
  }
  .navlinks a:first-child{border-top:0}
  .navlinks a[aria-current="page"]{color:var(--red)}
  /* the Book row cloned in by initNav() — a control among destinations, so it
     looks like one */
  .navlinks .navbook{
    display:flex;border-top:0;margin:10px 24px 4px;padding:15px;text-align:center;
    justify-content:center;width:auto;min-height:0;line-height:1.2;
    background:var(--red);color:#fff;border-radius:999px;
    box-shadow:0 8px 20px rgba(153,20,29,.26);
    font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:.92rem;
  }
  .navlinks .navbook::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .burger,.burger::before,.burger::after{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ROSTER ON A PHONE — 2-up, composed like /book's step 1
   Five stacked cards measured 2685px, almost all of it frame: a full-width 4:3
   photo band whose actual content is a 208px circle, five times over. /book had
   already solved this — a round avatar centred over the name, two per row, so
   four people are on screen at once and choosing is a comparison instead of a
   scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  /* minmax(0,…) not 1fr: grid items default to min-width:auto, which is what
     pushed this page 79px wider than the phone the first time. */
  #teamGrid.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #teamGrid .barber{position:relative;padding:16px 10px 13px;align-items:center;text-align:center}
  #teamGrid .barber:hover{transform:none;box-shadow:0 4px 20px rgba(120,60,70,.07)}

  /* the photo frame IS the arch now — no band, no bottom rule, no 4:3 void */
  #teamGrid .barber .photo,
  #teamGrid .barber .photo.no-photo{
    width:86px;aspect-ratio:4/5;border-radius:var(--arch);border-bottom:0;
    margin:0 auto 11px;--disc:100%;
    /* the whole card is the link (see the ::after below); this anchor must not
       also take the tap, or the card sometimes navigates and sometimes doesn't */
    pointer-events:none;
  }
  #teamGrid .barber .photo .mono{font-size:1.85rem}
  #teamGrid .barber .body{padding:0;gap:4px;align-items:center;width:100%;flex:1}
  #teamGrid .barber h3{font-size:1.1rem;line-height:1.12}
  /* the 44px target moves from the name to the whole card, so the name goes back
     to being type rather than a 44px band of empty line-height */
  #teamGrid .barber h3 a{min-height:0;line-height:1.12;display:inline}
  #teamGrid .barber .role{font-size:.78rem;letter-spacing:.12em}
  #teamGrid .barber .meta{width:100%;font-size:.95rem;padding-top:8px;margin-top:2px;line-height:1.35}
  /* "Cuts · Beard · Shave" wraps to three lines in 141px and buries the price.
     It is on the barber's own page, one tap away, in full. */
  #teamGrid .barber .meta .cats{display:none}

  #teamGrid .barber .acts{width:100%;margin-top:10px;gap:8px}
  /* the ghost button was a third link to the profile the card already opens */
  #teamGrid .barber .acts .btn-ghost{display:none}
  #teamGrid .barber .acts .btn-red{
    flex:1;padding:12px 8px;font-size:.76rem;letter-spacing:.12em;
    position:relative;z-index:2;box-shadow:0 5px 12px rgba(153,20,29,.24);
  }
  /* tap the card → that barber's menu and hours. Tap the red button → straight
     into booking them. */
  #teamGrid .barber h3 a::after{content:"";position:absolute;inset:0;z-index:1}

  /* An odd roster leaves the last barber alone beside an empty cell — the exact
     hole this layout exists to close. The orphan spans the row and recomposes
     sideways instead. */
  #teamGrid .barber:last-child:nth-child(odd){
    grid-column:1/-1;flex-direction:row;align-items:center;text-align:left;padding:14px;gap:16px;
  }
  #teamGrid .barber:last-child:nth-child(odd) .photo{margin:0;flex:none}
  #teamGrid .barber:last-child:nth-child(odd) .body{align-items:flex-start;min-width:0}
  #teamGrid .barber:last-child:nth-child(odd) .meta{border-top:0;padding-top:0;margin-top:0}
  #teamGrid .barber:last-child:nth-child(odd) .acts{margin-top:9px;width:auto}
  #teamGrid .barber:last-child:nth-child(odd) .acts .btn-red{flex:none;padding:12px 30px}
}

/* ── the footer on a phone ───────────────────────────────────────────────── */
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 18px}
  /* the brand blurb spans the row; everything after it pairs cleanly */
  .foot-grid > :first-child{grid-column:1/-1}
  footer h4{margin-bottom:6px}
  /* `footer a` is an inline-block with line-height:44px, so each <li> carries a
     line box of its own around it — the inline-block descender gap, doubled by
     the 44px line-height, rendered the rows 88px apart. Making the row itself
     the flex line removes the second box; the 44px minimum is untouched. */
  footer ul{gap:0}
  footer li{display:flex}
  /* display:flex beats the [hidden] attribute's display:none, which un-hid the
     email row applyBusiness() hides when the shop has no email on file — the
     dangling em-dash that code exists to prevent. */
  footer li[hidden]{display:none}
  footer ul a{display:flex;align-items:center;line-height:1.25;width:100%}
  /* "Mon – Sat" and "9am – 7pm" do not fit one 157px line and wrapped into four */
  .hours-row{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 0;font-size:.92rem}
  .foot-bottom{margin-top:22px;padding-top:15px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE NAVY BAND
   The navy off the sign's twin rules, given a whole section to be a surface in.
   Mr Cut's equivalent band sells a beauty-supply counter. This salon's claim is
   simpler and better: seven days a week, walk-ins taken, and step-free through the
   door — which between them answer the three questions that otherwise become a
   phone call.
   ═══════════════════════════════════════════════════════════════════════════ */
.supply{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.supply::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 82% 14%,rgba(255,255,255,.12),transparent 66%)}
.supply .wrap{position:relative;z-index:1}
.supply .eyebrow{color:var(--gold-l)}
.supply h2{color:#fff}
.supply .lede{color:#CFD6E6}
.supply .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.supply .btn-ghost:hover{background:#fff;color:var(--blue)}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:40px}
.shelfitem{background:rgba(255,255,255,.06);border:1px solid rgba(201,162,39,.32);border-radius:var(--radius);padding:24px 22px}
.shelfitem h4{font-family:var(--display);font-size:1.2rem;text-transform:uppercase;
  color:#fff;margin-bottom:8px}
.shelfitem p{font-size:.93rem;color:#C2CADD;line-height:1.55;font-weight:300}

/* Owner pull-quote. One real, attributable review rather than a carousel of five:
   a single line a visitor could go and verify reads as true; a wall of them reads
   as marketing. */
.ownerquote{margin:34px 0 0;padding:28px 32px;border-left:3px solid var(--gold);
  border-radius:var(--radius);background:var(--card);max-width:62ch;
  box-shadow:0 8px 26px rgba(120,60,70,.09)}
.ownerquote blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:1.35rem;
  font-weight:400;color:var(--ink);line-height:1.5;font-variation-settings:'opsz' 22}
.ownerquote figcaption{margin-top:16px;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

.ownerhead{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ownerhead img{width:130px;height:162px;flex:none;object-fit:cover;border-radius:var(--arch);
  box-shadow:inset 0 0 0 1.5px var(--gold), 0 10px 26px rgba(120,60,70,.18)}
/* min-width:0 is load-bearing: without it the display heading's min-content width
   keeps the text column wider than the row and wraps the portrait onto its own
   line at every viewport. */
.ownerhead>div{flex:1 1 340px;min-width:0}
.ownerhead h2{margin-top:6px}
.ownerbody p+p{margin-top:16px}
@media(max-width:560px){.ownerhead{gap:16px}.ownerhead img{width:96px;height:96px}}

/* ── full-bleed photograph ───────────────────────────────────────────────────
   Edge to edge, between two sections. The twin gold rules top and bottom tie it to
   the page instead of letting it read as a gap where the layout stopped. Height is
   capped in vh so a wide photo does not become a full screen of ceiling tiles on a
   tall monitor. */
.bleed{margin:0;position:relative;overflow:hidden;background:var(--ink-box)}
.bleed::before,.bleed::after{content:"";position:absolute;left:0;right:0;height:5px;z-index:1;
  border-top:1px solid rgba(201,162,39,.6);border-bottom:1px solid rgba(201,162,39,.6)}
.bleed::before{top:0}.bleed::after{bottom:0}
.bleed img{display:block;width:100%;height:auto;max-height:56vh;object-fit:cover;object-position:50% 46%}
@media(max-width:760px){.bleed img{max-height:none;aspect-ratio:16/9}}

/* a photograph inside the navy band — a gold keyline rather than the blush
   hairline used on porcelain, because blush on navy disappears */
.supplyshot{margin:38px 0 0;overflow:hidden;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.5), 0 22px 48px rgba(0,0,0,.34)}
.supplyshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}
@media(max-width:760px){.supplyshot{box-shadow:inset 0 0 0 1px rgba(201,162,39,.5), 0 12px 26px rgba(0,0,0,.34)}.supplyshot img{aspect-ratio:4/3}}

/* A photograph of the salon's own price board, if one is ever taken. Sparkle Pro
   publishes NO menu anywhere — this is the single highest-value photograph anyone
   could bring back from a visit, because it turns every invented number on this
   site into a transcribed one. Styled and waiting; used by no page yet. */
.boardshot{margin:0;border-radius:var(--radius);overflow:hidden;background:#111;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.5), 0 22px 48px rgba(120,60,70,.2)}
.boardshot img{display:block;width:100%;height:auto}
.boardnote{font-size:.92rem;color:var(--mute);margin-top:16px}

/* ── info rows used on the Visit page ──────────────────────────────────── */
.inforow{display:flex;gap:16px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--rule)}
.inforow .k{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);flex:0 0 116px;padding-top:5px}
.inforow .v{flex:1;min-width:0}