/* ==========================================================================
   MAIN  —  D&J GROUP LLC  ·  NAIL SALON TEMPLATE 06  ·  "STUDIO FORMAT"
   --------------------------------------------------------------------------
   Layout and components. THERE ARE NO COLOUR LITERALS IN THIS FILE — every
   colour, every translucency, every font is a var() from tokens.css. Rebrand
   there; never here.

   Reading order:
     01  reset + base            07  service index + hover panel
     02  type utilities          08  price columns
     03  the grid                09  gallery
     04  the left rail           10  reviews
     05  page shell + sections   11  forms
     06  hero                    12  footer
                                 13  grid overlay (press G)
                                 14  reveal, responsive, print
   ========================================================================== */


/* ═══════════════════════════════════════════════ 01 · RESET + BASE ═══ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the mobile bar; on desktop the rail is beside the
     content so nothing overlaps and the offset is only the section air. */
  scroll-padding-top: calc(var(--bar-h, 0px) + 24px);
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-h);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; border: 0; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* One focus style everywhere, in the signal colour. It has to be red: on a
   page this quiet, a grey focus ring is invisible. */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════ 02 · TYPE UTILITIES ═══ */

/* The mono label. Figure numbers, captions, grid labels, price headers,
   every eyebrow on the site. 11px, uppercase, tracked. It is half the
   personality of the design — the other half is the rules. */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.label--ink { color: var(--c-ink); }
.label--red { color: var(--c-red); }

/* Red as text inside a grid well drops to 4.2:1 — below AA. Any label that
   lands on --c-surface must use this instead. See tokens.css. */
.well .label--red,
.label--red-on-well { color: var(--c-red-ink); }

.h-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }

.lede {
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 62ch;
}
.body { color: var(--c-ink-soft); max-width: 68ch; }
.body + .body { margin-top: 1em; }
.small { font-size: var(--fs-small); color: var(--c-mute); }

.figure-num {
  font-family: var(--font-mono);
  font-size: var(--fs-figure);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.em-red { color: var(--c-red); }

/* Inline links. Cobalt is the ONLY blue on the site, which is what makes it
   legible as "this is a link" without an underline shouting. */
.link {
  color: var(--c-cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link:hover, .link:focus-visible { color: var(--c-cobalt-deep); text-decoration-thickness: 2px; }

/* The structural rule. Full bleed, 1px, ink. Not a divider — the design. */
.rule {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: 0;
}
.rule--red { border-top-color: var(--c-red); border-top-width: 3px; }
.rule--soft { border-top-color: var(--c-rule-soft); }

/* A boxed mono note. Used for anything that needs to read as a stamped
   annotation rather than running copy — a notice at the head of a section,
   a caveat under a price. Red keyline, red text, no fill. */
.note-tag {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--c-red);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-red);
}
.well .note-tag { border-color: var(--c-red-ink); color: var(--c-red-ink); }


/* ═════════════════════════════════════════════════ 03 · THE GRID ═══ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* The 12 columns. `minmax(0, 1fr)` rather than `1fr` so a long unbroken
   string in a cell cannot silently widen its column and skew the grid. */
.g12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Column spans, named for what they do rather than numbered, so the HTML
   reads as layout intent. Each collapses to full width under 1024px. */
.c-full  { grid-column: 1 / -1; }
.c-1-4   { grid-column: 1 / 5; }
.c-1-5   { grid-column: 1 / 6; }
.c-1-6   { grid-column: 1 / 7; }
.c-1-7   { grid-column: 1 / 8; }
.c-1-8   { grid-column: 1 / 9; }
.c-5-12  { grid-column: 5 / 13; }
.c-6-12  { grid-column: 6 / 13; }
.c-7-12  { grid-column: 7 / 13; }
.c-8-12  { grid-column: 8 / 13; }
.c-9-12  { grid-column: 9 / 13; }

/* Photography. ONE class, ONE grade, applied everywhere. The files on disk
   are colour; the black-and-white happens here. See --photo-grade. */
.ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  background: var(--c-ink-wash);
}
.ph-box { position: relative; overflow: hidden; background: var(--c-ink-wash); }
.ph-box--1x1  { aspect-ratio: 1 / 1; }
.ph-box--4x5  { aspect-ratio: 4 / 5; }
.ph-box--3x2  { aspect-ratio: 3 / 2; }
.ph-box--16x9 { aspect-ratio: 16 / 9; }

