/* MISTER BARBER — base.css v1.0 */

:root {
  --asphalt: #0B0B0B;
  --asphalt-soft: #1A1A1A;
  --canvas: #E5E1D8;
  --canvas-soft: #D6D2C8;
  --ember: #E85A1F;
  --silver: #8E8E8E;

  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  --page-margin: 56px;
  --max-width: 1440px;
  --nav-height: 72px;

  --display-xl: 180px;
  --display-l: 140px;
  --display-m: 96px;
  --display-s: 64px;
  --h1: 48px; --h2: 32px; --h3: 20px;
  --body-l: 18px; --body: 15px; --body-s: 13px;
  --eyebrow: 11px; --meta: 10px;
}

@media (max-width: 768px) {
  :root {
    --page-margin: 20px;
    --display-xl: 92px;
    --display-l: 72px;
    --display-m: 56px;
    --display-s: 40px;
    --h1: 32px;
  }
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  background-color: var(--asphalt);
  color: var(--canvas);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  max-width: 100%;
  filter: contrast(1.05);
}

/* ─── NAVBAR ─── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-margin);
  transition: background-color 0.3s, border-color 0.3s;
}

.nav--scrolled {
  background-color: var(--asphalt);
  border-bottom-color: var(--asphalt-soft);
}

.nav--open {
  background-color: var(--asphalt);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--canvas);
  text-transform: uppercase;
  line-height: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  list-style: none;
}

.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--canvas);
  transition: color 0.15s;
}

.nav__links a:hover {
  color: var(--silver);
}

.nav__cta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canvas);
  border: 1px solid var(--canvas);
  padding: 10px 20px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nav__cta:hover {
  background: var(--canvas);
  color: var(--asphalt);
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--canvas);
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 768px) {
  .nav {
    padding: 0 20px;
  }

  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav--open .nav__links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--asphalt);
    align-items: center;
    justify-content: center;
    gap: var(--s-7);
  }

  .nav--open .nav__links a {
    font-size: 14px;
  }

  .nav--open .nav__cta {
    display: block;
  }
}

/* ─── META STRIP ─── */

.meta-strip {
  display: flex;
  gap: 80px;
  padding: var(--s-5) var(--page-margin);
  border-top: 1px solid var(--asphalt);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  overflow-x: auto;
  white-space: nowrap;
}

/* ─── DOVE CI TROVATE (s03) ─── */

.s03 {
  background: var(--asphalt);
  padding: 120px var(--page-margin) 120px;
  position: relative;
}

.s03-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.s03-heading {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--canvas);
  margin-bottom: 40px;
}

.s03-heading--ember { color: var(--ember); }

.s03-address { margin-top: 24px; }

.s03-address-line {
  font-family: var(--font-body);
  font-size: var(--body-l);
  color: var(--canvas);
  line-height: 1.6;
}

.s03-coords {
  font-family: var(--font-body);
  font-size: var(--body-s);
  color: var(--silver);
  letter-spacing: 0.12em;
  margin-top: 12px;
}

.s03-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ─── EXPAND MAP ─── */

.expand-map {
  width: 240px;
  height: 140px;
  border-radius: 20px;
  border: 1px solid rgba(229,225,216,0.12);
  background: rgba(26,26,26,0.9);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1),
              height 0.5s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s;
  transform-style: preserve-3d;
  will-change: transform;
}

.expand-map:hover {
  box-shadow: 0 20px 60px rgba(232,90,31,0.15);
}

.expand-map.is-expanded {
  width: 380px;
  height: 300px;
  overflow: visible;
}

.expand-map__top {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}

.expand-map__icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(232,90,31,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(232,90,31,0.5));
  transition: filter 0.3s;
}

.expand-map:hover .expand-map__icon-wrap {
  filter: drop-shadow(0 0 14px rgba(232,90,31,0.8));
}

.expand-map__live {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--canvas);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(229,225,216,0.08);
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(229,225,216,0.12);
  transition: transform 0.3s, opacity 0.3s;
}

.expand-map:hover .expand-map__live {
  transform: scale(1.05);
}

.expand-map__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* grid pattern visible in collapsed state */
.expand-map__grid-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.4s;
  pointer-events: none;
}

.expand-map.is-expanded .expand-map__grid-bg {
  opacity: 0;
}

/* pseudo-map SVG */
.expand-map__map-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s 0.15s;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
}

.expand-map.is-expanded .expand-map__map-wrap {
  opacity: 1;
}

