/* ==========================================================================
   MAIN  —  D&J GROUP LLC  ·  NAIL SALON TEMPLATE 07  ·  "SOFTBOX"
   --------------------------------------------------------------------------
   Layout and components. THIS FILE CONTAINS NO COLOUR VALUES — every colour,
   radius, shadow, duration and type size comes from tokens.css. That is what
   makes a rebrand six edits instead of an afternoon, and it is enforced, not
   aspirational: if you are about to type a "#" in here, add a token instead.

   Reading order matches the page: reset → type → layout → controls → header
   → bento hero → sections → footer → responsive.
   ========================================================================== */

/* ═════════════════════════════════════════════════════════ 1 · RESET ═══ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Author `display` rules outrank the UA's [hidden] rule, and several things
   here (buttons, the saved counter) are hidden from JavaScript with the
   attribute. Restate it once, with force, so `el.hidden = true` always works. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h);
  color: var(--c-ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0; }
p + p { margin-top: 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--c-lilac); color: var(--c-surface); }

/* Focus. Always visible, always the brand colour, never removed. On the dark
   footer and the ink CTA panel it flips to the light lilac so it still reads. */
:focus-visible {
  outline: 3px solid var(--c-lilac);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.site-foot :focus-visible,
.cta-panel :focus-visible,
.callbar :focus-visible { outline-color: var(--c-lilac-lt); }

/* Elements the script focuses to move a screen reader along — a step heading,
   the request summary, the gallery viewer. They are not in the tab order, so
   there is no keyboard focus to make visible, and a ring around a whole panel
   nobody tabbed to just reads as a rendering fault. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  padding: .85rem 1.4rem;
  background: var(--c-lilac); color: var(--c-surface);
  font-weight: 600; font-size: var(--fs-small);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lift);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ════════════════════════════════════════════════════════ 2 · TYPE ════ */

/* Instrument Serif appears exactly twice on this site: the hero headline and
   the section eyebrows. That is the whole serif budget — spending it a third
   time is what turns a system into a mood board. */
.serif  { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; }
.ital   { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

.lede {
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.6;
  text-wrap: pretty;
}
.fine  { font-size: var(--fs-fine);  color: var(--c-ink-mute); line-height: 1.55; }
.small { font-size: var(--fs-small); color: var(--c-ink-mute); }
.center { text-align: center; }

/* The eyebrow. Serif italic, sentence case, with a small peach dot — the one
   place the second accent shows up as type furniture rather than a fill. */
.label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .85rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.2;
  color: var(--c-lilac-ink);
}
.label::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-radius: var(--r-pill);
  background: var(--c-peach);
}
.label--center { justify-content: center; }
.label--ink { color: var(--c-lilac-lt); }

.prose > * + * { margin-top: 1.1rem; }
.prose p { color: var(--c-ink-soft); }
.prose a:not(.btn):not(.arrow-link),
.link {
  color: var(--c-lilac-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-lilac-edge);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:not(.btn):not(.arrow-link):hover,
.link:hover { text-decoration-color: var(--c-lilac); }

/* The honesty ribbon. Everything invented on this demo — prices, reviews,
   unverified claims — wears one, and CLIENT-SETUP.md says to delete them only
   once the real thing is in place. */
.placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: var(--c-warn-wash);
  color: var(--c-warn);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}
.placeholder-tag::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: var(--r-pill);
  background: var(--c-warn);
}

/* ══════════════════════════════════════════════════════ 3 · LAYOUT ════ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide   { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .58); }
.section--flush-top { padding-top: 0; }

/* A section that sits on a soft well rather than the canvas. Rounded, inset
   from the page edges — it reads as another card in the same system. */
.section--well > .wrap { position: relative; }
.well {
  background: var(--c-sunk);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

.shead { max-width: 54ch; margin-bottom: clamp(1.75rem, 3.4vw, 2.75rem); }
.shead h2 + p { margin-top: .9rem; }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .label { justify-content: center; }
.shead--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  max-width: none;
}
.shead--split > :last-child { padding-bottom: .35rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.35rem); }
.stack-sm > * + * { margin-top: .7rem; }
.stack    > * + * { margin-top: 1.4rem; }

