/* The groomer look: everything here is scoped to .site[data-look="groomer"]. Appended after base.css (bun run --filter @platform/sections css).

   The trimsalon itself: rinse blue of the wash room, the clipper-blue price
   chart that hangs behind the counter, the trimkaart (a manila index card
   with blue rules), the steel comb, the door with its hours sticker. Dogs
   are the photography. No paw prints, no bones. */

.site[data-look="groomer"] {
  --g-ink: #23211d;
  --g-towel: #ffffff;
  --g-rinse: #e8f0f7;
  --g-rinse-deep: #d3e1ee;
  --g-clipper: #2c5aa0;
  --g-clipper-deep: #234a86;
  --g-on-clipper: #ffffff;
  --g-clipper-muted: #dbe5f3;
  --g-manila: #f1e2b8;
  --g-manila-line: #a8956a;
  --g-card-rule: #a9bdd6;
  --g-card-red: #c4553f;
  --g-steel: #9aa2a9;
  --g-glass: #262b30;
  --g-on-glass: #ffffff;
  --g-glass-muted: #b8c0c8;
  --g-muted: #4f4b44;
  --g-mat: #262a28;
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-h2: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem);
  --section-pad: clamp(4rem, 9vw, 8rem);
  --muted: var(--g-muted);
  background: var(--g-towel);
}
@media (max-width: 40rem) { .site[data-look="groomer"] { --fs-base: 1.0625rem; } }
.site[data-look="groomer"] main > .s + .s { border-top: 0; }
.site[data-look="groomer"] :is(h1, h2) { letter-spacing: -0.025em; line-height: 0.98; }
.site[data-look="groomer"] :is(p, li, dd, td, th, figcaption) { hyphens: auto; }

/* --- Buttons: the button rises off the table on hover. -------------------- */
.site[data-look="groomer"] .btn { border-radius: 999px; transition: transform 160ms ease, box-shadow 160ms ease; }
.site[data-look="groomer"] .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 0 var(--g-ink); }
.site[data-look="groomer"] .btn:active { transform: none; box-shadow: none; }
.site[data-look="groomer"] .cta-alt { text-decoration-thickness: 2px; }

/* --- Header ------------------------------------------------------------- */
.site[data-look="groomer"] .site-header { background: var(--g-towel); border-bottom: 1px solid var(--g-rinse-deep); }
.site[data-look="groomer"] .brand { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); letter-spacing: -0.02em; }
.site[data-look="groomer"] .site-header nav a { font-weight: 400; }

/* --- Hero: the grooming corner. The rinse-tiled wall, the dog on the
   trimtafel, and the trimkaart lying on the table's anti-slip mat. ------- */
.site[data-look="groomer"] .g-hero {
  --g-table-h: clamp(4.25rem, 7vw, 6rem);
  padding: 0; position: relative; overflow: hidden;
  /* Wash-room tiles: 10 cm squares, white grout. */
  background-color: var(--g-rinse);
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.7) 2px, transparent 2px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.7) 2px, transparent 2px);
  background-size: clamp(3.25rem, 5vw, 4.5rem) clamp(3.25rem, 5vw, 4.5rem);
  background-position: -1px -1px;
}
.site[data-look="groomer"] .g-hero-grid { display: grid; position: relative; }
.site[data-look="groomer"] .g-hero h1, .site[data-look="groomer"] .g-hero h2 {
  font-size: clamp(2.7rem, 1.2rem + 5vw, 7.25rem); line-height: 0.94; letter-spacing: -0.035em; max-width: 11ch; margin: 0 0 0.3em; text-wrap: balance;
}
.site[data-look="groomer"] .g-hero.g-len-l :is(h1, h2) { font-size: clamp(2.4rem, 1.2rem + 3.8vw, 5.6rem); max-width: 14ch; }
.site[data-look="groomer"] .g-hero.g-len-xl :is(h1, h2) { font-size: clamp(2.05rem, 1.1rem + 2.9vw, 4.3rem); max-width: 18ch; line-height: 0.98; }
.site[data-look="groomer"] .g-lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 31rem; margin: 0; hyphens: manual; }
.site[data-look="groomer"] .g-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="groomer"] .g-hero .btn { min-height: 3.6rem; padding-inline: 1.9rem; font-size: 1.15rem; }
.site[data-look="groomer"] .g-hero-photo { position: relative; overflow: hidden; background: var(--g-rinse-deep); }
.site[data-look="groomer"] .g-hero-img { width: 100%; height: 100%; object-fit: cover; }

