:root {
  /* =========================================================
     01. DESIGN TOKENS — COLOR
     ========================================================= */
  --color-bg: #050505;
  --color-bg-soft: #080808;
  --color-bg-raised: #0d0d0d;
  --color-surface: #111111;
  --color-text: #f7f7f4;
  --color-text-secondary: #a8a8a1;
  --color-text-tertiary: #777772;
  --color-gold: #cfa65a;
  --color-gold-soft: #e4c27d;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-gold: rgba(228, 194, 125, 0.24);
  --color-overlay: rgba(5, 5, 5, 0.88);

  /* =========================================================
     02. DESIGN TOKENS — TYPOGRAPHY
     ========================================================= */
  --font-display: "Oswald", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --text-caption: 10px;
  --text-label: 11px;
  --text-small: 14px;
  --text-body: 16px;
  --text-body-large: 20px;
  --text-heading-small: 32px;
  --text-heading-medium: 48px;
  --text-heading-large: 64px;

  /* =========================================================
     03. DESIGN TOKENS — 8PX SPACING SCALE
     4px is reserved for micro-spacing only.
     ========================================================= */
  --space-micro: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-15: 120px;
  --space-16: 128px;
  --space-18: 144px;
  --space-20: 160px;

  /* =========================================================
     04. DESIGN TOKENS — LAYOUT, CONTROLS & MOTION
     ========================================================= */
  --container-max: 1440px;
  --page-gutter: 64px;
  --page-edge: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
  --section-standard: 128px;
  --section-compact: 64px;
  --section-editorial: 160px;
  --control-height: 56px;
  --control-padding: 24px;
  --touch-target: 48px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(0.2, 0.75, 0.25, 1);
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --header-height: 80px;
}

/* =========================================================
   05. RESET & BASE
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open,
body.service-preview-open,
body.lightbox-open { overflow: hidden; }

main,
section,
footer { display: block; }

h1,
h2,
h3,
h4,
p,
figure { margin: 0; }

ul,
ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button,
input,
textarea,
select { color: inherit; font: inherit; }
button,
a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--color-gold); color: var(--color-bg); }

/* =========================================================
   06. ACCESSIBILITY & SHARED UTILITIES
   ========================================================= */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-gold-soft);
  outline-offset: 4px;
}

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

.section {
  position: relative;
  padding-block: var(--section-standard);
  padding-inline: var(--page-edge);
}

.section-index,
.kicker {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-index { margin-bottom: var(--space-6); }

.display-title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading-large), 8vw, 136px);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -4px;
  text-transform: uppercase;
  text-wrap: balance;
}

.gold-word,
.gold-word .word-inner { color: var(--color-gold-soft); }

.title-white,
.title-white .word-inner,
.instagram-white,
.instagram-white .word-inner { color: var(--color-text); }

.word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.word-inner { display: inline-block; will-change: transform, opacity, filter; }

/* =========================================================
   07. INTRO & CUSTOM CURSOR
   ========================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-bg);
}

.no-js .intro { display: none; }

.intro-mark {
  color: var(--color-gold-soft);
  font-family: serif;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  text-shadow: 0 0 32px rgba(207, 166, 90, 0.24);
}

.intro-line {
  position: absolute;
  width: min(320px, 40vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transform: scaleX(0);
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  width: 8px;
  height: 8px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-gold-soft);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width var(--duration-fast) var(--ease-standard), height var(--duration-fast) var(--ease-standard), background var(--duration-fast), border var(--duration-fast);
}

.cursor.is-active {
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-gold-soft);
  background: rgba(5, 5, 5, 0.24);
  backdrop-filter: blur(8px);
}

.cursor-label {
  opacity: 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  transition: opacity var(--duration-fast);
}

.cursor.is-active .cursor-label { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  html.custom-cursor-ready body { cursor: none; }
  html.custom-cursor-ready .cursor { display: grid; }
}

/* =========================================================
   08. HEADER & NAVIGATION
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-height);
  padding-inline: var(--page-edge);
  gap: var(--space-4);
  border-bottom: 1px solid transparent;
  transition: min-height var(--duration-base) var(--ease-standard), background var(--duration-base), border-color var(--duration-base), backdrop-filter var(--duration-base);
}

.site-header.is-scrolled {
  min-height: 72px;
  border-bottom-color: var(--color-border-gold);
  background: rgba(5, 5, 5, 0.84);
  backdrop-filter: blur(16px);
}

.brand,
.footer-brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-nav { display: flex; align-items: center; gap: var(--space-4); }

.desktop-nav a,
.text-link {
  position: relative;
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-nav a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: #dadad6;
}

.desktop-nav a::after,
.text-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-standard);
}

.text-link::after { bottom: -8px; }
.desktop-nav a:hover::after,
.text-link:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { justify-self: end; }

.mobile-header-cta { display: none; }
.mobile-header-cta-short { display: none; }

.menu-toggle {
  display: none;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: var(--space-1);
  border: 0;
  background: transparent;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  margin-block: var(--space-1);
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-standard);
}

.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-12) var(--page-edge) var(--space-6);
  gap: var(--space-1);
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-32px);
  transition: opacity var(--duration-base), visibility var(--duration-base), transform var(--duration-slow) var(--ease-standard);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu a {
  display: flex;
  min-height: 64px;
  align-items: center;
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border-gold);
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

/* =========================================================
   09. BUTTONS & TEXT LINKS
   ========================================================= */
.btn,
.header-cta,
.instagram-follow-button {
  position: relative;
  z-index: 0;
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--control-padding);
  gap: var(--space-3);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-standard);
}

.btn::before,
.header-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-text);
  transform: translateX(-102%);
  transition: transform 450ms var(--ease-standard);
}

.btn:hover::before,
.header-cta:hover::before { transform: translateX(0); }
.btn:hover,
.header-cta:hover { border-color: var(--color-gold-soft); color: var(--color-bg); }

