/* ============================================================
   VICTORY BEAUTY — main stylesheet
   Prizmek, August 2026. Built to victory-beauty-prd.md v1.1.

   Order: reset, base, motion, chrome, sections, form, footer.
   ============================================================ */

/* ---------- 1. Reset ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- 2. Typography ----------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
}

.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.h4 { font-size: var(--t-h4); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }

/* The wordmark treatment: tracked small caps. Used for every
   eyebrow, nav label and button on the site — it is the single
   typographic idea carried over from the logo. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-deep);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-deep);
  flex: none;
}
.eyebrow--on-dark { color: rgba(248, 245, 239, 0.72); }
.eyebrow--on-dark::before, .eyebrow--on-dark::after { background: var(--gold); }

.lead {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: var(--measure);
}

.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }

a { color: inherit; }
p a:not(.btn) {
  color: var(--burgundy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
p a:not(.btn):hover { color: var(--burgundy-2); }

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

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--ink); color: var(--ivory);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-small); letter-spacing: var(--track-nav);
  text-transform: uppercase; text-decoration: none;
  transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

.section { padding-block: var(--section-y); position: relative; }
.section--stone { background: var(--stone-2); }
.section--ink { background: var(--ink); color: var(--ivory); }
.section--burgundy { background: var(--burgundy); color: var(--ivory); }

.section__head { margin-bottom: var(--s-8); }
.section__head .eyebrow { margin-bottom: var(--s-4); }
.section__head .lead { margin-top: var(--s-5); }

/* A gold hairline that draws itself in on reveal. The only
   decorative element on the page that moves. */
.rule {
  height: 1px;
  background: var(--gold-deep);
  transform-origin: left center;
  border: 0;
}

/* ---------- 4. Motion --------------------------------------- */
/* Hide-before-reveal is gated on <html class="js">, which is set
   by an inline head script and stripped by a watchdog if the
   engine never boots. If main.js 404s, the page still renders. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal="up"],
.js [data-reveal=""] { transform: translateY(22px); }
.js [data-reveal="rule"] { opacity: 1; transform: scaleX(0); }

[data-reveal] {
  transition:
    opacity var(--d-slow) var(--ease-out),
    transform var(--d-slow) var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
}
[data-reveal="rule"].is-in { transform: scaleX(1) !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal] { transition: none !important; }
}

/* ---------- 5. Buttons -------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.95rem var(--s-6);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition:
    background var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    transform var(--d-fast) var(--ease-out),
    box-shadow var(--d-mid) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Gold fill, ink text = 8.07:1. This is the site's one primary
   action and it never appears in any other colour. */
.btn--primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 2px 14px -4px var(--gold-glow);
}
.btn--primary:hover {
  background: var(--gold-deep);
  color: var(--ivory);
  box-shadow: 0 8px 26px -8px rgba(169, 139, 75, 0.5);
}

.btn--ghost {
  border-color: var(--stone-line);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--ivory); }

.btn--on-dark {
  border-color: rgba(248, 245, 239, 0.32);
  color: var(--ivory);
}
.btn--on-dark:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