/* A caption always sits under its figure, in mono, never over it. */
.cap {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.cap b { font-weight: 400; color: var(--c-ink); }


/* ══════════════════════════════════════════════ 04 · THE LEFT RAIL ═══ */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  padding: 28px 20px 24px;
  background: var(--c-canvas);
  border-right: 1px solid var(--c-rule);
}

/* The logo lock-up. Solid ink, no effects, fixed size, locked to the top-left
   of the grid — with the mono colophon beneath it. This is the whole logo
   treatment for template 06 and it is deliberately the plainest in the set. */
.brandmark { display: block; }
.brandmark__mark {
  display: block;
  width: 54px;
  height: auto;
}
.brandmark__caption {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.55;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.brandmark__caption b { display: block; font-weight: 400; color: var(--c-ink); }
.brandmark:hover .brandmark__caption b { color: var(--c-red); }

.rail__wordmark {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--ls-display);
}
.rail__wordmark span { display: block; }
.rail__wordmark .label { margin-top: 5px; }

/* Numbered links. The number is the design; the rule under each one is the
   grid showing through. */
.railnav { margin-top: 28px; }
.railnav a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--c-rule-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
}
.railnav a:last-child { border-bottom: 1px solid var(--c-rule-soft); }
.railnav a i {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-style: normal;
  letter-spacing: var(--ls-mono);
  color: var(--c-mute);
}
.railnav a:hover { color: var(--c-red); }
.railnav a:hover i { color: var(--c-red); }

/* Current page: a 3px red bar in the gutter. One signal, no fill, no bold. */
.railnav a[aria-current="page"] {
  position: relative;
  color: var(--c-red);
}
.railnav a[aria-current="page"] i { color: var(--c-red); }
.railnav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -1px;
  bottom: 0;
  width: 3px;
  background: var(--c-red);
}

/* Hours pinned to the bottom of the rail, per the brief. */
.rail__foot { margin-top: auto; padding-top: 24px; }
.rail__hours {
  border-top: 1px solid var(--c-rule);
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.9;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.rail__hours div { display: flex; justify-content: space-between; gap: 8px; }
.rail__hours b { font-weight: 400; color: var(--c-ink); }
.rail__tel {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
}
.rail__tel:hover { color: var(--c-red); }

/* The agency colophon. D&J's own line, kept visually distinct from the demo
   tenant's details so nobody mistakes one for the other. */
.rail__by {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--c-rule-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.7;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.rail__by a { color: var(--c-ink); }
.rail__by a:hover { color: var(--c-red); }

.navtoggle { display: none; }

/* On desktop the drawer is not a drawer — `display: contents` dissolves the
   wrapper so the nav and the hours block become direct flex children of the
   rail. That is what lets `.rail__foot { margin-top: auto }` pin the hours to
   the bottom of the rail, as the brief asks, while the same markup still
   collapses into a real drawer under 1024px. */
.rail__drawer { display: contents; }


/* ══════════════════════════════════════ 05 · SHELL + SECTIONS ═══ */

.shell { margin-left: var(--rail-w); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-sm); }
.section--flush-top { padding-top: 0; }

/* Alternating band. The only surface change on the site. */
.well { background: var(--c-surface); }

/* Section head: a mono figure number, a rule, a title. Repeated exactly on
   every section of every page — the repetition IS the system. */
/* The gap that follows a section head belongs to the head itself, not to its
   top row. `.g12` has no row-gap, so two stacked `.c-full` cells touch — and
   without this margin the first rule of the reviews grid draws straight
   through the descenders of the heading above it. */
.sechead {
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
  margin-bottom: clamp(26px, 4vw, 46px);
}
.sechead__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sechead__title { margin-top: clamp(18px, 3vw, 32px); }
.sechead .lede { margin-top: 18px; }

/* Page head for the inner pages: the title fills the top of the page with a
   red rule under it, no photograph. */
.pagehead { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(28px, 4vw, 48px); }
.pagehead__title { margin-top: 16px; }
.pagehead .lede { margin-top: 22px; }
.pagehead .rule--red { margin-top: clamp(28px, 4vw, 44px); }

.stack-sm > * + * { margin-top: 12px; }
.stack   > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: clamp(28px, 4vw, 44px); }


/* ══════════════════════════════════════════════════ 06 · HERO ═══ */