/* The table: a brushed-steel edge, then the dark anti-slip mat (a fine
   raised diamond grid). Runs the full width under the copy and the photo. */
.site[data-look="groomer"] .g-table {
  position: relative; z-index: 1; height: var(--g-table-h);
  background:
    linear-gradient(to bottom, #e9edf0 0, #b9c1c8 0.35rem, #7d868e 0.5rem, rgb(0 0 0 / 0.55) 0.5rem, transparent 1.4rem),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 7px),
    var(--g-mat);
}

@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-hero-grid {
    grid-template-columns: minmax(var(--gap), 1fr) minmax(0, calc(var(--wrap) * 0.5)) minmax(0, calc(var(--wrap) * 0.5)) minmax(var(--gap), 1fr);
    grid-template-rows: 1fr var(--g-table-h);
    min-height: min(calc(100svh - 9rem), 54rem);
  }
  .site[data-look="groomer"] .g-hero-copy { grid-column: 2; grid-row: 1; align-self: center; padding: clamp(3rem, 7vh, 5rem) clamp(2rem, 4vw, 4rem) clamp(5rem, 10vh, 7rem) 0; position: relative; z-index: 2; }
  .site[data-look="groomer"] .g-hero-photo { grid-column: 3 / 5; grid-row: 1; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top-left-radius: 1.75rem; }
  .site[data-look="groomer"] .g-hero-img { position: absolute; inset: 0; }
  .site[data-look="groomer"] .g-table { grid-column: 1 / -1; grid-row: 2; }
  /* The card lies on the mat, a little askew, its top over the photo. */
  .site[data-look="groomer"] .g-hero-card {
    grid-column: 3; grid-row: 1 / 3; z-index: 3; align-self: end; justify-self: start;
    width: min(100%, 23.5rem); margin: 0 0 calc(var(--g-table-h) * 0.42) clamp(-4.5rem, -3.5vw, -1.5rem);
    rotate: -2.5deg; transition: rotate 220ms ease, translate 220ms ease;
  }
  .site[data-look="groomer"] .g-hero-card:hover { rotate: -1deg; translate: 0 -4px; }
  /* No photo: the card stands beside the headline, still on the table. */
  .site[data-look="groomer"] .g-hero.no-photo .g-hero-card { justify-self: center; margin-left: 0; }
}
@media (max-width: 51.99rem) {
  .site[data-look="groomer"] .g-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="groomer"] .g-hero-photo { order: -1; height: clamp(14rem, 34svh, 30rem); }
  .site[data-look="groomer"] .g-hero h1, .site[data-look="groomer"] .g-hero h2 { max-width: none; }
  .site[data-look="groomer"] .g-hero-copy { padding: clamp(1.5rem, 5vw, 2.5rem) var(--gap) 2rem; }
  /* The card sits on the table: the mat shows under its lower half. */
  .site[data-look="groomer"] .g-hero-card { order: 2; position: relative; z-index: 2; padding: 0 var(--gap); margin-bottom: calc(var(--g-table-h) * -0.6); }
  .site[data-look="groomer"] .g-hero-card .g-card { max-width: 28rem; rotate: -1.5deg; }
  .site[data-look="groomer"] .g-table { order: 3; }
}
@media (min-width: 40rem) and (max-width: 51.99rem) {
  .site[data-look="groomer"] .g-hero-photo { height: clamp(16rem, 36svh, 30rem); }
  .site[data-look="groomer"] .g-lead { max-width: 40rem; }
}
@media (prefers-reduced-motion: reduce) { .site[data-look="groomer"] .g-hero-card { transition: none; } }

/* The trimkaart: a manila index card, red top rule, blue rules. */
.site[data-look="groomer"] .g-card {
  --text: var(--on-manila); --muted: var(--manila-muted);
  position: relative; background: var(--g-manila); color: var(--on-manila);
  padding: 0.9rem clamp(1.1rem, 2.5vw, 1.6rem) 1.2rem; border-radius: 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 18px 30px -18px rgb(35 33 29 / 0.55);
}
.site[data-look="groomer"] .g-card-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.35rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--g-card-red); font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--manila-muted); }
.site[data-look="groomer"] .g-card-no { letter-spacing: 0.04em; }
.site[data-look="groomer"] .g-card-fields { margin: 0; }
.site[data-look="groomer"] .g-card-fields > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: baseline; gap: 0.6rem; padding: 0.4rem 0 0.3rem; border-bottom: 1px solid var(--g-card-rule); }
.site[data-look="groomer"] .g-card-fields dt, .site[data-look="groomer"] .g-k { font-family: var(--font-figures); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--manila-muted); }
.site[data-look="groomer"] .g-card-fields dd { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.site[data-look="groomer"] .g-card-fields dd a { text-decoration: none; }
.site[data-look="groomer"] .g-card-fields dd a:hover { text-decoration: underline; }
.site[data-look="groomer"] .g-card-name dd { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; }
.site[data-look="groomer"] .g-card-name.is-long dd { font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem); line-height: 1.12; hyphens: auto; }
.site[data-look="groomer"] .g-card-blank p { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; margin: 0; padding: 0.55rem 0 0.35rem; border-bottom: 1px solid var(--g-card-rule); }
.site[data-look="groomer"] .g-line { display: block; }
.site[data-look="groomer"] .g-opts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-family: var(--font-figures); font-size: 0.86rem; color: var(--on-manila); }