.btn--sm { padding: 0.7rem var(--s-5); }
.btn--wide { width: 100%; }
.btn--lg { padding: 1.1rem var(--s-7); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.btn-row--center { justify-content: center; }

/* ---------- 6. Demo flag ------------------------------------ */
/* Visible while photography and the logo are placeholders.
   DEMO_MODE=false in main.js hides it and every plate tag. */
.demo-flag {
  background: var(--ink);
  color: rgba(248, 245, 239, 0.82);
  font-size: var(--t-small);
  line-height: 1.5;
  text-align: center;
  padding: 0.7rem var(--gutter);
  position: relative;
  z-index: 60;
}
.demo-flag strong { color: var(--gold); font-weight: 500; }
@media (max-width: 600px) {
  .demo-flag { font-size: 0.76rem; padding: 0.55rem var(--s-4); }
}
body.no-demo .demo-flag { display: none; }
body.no-demo .plate__tag { display: none; }

/* ---------- 7. Navigation ----------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(248, 245, 239, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-mid) var(--ease-out),
              background var(--d-mid) var(--ease-out);
}
.nav.is-stuck {
  border-bottom-color: var(--stone-line);
  background: rgba(248, 245, 239, 0.95);
}

.nav__inner {
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.nav__logo { display: flex; align-items: center; text-decoration: none; flex: none; }
/* logo sizing lives on .brand (section 21) */

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 1.6vw, var(--s-6));
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: var(--s-2);
  position: relative;
  transition: color var(--d-fast) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__cta { flex: none; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-right: -10px;
}
.nav__burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--ink);
  position: relative;
  transition: background var(--d-fast) var(--ease-out);
}
.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1px;
  background: var(--ink);
  transition: transform var(--d-mid) var(--ease-out);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav__burger { display: flex; }
  .nav__cta { display: none; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--stone-line);
    padding: var(--s-4) var(--gutter) var(--s-6);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--d-mid) var(--ease-out),
                opacity var(--d-mid) var(--ease-out),
                visibility var(--d-mid);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__links a {
    display: block;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--stone-line);
    font-size: 0.8rem;
  }
  .nav__links a::after { display: none; }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__links .nav__mobile-cta { margin-top: var(--s-5); }
  .nav__links .nav__mobile-cta .btn { width: 100%; }
}
@media (min-width: 1001px) {
  .nav__links .nav__mobile-cta { display: none; }
}

/* ---------- 8. Hero ----------------------------------------- */
/* DEVIATION from PRD 7.1, which asks for a full-bleed photo
   background. Every supplied photo is a portrait phone shot
   with the subject filling the lower third. Cropped to a wide
   hero band those images show empty wall and cut the face, and
   a scrim over them gambles the headline's legibility on
   whatever photo is swapped in later.

   So the hero is a split: ink ground carrying the type, the
   photo held at its own portrait aspect beside it. The photo
   still leads, the type is guaranteed readable, and swapping
   the image cannot break the headline. */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
}
.hero__grid {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  min-height: min(88dvh, 820px);
}

.hero__content { padding-block: var(--s-9) var(--s-8); max-width: 33rem; }

.hero .display { margin-block: var(--s-5) var(--s-5); color: var(--ivory); }
/* "VICTORY." is the only place gold is used as display type,
   and it sits on ink (8.07:1) - never on ivory (2.07:1). */
.hero__accent { color: var(--gold); display: block; }

.hero__sub { font-size: var(--t-lead); color: rgba(248, 245, 239, 0.8); max-width: 40ch; }

.hero__loc {
  margin-top: var(--s-6);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-small);
  letter-spacing: 0.05em;
  color: rgba(248, 245, 239, 0.66);
}
.hero__loc svg { flex: none; color: var(--gold); }

/* The photo bleeds to the right edge of the viewport. */
.hero__media {
  position: relative;
  align-self: stretch;
  min-height: 320px;
  margin-right: calc(var(--gutter) * -1);
}
@media (min-width: 1241px) {
  .hero__media { margin-right: calc((100vw - var(--max)) / -2 - var(--gutter)); }
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
/* A soft ink edge so the photo dissolves into the ground
   instead of butting against it with a hard seam. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--ink) 0%, rgba(23,21,18,0.35) 22%, rgba(23,21,18,0) 55%);
  pointer-events: none;
}

.hero__scroll {
  position: absolute;
  bottom: var(--s-6); left: var(--gutter);
  z-index: 2;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.45);
  text-decoration: none;
  display: flex; align-items: center; gap: var(--s-3);
}
.hero__scroll::after {
  content: "";
  width: 46px; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  animation: draw 2.6s var(--ease-inout) infinite;
}
@keyframes draw {
  0%, 100% { transform: scaleX(0.35); transform-origin: left; opacity: 0.45; }
  50%      { transform: scaleX(1);    transform-origin: left; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; } }

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding-inline: 0;
  }
  .hero__content {
    order: 2;
    padding: var(--s-7) var(--gutter) var(--s-8);
    max-width: none;
  }
  .hero__media {
    order: 1;
    margin-right: 0;
    aspect-ratio: 5 / 4;
    min-height: 0;
  }
  .hero__media img { object-position: center 18%; }
  /* Horizontal fade is wrong once the photo is stacked above
     the type - fade the bottom edge into the ground instead. */
  .hero__media::after {
    background: linear-gradient(to bottom, rgba(23,21,18,0) 55%, var(--ink) 100%);
  }
  .hero__scroll { display: none; }
}