/* No photograph above the fold. Four lines of type and one red rule. */
.hero {
  min-height: calc(100svh - var(--bar-h, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 9vh, 104px);
}
.hero__statement {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.hero__statement span { display: block; }
.hero__statement .ln-red { color: var(--c-red); }
.hero .rule--red { margin-top: clamp(28px, 4vw, 44px); }
.hero__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  align-items: baseline;
}
.hero__foot { margin-top: clamp(32px, 5vw, 56px); }

/* The one image, below the fold, in columns 8–12. */
.hero__figure { margin-top: 0; }


/* ════════════════════════ 07 · SERVICE INDEX + HOVER PANEL ═══ */

/* A list, not cards. Each row is Nº / name / duration / price, ruled top and
   bottom. Hovering or focusing a row swaps the image in the fixed panel. */
.index__rows { border-top: 1px solid var(--c-rule); }

.svc {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 6.5rem 5rem;
  align-items: baseline;
  gap: 0 var(--gutter);
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--c-rule);
  letter-spacing: 0;
}
.svc__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--c-mute);
}
/* The rows are <a> elements, so every child is inline by default. Name and
   description have to be told to stack — without this they run together on
   one line and the index reads as a paragraph instead of a list. */
.svc__body { display: block; }
.svc__name {
  display: block;
  font-size: clamp(1.125rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--ls-h);
}
.svc__desc {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-mute);
  max-width: 46ch;
}
.svc__time,
.svc__price {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: var(--ls-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-ink);
}
.svc__time { color: var(--c-mute); }

.svc:hover .svc__name,
.svc:focus-visible .svc__name,
.svc.is-active .svc__name { color: var(--c-red); }
.svc:hover .svc__no,
.svc.is-active .svc__no { color: var(--c-red); }

/* The panel. Pinned in columns 9–12, sticky through the list. */
.index__panel { position: sticky; top: calc(var(--bar-h, 0px) + 32px); align-self: start; }
.panel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--c-rule);
  background: var(--c-ink-wash);
}
.panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  opacity: 0;
  /* A HARD CUT. No transition, no easing — this is changing a slide, not
     animating one. Do not add a fade here; it is the point of the design. */
  transition: none;
}
.panel__img.is-on { opacity: 1; }
.panel__cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.panel__cap b { font-weight: 400; color: var(--c-ink); }


/* ═══════════════════════════════════════ 08 · PRICE COLUMNS ═══ */

/* A strict monospace column set, right-aligned, ruled. Tabular figures so
   every price stacks on the decimal without any per-row nudging. */
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices caption {
  text-align: left;
  padding-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.prices th, .prices td {
  padding: 13px 0;
  border-bottom: 1px solid var(--c-rule-soft);
  text-align: left;
  vertical-align: baseline;
}
.prices thead th {
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.prices tbody th { font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; }
.prices tbody th small { display: block; margin-top: 3px; font-size: var(--fs-small); font-weight: 400; color: var(--c-mute); }
.prices .num {
  width: 7rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: var(--ls-mono);
}
.prices .num--time { color: var(--c-mute); }
.prices tbody tr:last-child th,
.prices tbody tr:last-child td { border-bottom: 1px solid var(--c-rule); }


/* ═══════════════════════════════════════════════ 09 · GALLERY ═══ */

/* Rigid. Four columns, 4px gaps, every image the same 1:1 crop, a mono
   figure number under each. Uniformity is the point — resist the urge to
   feature one image larger. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.gallery figure { margin: 0; }
.gallery .ph-box { border: 1px solid var(--c-rule-soft); }
/* Stacked, not spread. With only a 4px gutter between tiles, a caption laid
   out `space-between` pushes its two halves to the tile edges and they touch
   the neighbouring caption — the number of one plate reads as part of the
   description of the last. Two lines, left-aligned, like a museum plate. */
.gallery figcaption {
  display: block;
  padding: 6px 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.gallery figcaption b { display: block; font-weight: 400; color: var(--c-ink); }
.gallery figcaption span { display: block; }

/* Clicking a tile opens it full-width in place — no lightbox, no overlay. */
.gallery__tile { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.gallery figure.is-open { grid-column: 1 / -1; }
.gallery figure.is-open .ph-box { aspect-ratio: 16 / 9; }
.gallery figure.is-open .gallery__tile { cursor: zoom-out; }
.gallery figure.is-open figcaption b { color: var(--c-red); }


/* ═══════════════════════════════════════════════ 10 · REVIEWS ═══ */

/* Three columns of justified body text with a red hanging quote mark, set
   like a magazine. `hyphens: auto` because justified text without hyphenation
   opens rivers — the whole reason justification looks amateur on the web. */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
/* Grid items stretch to equal height, so pushing the attribution down with
   `margin-top: auto` lands all three on one baseline however uneven the
   quotes above them are. */
.review {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-rule);
  padding-top: 18px;
}
.review__body {
  position: relative;
  padding-left: 1.4em;
  text-align: justify;
  hyphens: auto;
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--c-ink-soft);
}
.review__body::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.06em;
  font-size: 2.4em;
  line-height: 1;
  font-weight: 800;
  color: var(--c-red);
}
.well .review__body::before { color: var(--c-red-ink); }
.review__by { margin-top: auto; padding-top: 16px; }


/* ═════════════════════════════════════════════════ 11 · FORMS ═══ */

.field { display: block; }
.field + .field { margin-top: 18px; }
.field > span {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--c-canvas);
  /* --c-rule-ui, not the decorative hairline: WCAG 1.4.11 wants 3:1 on the
     edge that tells you a control is a control. */
  border: 1px solid var(--c-rule-ui);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  letter-spacing: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--c-red); outline-offset: 0; border-color: var(--c-red); }