.expand-map__roads {
  width: 100%;
  height: 100%;
}

/* road animations */
.road {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0s;
}

.expand-map.is-expanded .road--main {
  animation: draw-road 0.6s ease forwards;
}

.expand-map.is-expanded .road--sec {
  animation: draw-road 0.8s ease 0.2s forwards;
}

@keyframes draw-road {
  to { stroke-dashoffset: 0; }
}

/* building animations */
.building {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
}

.expand-map.is-expanded .building:nth-child(1)  { animation: pop-in 0.3s ease 0.3s forwards; }
.expand-map.is-expanded .building:nth-child(2)  { animation: pop-in 0.3s ease 0.38s forwards; }
.expand-map.is-expanded .building:nth-child(3)  { animation: pop-in 0.3s ease 0.35s forwards; }
.expand-map.is-expanded .building:nth-child(4)  { animation: pop-in 0.3s ease 0.43s forwards; }
.expand-map.is-expanded .building:nth-child(5)  { animation: pop-in 0.3s ease 0.32s forwards; }
.expand-map.is-expanded .building:nth-child(6)  { animation: pop-in 0.3s ease 0.40s forwards; }
.expand-map.is-expanded .building:nth-child(7)  { animation: pop-in 0.3s ease 0.28s forwards; }
.expand-map.is-expanded .building:nth-child(8)  { animation: pop-in 0.3s ease 0.36s forwards; }

@keyframes pop-in {
  to { opacity: 1; transform: scale(1); }
}

/* pin */
.pin-glow, .pin, .pin-ring {
  opacity: 0;
}

.expand-map.is-expanded .pin-glow {
  animation: pop-in 0.4s ease 0.55s forwards;
}

.expand-map.is-expanded .pin {
  animation: pop-in 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.6s forwards;
}

.expand-map.is-expanded .pin-ring {
  animation: pop-in 0.5s ease 0.65s forwards;
}

.expand-map__bottom {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 3;
}

.expand-map__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--canvas);
  display: block;
  margin-bottom: 6px;
  transition: transform 0.3s;
}

.expand-map:hover .expand-map__label {
  transform: translateX(4px);
}

.expand-map__underline {
  height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent);
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.expand-map:hover .expand-map__underline,
.expand-map.is-expanded .expand-map__underline {
  transform: scaleX(1);
}

.expand-map__cap {
  position: absolute;
  top: -40px;
  left: -35px;
  width: 160px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
  transform: rotate(-15deg) scale(0) translateY(20px);
  opacity: 0;
}

.expand-map.is-expanded .expand-map__cap {
  animation: cap-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}

@keyframes cap-pop {
  0%   { transform: rotate(-15deg) scale(0) translateY(20px); opacity: 0; }
  100% { transform: rotate(-15deg) scale(1) translateY(0px);  opacity: 1; }
}

@media (max-width: 768px) {
  .expand-map__cap {
    width: 224px;
    left: -55px;
  }
}

.expand-map__hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s;
}

.expand-map:hover .expand-map__hint {
  opacity: 1;
  bottom: -22px;
}

.expand-map.is-expanded .expand-map__hint {
  opacity: 0;
}

@media (max-width: 768px) {
  .s03 { padding: 80px 20px; }
  .s03-inner { grid-template-columns: 1fr; gap: 48px; }
  .s03-heading { font-size: 72px; }
  .s03-right { justify-content: flex-start; }
  .expand-map.is-expanded { width: 100%; max-width: 340px; height: 280px; }
}

/* ─── FOOTER ─── */

.footer {
  background: var(--asphalt);
  border-top: 1px solid var(--asphalt-soft);
  padding: var(--s-10) var(--page-margin) var(--s-7);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--display-m);
  letter-spacing: 0.005em;
  line-height: 0.9;
  color: var(--canvas);
  text-transform: uppercase;
  margin-bottom: var(--s-10);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-10);
  padding-top: var(--s-7);
  border-top: 1px solid var(--asphalt-soft);
}

.footer__col-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--s-4);
}

.footer__col-value {
  font-family: var(--font-body);
  font-size: var(--body-s);
  color: var(--canvas);
  line-height: 1.55;
}

.footer__col-value a {
  color: var(--canvas);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.footer__col-value a:hover {
  opacity: 1;
}

.footer__social {
  display: flex;
  gap: var(--s-6);
}

.footer__social a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--body-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--canvas);
  transition: color 0.15s;
}