.btn-primary {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-primary::before { background: var(--color-gold-soft); }

.btn i,
.header-cta i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard);
}

.btn:hover i,
.header-cta:hover i { transform: translate(4px, -4px); }

.text-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.text-link span { transition: color var(--duration-base), transform var(--duration-base) var(--ease-standard); }
.text-link:hover span { color: var(--color-gold-soft); transform: translate(4px, -4px); }

/* =========================================================
   10. HERO
   ========================================================= */
.hero-air {
  --logo-base: #f5f2ed;
  position: relative;
  min-height: 100svh;
  padding-inline: var(--page-edge);
  overflow: hidden;
  isolation: isolate;
  background: #020202;
}

.hero-air-bg,
.hero-air-vignette,
.hero-air-noise { position: absolute; inset: 0; pointer-events: none; }

.hero-air-bg {
  z-index: -3;
  background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.05), transparent 34%), radial-gradient(ellipse at 50% 48%, rgba(207, 171, 106, 0.12), transparent 42%), radial-gradient(ellipse at 50% 50%, transparent 16%, rgba(0, 0, 0, 0.24) 64%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(180deg, #020202 0%, #050505 56%, #030303 100%);
}

.hero-air-vignette {
  z-index: -2;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(0, 0, 0, 0.16) 60%, rgba(0, 0, 0, 0.86) 100%);
}

.hero-air-noise {
  z-index: 8;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.hero-air-logo {
  position: absolute;
  top: 43%;
  left: 50%;
  z-index: 2;
  width: min(100%, 1800px);
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.hero-air-logo h1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--logo-base);
  font-family: var(--font-display);
  font-size: clamp(112px, 15vw, 280px);
  font-weight: 700;
  line-height: 0.76;
  letter-spacing: -12px;
  text-transform: uppercase;
  text-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.hero-air-logo h1::before {
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: -1;
  width: 56%;
  height: 48%;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(230, 196, 134, 0.12), transparent 72%);
  filter: blur(32px);
  transform: translate(-50%, -50%);
}

.hero-air-logo .logo-word { display: inline-flex; align-items: center; }

.hero-air-logo .logo-letter {
  position: relative;
  display: inline-block;
  color: var(--logo-base);
  text-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 82%;
  backface-visibility: hidden;
  will-change: transform, color, opacity, filter, text-shadow;
}

.hero-air-logo .logo-gap { display: inline-block; width: 0.22em; }

.hero-air-haze {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 1;
  width: min(48vw, 816px);
  height: min(24vw, 360px);
  opacity: 0.8;
  pointer-events: none;
  filter: blur(16px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}

.hero-air-haze::before,
.hero-air-haze::after { content: ""; position: absolute; border-radius: var(--radius-pill); }
.hero-air-haze::before { inset: 16% 16% 24%; background: radial-gradient(ellipse at center, rgba(232, 201, 143, 0.14), transparent 72%); }
.hero-air-haze::after { inset: 24% 24% 32%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), transparent 66%); }

.hero-air-haze span {
  position: absolute;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, transparent, rgba(238, 208, 155, 0.1), transparent);
  opacity: 0.32;
}

.hero-air-haze span:nth-child(1) { top: 16%; left: 16%; width: 32%; height: 40%; transform: rotate(-16deg); }
.hero-air-haze span:nth-child(2) { top: 8%; left: 40%; width: 16%; height: 56%; }
.hero-air-haze span:nth-child(3) { top: 16%; right: 16%; width: 24%; height: 48%; transform: rotate(8deg); }

.hero-air-ui {
  position: absolute;
  bottom: 104px;
  left: var(--page-edge);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(16px);
}

.hero-air-kicker {
  color: rgba(228, 194, 125, 0.88);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-air-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hero-air-discover { color: #d4d3cc; }

.hero-bottom-line,
.scroll-hint {
  position: absolute;
  bottom: var(--space-4);
  z-index: 6;
  display: flex;
  align-items: center;
  color: #666661;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
}

.hero-bottom-line { left: var(--page-edge); gap: var(--space-2); }
.hero-bottom-rule { width: 56px; height: 1px; background: rgba(225, 188, 115, 0.56); }
.scroll-hint { right: var(--page-edge); gap: var(--space-1); }

.scroll-hint span {
  width: 32px;
  height: 1px;
  background: var(--color-gold-soft);
  transform-origin: left;
  animation: pulse-line 1600ms infinite;
}

/* =========================================================
   11. EXPERIENCE — IL SALONE
   ========================================================= */
.experience {
  overflow: hidden;
  background: var(--color-bg-soft);
}

.experience::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 32px, rgba(207, 166, 90, 0.16) 32px 33px, transparent 33px 64px);
}

.experience-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
  row-gap: var(--space-4);
  align-items: start;
}

.experience-grid > div:first-child { grid-column: 1 / span 5; }

.experience-visual {
  position: relative;
  grid-column: 7 / span 6;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border-gold);
  background: var(--color-surface);
}

.experience-visual::after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.64));
  pointer-events: none;
}

.experience-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.76) contrast(1.04) brightness(0.88);
}

.experience-seal {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  display: grid;
  width: 112px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 194, 125, 0.48);
  border-radius: var(--radius-pill);
  background: rgba(8, 8, 8, 0.48);
  backdrop-filter: blur(8px);
}

.experience-seal span {
  color: var(--color-gold-soft);
  font-family: serif;
  font-size: 40px;
  line-height: 1;
}

.experience-seal::after {
  content: "";
  position: absolute;
  inset: var(--space-1);
  border: 1px dashed rgba(228, 194, 125, 0.28);
  border-radius: var(--radius-pill);
  animation: spin 16000ms linear infinite;
}

.experience-copy { grid-column: 7 / span 6; max-width: 680px; }