/* ════════════════════════════════════════════════════ 4 · CONTROLS ═══ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-edge: var(--c-line-strong);
  --btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--btn-edge);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-align: center;
  transition:
    transform var(--dur-fast) var(--spring),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--c-lilac);
  --btn-fg: var(--c-surface);
  --btn-edge: var(--c-lilac);
  --btn-shadow: var(--shadow-lilac);
}
.btn--primary:hover { --btn-bg: var(--c-lilac-deep); --btn-edge: var(--c-lilac-deep); }

.btn--soft {
  --btn-bg: var(--c-surface);
  --btn-edge: var(--c-line-soft);
  --btn-shadow: var(--shadow-sm);
}
.btn--soft:hover { --btn-edge: var(--c-line-strong); --btn-shadow: var(--shadow); }

.btn--ghost:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-surface); --btn-edge: var(--c-ink); }

.btn--onink {
  --btn-fg: var(--c-on-ink);
  --btn-edge: var(--c-line-ink);
}
.btn--onink:hover { --btn-bg: var(--c-surface); --btn-fg: var(--c-ink); --btn-edge: var(--c-surface); }

.btn--sm { padding: .6rem 1.1rem; font-size: var(--fs-fine); }
.btn--lg { padding: 1.02rem 1.9rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--arrow svg { transition: transform var(--dur-fast) var(--ease); }
.btn--arrow:hover svg { transform: translateX(4px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.btn-row--center { justify-content: center; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-lilac-ink);
  transition: gap var(--dur-fast) var(--ease);
}
.arrow-link:hover { gap: .8rem; }
.arrow-link svg { width: 1.05em; height: 1.05em; }

/* Small pill used for prices, counts and tags. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: var(--r-xs);
  background: var(--c-sunk);
  border: 1px solid var(--c-line);
  font-size: var(--fs-fine);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  white-space: nowrap;
}
.chip--lilac { background: var(--c-lilac-wash); border-color: var(--c-lilac-edge); color: var(--c-lilac-ink); }
.chip--peach { background: var(--c-peach-wash); border-color: var(--c-peach-edge); color: var(--c-peach-ink); }

/* ══════════════════════════════════════════════ 5 · THE PHOTO ═════════ */

/* Every photograph on the site goes through .ph. The grade is a token and is
   currently `none` — this design is high-key and true colour on purpose.
   The inside hairline is not decoration: half of these images are white or
   pastel and would otherwise dissolve into the white card behind them. */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--c-photo-bed);
  isolation: isolate;
}
.ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  transition: transform var(--dur) var(--ease-out);
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c-photo-edge);
  pointer-events: none;
}
.ph--sm  { border-radius: var(--r-sm); }
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--16x9{ aspect-ratio: 16 / 9; }

/* ═══════════════════════════════════════════ 6 · HEADER (PILL NAV) ════ */

/* A floating pill, centred, that shrinks when you scroll. It is fixed, so
   every page gets `padding-top: var(--head-h)` on <main> to compensate. */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.15rem var(--gutter) 0;
  pointer-events: none;
  transition: padding-top var(--dur) var(--ease);
}
.site-head > .wrap { pointer-events: none; padding-inline: 0; }

.navpill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .5rem .5rem .75rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-pill);
  transition:
    padding var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

/* Once you are past the fold the pill tightens, goes translucent and lets the
   page show through it. */
.site-head.is-stuck { padding-top: .6rem; }
.site-head.is-stuck .navpill {
  padding-block: .35rem;
  background: color-mix(in srgb, var(--c-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--shadow-lift);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-head.is-stuck .navpill { background: var(--c-surface); }
}

/* --- the brand lockup ------------------------------------------------- */

.brandmark { display: inline-flex; align-items: center; gap: .6rem; }

/* THE LOGO TREATMENT. The D&J mark is treated as a product app icon: a
   rounded square tile with the same two-layer shadow as every card on the
   site. The tile is dark rather than white because the mark is bright
   yellow — see CREDITS.md — and this is the one place on a white-card site
   where inverting is the right answer. Swap --tile-bg for a light brand
   colour if the client's logo is dark. */
.brandmark__tile {
  --tile-size: 40px;
  width: var(--tile-size);
  height: var(--tile-size);
  flex: none;
  display: grid;
  place-items: center;
  /* calc, not a percentage: percentage padding resolves against the
     CONTAINING BLOCK's width, not this element's, so `padding: 16%` here
     measured 16% of the whole brand lockup and squeezed the mark to nothing. */
  padding: calc(var(--tile-size) * .17);
  border-radius: calc(var(--tile-size) * .3);
  background: var(--c-ink-surface);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--c-line-ink);
  transition: transform var(--dur-fast) var(--spring);
}
.brandmark:hover .brandmark__tile { transform: rotate(-4deg) scale(1.04); }
.brandmark__tile img { width: 100%; height: auto; }