.footer__social a:hover {
  color: var(--ember);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--asphalt-soft);
  font-size: var(--meta);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
}

@media (max-width: 768px) {
  .footer {
    padding: var(--s-9) 20px var(--s-7);
  }

  .footer__logo {
    font-size: var(--display-m);
    margin-bottom: var(--s-8);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--s-3);
    text-align: center;
  }

  .meta-strip {
    padding: var(--s-5) 20px;
  }
}

/* ─── HERO ─── */

.hero {
  padding: var(--nav-height) 80px var(--s-7);
  background: var(--asphalt);
}

.hero__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero__video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11,11,11,0.2) 0%,
    rgba(11,11,11,0.0) 30%,
    rgba(11,11,11,0.6) 75%,
    rgba(11,11,11,1) 100%
  );
}

.hero__content {
  position: absolute;
  bottom: var(--s-7);
  left: var(--s-7);
  z-index: 2;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--s-4);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--display-l);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--canvas);
  margin-bottom: var(--s-5);
}

.hero__sub {
  font-family: var(--font-body);
  font-size: var(--body-l);
  color: var(--canvas-soft);
  margin-bottom: var(--s-6);
}

.hero__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--asphalt);
  background: var(--canvas);
  padding: 14px 32px;
  transition: background 0.15s, color 0.15s;
}

.hero__cta:hover {
  background: var(--ember);
  color: var(--canvas);
}

.hero__scroll {
  position: absolute;
  right: var(--s-7);
  bottom: var(--s-7);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.hero__scroll span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: var(--silver);
  transform-origin: top;
  animation: scroll-line 1.8s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (max-width: 768px) {
  .hero {
    padding: var(--nav-height) 20px 28px;
  }

  .hero__content {
    left: var(--s-4);
    bottom: var(--s-5);
  }

  .hero__scroll {
    display: none;
  }
}

/* ─── VIDEO CARDS (s02) ─── */

@keyframes aurora {
  0%   { background-position: 50% 50%, 50% 50%; }
  100% { background-position: 350% 50%, 350% 50%; }
}

.s02 {
  background: var(--asphalt);
  padding: 160px var(--page-margin) 80px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.s02::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 360px;
  background: linear-gradient(
    to bottom,
    var(--asphalt) 0%,
    rgba(11,11,11,0.96) 15%,
    rgba(11,11,11,0.82) 32%,
    rgba(11,11,11,0.58) 52%,
    rgba(11,11,11,0.25) 72%,
    rgba(11,11,11,0.06) 88%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

.aurora-bg {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0.85;
  will-change: transform;
  background-image:
    repeating-linear-gradient(100deg, #0B0B0B 0%, #0B0B0B 7%, transparent 10%, transparent 12%, #0B0B0B 16%),
    repeating-linear-gradient(100deg, #E85A1F 8%, #3b82f6 13%, #ff8c42 18%, #a5b4fc 23%, #c94400 28%, #60a5fa 33%, #ddd6fe 38%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(6px) brightness(1.6) saturate(1.8);
  animation: aurora 60s linear infinite;
  mask-image: radial-gradient(ellipse at 60% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, black 20%, transparent 75%);
}

.aurora-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(100deg, #0B0B0B 0%, #0B0B0B 7%, transparent 10%, transparent 12%, #0B0B0B 16%),
    repeating-linear-gradient(100deg, #E85A1F 8%, #3b82f6 13%, #ff8c42 18%, #a5b4fc 23%, #c94400 28%, #60a5fa 33%, #ddd6fe 38%);
  background-size: 200%, 100%;
  animation: aurora 60s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.cards-row {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 75vh;
  position: relative;
  z-index: 4;
}

.card-wrap {
  flex: 1;
  height: 100%;
  border-radius: 14px;
  overflow: visible;
  position: relative;
  cursor: pointer;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* glow vars */
  --base: 30;
  --spread: 200;
  --border: 2;
  --size: 220;
  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread)));
  --backdrop: hsl(0 0% 60% / 0.10);

  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(var(--hue) 100% 65% / 0.12), transparent
  );
  background-color: var(--backdrop);
  background-attachment: fixed;
  border: var(--border-size) solid rgba(255,255,255,0.08);
}

.card-wrap--center {
  flex: 1.7;
}

/* expand hovered side card, shrink center */
.cards-row:has(.card-wrap--left:hover) .card-wrap--left  { flex: 1.7; }
.cards-row:has(.card-wrap--left:hover) .card-wrap--center { flex: 1; }
.cards-row:has(.card-wrap--right:hover) .card-wrap--right { flex: 1.7; }
.cards-row:has(.card-wrap--right:hover) .card-wrap--center { flex: 1; }

/* glow border ::before */
.card-wrap::before,
.card-wrap::after {
  pointer-events: none;
  content: '';
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: 14px;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  background-attachment: fixed;
  z-index: 2;
}
.card-wrap::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(var(--hue) 100% 50% / 1), transparent 100%
  );
  filter: brightness(2);
}
.card-wrap::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(0 100% 100% / 0.8), transparent 100%
  );
}