/* --- Prices: the chart that hangs behind the counter, on clipper blue. --- */
.site[data-look="groomer"] .g-prices { --text: var(--g-on-clipper); --muted: var(--g-clipper-muted); background: var(--g-clipper); color: var(--g-on-clipper); }
.site[data-look="groomer"] .g-prices-inner { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 5rem); }
@media (min-width: 72rem) {
  .site[data-look="groomer"] .g-prices.is-matrix .g-prices-inner, .site[data-look="groomer"] .g-prices.is-list .g-prices-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; }
  .site[data-look="groomer"] .g-prices-head { position: sticky; top: 7rem; }
}
.site[data-look="groomer"] .g-prices-head h1, .site[data-look="groomer"] .g-prices-head h2 { font-size: var(--fs-h2); margin-bottom: 0.4em; }
.site[data-look="groomer"] .g-intro { font-size: var(--fs-lead); line-height: 1.5; margin: 0; max-width: 30rem; }
.site[data-look="groomer"] .g-chart {
  --text: var(--g-ink); --muted: var(--g-muted); --border: #d5dbe3;
  position: relative; background: var(--g-towel); color: var(--g-ink);
  border-radius: 14px; padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.1), 0 40px 60px -40px rgb(10 25 50 / 0.7);
}
.site[data-look="groomer"] .g-prices-cta { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.site[data-look="groomer"] .g-prices .btn-primary { background: var(--g-towel); color: var(--g-ink); border-color: var(--g-towel); min-height: 3.4rem; padding-inline: 1.7rem; font-size: 1.1rem; }

/* Hung on a nail through a punched hole. */
.site[data-look="groomer"] .g-chart-hole { position: absolute; top: 0.85rem; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--g-clipper); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 3px #e6eaf0; }
.site[data-look="groomer"] .g-chart-hole::after { content: ''; position: absolute; left: 4px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e4e7ea, #7b848c 70%); }

.site[data-look="groomer"] .g-matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.site[data-look="groomer"] .g-matrix thead th { vertical-align: bottom; padding: 0 0.5rem 0.7rem; border-bottom: 3px solid var(--g-ink); font-weight: 700; }
.site[data-look="groomer"] .g-col-name { text-align: left; font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-muted); padding-left: 0 !important; }
.site[data-look="groomer"] .g-size { text-align: center; white-space: nowrap; width: 16%; }
.site[data-look="groomer"] .g-size-word { display: block; font-family: var(--font-heading); line-height: 1; letter-spacing: -0.02em; }
/* The size words grow from klein to groot. */
.site[data-look="groomer"] .g-size-klein .g-size-word { font-size: 1.15rem; }
.site[data-look="groomer"] .g-size-middel .g-size-word { font-size: 1.6rem; }
.site[data-look="groomer"] .g-size-groot .g-size-word { font-size: 2.2rem; }
.site[data-look="groomer"] .g-kg { display: block; margin-top: 0.35rem; font-family: var(--font-figures); font-weight: 400; font-size: 0.8rem; color: var(--g-muted); }
.site[data-look="groomer"] .g-matrix tbody th { text-align: left; font-weight: 400; padding: 1rem 0.75rem 1rem 0; vertical-align: top; }
.site[data-look="groomer"] .g-matrix tbody :is(th, td) { border-bottom: 1px solid var(--border); }
.site[data-look="groomer"] .g-matrix tbody tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="groomer"] .g-treat { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: break-word; }
.site[data-look="groomer"] .g-note { margin: 0.3rem 0 0; color: var(--g-muted); font-size: 0.95rem; line-height: 1.45; max-width: 34rem; }
.site[data-look="groomer"] .g-price { text-align: center; vertical-align: top; padding: 1.05rem 0.4rem; font-family: var(--font-figures); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); white-space: nowrap; }
.site[data-look="groomer"] .g-price .price-from { display: block; font-size: 0.7em; color: var(--g-muted); }
.site[data-look="groomer"] .g-price-any { text-align: center; }
.site[data-look="groomer"] .g-any { font-size: 0.72em; letter-spacing: 0.06em; color: var(--g-muted); margin-right: 0.6rem; }
.site[data-look="groomer"] .g-matrix tbody tr { transition: background-color 120ms ease; }
.site[data-look="groomer"] .g-matrix tbody tr:hover { background: var(--g-rinse); }
@media (max-width: 40rem) {
  .site[data-look="groomer"] .g-matrix, .site[data-look="groomer"] .g-matrix tbody { display: block; }
  .site[data-look="groomer"] .g-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site[data-look="groomer"] .g-matrix tbody tr { display: grid; grid-template-columns: repeat(var(--g-cols, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--border); padding-block: 0.9rem; }
  .site[data-look="groomer"] .g-matrix[data-cols="2"] tbody tr { --g-cols: 2; }
  .site[data-look="groomer"] .g-matrix[data-cols="1"] tbody tr { --g-cols: 1; }
  .site[data-look="groomer"] .g-matrix tbody tr:last-child { border-bottom: 0; }
  .site[data-look="groomer"] .g-matrix tbody :is(th, td) { border: 0; padding: 0; }
  .site[data-look="groomer"] .g-matrix tbody th { grid-column: 1 / -1; padding-bottom: 0.6rem; }
  .site[data-look="groomer"] .g-matrix td.g-price { text-align: left; padding-right: 0.5rem; }
  .site[data-look="groomer"] .g-matrix td.g-price-any { grid-column: 1 / -1; }
  .site[data-look="groomer"] .g-matrix td[data-size]::before { content: attr(data-size); display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--g-muted); margin-bottom: 0.1rem; }
  .site[data-look="groomer"] .g-any { display: block; margin: 0 0 0.1rem; }
}

