/* ============================================================
   BLADES — Barbershop & Academy
   Black + brushed-gold luxury system.
   Every blade motif on this site uses the exact logo geometry:
   parallelogram 260x48 with the bottom edge shifted +46px right
   (≈44°). Buttons repeat the same cut via --blade-cut.
   ============================================================ */

@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/michroma-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-var-latin.woff2") format("woff2");
}

:root {
  --ink: #070706;
  --ink-2: #0d0c0a;
  --ink-3: #14110c;
  --gold-1: #a87f2e;
  --gold-2: #c9a24b;
  --gold-3: #e8c97a;
  --bone: #ede8df;
  --ash: #948f82;
  --line: rgba(201, 162, 75, 0.16);
  --line-strong: rgba(201, 162, 75, 0.34);
  --gold-sweep: linear-gradient(100deg, #a87f2e, #e8c97a 48%, #c9a24b 76%, #a87f2e);
  --error: #d99a8e;
  --label-s: 10px;
  --label-m: 10.5px;
  --label-l: 11px;
  --track-s: 0.28em;
  --track-m: 0.26em;
  --track-l: 0.34em;
  --font-display: "Michroma", "Arial", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --header-h: 76px;
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Anchor jumps land flush with the header's bottom edge: any extra gap
   here becomes a window exposing a sliver of the preceding section. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 320;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection {
  background: var(--gold-2);
  color: var(--ink);
}

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

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translateY(calc(-100% - 24px));
  transition: transform 0.25s ease;
}

.skip-link:focus-visible {
  transform: none;
}

.shell {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- Type helpers ---------- */

.gold-text {
  background: var(--gold-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.eyebrow-blade {
  width: 27px;
  aspect-ratio: 266 / 54;
  flex: none;
}

.eyebrow span {
  font-family: var(--font-display);
  font-size: var(--label-l);
  letter-spacing: var(--track-l);
  text-transform: uppercase;
  color: var(--gold-2);
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 3.1vw, 33px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  text-wrap: balance;
}

.section-head {
  max-width: 680px;
  margin-bottom: clamp(44px, 7vw, 72px);
}

.section-lede {
  color: var(--ash);
  font-size: 15.5px;
  max-width: 560px;
  margin-top: 18px;
}

/* ---------- Buttons: blade-cut parallelograms ---------- */

.button {
  --blade-cut: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 4px calc(var(--blade-cut) + 18px);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 0;
  clip-path: polygon(0 0, calc(100% - var(--blade-cut)) 0, 100% 100%, var(--blade-cut) 100%);
  transition: filter 0.3s ease, background-position 0.5s ease, background-color 0.3s ease, color 0.3s ease;
}

.button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--gold-2);
}

.button-gold {
  background: var(--gold-sweep);
  background-size: 220% 100%;
  background-position: 0 0;
  color: var(--ink);
}

.button-gold:hover {
  background-position: 60% 0;
  filter: brightness(1.1);
}

.button-large {
  min-height: 60px;
  --blade-cut: 58px;
  font-size: 12px;
}

.button-ghost {
  color: var(--bone);
  background: rgba(237, 232, 223, 0.05);
}

.button-ghost:hover {
  color: var(--gold-3);
  background: rgba(201, 162, 75, 0.1);
}

.button-outline {
  background: var(--gold-sweep);
  color: var(--gold-2);
  min-height: 44px;
  --blade-cut: 42px;
  padding: 2px calc(var(--blade-cut) + 8px);
}

.button-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(
    3.5px 1.5px,
    calc(100% - var(--blade-cut) - 0.65px) 1.5px,
    calc(100% - 3.5px) calc(100% - 1.5px),
    calc(var(--blade-cut) + 0.65px) calc(100% - 1.5px)
  );
}

.button-outline .btn-label {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.button-outline:hover .btn-label {
  color: var(--gold-3);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
  transition: border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would create a containing block and shrink the fixed mobile nav overlay. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(7, 7, 6, 0.88), rgba(7, 7, 6, 0));
  transition: background 0.35s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header.is-scrolled::before {
  background: rgba(7, 7, 6, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex: none;
  transition: opacity 0.3s ease;
}

.brand:hover {
  opacity: 0.85;
}

.brand-mark {
  width: 34px;
  aspect-ratio: 266 / 218;
}

.brand-word {
  width: 148px;
  aspect-ratio: 768 / 68;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
}

.primary-nav a {
  font-family: var(--font-display);
  font-size: var(--label-m);
  letter-spacing: var(--track-m);
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.25s ease;
  padding: 6px 0;
}

.primary-nav a:hover {
  color: var(--gold-3);
}

.menu-button {
  display: none;
  align-items: center;
  gap: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: var(--label-m);
  letter-spacing: var(--track-m);
  text-transform: uppercase;
  cursor: pointer;
}

.menu-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
}

.menu-lines i {
  height: 1.5px;
  background: var(--gold-2);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-button[aria-expanded="true"] .menu-lines i:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-lines i:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* ---------- Hero ---------- */

/* 72px shy of the viewport so the credo band peeks above the fold —
   cropped content is the scroll affordance. On short viewports the
   content height exceeds this anyway and the crop happens naturally. */
.hero {
  position: relative;
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 24px 110px;
  overflow: clip;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 46% at 50% 36%, rgba(201, 162, 75, 0.09), transparent 70%);
}

.hero-sheen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 84deg,
    rgba(232, 201, 122, 0.05) 104deg,
    transparent 124deg,
    transparent 250deg,
    rgba(201, 162, 75, 0.035) 268deg,
    transparent 288deg
  );
  animation: sheenSpin 90s linear infinite;
}