/* inner glow outer blur */
.card-glow-inner {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  opacity: 0.6;
  will-change: filter;
  pointer-events: none;
  border: 20px solid transparent;
  filter: blur(20px);
  background: none;
  z-index: 1;
}

.card-inner {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
}

.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: 0;
}

.card-cap {
  position: absolute;
  top: -58px;
  left: -62px;
  width: 210px;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  transform: rotate(-10deg);
}

/* ─── CAROUSEL ANIMATIONS ─── */
@keyframes cardExitLeft {
  0%   { transform: translateX(0) scale(1);    opacity: 1; }
  100% { transform: translateX(-108%) scale(0.88); opacity: 0; }
}
@keyframes cardEnterRight {
  0%   { transform: translateX(108%) scale(0.88); opacity: 0; }
  100% { transform: translateX(0) scale(1);    opacity: 1; }
}

@media (max-width: 768px) {
  .s02 { padding: 150px 20px 48px; }

  .cards-row {
    position: relative;
    flex-direction: row;
    width: 73vw;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 9/16;
    height: auto;
    overflow: visible;
    gap: 0;
    padding: 0;
  }

  .card-wrap,
  .card-wrap--center {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    flex: none;
    opacity: 0;
    pointer-events: none;
    transition: none;
  }

  .card-wrap.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .card-wrap.anim-exit {
    animation: cardExitLeft 0.32s cubic-bezier(0.55, 0, 0.45, 1) forwards;
  }

  .card-wrap.anim-enter {
    animation: cardEnterRight 0.32s cubic-bezier(0.55, 0, 0.45, 1) forwards;
  }

  .cards-row:has(.card-wrap--left:hover) .card-wrap--center,
  .cards-row:has(.card-wrap--right:hover) .card-wrap--center { flex: none; }
}

/* ─── SECTION FADE ─── */

.section-fade {
  position: relative;
  pointer-events: none;
  z-index: 5;
}

/* Hero → s01 */
.section-fade--hero {
  height: 100px;
  margin-top: -100px;
  margin-bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(11,11,11,0.6) 60%,
    var(--asphalt) 100%
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 55%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 55%, black 100%);
}

/* s01 → s02 */
.section-fade--s1s2 {
  height: 100px;
  margin-top: -20px;
  margin-bottom: -80px;
  background: linear-gradient(
    to bottom,
    var(--asphalt) 0%,
    rgba(11,11,11,0.6) 55%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

/* ─── CHI SIAMO (s01) ─── */

.s01 {
  position: relative;
  background: var(--asphalt);
  overflow: hidden;
  padding: 56px var(--page-margin) 10px;
}

.s01::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,90,31,0.06), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(232,90,31,0.04), transparent 50%);
  pointer-events: none;
}

.chapter {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--silver);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(229,225,216,0.12);
}
.chapter .dot { color: var(--ember); }

.s01-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
  margin-top: 64px;
  min-height: auto;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
}
.brand-mark {
  font-family: var(--font-display);
  font-size: clamp(120px, 16vw, 240px);
  line-height: 0.82;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--canvas);
  position: relative;
  z-index: 2;
}
.brand-mark .second {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--canvas);
}
.brand-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 48px;
}
.brand-foot .roman {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--ember);
}
.brand-foot .place {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  line-height: 1.7;
}
.brand-foot .place strong {
  color: var(--canvas);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.chi {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 64px;
  transform: translateY(-70px);
}
.chi-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--canvas);
}
.chi-title .ember { color: var(--ember); }

.chi-lede {
  font-size: 15px;
  line-height: 1.65;
  max-width: 460px;
  color: var(--canvas);
  opacity: 0.78;
}
.chi-lede strong { font-weight: 600; opacity: 1; color: var(--canvas); }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 16px;
  transform: translateY(-70px);
}
.barber {
  position: relative;
  padding: 24px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.barber-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.barber-img-wrap img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}