/* ---------- 9. Photo plates --------------------------------- */
/* Every image slot on the site is a .plate. Until the client's
   photography arrives it renders a monogram field at the exact
   aspect ratio the real photo needs, so nothing reflows when
   the images drop in. Swap .plate for <img> at that point. */
.plate {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, #EFE9DC 0%, var(--stone) 55%, #D8D0C1 100%);
  border: 1px solid var(--stone-line);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.plate--portrait { aspect-ratio: 4 / 5; }
.plate--square   { aspect-ratio: 1 / 1; }
.plate--wide     { aspect-ratio: 16 / 10; }

.plate img { width: 100%; height: 100%; object-fit: cover; }

.plate__mark {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 13cqw, 8rem);
  line-height: 1;
  color: rgba(23, 21, 18, 0.09);
  letter-spacing: 0.04em;
  user-select: none;
  transition: transform var(--d-slow) var(--ease-out);
}
.plate__caption {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.plate__tag {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(248, 245, 239, 0.82);
  border: 1px dashed var(--gold-deep);
  padding: 0.28rem 0.5rem;
  border-radius: 2px;
}
.plate--dark {
  background: radial-gradient(120% 90% at 30% 20%, #2A2621 0%, var(--ink) 70%);
  border: 0;
}
.plate--dark .plate__mark { color: rgba(199, 169, 104, 0.13); }
.plate--dark .plate__caption { color: rgba(248, 245, 239, 0.4); }
.plate--dark .plate__tag {
  background: rgba(23, 21, 18, 0.7);
  color: rgba(248, 245, 239, 0.7);
}

/* ---------- 10. About --------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
}
.about__media { position: relative; container-type: inline-size; max-width: 480px; margin-left: auto; }
/* Crop to the same 4:5 the rest of the site uses. The source is a
   tall phone photo whose upper third is wall, so bias the crop down
   onto the work. */
.about__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 38%;
  border-radius: var(--r-card);
}
/* A gold frame offset behind the portrait — print-editorial
   device, and it gives the plate something to sit against. */
.about__media::before {
  content: "";
  position: absolute;
  inset: var(--s-5) calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
  border: 1px solid var(--gold-deep);
  z-index: -1;
}
.about__quote {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.35;
  color: var(--ink);
  margin-block: var(--s-5);
  padding-left: var(--s-5);
  border-left: 2px solid var(--gold);
}
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .about__media { order: -1; max-width: 420px; margin-inline: auto; }
  .about__media::before { inset: var(--s-4) calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4); }
}

/* ---------- 11. Services ------------------------------------ */
.hair-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--ivory);
  border: 1px solid var(--gold-deep);
  border-left-width: 3px;
  padding: var(--s-5);
  margin-bottom: var(--s-7);
  font-size: var(--t-small);
  color: var(--ink-2);
  border-radius: var(--r-card);
}
.hair-note strong { color: var(--ink); font-weight: 500; }
.hair-note svg { flex: none; margin-top: 2px; color: var(--gold-deep); }
.section--stone .hair-note { background: var(--ivory); }

.svc-list { display: grid; gap: var(--s-4); }

.svc {
  background: var(--ivory);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-card);
  transition: border-color var(--d-mid) var(--ease-out),
              box-shadow var(--d-mid) var(--ease-out);
}
.svc:hover { border-color: var(--gold-deep); }
.svc.is-open { border-color: var(--gold-deep); box-shadow: var(--shadow-md); }

.svc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  text-align: left;
}
@media (min-width: 640px) { .svc__head { padding: var(--s-5) var(--s-6); } }

.svc__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  flex: 1 1 auto;
  min-width: 0;
}
.svc__from {
  font-size: var(--t-small);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.svc__from b { color: var(--ink); font-weight: 500; }

.svc__chev {
  flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--stone-line);
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-mid) var(--ease-out);
}
.svc__chev::before, .svc__chev::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ink);
  transition: transform var(--d-mid) var(--ease-out), opacity var(--d-fast);
}
.svc__chev::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.svc__chev::after  { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.svc__head:hover .svc__chev { border-color: var(--gold-deep); background: var(--gold-glow); }
.svc.is-open .svc__chev { background: var(--gold); border-color: var(--gold); }
.svc.is-open .svc__chev::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Height is animated by JS setting an explicit px max-height,
   because auto does not transition. */
.svc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--d-mid) var(--ease-inout);
}
@media (prefers-reduced-motion: reduce) { .svc__panel { transition: none; } }