.brandmark__text { display: grid; line-height: 1.15; white-space: nowrap; }
.brandmark__name {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-ink);
}
.brandmark__tag {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--c-ink-mute);
  letter-spacing: -.005em;
}

/* --- links ------------------------------------------------------------ */

.mainnav {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}
.navlink {
  padding: .55rem .85rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-soft);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.navlink:hover { background: var(--c-sunk); color: var(--c-ink); }
.navlink[aria-current="page"] {
  background: var(--c-lilac-wash);
  color: var(--c-lilac-ink);
}

.head-phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.head-phone svg { width: 15px; height: 15px; flex: none; }
.head-phone:hover { background: var(--c-sunk); color: var(--c-lilac-ink); }

.navtoggle {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  place-items: center;
}
.navtoggle span {
  display: block;
  width: 17px; height: 1.7px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.navtoggle span + span { margin-top: 4px; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════ 7 · BENTO HERO ════ */

.hero {
  padding-top: calc(var(--head-h) + clamp(1rem, 3vw, 2.25rem));
  padding-bottom: clamp(.5rem, 1.5vw, 1rem);
  position: relative;
}
/* Two very soft colour fields behind the bento. They are the only gradients
   on the site and they never sit under text. */
.hero::before {
  content: "";
  position: absolute;
  top: -14vh; left: 50%;
  width: min(1500px, 130vw); height: 90vh;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 40% at 22% 24%, var(--c-lilac-wash), transparent 70%),
    radial-gradient(40% 38% at 82% 12%, var(--c-peach-wash), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--spring),
    box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
a.tile:hover,
.tile--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.tile__k {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.tile__v {
  margin-top: auto;
  font-size: var(--fs-num);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tile__note { margin-top: .35rem; font-size: var(--fs-fine); color: var(--c-ink-mute); }

/* --- the six tiles ---------------------------------------------------- */

.tile--head {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: center;
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  background-image: var(--dots);
  background-position: right -6px bottom -6px;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--c-lilac-ink); }
.hero__lede { margin-top: 1.1rem; max-width: 40ch; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin-top: 1.5rem;
}

/* The two media tiles are positioned OUT of the height calculation: their
   photograph is absolute, so the bento's row heights are set by the tiles
   that hold text and the pictures simply fill whatever is left. Without
   this, a 760x760 photo in a 300px column forces a 300px row and the text
   tile beside it ends up mostly empty space. */
.tile--photo,
.tile--ig { padding: 0; border: 0; }
.tile--photo .ph,
.tile--ig .ph { position: absolute; inset: 0; border-radius: var(--r-card); }
.tile--photo .ph img,
.tile--ig .ph img { height: 100%; }

.tile--photo { grid-row: span 2; min-height: 260px; }

.status__dot {
  width: 8px; height: 8px; flex: none;
  border-radius: var(--r-pill);
  background: var(--c-ink-mute);
}
.is-open  .status__dot { background: var(--c-open); box-shadow: 0 0 0 4px var(--c-open-wash); }
.is-closed .status__dot { background: var(--c-closed); }

/* The two single-cell tiles are half the height of the headline tile beside
   them and carry three short lines. Pinning the value to the bottom the way
   the wide tiles do leaves a hole, so these centre their block instead. */
.tile--status,
.tile--rating { justify-content: center; gap: .1rem; }
.tile--status .tile__k,
.tile--rating .tile__k { margin-bottom: .9rem; }
.tile--status .tile__v,
.tile--rating .tile__v { margin-top: 0; }
.tile--status .tile__v { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.03em; }
.tile--rating .tile__note { margin-top: .7rem; }

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: var(--c-peach); }

.tile--ig { grid-column: span 2; min-height: 150px; }
.tile--ig .tile__badge {
  position: absolute;
  left: .9rem; bottom: .9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line-soft);
  font-size: var(--fs-fine);
  font-weight: 700;
  color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .tile--ig .tile__badge { background: var(--c-surface); }
}
.tile--ig .tile__badge svg { width: 16px; height: 16px; }

.tile--price { grid-column: span 2; }
.tile--price .tile__v { display: flex; align-items: baseline; gap: .4rem; }
.tile--price .tile__v em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .5em;
  font-weight: 400;
  color: var(--c-ink-mute);
  letter-spacing: 0;
}
.tile--price .tile__note,
.tile--status .tile__note { margin-top: .5rem; }