.barber-img-wrap img.berlin {
  transform: scale(0.82);
  transform-origin: bottom center;
}
.barber-meta {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 8px;
}
.barber--berlin {
  position: relative;
}
.barber--berlin .barber-meta {
  position: absolute;
  bottom: 28%;
  left: -2px;
  margin-top: 0;
  width: auto;
  padding: 0;
  z-index: 0;
}
.barber--berlin .barber-img-wrap {
  position: relative;
  z-index: 1;
}
.barber--george {
  position: relative;
}
.barber--george .barber-meta {
  position: absolute;
  top: 8%;
  left: calc(50% + 25px);
  margin: 0;
  width: auto;
  padding: 0;
}
.barber-name {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--canvas);
}
.barber-role {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
}

.btn-prenota-wrap {
  position: relative;
  display: inline-block;
}

.brand-necklace {
  position: absolute;
  width: 240px;
  top: calc(50% + 105px);
  left: calc(50% - 70px);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: contrast(1.1);
  pointer-events: none;
  z-index: 0;
}

.btn-prenota-ora {
  display: inline-block;
  position: relative;
  z-index: 1;
  background: var(--ember);
  color: var(--asphalt);
  border: none;
  border-radius: 0;
  padding: 10px 40px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0;
  transform: translateY(-160px);
  align-self: flex-start;
  transition: background 0.15s;
}
.btn-prenota-ora:hover { background: #FF7A3C; }

.cta-wrap { margin-top: 8px; }
.cta-wrap--brand {
  margin-top: 40px;
  align-self: flex-end;
  width: 60%;
  margin-left: auto;
}
.cta-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta-label::before {
  content: '●';
  color: var(--ember);
  font-size: 10px;
}
.btn-prenota {
  width: 100%;
  background: var(--ember);
  color: var(--asphalt);
  border: none;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.btn-prenota:hover { background: #FF7A3C; }
.btn-prenota .arrow { font-size: 32px; }

.btn-meta {
  background: var(--asphalt-soft);
  color: var(--silver);
  padding: 28px 24px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
}
.btn-meta strong {
  color: var(--canvas);
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
}

.s01 .cap {
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
}
.s01 .cap-2 {
  position: absolute;
  bottom: calc(12% + 590px);
  left: calc(22% + 220px);
  width: 300px;
  transform: rotate(8deg);
  opacity: 1;
  z-index: 5;
}

/* cap-1 appeso al ? di CHI SIAMO */
.chi-title-wrap {
  position: relative;
  display: inline-block;
  margin-top: 30px;
}
.cap-1 {
  position: absolute;
  top: -55px;
  right: -30px;
  width: 110px;
  transform: rotate(18deg);
  transform-origin: top center;
  opacity: 0.95;
  z-index: 5;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7));
}

.s01 .glow {
  position: absolute;
  top: 40%;
  left: -8%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(232,90,31,0.28) 0%, rgba(232,90,31,0) 65%);
  pointer-events: none;
  z-index: 0;
}

.diag-tag {
  position: absolute;
  top: 64px;
  right: 56px;
  z-index: 3;
  background: var(--ember);
  color: var(--asphalt);
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(4deg);
}

@media (max-width: 900px) {
  .s01 { padding: 32px 20px 80px; margin-bottom: -60px; overflow: visible; }
  .s01 .cap-2 { display: none; }
  .s01-grid { grid-template-columns: 1fr; gap: 48px; }
  .chi { padding-left: 0; padding-top: 32px; transform: none; overflow: visible; }
  .brand-mark { font-size: 96px; }
  .duo { transform: none; overflow: visible; }
  .barber-img-wrap { height: 480px; }
  .barber-name { font-size: 25px; }
  /* Berlin: -40px */
  .barber--berlin { transform: translateX(-40px); }
  /* George: -40px */
  .barber--george { transform: translateX(-40px); overflow: visible; }
  /* George name */
  .barber--george .barber-meta {
    left: 0px;
    top: 10%;
  }
  /* Berlin name */
  .barber--berlin .barber-meta {
    left: 198px;
  }
  .s01 .cap-2 { width: 240px; bottom: 4%; left: 6%; }
  .diag-tag { top: 16px; right: 12px; font-size: 11px; }
  .btn-prenota { font-size: 20px; padding: 22px 20px; }
  .btn-prenota-ora { transform: none; margin-top: 24px; align-self: flex-start; }
}