.svc__inner {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--s-6);
  padding: 0 var(--s-5) var(--s-6);
  border-top: 1px solid var(--stone-line);
  margin-top: 0;
  padding-top: var(--s-6);
}
@media (min-width: 640px) { .svc__inner { padding-inline: var(--s-6); } }
@media (max-width: 720px) {
  .svc__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .svc__media { max-width: 260px; }
}
.svc__media { container-type: inline-size; }
/* Cropped to 4:5 to match the declared width/height, so the ratio hint
   is correct and the panel's measured height does not jump when the
   photo decodes. Every category card is then the same shape. */
.svc__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  display: block;
}
.svc__media picture { display: block; }
.svc__blurb { color: var(--ink-2); font-size: var(--t-small); margin-bottom: var(--s-5); }

/* Price matrix. Real table on desktop; on mobile each row
   becomes a labelled stack so nothing is a dense grid on a
   phone (PRD 9). */
.ptable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ptable caption { text-align: left; }
.ptable th, .ptable td { padding: var(--s-3) var(--s-4); text-align: right; }
.ptable thead th {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--gold-deep);
}
.ptable tbody th {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ptable thead th:first-child { text-align: left; }
.ptable tbody td { font-size: 1.02rem; }
.ptable tbody tr + tr th, .ptable tbody tr + tr td { border-top: 1px solid var(--stone-line); }
.ptable td::before { content: none; }

@media (max-width: 560px) {
  .ptable, .ptable tbody, .ptable tr, .ptable td, .ptable th { display: block; width: 100%; }
  .ptable thead { display: none; }
  .ptable tbody tr {
    border: 1px solid var(--stone-line);
    border-radius: var(--r-card);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--stone-2);
  }
  .ptable tbody tr + tr th, .ptable tbody tr + tr td { border-top: 0; }
  .ptable tbody th {
    padding: 0 0 var(--s-2);
    border-bottom: 1px solid var(--stone-line);
    margin-bottom: var(--s-2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-size: var(--t-label);
    color: var(--ink-3);
  }
  .ptable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    text-align: right;
  }
  .ptable tbody td::before {
    content: attr(data-label);
    font-size: var(--t-small);
    color: var(--ink-2);
    text-align: left;
    font-weight: 300;
  }
}

/* Flat / list pricing */
.plist { list-style: none; padding: 0; display: grid; gap: 0; }
.plist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.plist li + li { border-top: 1px solid var(--stone-line); }
.plist .p {
  font-size: 1.02rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* Dotted leader between style and price — menu typography. */
.plist .dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--stone-line);
  transform: translateY(-4px);
  min-width: var(--s-5);
}

.svc__cta { margin-top: var(--s-5); }

/* ---------- 12. Why ----------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--stone-line);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }

.why {
  background: var(--ivory);
  padding: clamp(var(--s-5), 3.4vw, var(--s-7));
  transition: background var(--d-mid) var(--ease-out);
}
.why:hover { background: var(--stone-2); }
.why__num {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--gold-deep);
  line-height: 1;
  display: block;
  margin-bottom: var(--s-4);
}
.why :is(h2, h3) { font-size: var(--t-h4); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.why p { color: var(--ink-2); font-size: var(--t-small); margin-top: var(--s-2); }

/* ---------- 13. Gallery ------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }

.gallery__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--stone);
  display: block;
  border: 0;
  padding: 0;
  width: 100%;
}
/* The chain button > picture > img must all be block-level with a
   definite height, or the img's height:100% resolves to auto and
   each photo renders at natural size. */