.experience-copy p {
  color: var(--color-text-secondary);
  font-size: var(--text-body-large);
  line-height: 1.7;
}

.experience-copy p + p { margin-top: var(--space-2); }

.mini-rule {
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  gap: var(--space-2);
}

.mini-rule span { width: 72px; height: 1px; background: var(--color-gold); }
.mini-rule b { color: var(--color-gold-soft); font-size: 9px; letter-spacing: 2px; }

.cloud-lines {
  position: absolute;
  top: 176px;
  right: -144px;
  width: 600px;
  height: 256px;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  opacity: 0.1;
}

.cloud-lines::before,
.cloud-lines::after {
  content: "";
  position: absolute;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
}

.cloud-lines::before { top: 32%; left: -24%; width: 64%; height: 72%; }
.cloud-lines::after { top: 48%; left: 56%; width: 48%; height: 48%; }

/* =========================================================
   12. SERVICES
   ========================================================= */
.services { background: var(--color-bg-raised); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
  row-gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-12);
}

.section-head .section-index { grid-column: 1 / -1; margin-bottom: 0; }
.section-head .display-title { grid-column: 1 / span 8; }

.section-head > p {
  grid-column: 9 / -1;
  max-width: 480px;
  justify-self: end;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.7;
}

.service-group + .service-group { margin-top: var(--space-12); }

.service-group-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: end;
  padding-bottom: var(--space-3);
  gap: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.service-group-head > span {
  color: var(--color-gold-soft);
  font-size: var(--text-caption);
  letter-spacing: 2px;
}

.service-group-head h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading-small), 3vw, var(--text-heading-medium));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.service-group-head small {
  color: var(--color-text-tertiary);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 2px;
  white-space: nowrap;
}

.service-list { position: relative; z-index: 3; }

.service-row {
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: 64px minmax(240px, 1.08fr) minmax(200px, 1fr) minmax(176px, 0.72fr) 32px;
  align-items: center;
  padding-block: var(--space-2);
  gap: var(--space-3);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  outline: none;
  transition: padding-left var(--duration-base) var(--ease-standard), border-color var(--duration-base);
}

.service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(207, 166, 90, 0.13), rgba(255, 255, 255, 0.03) 56%, transparent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--duration-base) var(--ease-standard);
}

.service-row::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--color-gold-soft);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--duration-base) var(--ease-standard);
}

.service-row:hover,
.service-row:focus-visible,
.service-row:focus-within,
.service-row.is-preview-open {
  padding-left: var(--space-1);
  border-color: var(--color-border-gold);
}

.service-row:hover::before,
.service-row:hover::after,
.service-row:focus-visible::before,
.service-row:focus-visible::after,
.service-row:focus-within::before,
.service-row:focus-within::after,
.service-row.is-preview-open::before,
.service-row.is-preview-open::after { transform: scaleY(1); }

.service-row h4 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 36px);
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
}

.service-row p {
  color: #8f8f89;
  font-size: var(--text-small);
  line-height: 1.55;
  transition: color var(--duration-base);
}

.service-row:hover p,
.service-row:focus-visible p,
.service-row:focus-within p { color: #c8c8c1; }

.service-no {
  color: var(--color-gold-soft);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  white-space: nowrap;
}

.price {
  min-width: 176px;
  justify-self: start;
  color: var(--color-gold-soft);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.service-row .arrow {
  justify-self: end;
  color: #bdbdb6;
  font-size: 18px;
  line-height: 1;
  transition: color var(--duration-base), transform var(--duration-base) var(--ease-standard);
}

.service-row:hover .arrow,
.service-row:focus-visible .arrow,
.service-row:focus-within .arrow { color: var(--color-gold-soft); transform: translate(4px, -4px); }

.service-preview-trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Le righe senza anteprima restano puramente informative. */
.service-row:not([data-preview]) {
  cursor: default;
}

.service-row:not([data-preview]):not(.service-row--no-preview):hover,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-visible,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-within {
  padding-left: 0;
  border-color: var(--color-border);
}

.service-row:not([data-preview]):not(.service-row--no-preview):hover::before,
.service-row:not([data-preview]):not(.service-row--no-preview):hover::after,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-visible::before,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-visible::after,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-within::before,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-within::after {
  transform: scaleY(0);
}

.service-row:not([data-preview]):not(.service-row--no-preview):hover p,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-visible p,
.service-row:not([data-preview]):not(.service-row--no-preview):focus-within p {
  color: #8f8f89;
}

.price-matrix {
  display: grid;
  width: 100%;
  min-width: 224px;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  justify-self: stretch;
  gap: var(--space-1);
}

.price-matrix-two { grid-template-columns: repeat(2, minmax(80px, 1fr)); }

.price-matrix span {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-1);
  gap: var(--space-1);
  border-left: 1px solid var(--color-border-gold);
  color: var(--color-text);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.price-matrix b { color: var(--color-text-tertiary); font-size: 10px; font-weight: 600; letter-spacing: 1px; }

.service-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  visibility: hidden;
  width: clamp(224px, 20vw, 304px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(228, 194, 125, 0.4);
  background: var(--color-surface);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.56);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast), visibility var(--duration-fast);
}

.service-preview.is-visible { visibility: visible; opacity: 1; }
.service-preview img { width: 100%; height: 100%; object-fit: cover; }

.service-preview-close {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: none;
  width: var(--touch-target);
  height: var(--touch-target);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(5, 5, 5, 0.72);
  color: var(--color-text);
  font-size: 24px;
  line-height: 1;
}

/* =========================================================
   13. SIGNATURE STYLES
   ========================================================= */
.signature { background: var(--color-bg-soft); }

.signature-title-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  margin-bottom: var(--space-10);
  gap: var(--space-3);
}

.signature-title-row .display-title { grid-column: 1 / span 8; }

.signature-title-row p {
  grid-column: 9 / -1;
  max-width: 440px;
  justify-self: end;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}