/* --- the trust strip under the bento ---------------------------------- */

.creds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.creds li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-fine);
  color: var(--c-ink-soft);
  box-shadow: var(--shadow-sm);
}
.creds svg { width: 17px; height: 17px; flex: none; color: var(--c-lilac); }
.creds b { color: var(--c-ink); font-weight: 700; }

/* ═══════════════════════════════════════════════ 8 · SERVICE TILES ════ */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.svc {
  align-items: flex-start;
  gap: .1rem;
  padding: clamp(1.3rem, 2vw, 1.75rem);
}
.svc__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border-radius: var(--r-sm);
  background: var(--c-lilac-wash);
  color: var(--c-lilac-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.svc__icon svg { width: 24px; height: 24px; }
.svc:hover .svc__icon { background: var(--c-lilac); color: var(--c-surface); }
.svc h3 { margin-bottom: .4rem; }
.svc p { font-size: var(--fs-small); color: var(--c-ink-mute); }
.svc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line-soft);
}
.svc__more {
  font-size: var(--fs-fine);
  font-weight: 600;
  color: var(--c-lilac-ink);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap var(--dur-fast) var(--ease);
}
.svc:hover .svc__more { gap: .6rem; }
.svc__more svg { width: 14px; height: 14px; }

/* ═════════════════════════════════════════════════════ 9 · STEPS ══════ */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; }
.step {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: .9rem;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: var(--fs-fine);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.step p { font-size: var(--fs-small); color: var(--c-ink-mute); }

/* ═════════════════════════════════════════ 10 · PRICING TOGGLE ════════ */

.pricing-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Segmented control. The thumb is a real element that slides — animating a
   background-position or swapping a class on two buttons both look cheap by
   comparison, and this stays keyboard-operable as two real buttons. */
.segmented {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--c-sunk);
  border: 1px solid var(--c-line);
}
.segmented__thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: 50%;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--spring);
  pointer-events: none;
}
.segmented[data-plan="deluxe"] .segmented__thumb { transform: translateX(100%); }
.segmented button {
  position: relative;
  z-index: 1;
  min-width: 8.5rem;
  padding: .6rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-mute);
  transition: color var(--dur-fast) var(--ease);
}
.segmented button[aria-pressed="true"] { color: var(--c-ink); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.plan { padding: clamp(1.4rem, 2.2vw, 2rem); }
.plan--featured {
  border-color: var(--c-lilac-edge);
  box-shadow: var(--shadow-lift), 0 0 0 4px var(--c-lilac-ring);
}
.plan__flag {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  padding: .25rem .65rem;
  border-radius: var(--r-pill);
  background: var(--c-lilac);
  color: var(--c-surface);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .01em;
}
.plan h3 { font-size: 1.15rem; }
.plan__sub { margin-top: .3rem; font-size: var(--fs-small); color: var(--c-ink-mute); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: 1.2rem 0 .2rem;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  transition: opacity .2s var(--ease);
}
.plan__price small { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-mute); letter-spacing: 0; }
.is-swapping .plan__price { opacity: 0; }
.plan__dur { font-size: var(--fs-fine); color: var(--c-ink-mute); }
.plan ul {
  margin: 1.35rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--c-line-soft);
  display: grid;
  gap: .6rem;
}
.plan li {
  display: flex;
  gap: .6rem;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.plan li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--c-lilac); }
.plan .btn { margin-top: 1.5rem; }

/* --- the full price menu (pricing.html) ------------------------------- */

.menu-group + .menu-group { margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.menu-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.menu-group__head p { font-size: var(--fs-small); color: var(--c-ink-mute); max-width: 46ch; }

.menu-list {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .5rem 1.25rem;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.6rem);
  transition: background var(--dur-fast) var(--ease);
}
.menu-row + .menu-row { border-top: 1px solid var(--c-line-soft); }
.menu-row:hover { background: var(--c-sunk); }
.menu-row__name { font-weight: 700; letter-spacing: -.015em; }
.menu-row__desc {
  grid-column: 1 / -1;
  margin-top: .2rem;
  font-size: var(--fs-small);
  color: var(--c-ink-mute);
  max-width: 62ch;
}
.menu-row__dur {
  font-size: var(--fs-fine);
  color: var(--c-ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-row__price {
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 4.5rem;
  text-align: right;
}

/* Add-on chips */
.addons { display: flex; flex-wrap: wrap; gap: .6rem; }
.addon {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: .65rem 1rem;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-small);
}
.addon b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-lilac-ink); }