/* The chart without sizes: name, dotted leader, price. */
.site[data-look="groomer"] .g-list { margin: 0; }
.site[data-look="groomer"] .g-list li { padding: 1rem 0; border-bottom: 1px solid var(--border); break-inside: avoid; }
.site[data-look="groomer"] .g-list li:last-child { border-bottom: 0; }
.site[data-look="groomer"] .g-list-row { display: flex; align-items: baseline; gap: 0.75rem; }
.site[data-look="groomer"] .g-list-row .g-treat { flex: 0 1 auto; min-width: 0; }
.site[data-look="groomer"] .g-dots { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted var(--g-steel); transform: translateY(-0.3em); }
.site[data-look="groomer"] .g-list.no-prices .g-treat { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); }
.site[data-look="groomer"] .g-list .g-amount { margin: 0; font-family: var(--font-figures); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.site[data-look="groomer"] .g-list .g-amount .price-from { font-size: 0.75em; color: var(--g-muted); }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-list.is-long { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .site[data-look="groomer"] .g-list.is-long li:last-child { border-bottom: 1px solid var(--border); }
  .site[data-look="groomer"] .g-list.no-prices.is-long { columns: 2; column-gap: 3rem; }
}

/* --- About: the trimtafel, the photo bleeding off the page. -------------- */
.site[data-look="groomer"] .g-about { padding: 0; background: var(--g-towel); }
.site[data-look="groomer"] .g-about-text h1, .site[data-look="groomer"] .g-about-text h2 { font-size: var(--fs-h2); margin-bottom: 0.45em; max-width: 12ch; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="groomer"] .g-about-text > p { max-width: 34rem; }
.site[data-look="groomer"] .g-about-text > p:first-of-type { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="groomer"] .g-about-photo { position: relative; overflow: hidden; background: var(--g-rinse); }
.site[data-look="groomer"] .g-about-img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-about-grid { display: grid; grid-template-columns: minmax(var(--gap), 1fr) minmax(0, calc(var(--wrap) * 0.5)) minmax(0, calc(var(--wrap) * 0.5)) minmax(var(--gap), 1fr); min-height: clamp(34rem, 80vh, 52rem); }
  .site[data-look="groomer"] .g-about-text { grid-column: 2; grid-row: 1; align-self: center; padding: var(--section-pad) clamp(2rem, 5vw, 5rem) var(--section-pad) 0; }
  .site[data-look="groomer"] .g-about-photo { grid-column: 3 / 5; grid-row: 1; }
  .site[data-look="groomer"] .g-about-img { position: absolute; inset: 0; }
  .site[data-look="groomer"] .g-about.photo-left .g-about-text { grid-column: 3; padding: var(--section-pad) 0 var(--section-pad) clamp(2rem, 5vw, 5rem); }
  .site[data-look="groomer"] .g-about.photo-left .g-about-photo { grid-column: 1 / 3; }
  .site[data-look="groomer"] .g-about.no-photo .g-about-grid { min-height: 0; }
  .site[data-look="groomer"] .g-about.no-photo .g-about-text { grid-column: 2 / 4; columns: 2 20rem; column-gap: 4rem; }
  .site[data-look="groomer"] .g-about.no-photo .g-about-text > :is(h1, h2) { column-span: all; }
}
@media (max-width: 51.99rem) {
  .site[data-look="groomer"] .g-about-photo { aspect-ratio: 4 / 3; max-height: 70svh; }
  .site[data-look="groomer"] .g-about-text { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; padding-block: var(--section-pad); }
}