.style-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.style-a { grid-column: 1 / span 4; margin-top: var(--space-9); }
.style-b { grid-column: 5 / span 3; }
.style-c { grid-column: 8 / span 5; margin-top: var(--space-16); }

.style-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.03) brightness(0.82);
  transition: filter var(--duration-slow), transform 1000ms var(--ease-standard);
}

.style-card:hover img { filter: saturate(0.94) contrast(1.03) brightness(0.9); transform: scale(1.03); }

.style-card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.84));
  pointer-events: none;
}

.style-card figcaption {
  position: absolute;
  inset: auto var(--space-3) var(--space-3);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: 1.2;
  letter-spacing: 2px;
}

/* =========================================================
   14. INSTAGRAM — COMPACT SOCIAL STRIP
   ========================================================= */
.instagram-follow {
  position: relative;
  padding-block: var(--section-compact);
  padding-inline: var(--page-edge);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-gold);
  color: var(--color-bg);
}

.instagram-follow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--page-edge);
  width: clamp(112px, 12vw, 176px);
  aspect-ratio: 1;
  border: 8px solid rgba(255, 255, 255, 0.12);
  border-radius: 28%;
  pointer-events: none;
  transform: translateY(-50%);
}

.instagram-follow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--page-edge) + 40px);
  width: clamp(40px, 4vw, 56px);
  aspect-ratio: 1;
  border: 6px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  pointer-events: none;
  transform: translateY(-50%);
}

.instagram-follow-compact-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.instagram-follow-compact-left { display: flex; min-width: 0; align-items: center; }

.instagram-follow h2 {
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 112px);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.instagram-follow-compact-right {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.instagram-handle-wrap { display: inline-flex; align-items: center; gap: var(--space-2); }

.instagram-glyph {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 2px solid rgba(5, 5, 5, 0.64);
  border-radius: var(--radius-sm);
}

.instagram-glyph-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(5, 5, 5, 0.64);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
}

.instagram-glyph-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(5, 5, 5, 0.64);
}

.instagram-follow-handle {
  color: rgba(5, 5, 5, 0.72);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.instagram-follow-button {
  min-width: 216px;
  border-color: var(--color-bg);
  background: var(--color-bg);
  color: var(--color-gold-soft);
}

.instagram-follow-button b {
  font-size: 18px;
  font-weight: 400;
  transition: transform var(--duration-base) var(--ease-standard);
}

.instagram-follow-button:hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.instagram-follow-button:hover b { transform: translate(4px, -4px); }

/* =========================================================
   15. PHILOSOPHY
   ========================================================= */
.philosophy {
  position: relative;
  display: grid;
  min-height: 720px;
  place-items: center;
  padding-block: var(--section-editorial);
  padding-inline: var(--page-edge);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #15120d 0%, #070707 52%, #030303 100%);
  text-align: center;
}

.philosophy-content {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.philosophy .kicker { color: var(--color-gold-soft); }

.philosophy h2 {
  margin-block: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading-large), 10vw, 168px);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -5px;
  text-transform: uppercase;
}

.gold-mark {
  position: absolute;
  top: calc(50% + clamp(144px, 16vw, 224px));
  left: 50%;
  z-index: 1;
  color: var(--color-gold-soft);
  font-family: serif;
  font-size: 32px;
  line-height: 1;
  transform: translateX(-50%);
}

.philosophy-orbit {
  position: absolute;
  width: min(64vw, 800px);
  aspect-ratio: 1;
  border: 1px solid rgba(207, 166, 90, 0.1);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.philosophy-orbit span {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(207, 166, 90, 0.08);
  border-radius: var(--radius-pill);
}

.philosophy-orbit span:nth-child(2) { inset: 24%; }
.philosophy-orbit span:nth-child(3) { inset: 40%; }

/* =========================================================
   16. ATMOSPHERE — INSIDE THE SALON
   ========================================================= */
.atmosphere {
  padding-block: var(--section-standard);
  overflow: hidden;
  background: #070707;
}

.atmosphere-intro { padding-inline: var(--page-edge); padding-bottom: var(--space-8); }

.gallery-pin {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(207, 166, 90, 0.56) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

.gallery-pin.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.gallery-pin::-webkit-scrollbar { height: 8px; }
.gallery-pin::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); }
.gallery-pin::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: rgba(207, 166, 90, 0.56); }

.gallery-track {
  display: flex;
  width: max-content;
  padding-inline: var(--page-edge);
  gap: var(--space-3);
}

.gallery-card {
  position: relative;
  width: min(64vw, 720px);
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) brightness(0.8);
  pointer-events: none;
  transition: filter var(--duration-slow), transform 1000ms var(--ease-standard);
  -webkit-user-drag: none;
}

.gallery-card:hover img { filter: saturate(0.94) brightness(0.9); transform: scale(1.02); }

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 56% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.84));
  pointer-events: none;
}

.gallery-card figcaption {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
}

/* =========================================================
   17. METHOD
   ========================================================= */
.barber { background: var(--color-bg-raised); }

.barber-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-3);
}

.barber-portrait {
  position: relative;
  grid-column: 1 / span 5;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface);
}

.barber-portrait img {
  width: 100%;
  height: 108%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.04) brightness(0.84);
}

.portrait-frame {
  position: absolute;
  inset: var(--space-2);
  border: 1px solid rgba(228, 194, 125, 0.4);
}

.portrait-frame::before,
.portrait-frame::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border-color: var(--color-gold-soft);
}

.portrait-frame::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.portrait-frame::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.barber-copy { grid-column: 7 / -1; }
.barber-copy .kicker { margin-bottom: var(--space-3); color: var(--color-gold-soft); }

.barber-copy .lead {
  max-width: 680px;
  margin-block: var(--space-5);
  color: var(--color-text);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.5;
}