/* ═══════════════════════════════════════════════════ 11 · GALLERY ═════ */

.gal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}
.filter {
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  font-size: var(--fs-fine);
  font-weight: 600;
  color: var(--c-ink-soft);
  transition: all var(--dur-fast) var(--ease);
}
.filter:hover { background: var(--c-surface); }
.filter[aria-pressed="true"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-surface);
}
.gal-bar__count {
  margin-left: auto;
  font-size: var(--fs-fine);
  color: var(--c-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* True masonry via CSS columns. Cards never break across a column, and the
   grid ships fully visible so a non-JS visitor sees every photograph. */
.masonry { columns: 4; column-gap: var(--gap); }
.masonry > * { break-inside: avoid; margin-bottom: var(--gap); }

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: left;
  transition:
    transform var(--dur-fast) var(--spring),
    box-shadow var(--dur-fast) var(--ease);
}
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.shot .ph { border-radius: 0; }
.shot:hover .ph img,
.shot:hover .shot__open img { transform: scale(1.035); }

/* The picture is its own button. <button> may only contain phrasing content,
   so an <img> goes in directly — no <figure> wrapper, which would be invalid
   even though browsers tolerate it. */
.shot__open {
  display: block;
  width: 100%;
  background: var(--c-photo-bed);
  overflow: hidden;
}
.shot__open img {
  width: 100%; height: auto;
  filter: var(--photo-grade);
  transition: transform var(--dur) var(--ease-out);
}

.shot__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .8rem 1rem .85rem;
}
.shot__name { display: block; font-size: var(--fs-small); font-weight: 700; letter-spacing: -.015em; }
.shot__cat  { display: block; font-size: var(--fs-label); color: var(--c-ink-mute); letter-spacing: .04em; text-transform: uppercase; }
.shot.is-hidden { display: none; }

/* The save button. It is a local bookmark, not a public like count — see
   README. It stores to localStorage and nothing leaves the browser. */
.heart {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--c-ink-mute);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.heart:hover { background: var(--c-peach-wash); color: var(--c-peach-ink); }
.heart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.heart[aria-pressed="true"] { color: var(--c-peach-ink); }
.heart[aria-pressed="true"] svg { fill: var(--c-peach); stroke: var(--c-peach-ink); }

/* The inline viewer. Not a modal: no overlay, no scroll lock, no focus trap
   to get wrong. It opens in the flow of the page above the grid. */
.viewer {
  display: none;
  position: relative;
  margin-bottom: var(--gap);
  padding: clamp(.6rem, 1.2vw, .9rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
.viewer.is-open { display: block; }
.viewer .ph { max-height: min(66vh, 620px); }
.viewer .ph img { max-height: min(66vh, 620px); object-fit: contain; background: var(--c-photo-bed); }
.viewer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .9rem .5rem .3rem;
}
.viewer__name { font-weight: 700; letter-spacing: -.02em; }
.viewer__cat { font-size: var(--fs-fine); color: var(--c-ink-mute); }
.viewer__nav { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.viewer__count { font-size: var(--fs-fine); color: var(--c-ink-mute); font-variant-numeric: tabular-nums; padding-inline: .35rem; }
.iconbtn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.iconbtn:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.iconbtn svg { width: 17px; height: 17px; }

.empty-state {
  display: none;
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--c-ink-mute);
}
.empty-state.is-shown { display: block; }
.empty-state b { display: block; color: var(--c-ink); font-size: 1.1rem; margin-bottom: .4rem; }

/* ═══════════════════════════════════════════════════ 12 · REVIEWS ═════ */

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.review { padding: clamp(1.3rem, 2vw, 1.7rem); }
.review__who { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--c-lilac-wash);
  color: var(--c-lilac-ink);
  font-size: var(--fs-fine);
  font-weight: 800;
  letter-spacing: -.02em;
}
.avatar--peach { background: var(--c-peach-wash); color: var(--c-peach-ink); }
.review__name { display: block; font-size: var(--fs-small); font-weight: 700; line-height: 1.25; }
.review__meta { display: block; font-size: var(--fs-label); color: var(--c-ink-mute); }
.review p { font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: .7rem; }
.review .placeholder-tag { margin-bottom: .9rem; }