@keyframes sheenSpin {
  to {
    transform: rotate(360deg);
  }
}

.hero-ghost {
  position: absolute;
  top: 12%;
  right: -14%;
  width: clamp(340px, 46vw, 720px);
  aspect-ratio: 266 / 218;
  opacity: 0.05;
  will-change: transform;
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-mark {
  width: clamp(96px, 13vw, 150px);
  aspect-ratio: 266 / 218;
  margin-bottom: clamp(30px, 4.5vh, 48px);
}

.hero-mark-blade {
  opacity: 0;
  transform: translateX(-46px);
  animation: bladeIn 0.8s cubic-bezier(0.22, 0.8, 0.24, 1) forwards;
}

.hero-mark-blade:nth-child(2) {
  animation-delay: 0.14s;
}

.hero-mark-blade:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes bladeIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-word {
  width: clamp(250px, 44vw, 470px);
  aspect-ratio: 768 / 68;
  opacity: 0;
  animation: fadeUp 0.9s 0.5s ease forwards;
}

.hero-tag {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 4vh, 40px);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-2);
  opacity: 0;
  animation: fadeUp 0.9s 0.68s ease forwards;
}

.tag-sep {
  width: 30px;
  height: 1px;
  background: var(--line-strong);
}

.hero-lede {
  margin-top: clamp(22px, 3.6vh, 34px);
  font-family: var(--font-body);
  font-weight: 230;
  font-size: clamp(19px, 2.9vw, 28px);
  line-height: 1.55;
  color: var(--bone);
  opacity: 0;
  animation: fadeUp 0.9s 0.8s ease forwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(30px, 5vh, 46px);
  opacity: 0;
  animation: fadeUp 0.9s 0.94s ease forwards;
}

.booking-note {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ash);
  opacity: 0;
  animation: fadeUp 0.9s 1.06s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero.is-offscreen .hero-sheen {
  animation-play-state: paused;
}

/* ---------- Credo band ----------
   Static maker's-mark strip: the five words with blade separators.
   Wide screens show all five; under 960px the middle pair drops
   (leaving Precision / Craft / Education); under 560px it stacks. */

.credo {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  padding: 21px 24px;
}

.credo-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 30px);
}

.credo-line span {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}

.credo-blade {
  width: 34px;
  aspect-ratio: 266 / 54;
  flex: none;
  opacity: 0.85;
}

@media (max-width: 960px) {
  .credo-line > :nth-child(n + 4):nth-child(-n + 7) {
    display: none;
  }
}

/* Phones: no room to set the credo at full tracking, and any divider
   leaves an orphaned sliver on anchor jumps — the band sits out entirely. */