.gallery__btn {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.gallery__item picture { display: block; width: 100%; height: 100%; }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.045); }
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ivory);
  text-align: left;
  background: linear-gradient(to top, rgba(23,21,18,0.82), rgba(23,21,18,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out);
}
.gallery__item:hover figcaption,
.gallery__item:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) {
  .gallery__item figcaption { opacity: 1; transform: none; }
}

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(23, 21, 18, 0.94);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-mid) var(--ease-out), visibility var(--d-mid);
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img {
  max-width: min(92vw, 620px);
  max-height: 86dvh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-card);
}
.lb__cap {
  position: absolute;
  bottom: var(--s-5); left: 0; right: 0;
  text-align: center;
  color: rgba(248, 245, 239, 0.7);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.lb__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(248, 245, 239, 0.28);
  color: var(--ivory);
  display: grid;
  place-items: center;
  transition: background var(--d-fast), border-color var(--d-fast);
}
.lb__btn:hover { background: rgba(248, 245, 239, 0.12); border-color: var(--gold); }
.lb__prev { left: var(--s-4); }
.lb__next { right: var(--s-4); }
.lb__close { top: var(--s-4); right: var(--s-4); transform: none; }
@media (max-width: 600px) {
  .lb__prev { left: var(--s-2); }
  .lb__next { right: var(--s-2); }
}

/* ---------- 14. Booking + form ------------------------------ */
.booking__panel {
  background: var(--ivory);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-card);
  padding: clamp(var(--s-5), 4vw, var(--s-8));
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.field .opt { color: var(--ink-3); font-weight: 300; letter-spacing: 0.06em; text-transform: none; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem var(--s-4);
  background: var(--stone-2);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-input);
  font-size: 1rem;      /* 16px min, or iOS Safari zooms the page on focus */
  font-weight: 300;
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--ivory);
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-8);
}
.field select:disabled { opacity: 0.5; cursor: not-allowed; }

.field__hint { font-size: 0.78rem; color: var(--ink-3); line-height: 1.5; }

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--burgundy); background: rgba(92, 26, 43, 0.04); }
.field__err {
  font-size: 0.78rem;
  color: var(--burgundy);
  display: none;
  align-items: center;
  gap: var(--s-2);
}
.field.is-invalid .field__err { display: flex; }

/* Radio / checkbox */
.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.62rem var(--s-4);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-pill);
  background: var(--stone-2);
  font-size: var(--t-small);
  cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.choice__dot {
  width: 15px; height: 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-3);
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color var(--d-fast);
}
.choice__dot::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--gold-deep);
  transform: scale(0);
  transition: transform var(--d-fast) var(--ease-out);
}
.choice:hover { border-color: var(--gold-deep); }
.choice input:checked ~ .choice__dot { border-color: var(--gold-deep); }
.choice input:checked ~ .choice__dot::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-glow); }
.choice input:focus-visible ~ .choice__dot { outline: 2px solid var(--burgundy); outline-offset: 2px; }

.agree {
  position: relative;   /* contains the visually-hidden checkbox */
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--stone-2);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-card);
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.6;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.agree:hover { border-color: var(--gold-deep); }
.agree:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-glow); }
.agree input,
.choice input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.agree__box {
  width: 20px; height: 20px;
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  background: var(--ivory);
  transition: background var(--d-fast), border-color var(--d-fast);
}
.agree__box svg { opacity: 0; transform: scale(0.6); transition: opacity var(--d-fast), transform var(--d-fast) var(--ease-out); color: var(--ink); }
.agree input:checked ~ .agree__box { background: var(--gold); border-color: var(--gold); }
.agree input:checked ~ .agree__box svg { opacity: 1; transform: none; }
.agree input:focus-visible ~ .agree__box { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.field.is-invalid .agree { border-color: var(--burgundy); }

/* Live estimate strip */
.estimate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--gold-deep);
  border-radius: var(--r-card);
  background: var(--gold-glow);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.estimate__val {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.estimate[hidden] { display: none; }

/* Submission states */
.form-status {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-card);
  font-size: var(--t-small);
  line-height: 1.6;
  display: none;
}
.form-status.is-shown { display: block; }
.form-status--err {
  background: rgba(92, 26, 43, 0.06);
  border: 1px solid var(--burgundy);
  color: var(--burgundy);
}
.form-status--ok {
  background: var(--stone-2);
  border: 1px solid var(--gold-deep);
  color: var(--ink);
}