/* A ribbon is a label, not a banner. As a flex item in a column-direction
   card it would otherwise stretch the full width and read as a headline. */
.tile > .placeholder-tag,
.review > .placeholder-tag,
.review__who,
.review .stars { align-self: flex-start; }

/* ══════════════════════════════════════════════ 13 · BOOKING WIZARD ═══ */

.wizard {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wizard__head {
  padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.4vw, 2.1rem) 0;
}
.wizard__steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin-bottom: 1rem;
  font-size: var(--fs-fine);
  color: var(--c-ink-mute);
}
.wizard__steps li { display: inline-flex; align-items: center; gap: .45rem; }
.wizard__steps li::before {
  content: "";
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  font-size: 11px;
  font-weight: 700;
}
.wizard__steps li[data-done="true"]::before {
  content: "✓";
  background: var(--c-lilac);
  border-color: var(--c-lilac);
  color: var(--c-surface);
}
.wizard__steps li[aria-current="step"] { color: var(--c-ink); font-weight: 700; }
.wizard__steps li[aria-current="step"]::before { border-color: var(--c-lilac); border-width: 2px; }

.progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-sunk);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: var(--r-pill);
  background: var(--c-lilac);
  transition: width var(--dur) var(--ease-out);
}

/* A floor under the panel area so the card does not jump size between a
   six-option step and a two-field one. Only applies once it is stepped. */
.wizard__body { padding: clamp(1.25rem, 2.4vw, 2.1rem); }
.wizard.is-stepped .wizard__body { min-height: 23rem; }

/* Panels are VISIBLE by default and stack as one ordinary form. main.js adds
   .is-stepped, which is what turns them into steps. Do it the other way round
   and a visitor with JavaScript off gets a booking form with no fields in it. */
.panel + .panel {
  margin-top: 1.9rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--c-line-soft);
}
.wizard.is-stepped .panel { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
.wizard.is-stepped .panel.is-active { display: block; }
.panel > h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.panel > p.lede { margin-top: .5rem; margin-bottom: 1.5rem; }

/* Selectable option cards — a styled radio group, still real radios. */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .7rem; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option span {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
.option small { display: block; margin-top: .2rem; font-weight: 500; color: var(--c-ink-mute); font-size: var(--fs-fine); }
.option:hover span { border-color: var(--c-lilac); }
.option input:checked + span {
  border-color: var(--c-lilac);
  background: var(--c-lilac-wash);
  box-shadow: 0 0 0 3px var(--c-lilac-ring);
}
.option input:focus-visible + span { outline: 3px solid var(--c-lilac); outline-offset: 3px; }

/* Time slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; }
.slots .option span { text-align: center; padding: .7rem .5rem; font-variant-numeric: tabular-nums; }

.field { display: grid; gap: .4rem; }
.field + .field { margin-top: 1.05rem; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .req { color: var(--c-peach-ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-lilac);
  box-shadow: 0 0 0 3px var(--c-lilac-ring);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--c-closed); }
.field .hint { font-size: var(--fs-fine); color: var(--c-ink-mute); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem; }
.field-row + .field { margin-top: 1.05rem; }

.wizard__foot {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem clamp(1.25rem, 2.4vw, 2.1rem);
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-sunk);
}
.wizard__foot .btn:last-child { margin-left: auto; }
.wizard__foot .fine { margin-right: auto; max-width: 34ch; }

.summary {
  display: none;
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--c-lilac-edge);
  border-radius: var(--r-sm);
  background: var(--c-lilac-wash);
}
.summary.is-shown { display: block; }
.summary h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.summary pre {
  margin: .8rem 0 0;
  padding: 1rem;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: var(--fs-fine);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ═════════════════════════════════════════════ 14 · CARDS & LISTS ═════ */

.card {
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.card > h3 { margin-bottom: 1rem; }

.hours { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: .6rem 0; text-align: left; font-weight: 500; }
.hours th { color: var(--c-ink-soft); }
.hours td { text-align: right; color: var(--c-ink-mute); }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--c-line-soft); }
.hours .is-today th, .hours .is-today td { color: var(--c-lilac-ink); font-weight: 700; }
.hours .closed { color: var(--c-ink-mute); }

.contact-list { display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: .85rem; }
.contact-list .ico {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-sm);
  background: var(--c-sunk);
  color: var(--c-lilac-ink);
}
.contact-list .ico svg { width: 18px; height: 18px; }
.contact-list .k { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-mute); }
.contact-list .v { display: block; font-size: var(--fs-small); font-weight: 600; margin-top: .1rem; }
a.v:hover { color: var(--c-lilac-ink); }