@media (max-width: 560px) {
  .credo {
    display: none;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: clamp(88px, 13vh, 150px) 0;
}

/* Chapter model: every nav-target section owns at least one screen, with
   its content centered when the viewport is taller than the content. On
   laptops and phones the content exceeds the minimum, so nothing changes.
   This also guarantees anchor jumps land flush at any screen height. */
.services-section,
.standard-section,
.academy-section,
.contact-section {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Services */

/* 340px minimum caps the grid at 3 columns in the 1160px shell,
   so the six cards always fill rows completely (3x2, 2x3, or 1x6)
   and the gold separator background is never exposed as an empty cell. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  position: relative;
  background: var(--ink-2);
  padding: 38px 32px 34px;
  overflow: hidden;
  transition: background 0.35s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-sweep);
  transition: width 0.4s ease;
}

.service-card:hover {
  background: var(--ink-3);
}

.service-card:hover::before {
  width: 100%;
}

.service-index {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold-1);
  margin-bottom: 22px;
}

.service-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.service-card p {
  color: var(--ash);
  font-size: 14.5px;
  margin-bottom: 26px;
}

.card-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--label-m);
  letter-spacing: var(--track-m);
  text-transform: uppercase;
  color: var(--gold-2);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 5px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.card-link:hover {
  color: var(--gold-3);
  border-color: var(--gold-3);
}

/* The whole card is the click target; the visible link stays the accessible name. */
.service-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-footnote {
  margin-top: 22px;
  font-size: 13px;
  color: var(--ash);
}

/* The Standard */

.standard-section {
  background: linear-gradient(to bottom, var(--ink), var(--ink-2) 50%, var(--ink));
}

.standard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(36px, 5vw, 64px);
}

/* Heading offset tracks the numeral height so the outlined 01/02/03
   never collide with the headings at any viewport size. */
.standard-item {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: calc(clamp(56px, 7vw, 84px) + 30px);
}

.ghost-number {
  position: absolute;
  top: 14px;
  left: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 84px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 75, 0.28);
}

.standard-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.standard-item p {
  color: var(--ash);
  font-size: 14.5px;
}

/* Academy */

.academy-panel {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: clamp(36px, 6vw, 84px);
}

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.corner-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--gold-2);
  border-left: 2px solid var(--gold-2);
}

.corner-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--gold-2);
  border-right: 2px solid var(--gold-2);
}

.academy-path {
  list-style: none;
  position: relative;
  margin: clamp(36px, 5vw, 56px) 0 0;
}

.academy-path::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 18px;
  width: 1px;
  background: var(--line);
}

.academy-step {
  position: relative;
  display: flex;
  gap: clamp(22px, 3.5vw, 40px);
  padding: 0 0 clamp(34px, 4.5vw, 48px);
}

.academy-step:last-child {
  padding-bottom: 0;
}

.step-marker {
  flex: none;
  width: 37px;
  padding: 8px 0;
  background: var(--ink-2);
  align-self: flex-start;
}

.step-marker svg {
  display: block;
  width: 37px;
  aspect-ratio: 266 / 54;
}

.academy-step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.step-number {
  color: var(--gold-2);
  margin-right: 12px;
}

.academy-step p {
  color: var(--ash);
  font-size: 14.5px;
  max-width: 560px;
}

.academy-cta {
  margin-top: clamp(36px, 5vw, 52px);
}

/* Booking band */

.booking-section {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}

.booking-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 80% at 50% 50%, rgba(201, 162, 75, 0.07), transparent 74%),
    var(--ink-2);
  pointer-events: none;
}

.booking-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.booking-mark {
  width: 58px;
  aspect-ratio: 266 / 218;
  margin-bottom: 30px;
}

.booking-section h2 {
  font-size: clamp(26px, 4.4vw, 44px);
  margin-bottom: 20px;
}

.booking-section p {
  color: var(--ash);
  font-size: 15.5px;
  max-width: 470px;
  margin-bottom: 42px;
}

/* Contact */

.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}

.contact-methods {
  margin-top: 40px;
}

.contact-method {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.contact-method span {
  font-family: var(--font-display);
  font-size: var(--label-s);
  letter-spacing: var(--track-s);
  text-transform: uppercase;
  color: var(--ash);
}

.contact-method strong {
  font-weight: 500;
  font-size: 16px;
  color: var(--bone);
  transition: color 0.25s ease;
  overflow-wrap: anywhere;
}

.contact-method:hover strong {
  color: var(--gold-3);
}

.hours {
  margin-top: 40px;
}

.hours h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--label-l);
  letter-spacing: var(--track-l);
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 14px;
}

.hours dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.hours dt {
  color: var(--ash);
}

.hours dd {
  color: var(--bone);
}

/* Form */

.contact-form {
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: clamp(28px, 4.5vw, 46px);
}

.contact-form label {
  display: block;
  margin-bottom: 24px;
}

.contact-form label > span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--label-s);
  letter-spacing: var(--track-s);
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 10px;
}

.contact-form label > span small {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ash);
}

.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.62);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 10px 2px;
  transition: border-color 0.25s ease;
}

.contact-form input:not([type="checkbox"]):focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--gold-2);
  box-shadow: 0 1px 0 0 var(--gold-2);
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a24b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 26px;
  cursor: pointer;
}

.contact-form select option {
  background: var(--ink-2);
  color: var(--bone);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.consent input {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: var(--gold-2);
  flex: none;
}

.contact-form .consent {
  display: flex;
}

.contact-form .consent span {
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ash);
  margin-bottom: 0;
}