.editorial-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--space-4);
  gap: var(--space-5);
  border-top: 1px solid var(--color-border-gold);
}

.editorial-columns p { color: var(--color-text-secondary); font-size: var(--text-small); line-height: 1.7; }
.editorial-columns b { color: var(--color-gold-soft); font-size: 9px; letter-spacing: 2px; }
.barber-copy .text-link { margin-top: var(--space-5); }

/* =========================================================
   18. REVIEWS
   ========================================================= */
.reviews { overflow: hidden; background: var(--color-bg-soft); }
.reviews-head { margin-bottom: var(--space-12); }

.reviews-title-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.reviews-title-row .display-title { grid-column: 1 / span 8; }

.reviews-title-row > p {
  grid-column: 9 / -1;
  max-width: 480px;
  justify-self: end;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.reviews-grid { display: grid; grid-template-columns: 1.15fr 0.85fr 0.85fr; gap: var(--space-3); }

.review-stat {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
}

.review-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(207, 166, 90, 0.1), transparent 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base);
}

.review-stat:hover::before,
.review-stat:focus-visible::before { opacity: 1; }
.review-stat-primary { border-color: rgba(207, 166, 90, 0.4); }

.review-stat-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.review-eyebrow,
.review-source { font-size: 9px; font-weight: 600; line-height: 1.2; letter-spacing: 2px; }
.review-eyebrow { color: var(--color-gold-soft); }
.review-source { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.48); }

.review-arrow {
  color: var(--color-gold-soft);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard);
}

.review-stat-link:hover .review-arrow,
.review-stat-link:focus-visible .review-arrow { transform: translate(4px, -4px); }

.review-score {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  margin-top: auto;
  gap: var(--space-1);
}

.review-score strong {
  font-family: var(--font-display);
  font-size: clamp(88px, 10vw, 152px);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -6px;
}

.review-score span { color: rgba(255, 255, 255, 0.52); font-size: 13px; letter-spacing: 1px; }

.review-stars {
  position: relative;
  z-index: 1;
  margin-top: var(--space-3);
  color: var(--color-gold-soft);
  font-size: 16px;
  letter-spacing: 4px;
}

.review-number { color: var(--color-gold-soft); font-family: var(--font-display); font-size: 48px; line-height: 0.9; }

.review-stat > p {
  position: relative;
  z-index: 1;
  max-width: 304px;
  margin: auto 0 var(--space-4);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.review-link-copy {
  position: relative;
  z-index: 1;
  margin: auto 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
}

/* =========================================================
   19. BOOKING — GOLD CONVERSION SECTION
   ========================================================= */
.booking-clean-section {
  position: relative;
  padding-block: var(--section-standard);
  padding-inline: var(--page-edge);
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background: var(--color-gold);
  color: var(--color-bg);
}

.booking-clean-section::before {
  content: "幸";
  position: absolute;
  right: -16px;
  bottom: -144px;
  z-index: -1;
  color: rgba(5, 5, 5, 0.06);
  font-family: var(--font-display);
  font-size: clamp(256px, 38vw, 640px);
  font-weight: 600;
  line-height: 0.8;
  pointer-events: none;
}

.booking-clean {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-3);
}

.booking-clean-copy { grid-column: 1 / span 8; }
.booking-clean-copy .section-index { color: rgba(5, 5, 5, 0.64); }

.booking-clean h2 {
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading-large), 8vw, 136px);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -4px;
  text-transform: uppercase;
  text-wrap: balance;
}

.booking-clean h2 .word-inner,
.booking-clean h2 .gold-word,
.booking-clean h2 .gold-word .word-inner { color: var(--color-bg); }

.booking-clean h2 .title-white,
.booking-clean h2 .title-white .word-inner { color: var(--color-text); -webkit-text-fill-color: var(--color-text); }

.booking-clean-action {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: var(--space-6);
  gap: var(--space-4);
  border-left: 1px solid rgba(5, 5, 5, 0.24);
}

.booking-clean-action::before {
  content: "APPUNTAMENTI";
  color: rgba(5, 5, 5, 0.64);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
}

.booking-clean-action > p {
  max-width: 400px;
  color: rgba(5, 5, 5, 0.76);
  font-size: 18px;
  line-height: 1.65;
}

.booking-clean-action .btn {
  min-width: 224px;
  min-height: 64px;
  border-color: var(--color-bg);
  background: var(--color-bg);
  color: var(--color-gold-soft);
}

.booking-clean-action .btn::before { background: var(--color-text); }
.booking-clean-action .btn:hover { color: var(--color-bg); }
/* =========================================================
   20. FOOTER
   ========================================================= */
.footer {
  position: relative;
  padding: var(--space-10) var(--page-edge) var(--space-4);
  background: var(--color-bg);
}

.footer-line { display: none; }

.footer-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.footer-top .footer-brand { font-size: clamp(32px, 3vw, 48px); letter-spacing: 1px; }

.footer-signature {
  color: rgba(255, 255, 255, 0.44);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
  font-style: normal;
}

.footer-links > a,
.footer-hours-card {
  position: relative;
  display: flex;
  min-height: 128px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--color-border);
  transition: background var(--duration-base) var(--ease-standard);
}

.footer-links > :first-child { padding-left: 0; }
.footer-links > :last-child { padding-right: 0; border-right: 0; }
.footer-links > a:hover,
.footer-links > a:focus-visible { background: rgba(207, 166, 90, 0.05); }

.footer-link-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.footer-link-copy strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, var(--text-heading-small));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.footer-link-copy small { max-width: 256px; color: #8f8f89; font-size: var(--text-label); line-height: 1.55; }

.footer-link-arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  color: var(--color-gold-soft);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard);
}

.footer-links > a:hover .footer-link-arrow,
.footer-links > a:focus-visible .footer-link-arrow { transform: translate(4px, -4px); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  gap: var(--space-4);
}