.ticks { display: grid; gap: .65rem; }
.ticks li { display: flex; gap: .65rem; font-size: var(--fs-small); color: var(--c-ink-soft); }
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-lilac); }

.faq { display: grid; gap: .6rem; }
.faq details {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--c-ink-mute);
  border-bottom: 2px solid var(--c-ink-mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details > div {
  padding: 0 clamp(1.1rem, 2vw, 1.5rem) 1.25rem;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  max-width: 68ch;
}

/* Split section — copy one side, media the other. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.split--media-first .split__media { order: -1; }
/* Form left, supporting cards right — the form deserves the wider column. */
.split--aside {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr);
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.split__media { position: relative; }
.split__inset {
  position: absolute;
  right: -1.25rem; bottom: -1.75rem;
  width: 40%;
  max-width: 210px;
  border: 5px solid var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.stat { padding: 1.2rem 1.35rem; }
.stat b {
  display: block;
  font-size: var(--fs-num);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--c-lilac-ink);
}
.stat span { display: block; margin-top: .4rem; font-size: var(--fs-fine); color: var(--c-ink-mute); }

/* ═══════════════════════════════════════════════ 15 · PAGE HEADS ══════ */

/* Inner pages open typographically, not with a photograph — a landing-page
   convention, and it keeps every page under weight. */
.page-head {
  padding-top: calc(var(--head-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
.page-head::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(1400px, 130vw); height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(42% 46% at 30% 10%, var(--c-lilac-wash), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 1rem; max-width: 58ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.1rem;
  font-size: var(--fs-fine);
  color: var(--c-ink-mute);
}
.crumbs a:hover { color: var(--c-lilac-ink); }
.crumbs svg { width: 13px; height: 13px; opacity: .6; }

/* ═══════════════════════════════════════════════ 16 · CTA PANEL ═══════ */

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--r-lg);
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
  text-align: center;
}
.cta-panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 12% 0%, var(--c-lilac-glow), transparent 68%),
    radial-gradient(55% 80% at 92% 100%, var(--c-peach-wash), transparent 70%);
  pointer-events: none;
}
.cta-panel > * { position: relative; }
.cta-panel h2 { color: var(--c-on-ink); }
.cta-panel p { margin: 1rem auto 0; max-width: 52ch; color: var(--c-on-ink-mute); font-size: var(--fs-lede); }
.cta-panel .btn-row { justify-content: center; }
/* The photograph sits under the panel at low opacity as texture, not as an
   image. Anything above about .12 and it starts lifting the black, which
   costs the white type its contrast. */
.cta-panel__media {
  position: absolute;
  inset: 0;
  opacity: .085;
  z-index: 0;
}
.cta-panel__media img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════ 17 · FOOTER ══════ */

.site-foot {
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
}
.site-foot__panel {
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--r-lg);
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
}
/* .fine and .small default to a grey measured against the LIGHT canvas. On
   the ink panel that grey drops to about 2:1, so both are re-pointed here.
   Anything else that lands in the footer needs the same treatment. */
.site-foot .fine,
.site-foot .small,
.cta-panel .fine { color: var(--c-on-ink-mute); }

.site-foot h3 {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-mute);
  margin-bottom: .9rem;
  font-weight: 600;
}
.site-foot .brandmark__name { color: var(--c-on-ink); }
.site-foot .brandmark__tag  { color: var(--c-on-ink-mute); }
.site-foot .brandmark__tile { --tile-size: 52px; background: var(--c-ink-raised); }

.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.foot-blurb { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--c-on-ink-mute); max-width: 34ch; }
.foot-links { display: grid; gap: .55rem; font-size: var(--fs-small); }
.foot-links a { color: var(--c-on-ink-mute); transition: color var(--dur-fast) var(--ease); }
.foot-links a:hover { color: var(--c-on-ink); }

.social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-ink);
  color: var(--c-on-ink-mute);
  transition: all var(--dur-fast) var(--ease);
}
.social a:hover { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-surface); }
.social svg { width: 17px; height: 17px; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--c-line-ink);
  font-size: var(--fs-fine);
  color: var(--c-on-ink-mute);
}
.foot-base a { color: var(--c-lilac-lt); font-weight: 600; }
.foot-base a:hover { color: var(--c-on-ink); }