.field__hint { margin-top: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--c-ink); color: var(--c-on-ink); }
.btn--red { background: var(--c-red); border-color: var(--c-red); color: var(--c-on-ink); }
.btn--red:hover, .btn--red:focus-visible { background: var(--c-red-deep); border-color: var(--c-red-deep); color: var(--c-on-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Key/value list used for address, hours and the D&J colophon. */
.deflist { border-top: 1px solid var(--c-rule); }
.deflist div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--gutter);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule-soft);
}
.deflist dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-mute);
}
.deflist dd { font-size: var(--fs-small); letter-spacing: 0; }
.deflist dd b { font-weight: 600; }


/* ════════════════════════════════════════════════ 12 · FOOTER ═══ */

.foot { border-top: 3px solid var(--c-red); padding-block: clamp(36px, 5vw, 60px); }
.foot__cols { row-gap: 32px; }
.foot h2 { margin-bottom: 12px; }
.foot__list li { padding: 7px 0; border-bottom: 1px solid var(--c-rule-soft); font-size: var(--fs-small); letter-spacing: 0; }
.foot__list a:hover { color: var(--c-red); }
.foot__bar {
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}

/* The D&J block. Kept visually separate from the demo tenant's details so a
   viewer never confuses the agency's real phone with the sample salon's. */
.colophon { display: flex; align-items: flex-start; gap: 16px; padding-top: 4px; }
.colophon img { width: 46px; height: auto; flex: none; }
.colophon__tel {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: var(--ls-h);
}
.colophon__tel:hover { color: var(--c-red); }


/* ══════════════════════════════════ 13 · GRID OVERLAY (press G) ═══ */

/* The easter egg. A translucent red 12-column overlay that proves the layout
   is real — every element on every page lands on these columns. Designers
   check this; it is why it exists. Toggled with the G key, see main.js. */