.footer-bottom p { color: #666661; font-size: var(--text-caption); line-height: 1.5; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Iubenda popup links keep the footer's original visual treatment. */
.footer-legal .footer-policy-link {
  all: unset !important;
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  text-transform: inherit !important;
  cursor: pointer !important;
  transition: color var(--duration-fast) !important;
}

.footer-legal .footer-policy-link::before,
.footer-legal .footer-policy-link::after { display: none !important; content: none !important; }

.footer-legal .footer-policy-link:hover,
.footer-legal .footer-policy-link:focus-visible { color: var(--color-gold-soft) !important; }

.footer-credit { color: var(--color-text-tertiary); transition: color var(--duration-fast); }
.footer-credit:hover,
.footer-credit:focus-visible { color: var(--color-gold-soft); }

/* =========================================================
   21. IMAGE LIGHTBOX — CONTENT PHOTOS ONLY
   ========================================================= */
.lightbox-target {
  cursor: zoom-in;
  outline: none;
}

.lightbox-target:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-gold-soft);
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  visibility: hidden;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(3, 3, 3, 0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base), visibility var(--duration-base);
}

.image-lightbox.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.image-lightbox.is-single { grid-template-rows: minmax(0, 1fr); }
.image-lightbox.is-single .lightbox-nav,
.image-lightbox.is-single .lightbox-thumbs { display: none; }

.image-lightbox.is-single .lightbox-image {
  max-height: calc(100svh - 128px);
}

.lightbox-stage {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 64px 112px 24px;
}

.lightbox-figure {
  display: grid;
  max-width: 100%;
  min-height: 0;
  justify-items: center;
  gap: var(--space-2);
}