.form-sent { text-align: center; padding: var(--s-6) var(--s-4); }
.form-sent__mark {
  width: 64px; height: 64px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-pill);
  background: var(--gold);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.form-sent :is(h2, h3) { font-size: var(--t-h3); margin-bottom: var(--s-4); }
.form-sent p { color: var(--ink-2); font-size: var(--t-small); max-width: 46ch; margin-inline: auto; }
.form-sent ol {
  text-align: left;
  max-width: 42ch;
  margin: var(--s-5) auto 0;
  padding-left: var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-small);
  display: grid;
  gap: var(--s-2);
}

/* ---------- 15. Policies ------------------------------------ */
/* PRD 9 assigns burgundy to BOTH this block and the footer, but
   they are adjacent (site map items 6 and 7) - two burgundy
   blocks in a row merge into one slab and the colour stops
   meaning anything. Burgundy is kept here, where the authority
   is needed, and the footer goes to ink. */
.policies { counter-reset: pol; }
.policy-list { display: grid; gap: 1px; background: rgba(248, 245, 239, 0.16); }

.policy {
  background: var(--burgundy);
  padding: var(--s-6) 0;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 600px) {
  .policy { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; }
}
.policy__num {
  counter-increment: pol;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--gold);
  line-height: 1;
}
.policy__num::before { content: "0" counter(pol); }
.policy :is(h2, h3) {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ivory);
  margin-bottom: var(--s-3);
}
.policy p { color: rgba(248, 245, 239, 0.82); font-size: var(--t-small); max-width: 66ch; }