/* --- Gallery: the wall of dogs fresh off the table, on ink. -------------- */
.site[data-look="groomer"] .g-gallery { --text: var(--on-deep); --muted: var(--deep-muted); background: var(--g-mat) repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 7px); color: var(--on-deep); }
.site[data-look="groomer"] .g-gallery h1, .site[data-look="groomer"] .g-gallery h2 { font-size: var(--fs-h2); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="groomer"] .g-wall { display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 42vw, 16rem); }
.site[data-look="groomer"] .g-wall li { position: relative; overflow: hidden; background: #34312b; border-radius: 4px; }
.site[data-look="groomer"] .g-wall img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.site[data-look="groomer"] .g-wall li:hover img { transform: scale(1.03); }
.site[data-look="groomer"] .g-wall li:first-child { grid-column: 1 / -1; grid-row: span 2; }
.site[data-look="groomer"] .g-wall li:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 19vw, 19rem); }
  .site[data-look="groomer"] .g-wall li { grid-column: span 4; }
  .site[data-look="groomer"] .g-wall li:first-child { grid-column: span 7; grid-row: span 2; }
  .site[data-look="groomer"] .g-wall li:nth-child(2), .site[data-look="groomer"] .g-wall li:nth-child(3) { grid-column: span 5; }
  /* After the first three, rows of three; a row left with one photo runs wide, with two they share it. */
  .site[data-look="groomer"] .g-wall li:last-child:nth-child(3n + 4) { grid-column: 1 / -1; }
  .site[data-look="groomer"] .g-wall li:last-child:nth-child(3n + 5), .site[data-look="groomer"] .g-wall li:nth-last-child(2):nth-child(3n + 4) { grid-column: span 6; }
  .site[data-look="groomer"] .g-n2 .g-wall li { grid-column: span 6 !important; grid-row: span 2; }
}