.lightbox-image {
  display: block;
  max-width: min(82vw, 1440px);
  max-height: calc(100svh - 208px);
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.lightbox-figure figcaption {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.lightbox-count {
  flex: 0 0 auto;
  color: var(--color-gold-soft);
  font-weight: 600;
  letter-spacing: 1px;
}

.lightbox-close,
.lightbox-nav {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(9, 9, 9, 0.78);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
}

.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  border-color: var(--color-gold-soft);
  background: rgba(207, 166, 90, 0.14);
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
.lightbox-prev { left: 32px; }
.lightbox-next { right: 32px; }

.lightbox-thumbs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  padding: 16px 24px 24px;
  justify-content: safe center;
  gap: var(--space-1);
  scrollbar-width: none;
}

.lightbox-thumbs::-webkit-scrollbar { display: none; }

.lightbox-thumb {
  width: 80px;
  height: 56px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  background: var(--color-surface);
  opacity: 0.52;
  cursor: pointer;
  transition: opacity var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.lightbox-thumb:hover,
.lightbox-thumb:focus-visible,
.lightbox-thumb.is-active {
  border-color: var(--color-gold-soft);
  opacity: 1;
}

.lightbox-thumb.is-active { transform: translateY(-4px); }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   22. KEYFRAMES
   ========================================================= */
@keyframes pulse-line {
  0%,
  100% { opacity: 0.4; transform: scaleX(0.4); }
  50% { opacity: 1; transform: scaleX(1); }
}

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

/* =========================================================
   22. RESPONSIVE — COMPACT DESKTOP (≤ 1180PX)
   ========================================================= */
@media (max-width: 1180px) {
  :root {
    --page-gutter: 48px;
    --section-standard: 112px;
    --section-compact: 64px;
    --section-editorial: 120px;
  }

  .desktop-nav { gap: var(--space-2); }
  .desktop-nav a { font-size: var(--text-caption); }

  .service-row {
    grid-template-columns: 56px minmax(216px, 1.08fr) minmax(176px, 0.9fr) minmax(168px, 0.72fr) 32px;
    gap: var(--space-2);
  }

  .service-row p { font-size: 12px; }
  .price-matrix { min-width: 200px; gap: var(--space-micro); }
  .booking-clean-action { padding-left: var(--space-4); }
}

/* =========================================================
   23. RESPONSIVE — TABLET (≤ 1024PX)
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 32px;
    --section-standard: 96px;
    --section-compact: 64px;
    --section-editorial: 120px;
  }

  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav,
  .header-cta { display: none; }
  .menu-toggle { display: block; justify-self: end; }

  .experience-grid,
  .barber-grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .experience-grid > div:first-child,
  .experience-visual,
  .experience-copy,
  .barber-portrait,
  .barber-copy { grid-column: auto; }

  .experience-grid > div:first-child,
  .experience-copy { max-width: 720px; }
  .experience-visual { max-height: 640px; }

  .section-head,
  .signature-title-row,
  .reviews-title-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }

  .section-head .section-index { margin-bottom: var(--space-2); }

  .section-head .display-title,
  .section-head > p,
  .signature-title-row .display-title,
  .signature-title-row p,
  .reviews-title-row .display-title,
  .reviews-title-row > p {
    grid-column: auto;
    justify-self: start;
  }

  .section-head > p,
  .signature-title-row p,
  .reviews-title-row > p { max-width: 640px; }

  .service-row { cursor: pointer; }
  .service-row:not([data-preview]) { cursor: default; }

  .service-preview {
    top: 50%;
    left: 50%;
    width: min(44vw, 320px);
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity var(--duration-fast), visibility var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
  }

  .service-preview.is-visible {
    box-shadow: 0 0 0 100vmax var(--color-overlay), 0 24px 72px rgba(0, 0, 0, 0.72);
    transform: translate(-50%, -50%) scale(1);
  }

  .service-preview-close { display: grid; }

  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-a,
  .style-b,
  .style-c { grid-column: auto; margin-top: 0; }
  .style-c { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  .instagram-follow-compact-inner { min-height: 104px; gap: var(--space-4); }
  .instagram-follow-compact-right { gap: var(--space-3); }
  .barber-portrait { width: min(100%, 640px); }
  .barber-copy { max-width: 800px; }
  .reviews-head { margin-bottom: var(--space-8); }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-stat-primary { grid-column: 1 / -1; min-height: 280px; }

  .booking-clean { grid-template-columns: 1fr; gap: var(--space-8); }
  .booking-clean-copy,
  .booking-clean-action { grid-column: auto; }

  .booking-clean-action {
    padding-top: var(--space-5);
    padding-left: 0;
    border-top: 1px solid rgba(5, 5, 5, 0.24);
    border-left: 0;
  }

  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links > :nth-child(2n) { padding-right: 0; border-right: 0; }
  .footer-links > :nth-child(odd) { padding-left: 0; }
  .footer-links > :nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
}

/* =========================================================
   24. RESPONSIVE — MOBILE (≤ 768PX)
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --page-gutter: 24px;
    --section-standard: 80px;
    --section-compact: 48px;
    --section-editorial: 80px;
    --control-height: 48px;
    --control-padding: 16px;
    --header-height: 72px;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-1);
  }

  .mobile-header-cta {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-2);
    border: 1px solid var(--color-gold-soft);
    background: var(--color-gold-soft);
    color: var(--color-bg);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .section-index { margin-bottom: var(--space-4); }

  .display-title {
    font-size: clamp(56px, 17vw, 96px);
    letter-spacing: -3px;
  }

  .brand { font-size: 18px; }
  .mobile-menu { padding: var(--space-10) var(--page-edge) var(--space-4); }
  .mobile-menu a { min-height: 56px; font-size: clamp(40px, 12vw, 64px); }

  .hero-air {
    height: 100svh;
    min-height: 100svh;
    padding-inline: var(--page-gutter);
  }

  .hero-air-logo { top: 42%; width: calc(100% - 32px); }

  .hero-air-logo h1 {
    font-size: 16vw;
    line-height: 0.82;
    letter-spacing: -4px;
  }

  .hero-air-logo .logo-gap { width: 0.16em; }

  .hero-air-haze {
    top: 42%;
    width: 80vw;
    height: 208px;
    filter: blur(8px);
  }

  .hero-air-ui {
    bottom: var(--space-4);
    left: 50%;
    width: calc(100% - 48px);
    max-width: 400px;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
    transform: translateX(-50%);
  }

  .hero-air-kicker { font-size: 9px; }
  .hero-air-actions { width: 100%; justify-content: center; gap: var(--space-2); }
  .hero-bottom-line,
  .scroll-hint { display: none; }

  .experience-grid,
  .barber-grid { gap: var(--space-4); }
  .experience-visual { aspect-ratio: 4 / 3; }
  .experience-seal { top: var(--space-3); right: var(--space-3); width: 80px; }
  .experience-seal span { font-size: 32px; }
  .experience-copy p { font-size: var(--text-body); }

  .section-head { margin-bottom: var(--space-8); }
  .section-head .section-index { margin-bottom: 0; }
  .service-group + .service-group { margin-top: var(--space-8); }

  .service-group-head {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    gap: var(--space-2);
  }

  .service-group-head h3 { font-size: clamp(28px, 8vw, 40px); }
  .service-group-head small { grid-column: 2; white-space: normal; }

  .service-row {
    min-height: 96px;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    grid-template-areas: "number title arrow" ". price price";
    align-items: start;
    padding-block: var(--space-2);
    gap: var(--space-1) var(--space-2);
  }

  .service-no { grid-area: number; padding-top: var(--space-micro); font-size: 8px; }
  .service-row h4 { grid-area: title; font-size: clamp(24px, 7vw, 32px); }
  .service-row p { display: none; }
  .service-row > .price,
  .price-matrix { grid-area: price; justify-self: start; }
  .service-row > .price { min-width: 0; padding-top: var(--space-1); font-size: 18px; }
  .service-row .arrow { grid-area: arrow; }

  /* Il tap non lascia la voce del servizio evidenziata su mobile. */
  .service-row:hover,
  .service-row:focus-visible,
  .service-row:focus-within,
  .service-row.is-preview-open {
    padding-left: 0;
    border-color: var(--color-border);
  }

  .service-row:hover::before,
  .service-row:hover::after,
  .service-row:focus-visible::before,
  .service-row:focus-visible::after,
  .service-row:focus-within::before,
  .service-row:focus-within::after,
  .service-row.is-preview-open::before,
  .service-row.is-preview-open::after { transform: scaleY(0); }

  .service-row:hover .arrow,
  .service-row:focus-visible .arrow,
  .service-row:focus-within .arrow {
    color: #bdbdb6;
    transform: none;
  }

  .price-matrix {
    width: 100%;
    min-width: 0;
    padding-top: var(--space-1);
    gap: 0;
  }

  /* Permanente: Corti e Lunghi occupano le prime due colonne del listino. */
  .price-matrix-two { width: 66.666%; }

  .price-matrix span { font-size: 16px; white-space: normal; }

  /* Anteprima mobile: immagine ampia e fondale che blocca le altre voci. */
  body.service-preview-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.82);
    pointer-events: auto;
  }

  .service-preview {
    width: min(calc(100vw - 32px), 440px);
    max-height: calc(100svh - 64px);
  }

  .service-preview.is-visible {
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.72);
  }

  .service-preview-close {
    top: var(--space-2);
    right: var(--space-2);
  }

  /* Mantiene le frecce in stile tipografico, evitando le emoji di iOS. */
  .arrow,
  .review-arrow,
  .footer-link-arrow,
  .instagram-follow b,
  .booking-clean span,
  .text-link i {
    font-family: Arial, Helvetica, sans-serif;
    font-variant-emoji: text;
  }

  .signature-title-row { margin-bottom: var(--space-8); }

  .style-grid { display: flex; flex-direction: column; gap: var(--space-2); }
  .style-card,
  .style-a,
  .style-b,
  .style-c { width: 100%; aspect-ratio: 4 / 5; }
  .style-card figcaption { inset: auto var(--space-2) var(--space-2); }

  .instagram-follow::before {
    top: var(--space-2);
    right: var(--space-2);
    width: 88px;
    border-width: 8px;
    transform: none;
  }

  .instagram-follow::after {
    top: 40px;
    right: 40px;
    width: 32px;
    border-width: 4px;
    transform: none;
  }

  .instagram-follow-compact-inner {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .instagram-follow h2 { font-size: clamp(64px, 20vw, 96px); }
  .instagram-follow-compact-right { width: 100%; justify-content: space-between; }
  .instagram-follow-handle { font-size: 14px; }
  .instagram-follow-button { min-width: 0; }

  .philosophy { min-height: 560px; }
  .philosophy h2 { font-size: clamp(64px, 20vw, 112px); letter-spacing: -3px; }
  .philosophy .gold-mark {
    top: auto;
    bottom: var(--space-6);
    z-index: 2;
    font-size: 36px;
  }
  .philosophy-orbit { width: 112vw; }
  .atmosphere-intro { padding-bottom: var(--space-6); }
  .gallery-pin {
    scroll-padding-inline: var(--page-edge);
    scrollbar-width: none;
  }
  .gallery-pin::-webkit-scrollbar { display: none; }

  .gallery-track {
    gap: var(--space-2);
    scroll-snap-type: x mandatory;
  }

  .gallery-card {
    width: 82vw;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }

  .gallery-card figcaption { bottom: var(--space-2); left: var(--space-2); }

  .lightbox-stage { padding: 72px 16px 16px; }

  .lightbox-image {
    max-width: calc(100vw - 32px);
    max-height: calc(100svh - 224px);
  }

  .lightbox-figure { gap: var(--space-1); }
  .lightbox-figure figcaption { padding-inline: 4px; font-size: 10px; }

  .lightbox-close {
    top: 16px;
    right: 16px;
  }

  .lightbox-nav {
    top: 50%;
    width: 44px;
    height: 44px;
    background: rgba(5, 5, 5, 0.86);
  }

  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-thumbs { padding: 12px 16px 16px; justify-content: flex-start; }
  .lightbox-thumb { width: 72px; height: 52px; }

  .barber-portrait { width: 100%; }
  .barber-copy .kicker { margin-bottom: var(--space-2); }
  .barber-copy .lead { margin-block: var(--space-4); }

  .editorial-columns {
    grid-template-columns: 1fr;
    padding-top: var(--space-3);
    gap: var(--space-3);
  }

  .barber-copy .text-link { margin-top: var(--space-4); }
  .reviews-head { margin-bottom: var(--space-8); }
  .reviews-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .review-stat-primary { grid-column: auto; }
  .review-stat { min-height: 240px; padding: var(--space-3); }
  .review-score strong { font-size: clamp(88px, 30vw, 128px); }
  .review-link-copy { font-size: clamp(40px, 12vw, 56px); }

  .booking-clean h2 {
    font-size: clamp(56px, 17vw, 96px);
    line-height: 0.78;
    letter-spacing: -3px;
  }

  .booking-clean { gap: var(--space-6); }
  .booking-clean-action { padding-top: var(--space-4); gap: var(--space-3); }
  .booking-clean-action > p { font-size: var(--text-body); }
  .booking-clean-action .btn { width: 100%; min-height: 56px; }

  .footer { padding-top: var(--space-10); padding-bottom: var(--space-3); }

  .footer-top {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: var(--space-3);
    gap: var(--space-2);
  }

  .footer-top .footer-brand { font-size: 32px; }
  .footer-links { grid-template-columns: 1fr; }

  .footer-links > a,
  .footer-hours-card,
  .footer-links > :first-child,
  .footer-links > :last-child,
  .footer-links > :nth-child(odd),
  .footer-links > :nth-child(2n) {
    min-height: 112px;
    padding: var(--space-3) 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .footer-links > :last-child { border-bottom: 0; }
  .footer-link-arrow { top: var(--space-3); right: 0; }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: var(--space-3);
    gap: var(--space-2);
  }

  .footer-legal {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .footer-legal .footer-policy-link,
  .footer-legal .footer-credit { white-space: nowrap !important; }
}

/* =========================================================
   25. RESPONSIVE — SMALL MOBILE (≤ 480PX)
   ========================================================= */
@media (max-width: 480px) {
  .hero-air-logo h1 { font-size: 17vw; letter-spacing: -3px; }
  .hero-air-actions { flex-direction: column; }
  .hero-air-actions .btn,
  .hero-air-actions .text-link { justify-content: center; }
  .service-group-head h3 { font-size: 28px; }
  .price-matrix span { padding-left: var(--space-micro); font-size: 15px; }
  .price-matrix b { font-size: 9px; }
  .instagram-follow-compact-right { align-items: flex-start; flex-direction: column; }
  .instagram-follow-button { width: 100%; }

  .footer-legal {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }
}

@media (max-width: 380px) {
  .site-header { gap: var(--space-micro); }
  .brand { font-size: 16px; letter-spacing: 1.5px; }
  .mobile-header-cta { padding-inline: 12px; }
  .mobile-header-cta-long { display: none; }
  .mobile-header-cta-short { display: inline; }
}

/* =========================================================
   26. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .intro,
  .cursor,
  .hero-air-haze { display: none !important; }

  .hero-air-logo,
  .hero-air-ui,
  .hero-bottom-line,
  .scroll-hint { opacity: 1 !important; }

  .hero-air-logo { transform: translate(-50%, -50%) !important; }
  .hero-air-ui { transform: none !important; }

  .hero-air-logo .logo-letter,
  .word-inner {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .hero-air-ui { transform: translateX(-50%) !important; }
}