.policies__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(248, 245, 239, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.policies__foot p { color: rgba(248, 245, 239, 0.72); font-size: var(--t-small); max-width: 52ch; }

/* ---------- 16. Footer -------------------------------------- */
.footer { background: var(--ink); color: var(--ivory); padding-block: var(--s-9) var(--s-6); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(248, 245, 239, 0.14);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* footer logo sizing lives on .brand--dark (section 21) */
.footer p { color: rgba(248, 245, 239, 0.7); font-size: var(--t-small); max-width: 40ch; }
.footer :is(h2, h4) {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.55);
  margin-bottom: var(--s-4);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer a {
  color: rgba(248, 245, 239, 0.82);
  text-decoration: none;
  font-size: var(--t-small);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  transition: color var(--d-fast) var(--ease-out);
}
.footer a:hover { color: var(--gold); }
.footer a svg { flex: none; opacity: 0.7; }

.footer__bottom {
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(248, 245, 239, 0.45);
}
.footer__bottom a { font-size: 0.78rem; color: rgba(248, 245, 239, 0.55); }

/* ---------- 17. Mobile action bar --------------------------- */
/* Instagram traffic lands on a phone. Call / WhatsApp / Book
   stay one thumb-reach away without hunting for the footer. */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  background: rgba(248, 245, 239, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--stone-line);
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
  gap: var(--s-3);
}
.actionbar a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.72rem var(--s-3);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--stone-line);
  color: var(--ink);
  min-width: 0;
}
.actionbar a svg { flex: none; }
.actionbar .is-primary { background: var(--gold); border-color: var(--gold); }
@media (max-width: 860px) {
  .actionbar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ---------- 18. Print --------------------------------------- */
/* Torie will print the price list. Make that not look broken. */
@media print {
  .nav, .actionbar, .hero__media, .demo-flag, .booking__panel,
  .gallery, .hero__scroll, .lb { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1.2rem; }
  .section--burgundy, .section--ink, .footer { background: #fff !important; color: #000 !important; }
  .policy { background: #fff !important; }
  .policy h3, .policy__num, .footer a, .footer p, .footer :is(h2, h4) { color: #000 !important; }
  .svc__panel { max-height: none !important; overflow: visible !important; }
  .svc__inner { display: block !important; border-top: 1px solid #ccc; }
  .svc__media { display: none !important; }
  .svc { break-inside: avoid; border: 0; border-bottom: 1px solid #ccc; }
  .svc__chev { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #555; }
}

/* ---------- 19. Logo lockup (PLACEHOLDER) -------------------- */
/* The real Victory Beauty logo has not been supplied. Rather than
   draw an imitation of the client's actual monogram, this is an
   openly typographic stand-in built from the site's own two
   faces, holding the exact space the real mark will occupy.
   Replace both instances with <img src="assets/logo.svg"> and
   delete this block. See DESIGN.md 2. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  line-height: 1;
}
.lockup__mark {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: -0.06em;
  color: var(--ink);
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-pill);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  padding-right: 2px;
  flex: none;
}
.lockup__word {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.lockup--dark .lockup__mark { color: var(--gold); border-color: rgba(199,169,104,.5); }
.lockup--dark .lockup__word { color: var(--ivory); }
.lockup--dark .lockup__mark { font-size: 1.9rem; width: 46px; height: 46px; }

@media (max-width: 460px) {
  .lockup__word { font-size: 0.62rem; letter-spacing: 0.16em; }
  .lockup__mark { width: 34px; height: 34px; font-size: 1.36rem; }
}

/* ---------- 20. Multi-page components ----------------------- */
/* Added when the single-page build was split into 8 pages. */

/* Homepage price teaser: every category and its starting price,
   as a menu-style leader list linking into the full menu. */
.tease-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--stone-line);
  margin-bottom: var(--s-7);
}
.tease {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--stone-line);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--d-fast) var(--ease-out),
              padding-inline var(--d-fast) var(--ease-out);
}
.tease:hover { background: var(--ivory); padding-inline: var(--s-4) var(--s-3); }
.tease__name {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  flex: none;
  max-width: 62%;
}
.tease__dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--stone-line);
  transform: translateY(-4px);
  min-width: var(--s-4);
}
.tease__price {
  flex: none;
  font-size: var(--t-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.tease__price b { color: var(--ink); font-weight: 500; font-size: 1rem; }
@media (max-width: 480px) {
  .tease__name { font-size: 1.02rem; }
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-9);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
  background: var(--stone-2);
  border: 1px solid var(--stone-line);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-mid) var(--ease-out),
              box-shadow var(--d-mid) var(--ease-out);
  min-width: 0;
}
.contact-card:hover {
  border-color: var(--gold-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.contact-card__icon {
  color: var(--gold-deep);
  margin-bottom: var(--s-2);
  display: block;
}
.contact-card__label {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-card__value {
  font-size: var(--t-small);
  color: var(--ink);
  /* Long email on a narrow card must wrap, not overflow. */
  overflow-wrap: anywhere;
  max-width: 100%;
}

.contact-visit {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
  padding-top: var(--s-8);
  border-top: 1px solid var(--stone-line);
}
@media (max-width: 860px) {
  .contact-visit { grid-template-columns: 1fr; }
  .contact-visit__media { max-width: 380px; }
}
.contact-visit__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* Inner pages open straight into a section under the sticky nav.
   The homepage is unaffected: its first child is .hero, not .section. */
#main > .section:first-child { padding-top: calc(var(--section-y) * 0.8); }

/* ---------- 21. Brand logo ---------------------------------- */
/* Used once assets/logo.png exists; until then tools/build.js emits
   the .lockup placeholder above instead.

   The mark is essentially SQUARE (431x435) - a VB ligature with the
   "VICTORY BEAUTY" wordmark running across its middle - not the wide
   lockup the grey source card made it look like. So it is sized by
   height and stays small in width; the wordmark inside reads as fine
   detail rather than as legible text at nav size, which is why the
   accessible name lives in the alt attribute.

   Both files are keyed to transparency by tools/make-logo.py, so
   there is no card behind the artwork on either ground. */
.brand {
  height: 58px;
  width: auto;
  display: block;
}
@media (max-width: 860px) { .brand { height: 44px; } }
@media (max-width: 420px) { .brand { height: 38px; } }

/* Footer can afford more room. */
.brand--dark { height: 88px; }
@media (max-width: 860px) { .brand--dark { height: 68px; } }

/* Fallback only: used if assets/logo-light.png is ever removed, so the
   ink footer still gets light artwork rather than a black-on-black mark. */
.brand--invert { filter: invert(1) brightness(1.08); }

/* The nav grows to fit the mark - but only once the real logo is in
   use, so the placeholder keeps the original compact bar.
   tools/build.js puts .has-logo on <html>. It must sit on :root, not
   body, because html's scroll-padding-top reads --nav-h. */
:root.has-logo { --nav-h: 82px; }
@media (max-width: 860px) { :root.has-logo { --nav-h: 64px; } }