/* --- Hours: the sticker on the salon door. ------------------------------- */
/* The salon wall: square rinse-blue tiles with white grout; the door stands on the floor. */
.site[data-look="groomer"] .g-hours {
  --g-floor: 2.75rem;
  padding-bottom: var(--g-floor);
  background-color: var(--g-rinse);
  background-image:
    linear-gradient(to top, #b9bfc4 0 var(--g-floor), #8e969d var(--g-floor) calc(var(--g-floor) + 6px), transparent calc(var(--g-floor) + 6px)),
    linear-gradient(#f8fbfd 2px, transparent 2px),
    linear-gradient(90deg, #f8fbfd 2px, transparent 2px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-position: 0 0, 0 0, 0 0;
}
.site[data-look="groomer"] .g-hours-inner { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: end; }
.site[data-look="groomer"] .g-hours-intro { align-self: center; padding-bottom: clamp(0rem, 4vw, 3rem); }
@media (max-width: 51.99rem) { .site[data-look="groomer"] .g-hours-intro { padding-bottom: 0; } }
@media (min-width: 52rem) { .site[data-look="groomer"] .g-hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="groomer"] .g-hours-intro h1, .site[data-look="groomer"] .g-hours-intro h2 { font-size: var(--fs-h2); max-width: 10ch; }
.site[data-look="groomer"] .g-hours-place { font-size: var(--fs-lead); line-height: 1.5; margin: 1.5rem 0 0; }
.site[data-look="groomer"] .g-hours-place a, .site[data-look="groomer"] .g-hours-call a { font-weight: 700; text-decoration-thickness: 2px; }
.site[data-look="groomer"] .g-hours-call { font-size: var(--fs-lead); margin: 1rem 0 0; }
.site[data-look="groomer"] .g-door { position: relative; justify-self: center; width: min(100%, 30rem); padding: 14px; background: linear-gradient(90deg, #c9ced3, #eef0f2 30%, #d7dbdf 70%, #bfc5cb); border-radius: 6px 6px 0 0; box-shadow: 0 -2px 30px -18px rgb(20 30 45 / 0.45); }
.site[data-look="groomer"] .g-door-glass {
  --text: var(--g-on-glass); --bg: var(--g-glass); --muted: var(--g-glass-muted); --border: rgb(255 255 255 / 0.18);
  background: var(--g-glass); color: var(--g-on-glass);
  padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 2.5rem) clamp(6rem, 14vw, 8rem);
}
.site[data-look="groomer"] .g-door-name { margin: 0 0 1.75rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.05; letter-spacing: -0.02em; text-align: center; overflow-wrap: anywhere; }
.site[data-look="groomer"] .g-door-hours { width: 100%; }
.site[data-look="groomer"] .g-door-hours th, .site[data-look="groomer"] .g-door-hours td { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.site[data-look="groomer"] .g-door-hours th { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.site[data-look="groomer"] .g-door-hours td { font-size: 1.05rem; white-space: nowrap; padding-left: 0.75rem; }
.site[data-look="groomer"] .g-door-hours :is(th, td) { hyphens: manual; }
.site[data-look="groomer"] .g-door-hours th { white-space: normal; }
.site[data-look="groomer"] .g-door-hours .is-closed :is(th, td) { color: var(--g-glass-muted); }
.site[data-look="groomer"] .g-door-hours th::after { background: var(--g-towel); color: var(--g-ink); }
.site[data-look="groomer"] .g-door-hours th::before { background: var(--g-towel) !important; }
/* The push bar across the glass, on two mounts. */
.site[data-look="groomer"] .g-door-glass { position: relative; }
.site[data-look="groomer"] .g-door-bar { position: absolute; left: 12%; right: 12%; bottom: clamp(2rem, 5vw, 3rem); height: 14px; border-radius: 7px; background: linear-gradient(180deg, #f2f4f5, #a9b1b8 55%, #7f878f); box-shadow: 0 6px 8px rgb(0 0 0 / 0.45); }
.site[data-look="groomer"] .g-door-bar::before, .site[data-look="groomer"] .g-door-bar::after { content: ''; position: absolute; top: 3px; width: 10px; height: 22px; border-radius: 3px; background: #8d959c; z-index: -1; }
.site[data-look="groomer"] .g-door-bar::before { left: 8%; }
.site[data-look="groomer"] .g-door-bar::after { right: 8%; }
@media (max-width: 24rem) { .site[data-look="groomer"] .g-door-hours td { font-size: 0.95rem; } .site[data-look="groomer"] .g-door-hours th { font-size: 1rem; } }

/* --- Reviews: set large; the first one largest. ------------------------- */
/* Reviews on a towel: the woven blue border bands at its top and bottom. */
.site[data-look="groomer"] .g-reviews {
  background-color: var(--g-towel);
  background-image: linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper));
  background-size: 100% 7px, 100% 3px, 100% 3px, 100% 7px;
  background-position: 0 18px, 0 31px, 0 calc(100% - 31px), 0 calc(100% - 18px);
  background-repeat: no-repeat;
}
.site[data-look="groomer"] .g-reviews h1, .site[data-look="groomer"] .g-reviews h2 { font-size: var(--fs-h2); max-width: 14ch; }
.site[data-look="groomer"] .g-quotes { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .site[data-look="groomer"] .g-reviews-many .g-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site[data-look="groomer"] .g-reviews-many .g-quotes li:first-child { grid-column: 1 / -1; } }
.site[data-look="groomer"] .g-quotes figure { margin: 0; }
.site[data-look="groomer"] .g-quotes blockquote { margin: 0; }
.site[data-look="groomer"] .g-quotes blockquote p { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.25; letter-spacing: -0.015em; }
.site[data-look="groomer"] .g-quotes li:first-child blockquote p { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 26ch; }
.site[data-look="groomer"] .g-q { color: var(--g-clipper); margin-left: -0.45em; }
.site[data-look="groomer"] .g-quotes figcaption { margin-top: 1rem; font-size: 1rem; color: var(--g-muted); }
.site[data-look="groomer"] .g-quotes figcaption::before { content: '— '; }

/* --- FAQ: questions at the counter. ------------------------------------- */
.site[data-look="groomer"] .s-faq { background: var(--g-rinse); }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="groomer"] .s-faq .faq-items { margin-top: 0; }
}
.site[data-look="groomer"] .s-faq h1, .site[data-look="groomer"] .s-faq h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] .faq-items details { background: var(--g-towel); border: 0; border-radius: 10px; margin-bottom: 0.6rem; padding-inline: clamp(1rem, 3vw, 1.6rem); }
.site[data-look="groomer"] .faq-items details:first-child { border-top: 0; }
.site[data-look="groomer"] .faq-items summary { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); min-height: 4.25rem; letter-spacing: -0.01em; }
.site[data-look="groomer"] .faq-items summary::after { content: ''; width: 1.1rem; height: 1.1rem; flex: none; background: linear-gradient(var(--g-clipper), var(--g-clipper)) center / 100% 2.5px no-repeat, linear-gradient(var(--g-clipper), var(--g-clipper)) center / 2.5px 100% no-repeat; transition: transform 200ms ease; }
.site[data-look="groomer"] .faq-items details[open] summary::after { content: ''; transform: rotate(45deg); }
.site[data-look="groomer"] .faq-items details p { color: var(--g-ink); padding-bottom: 0.25rem; }
.site[data-look="groomer"] .faq-items dt { font-family: var(--font-heading); font-size: 1.3rem; }
.site[data-look="groomer"] .faq-items dd { color: var(--g-ink); }

/* --- Contact: the back of the index card, ruled. ----------------------- */
.site[data-look="groomer"] .s-contact {
  --text: var(--on-manila); --muted: var(--manila-muted); --border: var(--g-card-rule);
  background-color: var(--g-manila); color: var(--on-manila);
  background-image: linear-gradient(var(--g-card-red), var(--g-card-red)), repeating-linear-gradient(to bottom, transparent 0 calc(2.25rem - 1px), color-mix(in srgb, var(--g-card-rule) 55%, transparent) calc(2.25rem - 1px) 2.25rem);
  background-size: 100% 2px, 100% 100%; background-position: 0 clamp(3rem, 6vw, 4.5rem), 0 0; background-repeat: no-repeat, repeat;
}
.site[data-look="groomer"] .s-contact h1, .site[data-look="groomer"] .s-contact h2 { font-size: var(--fs-h2); max-width: 10ch; }
.site[data-look="groomer"] .s-contact .lead { color: var(--on-manila); }
.site[data-look="groomer"] .contact-list { border-top: 3px solid var(--on-manila); }
.site[data-look="groomer"] .contact-list li { border-bottom: 1px solid var(--g-manila-line); }
.site[data-look="groomer"] .contact-link { padding-block: 1.1rem; }
.site[data-look="groomer"] .contact-label { font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--manila-muted); }
.site[data-look="groomer"] .contact-value { font-size: clamp(1.4rem, 1.15rem + 1vw, 2.1rem); letter-spacing: -0.02em; }
.site[data-look="groomer"] .contact-list li:first-child .contact-value { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.4rem); line-height: 1; }
.site[data-look="groomer"] .contact-also, .site[data-look="groomer"] .contact-note { font-weight: 700; }
.site[data-look="groomer"] .contact-form { --bg: var(--g-towel); background: var(--g-towel); color: var(--g-ink); --text: var(--g-ink); --muted: var(--g-muted); border-top: 0; padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: 10px; box-shadow: 0 20px 40px -30px rgb(35 33 29 / 0.6); }

/* --- Request form: filled in like a trimkaart. -------------------------- */
.site[data-look="groomer"] .s-request { background: var(--g-towel); }
.site[data-look="groomer"] .s-request h1, .site[data-look="groomer"] .s-request h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] .request-form {
  --text: var(--on-manila); --muted: var(--manila-muted); --bg: #fbf4de;
  background: var(--g-manila); color: var(--on-manila); border-top: 0; padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: 3px;
  box-shadow: inset 0 2px 0 var(--g-card-red), 0 20px 40px -30px rgb(35 33 29 / 0.6);
}
.site[data-look="groomer"] .request-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-color: var(--g-manila-line); }