.gridoverlay {
  position: fixed;
  inset: 0 0 0 var(--rail-w);
  z-index: 200;
  pointer-events: none;
}
.gridoverlay[hidden] { display: none; }
.gridoverlay__in {
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.gridoverlay__in span { background: var(--c-red-wash); box-shadow: inset 1px 0 0 var(--c-red-edge), inset -1px 0 0 var(--c-red-edge); }

.gridflag {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 201;
  padding: 7px 11px;
  background: var(--c-red);
  color: var(--c-on-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  pointer-events: none;
}
.gridflag[hidden] { display: none; }


/* ══════════════════════════════════════════════ 14 · REVEAL ═══ */

/* Almost no motion, by design. Rules draw left-to-right on reveal; nothing
   fades, nothing slides, nothing lifts on hover. */
.js-ready .draw { transform: scaleX(0); transform-origin: left center; }
.js-ready .draw.is-in,
.reveal-fallback .draw { transform: scaleX(1); transition: transform var(--dur) var(--ease); }

.js-ready .fade { opacity: 0; }
.js-ready .fade.is-in,
.reveal-fallback .fade { opacity: 1; transition: opacity var(--dur) var(--ease); }


/* ═════════════════════════════════════════ 15 · RESPONSIVE ═══ */

@media (max-width: 1180px) {
  .svc { grid-template-columns: 3rem minmax(0, 1fr) 5.5rem 4.5rem; }
}

/* Under 1024px the rail collapses to a top bar and the 12 columns collapse
   to one. A 12-column grid on a 390px phone is a lie; do not fake it. */
@media (max-width: 1024px) {
  .rail {
    position: sticky;
    inset: 0 auto auto 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px var(--pad-x);
    border-right: 0;
    border-bottom: 1px solid var(--c-rule);
  }
  .brandmark { display: flex; align-items: center; gap: 12px; }
  .brandmark__mark { width: 38px; }
  .brandmark__caption { margin-top: 0; }
  .rail__wordmark {
    margin: 0 auto 0 0;
    padding: 0 0 0 16px;
    border-top: 0;
    border-left: 1px solid var(--c-rule);
    font-size: .9375rem;
  }
  .rail__wordmark .label { display: none; }

  .navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--c-canvas);
    border: 1px solid var(--c-ink);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    cursor: pointer;
  }
  .navtoggle[aria-expanded="true"] { background: var(--c-ink); color: var(--c-on-ink); }

  /* The drawer. Full width under the bar, still numbered, still ruled. */
  .rail__drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 4px var(--pad-x) 20px;
    background: var(--c-canvas);
    border-bottom: 1px solid var(--c-rule);
  }
  .rail__drawer.is-open { display: block; }
  .railnav { margin-top: 0; }
  .railnav a { padding: 14px 0; font-size: 1rem; }
  .railnav a[aria-current="page"]::before { left: calc(var(--pad-x) * -1); width: 4px; }
  .rail__foot { margin-top: 0; padding-top: 18px; }
  .rail__hours { line-height: 2.1; }

  .shell { margin-left: 0; }
  .gridoverlay { inset: 0; }

  .c-1-4, .c-1-5, .c-1-6, .c-1-7, .c-1-8,
  .c-5-12, .c-6-12, .c-7-12, .c-8-12, .c-9-12 { grid-column: 1 / -1; }

  .g12 > * + .c-full,
  .g12 > .c-1-4 + *, .g12 > .c-1-5 + *, .g12 > .c-1-6 + *,
  .g12 > .c-1-7 + *, .g12 > .c-1-8 + * { margin-top: 32px; }

  /* The sticky panel becomes a plain figure above the list — a panel that
     follows you on a phone is just an image that will not go away. */
  .index__panel { position: static; margin-bottom: 28px; }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* Below 560px the bar has to carry the mark, the wordmark and the toggle on
   one line. The mono colophon is the thing that gives: it wraps to two or
   three lines and doubles the bar height. The mark stays, and the full
   "built by" credit is still in the drawer and in the footer. */
@media (max-width: 560px) {
  .brandmark__caption { display: none; }
  .rail__wordmark { font-size: 0.875rem; padding-left: 14px; }
}

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews { grid-template-columns: minmax(0, 1fr); }
  .review__body { text-align: left; hyphens: manual; }
  .deflist div { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* Four columns of Nº / name / time / price will not fit. Drop to two rows
     rather than shrinking the type below readable. */
  .svc { grid-template-columns: 2.75rem minmax(0, 1fr) auto; row-gap: 6px; }
  .svc__time { grid-column: 2 / 3; text-align: left; }
  .svc__price { grid-row: 1; grid-column: 3 / 4; }

  .prices .num { width: 4.75rem; }
  .prices caption { padding-bottom: 10px; }
  .hero { min-height: auto; padding-block: clamp(40px, 12vh, 72px); }
}

/* On the narrowest phones the price columns get tight — but the duration is
   the single most useful number on the page ("can I fit this in at lunch?"),
   so it is the last thing to go. Shrink the figure columns and drop the mono
   tracking instead of dropping the column. */
@media (max-width: 420px) {
  .prices .num { width: 4.25rem; letter-spacing: 0.03em; }
  .prices tbody th { font-size: 0.9375rem; }
  .prices th, .prices td { padding: 11px 0; }
}


/* ═════════════════════════════════════ 16 · REDUCED MOTION ═══ */

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


/* ═══════════════════════════════════════════════════ 17 · PRINT ═══ */

@media print {
  .rail, .gridoverlay, .gridflag, .skip-link { display: none !important; }
  .shell { margin-left: 0; }
  .ph { filter: grayscale(1); }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}