/* ═══════════════════════════════════════════════ 18 · MOBILE BAR ══════ */

.callbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  gap: .5rem;
  padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
}
.callbar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  font-size: var(--fs-small);
  font-weight: 700;
}
.callbar a.is-primary { background: var(--c-lilac); border-color: var(--c-lilac); color: var(--c-surface); }
.callbar svg { width: 17px; height: 17px; }

/* ══════════════════════════════════════════════════ 19 · REVEAL ═══════ */

/* Only applied once JS has confirmed it is running (html.js-ready). If
   main.js never loads, a 3-second failsafe in each page's <head> adds
   .reveal-fallback and everything shows anyway. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .6s var(--ease-out) var(--d, 0s),
    transform .6s var(--ease-out) var(--d, 0s);
}
.js-ready .reveal.is-in,
.reveal-fallback .reveal { opacity: 1; transform: none; }

/* The bento staggers in 40ms apart. The delay is set inline as --d on each
   tile in the markup, so the running order is visible where the tiles are
   rather than hidden in a loop somewhere in main.js. */

/* ══════════════════════════════════════════════ 20 · RESPONSIVE ═══════ */

@media (max-width: 1180px) {
  .brandmark__tag { display: none; }
  .navlink { padding-inline: .7rem; }
}

@media (max-width: 1080px) {
  .head-phone { display: none; }
  .masonry { columns: 3; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  /* Two columns, and the tiles re-flow to fill exactly ten cells: head (2),
     photo (2), status + rating (1 each), price (2), Instagram (2). Leave the
     photo at one column and the rating ends up beside an empty cell. */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--head  { grid-column: 1 / -1; grid-row: auto; }
  .tile--photo { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .tile--price { grid-column: span 2; }
  .tile--ig    { min-height: 190px; }
  .tile--status, .tile--rating { min-height: 190px; }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }
  .reviews { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shead--split { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .split__inset { right: 0; bottom: -1.25rem; width: 34%; }
}

@media (max-width: 900px) {
  /* The nav collapses into a card that drops out of the pill. */
  .navtoggle { display: grid; }
  .mainnav {
    position: absolute;
    top: calc(100% + .6rem);
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .8rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lift);
  }
  .mainnav.is-open { display: flex; }
  .navpill { position: relative; }
  .navlink { padding: .75rem 1rem; }
  .head-phone { display: inline-flex; justify-content: flex-start; padding: .75rem 1rem; }
  .mainnav .btn { margin-top: .35rem; }
  .callbar { display: flex; }
  body { padding-bottom: 72px; }
  .masonry { columns: 2; }
}

@media (max-width: 620px) {
  /* Every `grid-column: span 2` has to be undone here. Leave one in and it
     creates an implicit second column, so the "one column" grid quietly
     becomes two and half the tiles end up beside each other. */
  .bento { grid-template-columns: 1fr; }
  .tile--head, .tile--price, .tile--ig { grid-column: auto; }
  .tile--photo { min-height: 340px; }
  .tile--ig { min-height: 170px; }
  .tile--status, .tile--rating { min-height: 150px; }
  .creds { grid-template-columns: 1fr; }
  .creds li { border-radius: var(--r-card); }
  .svc-grid, .steps { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .stat-row { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .menu-row { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-row__dur { grid-row: 2; grid-column: 1; }
  .wizard__foot { flex-wrap: wrap; }
  .wizard__foot .fine { order: 3; width: 100%; margin-right: 0; }
  .segmented button { min-width: 0; flex: 1; }
  .segmented { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-grid > :last-child { grid-column: auto; }
  .viewer__nav { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (max-width: 460px) {
  .masonry { columns: 1; }
  .btn-row .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════ 21 · PRINT ═══════ */

@media print {
  .site-head, .callbar, .cta-panel, .site-foot, .gal-bar, .viewer,
  .btn, .skip-link, .segmented { display: none !important; }
  body { background: none; color: var(--c-ink); }
  .tile, .card, .menu-list, .plan { box-shadow: none; border-color: var(--c-line-strong); }
  .section { padding-block: 1.25rem; }
  .hero, .page-head { padding-top: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: var(--c-ink-mute); }
}

/* ═════════════════════════════════════════ 22 · REDUCED MOTION ════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js-ready .reveal { opacity: 1; transform: none; }
  a.tile:hover, .tile--hover:hover, .shot:hover, .btn:hover { transform: none; }
  .brandmark:hover .brandmark__tile { transform: none; }
}