/* --- Booking: the appointment book. -------------------------------------- */
.site[data-look="groomer"] .s-booking { background: var(--g-rinse); }
.site[data-look="groomer"] .s-booking h1, .site[data-look="groomer"] .s-booking h2 { font-size: var(--fs-h2); }
@media (min-width: 64rem) {
  .site[data-look="groomer"] .s-booking .booking-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="groomer"] .s-booking .booking-inner > * { grid-column: 1; max-width: none; }
  .site[data-look="groomer"] .s-booking .booking-inner > .booking-services { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
.site[data-look="groomer"] .booking-services { background: var(--g-towel); border-top: 0; border-radius: 12px; padding: 0.5rem clamp(1rem, 3vw, 1.75rem); }
.site[data-look="groomer"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="groomer"] .booking-name { font-family: var(--font-heading); font-size: 1.2rem; }
.site[data-look="groomer"] .booking-go { color: var(--g-clipper); }

/* --- CTA band: clipper blue, the button towel white. -------------------- */
.site[data-look="groomer"] .s-cta { --text: var(--g-on-clipper); --muted: var(--g-clipper-muted); background: var(--g-clipper); color: var(--g-on-clipper); }
.site[data-look="groomer"] .s-cta h1, .site[data-look="groomer"] .s-cta h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] .s-cta .cta-inner p { color: var(--g-on-clipper); }
.site[data-look="groomer"] .s-cta .btn-primary { background: var(--g-towel); color: var(--g-ink); border-color: var(--g-towel); min-height: 3.6rem; font-size: 1.15rem; }