.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 6px;
}

.form-status {
  font-size: 13.5px;
  color: var(--ash);
}

.form-status.is-success {
  color: var(--gold-3);
}

.form-status.is-error {
  color: var(--error);
}

.form-status a {
  color: var(--gold-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.form-status a:hover {
  color: var(--gold-2);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 46px 0 30px;
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.footer-brand .brand-mark {
  width: 30px;
}

.footer-brand .brand-word {
  width: 128px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 34px);
}

.footer-links a {
  font-family: var(--font-display);
  font-size: var(--label-m);
  letter-spacing: var(--track-m);
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.25s ease;
  padding: 6px 0;
}

.footer-links a:hover {
  color: var(--gold-3);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ash);
  font-size: 12.5px;
  letter-spacing: 0.05em;
}

/* ---------- Mobile quick actions ---------- */

.mobile-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(7, 7, 6, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.mobile-actions a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.mobile-actions a:first-child {
  background: var(--gold-sweep);
  color: var(--ink);
}

/* ---------- Reveal animations ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js [data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

.js [data-stagger].is-visible > :nth-child(1) { transition-delay: 0.05s; }
.js [data-stagger].is-visible > :nth-child(2) { transition-delay: 0.13s; }
.js [data-stagger].is-visible > :nth-child(3) { transition-delay: 0.21s; }
.js [data-stagger].is-visible > :nth-child(4) { transition-delay: 0.29s; }
.js [data-stagger].is-visible > :nth-child(5) { transition-delay: 0.37s; }
.js [data-stagger].is-visible > :nth-child(6) { transition-delay: 0.45s; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .menu-button {
    display: inline-flex;
    justify-content: flex-end;
  }

  .primary-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    background: rgba(7, 7, 6, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .site-header.menu-visible::before {
    background: rgba(7, 7, 6, 0.97);
  }

  .primary-nav.is-open {
    visibility: visible;
    opacity: 1;
  }

  .primary-nav a {
    font-size: 14px;
    letter-spacing: 0.3em;
  }

  body.menu-open {
    overflow: hidden;
  }

  .brand {
    margin-right: auto;
  }

  .menu-button {
    order: 4;
  }
}

@media (max-width: 720px) {
  .mobile-actions {
    display: flex;
  }

  .header-book {
    display: none;
  }

  .section {
    padding: clamp(72px, 10vh, 96px) 0;
  }

  .site-footer {
    padding-bottom: 88px;
  }

  .hero {
    padding-bottom: 96px;
  }
}

@media (max-width: 560px) {
  .button {
    --blade-cut: 34px;
  }

  .button-large {
    --blade-cut: 40px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .brand-word {
    width: 118px;
  }

  .brand-mark {
    width: 28px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .button {
    width: min(320px, 100%);
  }

  /* The tagline already states barbershop + academy; on phones the poetic
     lede would repeat it across four stacked lines, so it sits out. */
  .hero-lede {
    display: none;
  }

  .hero-tag {
    flex-direction: column;
    gap: 10px;
    font-size: 10px;
  }

  .tag-sep {
    width: 18px;
  }
}

/* Short viewports (landscape phones): full-scale section padding would
   eat a third of the screen, so spacing compacts across the board. */
@media (max-height: 520px) {
  .section {
    padding: 48px 0;
  }

  .hero {
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 48px;
  }
}

/* ---------- 404 page ---------- */

.not-found-body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.not-found-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.not-found-main .brand-mark {
  width: 74px;
  margin-bottom: 8px;
}

.not-found-main h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 3.4vw, 28px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.not-found-main p {
  color: var(--ash);
}

.not-found-main .button {
  margin-top: 14px;
}

.not-found-code {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--gold-2);
}

/* ---------- Legal / privacy page ---------- */

.legal-body {
  padding: 60px 0 90px;
}

.legal-shell {
  width: min(760px, 100% - 48px);
  margin-inline: auto;
}

.legal-shell h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.legal-shell h2 {
  font-size: 15px;
  letter-spacing: 0.18em;
  margin: 38px 0 14px;
}

.legal-shell p,
.legal-shell li {
  color: var(--ash);
  font-size: 15px;
  margin-bottom: 12px;
}

.legal-shell ul {
  padding-left: 22px;
}

.legal-shell a {
  color: var(--gold-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-top {
  display: inline-flex;
  margin-bottom: 44px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-mark-blade,
  .hero-word,
  .hero-tag,
  .hero-lede,
  .hero-actions,
  .booking-note {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .hero-sheen {
    animation: none !important;
  }

  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1;
    transform: none;
  }
}