/* --- Trust strip and service area: towel stripes, big place names. ------- */
.site[data-look="groomer"] .s-trust { background: var(--g-towel); border-block: 0; padding-block: 1.6rem; background-image: linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)); background-size: 100% 4px, 100% 2px, 100% 2px, 100% 4px; background-position: 0 6px, 0 14px, 0 calc(100% - 14px), 0 calc(100% - 6px); background-repeat: no-repeat; }
.site[data-look="groomer"] .trust-list { font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); justify-content: center; }
.site[data-look="groomer"] .s-area { background: var(--g-rinse); }
.site[data-look="groomer"] .s-area h1, .site[data-look="groomer"] .s-area h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] ul.area-list { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; gap: 0.2rem 0; }
.site[data-look="groomer"] ul.area-list li:not(:last-child)::after { color: var(--g-clipper); }
.site[data-look="groomer"] .area-places { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.2; }

/* --- Subpages: their first section carries the page title. -------------- */
.site[data-look="groomer"] main > .s:first-child:not(.s-hero) > .wrap h1 { font-size: clamp(2.6rem, 1.4rem + 4.5vw, 6rem); }

/* --- Footer: ink, with the steel comb lying across its top edge. -------- */
.site[data-look="groomer"] .site-footer { position: relative; padding-top: clamp(4.5rem, 8vw, 6rem); }
.site[data-look="groomer"] .site-footer::before, .site[data-look="groomer"] .site-footer::after { content: ''; position: absolute; left: 50%; width: min(78vw, 30rem); transform: translateX(-50%); pointer-events: none; }
/* The spine, steel. */
.site[data-look="groomer"] .site-footer::before { top: -14px; height: 10px; z-index: 1; border-radius: 5px; background: linear-gradient(#eef0f2, #aab2b9 50%, #7d868e); box-shadow: 0 5px 6px rgb(0 0 0 / 0.35); }
/* The teeth: coarse on one half, fine on the other, like a greyhound comb. */
.site[data-look="groomer"] .site-footer::after {
  top: -6px; height: 18px; width: calc(min(78vw, 30rem) - 10px);
  background: repeating-linear-gradient(90deg, #a3abb2 0 3px, transparent 3px 7px) left / 50% 100% no-repeat, repeating-linear-gradient(90deg, #a3abb2 0 1.6px, transparent 1.6px 3.5px) right / 50% 100% no-repeat;
}
.site[data-look="groomer"] .footer-brand .footer-name { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.025em; overflow-wrap: anywhere; }

/* --- Quick bar (phones): towel white, the main action clipper blue. ---- */
@media (max-width: 51.99rem) {
  .site[data-look="groomer"] .quickbar { --on-deep: var(--g-ink); background: var(--g-towel); border-top: 1px solid var(--g-rinse-deep); }
  .site[data-look="groomer"] .quick { font-family: var(--font-heading); font-size: 1.1rem; }
}

/* --- Motion: the card lands; the chart, door, photos and quotes rise a little as they come into view. */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="groomer"] .g-hero-card .g-card { animation: g-land 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both; }
  @supports (animation-timeline: view()) {
    .site[data-look="groomer"] :is(.g-chart, .g-door, .g-wall li, .g-quotes li, .faq-items details) { animation: g-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes g-land { from { opacity: 0; transform: translateY(1.5rem) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
/* Movement only, never hidden: a page captured without scrolling (a
   full-page screenshot, a framed preview) still shows everything. */
@keyframes g-rise { from { transform: translateY(1.5rem); } to { transform: none; } }