/* =========================================================
   Black Diamond Beauty Salon
   Editorial luxury salon — modern couture aesthetic.
   Mobile-first, accessible, responsive.
   ========================================================= */

/* --- Tokens (pure black & white system) --- */
:root {
  --black: #0a0a0a;
  --black-soft: #131313;
  --black-elev: #1a1a1a;
  --black-line: #232323;
  --white: #ffffff;
  --ivory: #f7f7f7;
  --text: #f0f0f0;
  --text-soft: #b8b8b8;
  --text-muted: #7a7a7a;
  --accent: #ffffff;
  --accent-dim: #d8d8d8;
  --hairline: rgba(255, 255, 255, 0.22);
  --hairline-soft: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 24px 60px -28px rgba(255, 255, 255, 0.18);
  --shadow-deep: 0 30px 80px -28px rgba(0, 0, 0, 0.65);
  --max: 1320px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(72px, 12vw, 160px);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy aliases kept so existing class rules using --gold-* still resolve */
  --gold: var(--white);
  --gold-light: var(--white);
  --gold-soft: var(--white);
  --gold-deep: var(--accent-dim);
  --shadow-gold: var(--shadow-soft);

  /* Chat FAB (lazy launcher + chatbot) — rosa muy claro, puntito fijo en la esquina del botón */
  --bd-chat-fab-1: #fff7fa;
  --bd-chat-fab-2: #fce7f3;
  --bd-chat-fab-3: #fbcfe8;
  --bd-chat-accent: #f9a8d4;
  --bd-chat-accent-dark: #f472b6;
  --bd-chat-fab-ink: #861040;
  --bd-chat-dot: #e11d48;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--black);
  /* clip avoids horizontal bleed without breaking position:sticky (overflow-x:hidden on body did). */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; }

/* --- Type system --- */
.serif { font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 400; }
.sans { font-family: "Inter", sans-serif; }

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0;
}

h1.display, .display-1 {
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  letter-spacing: -0.02em;
  line-height: 0.98;
}
h2.display, .display-2 {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h3.display, .display-3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.italic-accent { font-style: italic; color: var(--white); opacity: 0.78; }

p { margin: 0 0 1em; color: var(--text-soft); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--text); max-width: 60ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-dim);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--white);
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.center { justify-content: center; }

.chapter {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--accent-dim);
  text-transform: uppercase;
}

/* --- Layout --- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); }

section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(56px, 9vw, 110px); }

.divider-line { height: 1px; background: var(--hairline-soft); }
.diamond-divider { display: inline-block; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); margin: 0 14px; vertical-align: middle; }

/* --- Buttons --- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--black);
  --btn-bd: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 32px;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 36px -16px rgba(255, 255, 255, 0.22),
    0 4px 14px -6px rgba(0, 0, 0, 0.45);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--white);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 20px 48px -18px rgba(255, 255, 255, 0.2);
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  --btn-bd: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.btn-ghost:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: 0 10px 32px -14px rgba(255, 255, 255, 0.15);
}
.btn-outline-gold {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--white);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.btn-outline-gold:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: none;
}
.btn .arrow { font-size: 1.1rem; line-height: 1; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn.small { padding: 13px 24px; font-size: 0.76rem; letter-spacing: 0.2em; font-weight: 600; }

/* Header Book: compact row but clearly tappable */
.site-header .header-cta > .btn {
  padding: 14px 28px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  box-shadow: 0 12px 36px -14px rgba(255, 255, 255, 0.35);
}
@media (max-width: 520px) {
  .site-header .header-cta > .btn {
    padding: 12px 22px;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }
}
/* Header Book CTA: white fill on hover, not inverted black */
.site-header .header-cta > .btn:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: none;
  transform: none;
}
.site-header .header-cta > .btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
/* Header Book/Reserva: sin flecha (más corto, menos choque con la marca) */
.site-header .header-cta > .btn .arrow {
  display: none;
}
.site-header .header-cta > .btn {
  gap: 0;
}

/* Home: large CTAs under featured grid & gallery mosaic */
.section-link-wrap {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: clamp(22px, 3.5vw, 36px);
  margin-top: 4px;
}
.section-link-wrap .btn.section-promo-btn {
  min-width: min(100%, 300px);
  padding: 16px 36px;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 18px 44px -18px rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}
.section-link-wrap .btn.section-promo-btn:hover {
  transform: translateY(-2px);
  background: var(--black);
  color: var(--white);
  border-color: var(--white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 24px 52px -20px rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}
.section-link-wrap .btn.section-promo-btn .arrow {
  font-size: 1.1rem;
}

/* Home: services grid footer — spotlight card (not feat-learn pill) */
.section-link-wrap--services-catalog {
  position: relative;
  isolation: isolate;
  padding-top: clamp(28px, 4.5vw, 48px);
  margin-top: clamp(8px, 1.5vw, 16px);
  max-width: min(100%, 720px);
  margin-inline: auto;
}
.section-link-wrap--services-catalog::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(104%, 680px);
  height: min(200px, 42vw);
  max-height: 220px;
  background: radial-gradient(
    ellipse 72% 58% at 50% 50%,
    rgba(255, 236, 200, 0.16) 0%,
    rgba(255, 220, 160, 0.06) 42%,
    transparent 72%
  );
  pointer-events: none;
}
.services-catalog-link {
  position: relative;
  z-index: 1;
  display: block;
  margin-inline: auto;
  max-width: 100%;
  padding: clamp(22px, 3.8vw, 34px) clamp(20px, 4vw, 40px);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    168deg,
    rgba(42, 42, 42, 0.55) 0%,
    rgba(14, 14, 14, 0.92) 48%,
    rgba(8, 8, 8, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 26px 64px -34px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 52px -18px rgba(255, 224, 170, 0.14);
  transition:
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.45s var(--ease);
}
.services-catalog-link:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 6px;
}
.services-catalog-link:hover {
  border-color: rgba(255, 248, 220, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 34px 76px -30px rgba(0, 0, 0, 0.88),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 64px -12px rgba(255, 230, 190, 0.22);
  transform: translateY(-3px);
}
.services-catalog-link:active {
  transform: translateY(-1px);
}
.services-catalog-link__rule {
  display: block;
  height: 3px;
  margin: 0 auto clamp(16px, 2.4vw, 22px);
  max-width: min(100%, 320px);
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 18%,
    rgba(255, 236, 200, 0.55) 50%,
    rgba(255, 255, 255, 0.12) 82%,
    transparent 100%
  );
  box-shadow: 0 0 24px rgba(255, 230, 190, 0.25);
}
.services-catalog-link__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 40px);
  flex-wrap: wrap;
}
.services-catalog-link__textstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  min-width: min(100%, 300px);
}
.services-catalog-link__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.62rem, 1.1vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 236, 210, 0.82);
}
.services-catalog-link__title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.65rem, 3.4vw, 2.55rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ivory);
  line-height: 1.08;
  text-shadow: 0 0 48px rgba(255, 255, 255, 0.12);
  transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease);
}
.services-catalog-link__orbit {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(255, 224, 170, 0.42);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 55%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 28px rgba(255, 220, 160, 0.12);
  transition:
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.services-catalog-link__orbit::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 200, 0.12);
  pointer-events: none;
  transition: border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.services-catalog-link__orbit-arrow {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--white);
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.services-catalog-link:hover .services-catalog-link__title {
  color: var(--white);
  text-shadow: 0 0 56px rgba(255, 255, 255, 0.2);
}
.services-catalog-link:hover .services-catalog-link__orbit {
  border-color: rgba(255, 248, 220, 0.65);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 220, 160, 0.12) 45%, transparent 70%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 36px rgba(255, 224, 170, 0.28);
  transform: scale(1.06);
}
.services-catalog-link:hover .services-catalog-link__orbit::after {
  border-color: rgba(255, 248, 220, 0.22);
  opacity: 1;
}
.services-catalog-link:hover .services-catalog-link__orbit-arrow {
  transform: translateX(5px);
  color: var(--white);
}
@media (prefers-reduced-motion: reduce) {
  .services-catalog-link:hover {
    transform: none;
  }
  .services-catalog-link:active {
    transform: none;
  }
  .services-catalog-link:hover .services-catalog-link__orbit,
  .services-catalog-link:hover .services-catalog-link__orbit-arrow {
    transform: none;
  }
}

@media (max-width: 519px) {
  .section-link-wrap--services-catalog {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }
  .services-catalog-link {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .services-catalog-link__body {
    flex-direction: column;
    gap: clamp(14px, 4vw, 22px);
  }
  .services-catalog-link__textstack {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .services-catalog-link__rule {
    max-width: min(100%, 280px);
  }
}

@media (max-width: 480px) {
  .section-link-wrap .btn.section-promo-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 15px 24px;
    font-size: 0.76rem;
  }
}

/* Closing CTA band */
.cta-band .actions .btn {
  padding: 17px 40px;
  font-size: 0.84rem;
}
@media (max-width: 540px) {
  .cta-band .actions .btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
}

.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 6px;
}
.link-gold::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform 0.4s var(--ease);
}
.link-gold:hover::after { transform: scaleX(1); }
.link-gold:hover { color: var(--gold); }

/* --- Header --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
  padding-bottom: 22px;
  background: linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 100%);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: none;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-soft);
  backdrop-filter: blur(12px);
}

/* Services / Gallery / Contact: solid bar always (no see-through gradient) — avoids “banner glitch” while scrolling */
body.page--services .site-header,
body.page--gallery .site-header,
body.page--contact .site-header {
  background: rgba(10, 10, 10, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.page--services .site-header.is-scrolled,
body.page--gallery .site-header.is-scrolled,
body.page--contact .site-header.is-scrolled {
  background: rgba(6, 6, 6, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.brand-mark span {
  display: block; width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}
.brand-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--ivory);
  line-height: 1;
}
.brand-tag {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

.nav-primary { display: none; }
@media (min-width: 960px) {
  .nav-primary { display: flex; align-items: center; gap: 36px; }
  .nav-primary a {
    position: relative;
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text);
    padding: 6px 0;
  }
  .nav-primary a::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s var(--ease);
  }
  .nav-primary a:hover, .nav-primary a.is-active { color: var(--gold-light); }
  .nav-primary a:hover::after, .nav-primary a.is-active::after { transform: scaleX(1); }
}

/* Desktop ajustado: español usa más ancho en nav + “Reservar” + “Llamar” */
@media (min-width: 960px) and (max-width: 1240px) {
  html[lang^="es"] .header-inner .brand {
    flex-shrink: 1;
    min-width: 0;
    max-width: min(30vw, 260px);
    overflow: hidden;
  }
  html[lang^="es"] .nav-primary {
    gap: clamp(12px, 1.5vw, 28px);
  }
  html[lang^="es"] .nav-primary a {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }
  html[lang^="es"] .site-header .header-cta > .btn {
    padding: 11px 18px;
    font-size: 0.7rem;
    letter-spacing: 0.17em;
  }
  html[lang^="es"] .header-phone {
    padding: 4px 10px 4px 5px;
    gap: 8px;
  }
}

.header-cta { display: flex; align-items: center; gap: 12px; }

/* Mobile header: grid + refined “toolbar” cluster (lang / book / menu) */
@media (max-width: 959px) {
  .site-header {
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: 18px;
  }
  .site-header.is-scrolled {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: 14px;
  }
  .site-header > .container.header-inner {
    padding-left: max(18px, calc(10px + 5vw), calc(10px + env(safe-area-inset-left, 0px)));
    padding-right: max(18px, calc(10px + 5vw), calc(10px + env(safe-area-inset-right, 0px)));
  }
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
    min-width: 0;
  }
  .header-inner .brand {
    flex: unset;
    min-width: 0;
    max-width: 100%;
    gap: 10px;
    align-items: center;
    overflow: hidden;
  }
  .header-inner .brand-mark {
    width: 34px;
    height: 34px;
  }
  .header-inner .brand > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .header-inner .brand-name {
    font-size: clamp(1.02rem, 4.2vw, 1.22rem);
    letter-spacing: 0.06em;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .header-inner .brand-tag {
    font-size: 0.52rem;
    letter-spacing: 0.3em;
    line-height: 1.25;
    white-space: normal;
    max-width: 20ch;
  }
  /* One quiet pill: lang + book + menu share rhythm */
  .header-cta {
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    justify-self: end;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 10px 28px -18px rgba(0, 0, 0, 0.85);
  }
  .header-cta > .header-lang {
    border: none;
    background: transparent;
    margin: 0 1px 0 2px;
    border-radius: 999px;
    overflow: hidden;
  }
  .header-cta .header-lang__btn {
    min-height: 40px;
    padding: 0 11px;
    font-size: 0.54rem;
    letter-spacing: 0.18em;
  }
  .site-header .header-cta > .btn {
    margin: 0 2px;
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    border-radius: 999px;
    box-shadow: 0 6px 20px -10px rgba(255, 255, 255, 0.25);
  }
  .header-cta .menu-toggle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0 1px 0 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .header-cta .menu-toggle span {
    background: var(--ivory);
    left: 11px;
    right: 11px;
  }
  body.page--home .header-cta .menu-toggle span {
    background: #faf8f4;
  }
  .header-cta .menu-toggle span:nth-child(1) {
    top: 14px;
  }
  .header-cta .menu-toggle span:nth-child(2) {
    top: 19px;
  }
  .header-cta .menu-toggle span:nth-child(3) {
    top: 24px;
  }
  body.menu-open .header-cta .menu-toggle span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }
  body.menu-open .header-cta .menu-toggle span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }
  html[lang^="es"] .site-header .header-cta > .btn {
    padding: 0 11px;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }
  html[lang^="es"] .header-inner .brand-tag {
    font-size: 0.48rem;
    letter-spacing: 0.2em;
    max-width: 15ch;
  }
}
@media (max-width: 380px) {
  .site-header .header-cta > .btn {
    padding: 0 12px;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }
  .header-cta .header-lang__btn {
    padding: 0 9px;
    min-height: 38px;
    font-size: 0.5rem;
  }
  .header-cta .menu-toggle {
    width: 38px;
    height: 38px;
  }
  .header-cta .menu-toggle span {
    left: 10px;
    right: 10px;
  }
  .header-cta .menu-toggle span:nth-child(1) {
    top: 13px;
  }
  .header-cta .menu-toggle span:nth-child(2) {
    top: 18px;
  }
  .header-cta .menu-toggle span:nth-child(3) {
    top: 23px;
  }
  body.menu-open .header-cta .menu-toggle span:nth-child(1) {
    transform: translateY(3px) rotate(45deg);
  }
  body.menu-open .header-cta .menu-toggle span:nth-child(3) {
    transform: translateY(-3px) rotate(-45deg);
  }
  html[lang^="es"] .site-header .header-cta > .btn {
    padding: 0 9px;
    font-size: 0.54rem;
    letter-spacing: 0.13em;
  }
}
@media (max-width: 420px) {
  .header-inner .brand-name {
    font-size: 1.02rem;
    letter-spacing: 0.05em;
  }
  .header-inner .brand-tag {
    font-size: 0.5rem;
    letter-spacing: 0.26em;
  }
}

/* Language EN / ES */
.header-lang,
.mobile-lang {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.22);
}
.mobile-lang {
  margin: 0 1.5rem 1rem;
  align-self: flex-start;
}
.header-lang__btn {
  font-family: "Inter", sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 11px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
a.header-lang__btn {
  text-decoration: none;
}
.header-lang__btn:hover {
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.07);
}
.header-lang__btn--active {
  color: #0a0a0a;
  /* Real accent — :root --gold aliases to white and would wash out EN/ES */
  background: linear-gradient(135deg, #f4ecd8 0%, #d4b45a 55%, #b8942f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.header-lang__btn--active:hover,
.header-lang__btn[aria-current="true"]:hover {
  color: #0a0a0a;
  background: linear-gradient(135deg, #f7efd8 0%, #d9b85e 50%, #bc9828 100%);
}
.header-lang__btn + .header-lang__btn {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1);
}
@media (min-width: 960px) {
  .header-lang__btn {
    min-height: 0;
    padding: 7px 10px;
  }
}

/* Header call — pill control, top-right */
.header-phone {
  display: none;
  position: relative;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(0, 0, 0, 0.15) 100%);
  box-shadow:
    0 10px 32px -14px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--ivory);
  font-family: "Inter", sans-serif;
  transition:
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.25s var(--ease),
    color 0.25s var(--ease);
}
.header-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.04) 45%, transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}
.header-phone__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ivory);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.header-phone__icon svg {
  display: block;
}
.header-phone__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
  padding-right: 2px;
}
.header-phone__label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.header-phone__digits {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
}
.header-phone__digits .header-phone__area {
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.03em;
}
.header-phone__digits .header-phone__line {
  font-weight: 600;
  letter-spacing: 0.1em;
}
.header-phone:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(0, 0, 0, 0.08) 100%);
  box-shadow:
    0 14px 40px -12px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  color: var(--white);
}
.header-phone:hover .header-phone__icon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.04);
}
.header-phone:hover .header-phone__label {
  color: var(--gold-light);
}
.header-phone:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.site-header.is-scrolled .header-phone {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 26px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
@media (min-width: 960px) {
  .header-phone {
    display: inline-flex;
  }
}

.menu-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 960px) { .menu-toggle { display: none; } }
.menu-toggle span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px; background: var(--ivory);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 26px; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 95;
  padding: 110px var(--gutter) 60px;
  display: flex; flex-direction: column; gap: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  z-index: 102;
}
body.menu-open .site-header {
  z-index: 103;
}
.mobile-menu a {
  display: block;
  padding: 22px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--ivory);
  border-bottom: 1px solid var(--hairline-soft);
  letter-spacing: -0.01em;
  position: relative;
}
.mobile-menu a .num {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.mobile-menu .footer-cta {
  margin-top: auto;
  padding-top: 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.mobile-menu .footer-cta a.btn { width: 100%; }
.mobile-menu .footer-cta .meta {
  margin-top: 18px; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.06em;
}
/* Hamburger drawer: nav links only (EN/ES + CTAs + address stay in the top bar / page) */
.mobile-menu .mobile-lang,
.mobile-menu .footer-cta {
  display: none !important;
}

/* --- Hero (home) — centered stack, readable over image --- */
.hero {
  position: relative;
  min-height: min(100svh, 920px);
  /* Clear fixed header + notch; never less than safe-area + header row */
  padding-top: max(
    clamp(100px, 14vh, 132px),
    calc(env(safe-area-inset-top, 0px) + 104px)
  );
  padding-bottom: clamp(56px, 10vh, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 900px) {
  /* Avoid vertical centering pushing tall stacks upward under the fixed header */
  .hero {
    align-items: flex-start;
    padding-top: max(
      clamp(108px, 18vh, 148px),
      calc(env(safe-area-inset-top, 0px) + 112px)
    );
  }
}
.hero > .container {
  width: 100%;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--black-soft);
}
/* Single-image hero (legacy pages) */
.hero-bg:not(.hero-bg--showcase) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.05);
  filter: saturate(0.72) contrast(1.06);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(-0.8%, -0.6%, 0);
  }
}
/* Home hero — 5-photo crossfade + slow Ken Burns */
.hero-bg--showcase .hero-bg__slides {
  position: absolute;
  inset: 0;
}
.hero-bg--showcase .hero-bg__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.76) contrast(1.06);
  opacity: 0;
  animation: heroShowcase 30s ease-in-out infinite;
  animation-fill-mode: both;
  will-change: opacity, transform;
}
/* Paint order: later slides stack above so crossfades read correctly */
.hero-bg--showcase .hero-bg__slide:nth-child(1) {
  z-index: 1;
  animation-name: heroShowcaseLead;
  animation-delay: 0s;
}
.hero-bg--showcase .hero-bg__slide:nth-child(2) {
  z-index: 2;
  animation-delay: 6s;
}
.hero-bg--showcase .hero-bg__slide:nth-child(3) {
  z-index: 3;
  animation-delay: 12s;
}
.hero-bg--showcase .hero-bg__slide:nth-child(4) {
  z-index: 4;
  animation-delay: 18s;
}
.hero-bg--showcase .hero-bg__slide:nth-child(5) {
  z-index: 5;
  animation-delay: 24s;
}
/* First slide: visible on first paint (no “blank then pop”) */
@keyframes heroShowcaseLead {
  0% {
    opacity: 1;
    transform: scale(1.05);
  }
  14% {
    opacity: 1;
    transform: scale(1.11);
  }
  18% {
    opacity: 1;
    transform: scale(1.11);
  }
  22% {
    opacity: 0;
    transform: scale(1.11);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes heroShowcase {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  4% {
    opacity: 1;
  }
  14% {
    opacity: 1;
    transform: scale(1.11);
  }
  18% {
    opacity: 1;
    transform: scale(1.11);
  }
  22% {
    opacity: 0;
    transform: scale(1.11);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg--showcase .hero-bg__slide {
    animation: none !important;
    opacity: 0;
    transform: none;
    filter: saturate(0.72) contrast(1.06);
  }
  .hero-bg--showcase .hero-bg__slide:first-child {
    opacity: 1;
  }
  body.page--home .hero-bg--showcase .hero-bg__slide {
    filter: saturate(0.88) contrast(1.03);
  }
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.88) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, transparent 35%, rgba(10, 10, 10, 0.75) 100%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.014) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(26px, 4vw, 40px);
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
}
.hero-content {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}
.hero-content .eyebrow {
  display: inline-flex;
  justify-content: center;
  margin: 0 auto 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(200, 161, 75, 0.42);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.hero-content .eyebrow::before {
  display: none !important;
}
.hero-content h1 {
  margin-top: 22px;
}
.hero-content h1.display {
  font-size: clamp(2.5rem, 7vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
@media (max-width: 640px) {
  .hero-content h1.display {
    line-height: 1.06;
    letter-spacing: -0.03em;
  }
  .hero-content h1 .line + .line {
    margin-top: 0.02em;
  }
}
.hero-content h1 .line {
  display: block;
}
.hero-content h1 .em {
  font-style: italic;
  color: var(--gold-light);
}
.hero-content .lede {
  margin: 22px auto 0;
  max-width: 40ch;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.55;
  color: rgba(245, 240, 232, 0.88);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  justify-content: center;
}
.hero-meta {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 4px 0 0;
  border: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  color: var(--text-soft);
}
.hero-meta strong {
  color: var(--ivory);
  font-weight: 500;
}
.hero-meta .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-meta .row:last-child {
  border-bottom: none;
}
.hero-meta .label {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200, 161, 75, 0.95);
  min-width: 0;
}
.hero-meta .val {
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(232, 228, 220, 0.92);
}
@media (min-width: 640px) {
  .hero-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 22px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(8, 8, 8, 0.48);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .hero-meta .row {
    padding: 8px 14px 12px;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .hero-meta .row:last-child {
    border-right: none;
  }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue .bar {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* --- Home only: dark header + split hero (text left / 5 photos right) --- */
body.page--home .site-header {
  background: rgba(8, 8, 8, 0.92);
  border-top: 2px solid #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.page--home .site-header.is-scrolled {
  background: rgba(6, 6, 6, 0.96);
  border-top-color: #000;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.page--home .brand-name {
  color: #faf8f4;
}
body.page--home .brand-tag {
  color: rgba(220, 196, 140, 0.95);
}
body.page--home .nav-primary a {
  color: rgba(245, 242, 236, 0.88);
}
body.page--home .nav-primary a:hover,
body.page--home .nav-primary a.is-active {
  color: var(--gold-light);
}
body.page--home .header-lang,
body.page--home .mobile-lang {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 18, 0.75);
}
body.page--home .header-lang__btn:not(.header-lang__btn--active):not([aria-current="true"]) {
  color: rgba(240, 236, 228, 0.82);
}
body.page--home .header-lang__btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
body.page--home .header-lang__btn + .header-lang__btn {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
}
body.page--home .header-phone {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(155deg, rgba(32, 30, 28, 0.92) 0%, rgba(18, 16, 14, 0.88) 100%);
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #faf8f4;
}
body.page--home .header-phone__icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #faf8f4;
}
body.page--home .header-phone__label {
  color: rgba(220, 196, 140, 0.95);
}
body.page--home .header-phone__digits {
  color: #faf8f4;
}
body.page--home .header-phone__digits .header-phone__area {
  color: rgba(232, 228, 220, 0.72);
}
body.page--home .header-phone:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
body.page--home .menu-toggle {
  border-color: rgba(255, 255, 255, 0.22);
}
body.page--home .menu-toggle span {
  background: #faf8f4;
}

body.page--home .hero.hero--split {
  background:
    radial-gradient(ellipse 90% 70% at 78% 18%, rgba(60, 48, 36, 0.35) 0%, transparent 52%),
    #0a0a0a;
  align-items: center;
}
@media (max-width: 900px) {
  body.page--home .hero.hero--split {
    align-items: flex-start;
  }
}
body.page--home .hero-inner.hero-inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
  text-align: left;
  position: relative;
  z-index: 1;
}
body.page--home .hero-inner--split .hero-content {
  margin-inline: 0;
  max-width: none;
  text-align: left;
  padding: 0;
  border-radius: 0;
  isolation: auto;
}
body.page--home .hero-inner--split .hero-content::before {
  display: none;
}
body.page--home .hero-inner--split .hero-content .eyebrow {
  justify-content: flex-start;
  margin: 0 0 4px;
  color: rgba(220, 196, 140, 0.95);
  border-bottom-color: rgba(200, 161, 75, 0.45);
}
body.page--home .hero-inner--split .hero-content h1.display,
body.page--home .hero-inner--split .hero-content h1 .line {
  color: #faf8f4;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
body.page--home .hero-inner--split .hero-content h1 .em {
  color: var(--gold-light);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
body.page--home .hero-inner--split .hero-content .lede {
  margin-left: 0;
  margin-right: 0;
  color: rgba(236, 232, 224, 0.88);
  text-shadow: none;
}
body.page--home .hero-inner--split .hero-actions {
  justify-content: flex-start;
}
body.page--home .hero-inner--split .hero-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(250, 248, 244, 0.92);
}
body.page--home .hero-inner--split .hero-actions .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

body.page--home .hero-visual {
  position: relative;
  width: 100%;
  max-height: min(62vh, 560px);
}
body.page--home .hero-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgba(8, 8, 8, 0.55), transparent);
}
body.page--home .hero-visual__rotator {
  position: relative;
  width: 100%;
  height: min(62vh, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 28px 80px -36px rgba(0, 0, 0, 0.75);
  background: #0c0c0c;
}
body.page--home .hero-visual__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 1.1s var(--ease),
    transform 1.4s var(--ease);
  filter: saturate(0.92) contrast(1.04);
  pointer-events: none;
  z-index: 0;
}
body.page--home .hero-visual__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.page--home .hero-visual__slide,
  body.page--home .hero-visual__slide.is-active {
    transition-duration: 0.01ms;
    transform: none;
  }
}
body.page--home .hero-visual__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
body.page--home .hero-visual__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition:
    width 0.4s var(--ease),
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.25s var(--ease);
}
body.page--home .hero-visual__dot:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}
body.page--home .hero-visual__dot.is-active {
  width: 24px;
  background: rgba(212, 175, 108, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
body.page--home .hero-visual__dot:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

body.page--home .hero-inner--split .hero-meta {
  grid-column: 1 / -1;
  color: rgba(232, 228, 220, 0.9);
  margin-top: clamp(18px, 3vw, 28px);
  padding: clamp(12px, 2.2vw, 20px) clamp(14px, 3vw, 24px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 12, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px -38px rgba(0, 0, 0, 0.55);
}
body.page--home .hero-inner--split .hero-meta .label {
  color: rgba(220, 196, 140, 0.95);
}
body.page--home .hero-inner--split .hero-meta strong,
body.page--home .hero-inner--split .hero-meta .val {
  color: rgba(250, 248, 244, 0.95);
}
body.page--home .hero-inner--split .hero-meta .val a {
  color: var(--gold-light);
}
body.page--home .hero-inner--split .hero-meta .row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
@media (min-width: 640px) {
  body.page--home .hero-inner--split .hero-meta {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(10, 10, 10, 0.58);
  }
  body.page--home .hero-inner--split .hero-meta .row {
    border-right-color: rgba(255, 255, 255, 0.08);
  }
}
@media (max-width: 880px) {
  body.page--home .hero-inner.hero-inner--split {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 32px);
  }
  body.page--home .hero.hero--split {
    padding-top: max(
      clamp(118px, 20vh, 168px),
      calc(env(safe-area-inset-top, 0px) + 118px)
    );
  }
  body.page--home .hero-inner--split .hero-content .eyebrow {
    margin-top: 14px;
    margin-bottom: 10px;
  }
  body.page--home .hero-visual {
    max-height: none;
  }
  body.page--home .hero-visual__rotator {
    height: min(52vw, 420px);
    max-height: 420px;
  }
  body.page--home .hero-visual__nav {
    bottom: 18px;
    gap: 10px;
  }
  body.page--home .hero-visual__dot::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 999px;
  }
}

body.page--home .scroll-cue {
  color: rgba(240, 236, 228, 0.55);
}
body.page--home .scroll-cue .bar {
  background: linear-gradient(180deg, transparent, var(--gold-light));
}

/* --- Section header --- */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: end;
  margin-bottom: clamp(40px, 7vw, 80px);
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1.2fr 1fr; gap: 80px; }
}
.sec-head h2 { letter-spacing: -0.015em; }
.sec-head .right { color: var(--text-soft); max-width: 56ch; }
.sec-head .right .lede { color: var(--text); margin-bottom: 18px; }

/* --- Feature service grid (asymmetric) --- */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 760px) { .feat-grid { grid-template-columns: repeat(2, 1fr); gap: 44px; } }
@media (min-width: 1100px) { .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 56px; } }

.feat-card { display: flex; flex-direction: column; gap: 22px; }
.feat-card .img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--black-elev);
}
.feat-card.tall .img-wrap { aspect-ratio: 3 / 5; }
.feat-card.wide .img-wrap { aspect-ratio: 1 / 1; }
.feat-card .img-wrap img,
.feat-card .img-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
  filter: saturate(0.95) contrast(1.05);
}
.feat-card:hover .img-wrap img,
.feat-card:hover .img-wrap video { transform: scale(1.06); filter: saturate(1) contrast(1.05); }
.feat-card .img-wrap::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.5));
}
.feat-card .img-wrap .tag {
  position: absolute;
  inset: auto auto 18px 18px;
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(10,10,10,0.55);
  color: var(--gold-light);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(6px);
  z-index: 1;
}
.feat-card .meta {
  display: flex; flex-direction: column; gap: 10px;
}
.feat-card h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.01em;
}
.feat-card p { color: var(--text-soft); margin: 0; max-width: 42ch; font-size: 0.95rem; }
.feat-card .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 10px; }
.feat-card .feat-book-btn,
.feat-card .feat-learn-btn {
  padding: 16px 32px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  box-shadow: 0 14px 40px -16px rgba(255, 255, 255, 0.25);
}
.feat-card .feat-book-btn:hover,
.feat-card .feat-learn-btn:hover {
  box-shadow: 0 18px 48px -14px rgba(255, 255, 255, 0.32);
}

.feat-grid.feat-grid--categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 3vw, 20px);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  align-items: stretch;
  scroll-padding-inline: var(--gutter);
}
.feat-grid.feat-grid--categories > .feat-card--category {
  min-width: 0;
  height: 100%;
  align-self: stretch;
}
@media (min-width: 520px) {
  .feat-grid.feat-grid--categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 780px) {
  .feat-grid.feat-grid--categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 22px);
    row-gap: clamp(20px, 2.8vw, 32px);
  }
}
.feat-grid--categories .feat-card .img-wrap {
  aspect-ratio: 1 / 1.12;
}
.feat-grid--categories .feat-card h3.display {
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  line-height: 1.12;
  /* Reserve two lines so titles line up across the row */
  min-height: calc(2 * 1.12em);
}
.feat-grid--categories .feat-card p {
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: none;
}
@media (min-width: 1100px) {
  .feat-grid--categories .feat-learn-btn {
    padding: 12px 16px;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    width: 100%;
    justify-content: center;
  }
}

.feat-hit {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
}
.feat-hit:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}
.feat-card--category:hover .img-wrap img,
.feat-card--category:hover .img-wrap video {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.05);
}

/* Home featured: crossfade between favorite photos */
.feat-card .img-wrap.img-wrap--crossfade {
  position: relative;
}
.feat-card .img-wrap__crossfade {
  position: absolute;
  inset: 0;
}
.feat-card .img-wrap__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.58s cubic-bezier(0.42, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.feat-card .img-wrap__layer.is-visible {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.feat-card .img-wrap__layer img,
.feat-card .img-wrap__layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
  filter: saturate(0.95) contrast(1.05);
}
.feat-card--category:hover .img-wrap__layer.is-visible img,
.feat-card--category:hover .img-wrap__layer.is-visible video {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .feat-card .img-wrap__layer {
    transition: none !important;
  }
}

.img-wrap--empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(20px, 4vw, 36px);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    linear-gradient(180deg, var(--black-elev) 0%, var(--black) 100%);
  border: 1px dashed var(--hairline-soft);
}
.img-wrap-empty-inner {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.02em;
  max-width: 20ch;
  line-height: 1.3;
}

.gallery-empty {
  padding: clamp(40px, 8vw, 72px);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-md);
  background: var(--black-soft);
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 48px;
}
.gallery-empty .lede {
  margin-bottom: 28px;
  margin-inline: auto;
}

/* --- Home: specialties & “From the studio” mosaic --- */
.home-specialties {
  padding-block: clamp(40px, 7vw, 88px);
}
.home-studio {
  padding-block: clamp(44px, 7.5vw, 96px);
  background: linear-gradient(
    180deg,
    var(--black) 0%,
    rgba(19, 19, 19, 0.94) 38%,
    rgba(19, 19, 19, 0.94) 62%,
    var(--black) 100%
  );
  border-block: 1px solid var(--hairline-soft);
}
.sec-head.sec-head--home {
  margin-bottom: clamp(20px, 3.2vw, 36px);
  max-width: 40rem;
}
.sec-head.sec-head--home .chapter {
  margin-bottom: 0.35rem;
}
.page--home .sec-head.sec-head--home .display-2 {
  font-size: clamp(1.85rem, 4.2vw, 3.35rem);
  line-height: 1.04;
}

.home-specialties .feat-card.feat-card--category {
  gap: 12px;
  position: relative;
  min-height: 0;
}
.home-specialties .feat-card--category .meta {
  gap: 6px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.home-specialties .feat-card--category .row {
  padding-top: 4px;
  margin-top: auto;
}

/* Home specialties: single-column — center copy + Explore so it reads centered on phone */
@media (max-width: 519px) {
  .home-specialties .feat-grid--categories .feat-card--category .meta {
    text-align: center;
    align-items: center;
  }
  .home-specialties .feat-grid--categories .feat-card--category h3.display {
    text-align: center;
    margin-inline: auto;
    width: 100%;
  }
  .home-specialties .feat-grid--categories .feat-card--category .meta p {
    text-align: center;
    margin-inline: auto;
    max-width: 38ch;
  }
  .home-specialties .feat-grid--categories .feat-card--category .row {
    justify-content: center;
    width: 100%;
  }
  .home-specialties .feat-grid--categories .feat-card--category .feat-learn-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    margin-inline: auto;
  }
}

.home-specialties .feat-hit {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 22px 52px -30px rgba(0, 0, 0, 0.8);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.45s var(--ease);
  position: relative;
}
.home-specialties .feat-hit::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.65));
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease);
}
.home-specialties .feat-card--category:hover .feat-hit {
  transform: translateY(-3px);
  box-shadow: 0 30px 58px -28px rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.home-specialties .feat-card--category:hover .feat-hit::after {
  opacity: 1;
}
.home-specialties .feat-card--category--laser .img-wrap img,
.home-specialties .feat-card--category--laser .img-wrap video,
.home-specialties .feat-card--category--laser .img-wrap__layer img,
.home-specialties .feat-card--category--laser .img-wrap__layer video {
  filter: saturate(0.22) contrast(1.07);
}
.home-specialties .feat-card--category--laser:hover .img-wrap img,
.home-specialties .feat-card--category--laser:hover .img-wrap video,
.home-specialties .feat-card--category--laser:hover .img-wrap__layer img,
.home-specialties .feat-card--category--laser:hover .img-wrap__layer video {
  filter: saturate(0.32) contrast(1.08);
}
/* --- Gallery teaser (home mosaic) — responsive bento --- */
.mosaic.mosaic--home {
  display: grid;
  gap: clamp(8px, 1.6vw, 14px);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.mosaic.mosaic--home .tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--black-elev);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-soft);
  min-height: 0;
  box-shadow: 0 28px 64px -36px rgba(0, 0, 0, 0.85);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.mosaic.mosaic--home .tile:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 36px 72px -32px rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.mosaic.mosaic--home .tile:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.mosaic.mosaic--home .tile .tile-media {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  display: block;
  --mosaic-spin: 1;
  opacity: 1;
  transform: translateZ(0) scale(1) rotateZ(0deg);
  filter: blur(0) brightness(1);
  clip-path: inset(0);
  transition:
    opacity 0.36s cubic-bezier(0.45, 0, 0.55, 1),
    transform 0.38s cubic-bezier(0.55, 0.05, 0.36, 1),
    filter 0.34s ease,
    clip-path 0.36s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Exit: “shrink shutter” + drift (domino step) */
.mosaic.mosaic--home .tile .tile-media.is-mosaic-exit {
  opacity: 0;
  transform: translateY(14px) scale(0.88) rotateZ(calc(6deg * var(--mosaic-spin, 1)));
  filter: blur(10px) brightness(0.72);
  clip-path: inset(40% 6% 40% 6%);
  pointer-events: none;
}

/* Enter: new frame snaps in with elastic overshoot */
.mosaic.mosaic--home .tile .tile-media.is-mosaic-enter {
  animation: mosaicTileReveal 0.56s cubic-bezier(0.33, 1.25, 0.48, 1) both;
  pointer-events: none;
}

@keyframes mosaicTileReveal {
  0% {
    opacity: 0;
    clip-path: inset(36% 4% 36% 4%);
    filter: blur(12px) brightness(1.12);
    transform: scale(0.8) rotateZ(calc(-5deg * var(--mosaic-spin, 1)));
  }
  58% {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0) brightness(1.04);
    transform: scale(1.035) rotateZ(calc(0.6deg * var(--mosaic-spin, 1)));
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0) brightness(1);
    transform: scale(1) rotateZ(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mosaic.mosaic--home .tile .tile-media {
    transition: opacity 0.2s ease;
    filter: none !important;
  }
  .mosaic.mosaic--home .tile .tile-media.is-mosaic-exit {
    transform: none;
    clip-path: none;
  }
  .mosaic.mosaic--home .tile .tile-media.is-mosaic-enter {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}
.mosaic.mosaic--home .tile .tile-media img,
.mosaic.mosaic--home .tile .tile-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease);
}
.mosaic.mosaic--home .tile:hover .tile-media img,
.mosaic.mosaic--home .tile:hover .tile-media video {
  transform: scale(1.05);
}

/* Mobile: hero strip + 2×2 */
@media (max-width: 639px) {
  .mosaic.mosaic--home {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(0, auto);
  }
  .mosaic.mosaic--home .a {
    grid-column: 1 / -1;
    aspect-ratio: 5 / 4;
    min-height: 176px;
  }
  .mosaic.mosaic--home .b {
    grid-column: 1;
    aspect-ratio: 1;
    min-height: 128px;
  }
  .mosaic.mosaic--home .c {
    grid-column: 2;
    aspect-ratio: 1;
    min-height: 128px;
  }
  .mosaic.mosaic--home .d {
    grid-column: 1;
    aspect-ratio: 1;
    min-height: 128px;
  }
  .mosaic.mosaic--home .e {
    grid-column: 2;
    aspect-ratio: 1;
    min-height: 128px;
  }
}

/* Small tablet: tall hero left + stacked right */
@media (min-width: 640px) and (max-width: 899px) {
  .mosaic.mosaic--home {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: minmax(100px, 14vw) repeat(3, minmax(88px, 12vw));
    min-height: min(440px, 64vh);
    max-height: 560px;
  }
  .mosaic.mosaic--home .a {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .mosaic.mosaic--home .b {
    grid-column: 2;
    grid-row: 1;
  }
  .mosaic.mosaic--home .c {
    grid-column: 2;
    grid-row: 2;
  }
  .mosaic.mosaic--home .d {
    grid-column: 2;
    grid-row: 3;
  }
  .mosaic.mosaic--home .e {
    grid-column: 2;
    grid-row: 4;
  }
}

/* Desktop: asymmetric bento */
@media (min-width: 900px) {
  .mosaic.mosaic--home {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.42fr) minmax(0, 0.42fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr);
    gap: clamp(12px, 1.5vw, 18px);
    min-height: clamp(300px, 36vw, 460px);
    max-height: min(480px, 72vh);
    aspect-ratio: 16 / 10;
    max-width: min(100%, 1180px);
  }
  .mosaic.mosaic--home .a {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .mosaic.mosaic--home .b {
    grid-column: 2 / -1;
    grid-row: 1;
  }
  .mosaic.mosaic--home .c {
    grid-column: 2;
    grid-row: 2;
  }
  .mosaic.mosaic--home .d {
    grid-column: 3;
    grid-row: 2;
  }
  .mosaic.mosaic--home .e {
    grid-column: 2 / -1;
    grid-row: 3;
  }
}


/* --- CTA Band --- */
.cta-band {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(80px, 12vw, 160px);
  border-block: 1px solid var(--hairline-soft);
  background: var(--black);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08) 0%, transparent 56%);
  z-index: -1;
}
.cta-band h2 {
  margin: 0 auto 28px;
  max-width: 16ch;
}
.cta-band p { max-width: 52ch; margin: 0 auto 36px; color: var(--text-soft); }
.cta-band .actions { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Home: compact closing band (“Book the appointment…”) */
.page--home .cta-band {
  padding-block: clamp(26px, 4vw, 52px);
}
.page--home .cta-band h2.display-1 {
  margin: 0 auto 14px;
  max-width: 22ch;
  font-size: clamp(1.75rem, 4.5vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.page--home .cta-band .actions {
  gap: 10px;
}
.page--home .cta-band .actions .btn {
  padding: 13px 28px;
  font-size: 0.78rem;
}

/* Blog posts: closing CTA — compact but readable */
.page--blog-post #main > .cta-band {
  padding-block: clamp(26px, 3.6vw, 46px);
}
.page--blog-post #main > .cta-band h2.display-1 {
  margin: 0 auto 12px;
  max-width: 26ch;
  font-size: clamp(1.4rem, 3.4vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page--blog-post #main > .cta-band .actions {
  gap: 10px;
}
.page--blog-post #main > .cta-band .actions .btn {
  padding: 11px 22px;
  font-size: 0.76rem;
}

/* Home: blog guides grid after closing CTA */
.page--home .home-blog-teaser {
  border-top: 1px solid var(--hairline-soft);
  background: linear-gradient(
    180deg,
    var(--black) 0%,
    rgba(19, 19, 19, 0.92) 42%,
    var(--black) 100%
  );
  padding-block: clamp(44px, 7vw, 88px);
}
.page--home .home-blog-teaser__head {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: clamp(22px, 3.5vw, 36px);
}
.page--home .home-blog-teaser__head .display-2 {
  margin-top: 0.35rem;
}
.page--home .home-blog-teaser__lede {
  margin: 0.75rem 0 0;
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.05rem);
  line-height: 1.55;
}

/* Gallery: slimmer closing band around “You’re next.” */
.page--gallery .cta-band {
  padding-block: clamp(28px, 4.2vw, 56px);
}
.page--gallery .cta-band h2 {
  margin-bottom: 16px;
}
.page--gallery .cta-band .actions {
  gap: 10px;
}

/* Services: slimmer closing band (“Not sure? We’ll match you.”) */
.page--services .cta-band {
  padding-block: clamp(28px, 4.2vw, 56px);
}
.page--services .cta-band h2.display-1 {
  margin-bottom: 16px;
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  line-height: 1.08;
}
.page--services .cta-band .actions {
  gap: 10px;
}

/* Contact: slimmer band (“See live availability.”) */
.page--contact .cta-band {
  padding-block: clamp(28px, 4.2vw, 56px);
}
.page--contact .cta-band h2.display-1 {
  margin-bottom: 16px;
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  line-height: 1.08;
}
.page--contact .cta-band .actions {
  gap: 10px;
}

/* --- Footer --- */
.site-footer {
  background: var(--black-soft);
  border-top: 1px solid var(--hairline-soft);
  padding-block: clamp(36px, 5vw, 52px) clamp(22px, 3vw, 32px);
  color: var(--text-soft);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.5vw, 32px);
}
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand .brand { margin-bottom: 14px; }
.foot-brand p { max-width: 38ch; font-size: 0.9rem; line-height: 1.55; }
.foot-col h4 {
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.foot-col ul li { margin-bottom: 8px; font-size: 0.9rem; }
.foot-col a:hover { color: var(--gold-light); }
.foot-col address { font-style: normal; line-height: 1.6; font-size: 0.9rem; }
.foot-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.foot-bottom__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  align-items: center;
}
.foot-bottom a { color: var(--text-muted); }
.foot-bottom a:hover { color: var(--gold-light); }
.foot-credit {
  margin: 0;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.88;
}
.foot-credit__name {
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.22em;
}
.foot-credit__link {
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 161, 75, 0.35);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.foot-credit__link:hover {
  color: var(--gold-light);
  border-bottom-color: rgba(200, 161, 75, 0.75);
}
@media (max-width: 520px) {
  .foot-bottom__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}
.social-row { display: flex; gap: 10px; align-items: center; }
.social-row a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.social-row a:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.social-row svg { width: 15px; height: 15px; fill: currentColor; }

/* --- Page hero (subpages) --- */
.page-hero {
  padding: 180px 0 80px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.85), rgba(10,10,10,0.2)),
    var(--black-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
.page-hero .lede { margin-top: 24px; max-width: 60ch; }
.page-hero .breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.page-hero .breadcrumb a { color: var(--gold); }

/* --- Services page --- */
.services-jump {
  position: sticky;
  top: 70px;
  z-index: 50;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--hairline-soft);
  padding-block: 16px;
  margin-bottom: 0;
}
.services-jump-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.services-jump-inner::-webkit-scrollbar { display: none; }
.services-jump a {
  flex-shrink: 0;
  padding: 10px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
  transition: all 0.3s var(--ease);
}
.services-jump a:hover, .services-jump a.is-active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(200, 161, 75, 0.08);
}

/* When Services uses a fixed dock under the header, avoid root overflow-x:clip breaking fixed positioning in some engines. */
html:has(body.page--services) {
  overflow-x: visible;
}
body.page--services {
  overflow-x: clip;
  scroll-padding-top: calc(158px + env(safe-area-inset-top, 0px));
}

/* Services: no hero — content clears fixed header; category chips fixed under header (never scroll away). */
.page--services #main {
  padding-top: calc(102px + env(safe-area-inset-top, 0px));
}
/* Fixed chip bar: body > nav + measured --bd-services-jump-top (header bottom). No backdrop-filter — Safari fixed glitches. */
body.page--services > nav.services-jump {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--bd-services-jump-top, calc(98px + env(safe-area-inset-top, 0px))) !important;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  z-index: 101;
  margin: 0;
  padding-block: 12px 16px;
  background: rgba(10, 10, 10, 0.99);
  border-top: none;
  border-bottom: none;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.85);
}
/* In-flow spacer: height set in main.js from measured bar + air so strips never tuck under fixed chips. */
.page--services .services-jump-gap {
  width: 100%;
  min-height: 120px;
  flex-shrink: 0;
  pointer-events: none;
}
.page--services #services-full {
  margin-top: 0;
}
.page--services .services-jump-inner {
  gap: 10px;
  padding-block: 2px;
  justify-content: center;
}
.page--services .services-jump a {
  padding: 11px 20px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  border-color: var(--black-line);
  background: rgba(0, 0, 0, 0.22);
}
.page--services .services-jump a:hover {
  background: rgba(0, 0, 0, 0.35);
  color: var(--ivory);
  border-color: rgba(0, 0, 0, 0.65);
}
.page--services .services-jump a.is-active {
  border-color: rgba(0, 0, 0, 0.75);
  color: var(--ivory);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 -2px 0 0 rgba(184, 151, 74, 0.9);
}
.page--services .cat-block {
  scroll-margin-top: calc(158px + env(safe-area-inset-top, 0px));
}

@media (max-width: 959px) {
  /* Taller fixed header on phone — keep main + fixed chips flush under it */
  body.page--gallery {
    scroll-padding-top: calc(108px + env(safe-area-inset-top, 0px) + clamp(110px, 28vw, 200px));
  }
  .page--gallery #main,
  .page--contact #main {
    padding-top: calc(100px + env(safe-area-inset-top, 0px));
  }
  .page--gallery .gallery-toolbar {
    top: calc(100px + env(safe-area-inset-top, 0px));
  }
  .page--gallery #gallery-mixed-grid {
    scroll-margin-top: calc(100px + env(safe-area-inset-top, 0px) + clamp(96px, 26vw, 150px));
  }
  .page--services #main {
    padding-top: calc(110px + env(safe-area-inset-top, 0px));
  }
  body.page--services > nav.services-jump {
    top: var(--bd-services-jump-top, calc(104px + env(safe-area-inset-top, 0px))) !important;
    transition: transform 0.32s var(--ease), opacity 0.24s ease;
  }
  body.page--services.page--services--dock-hidden > nav.services-jump {
    transform: translate3d(0, -130%, 0);
    opacity: 0;
    pointer-events: none;
  }
  body.page--services {
    scroll-padding-top: calc(172px + env(safe-area-inset-top, 0px));
  }
  .page--services .cat-block {
    scroll-margin-top: calc(172px + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  body.page--services > nav.services-jump {
    transition: none;
  }
}

.cat-block {
  padding-block: clamp(36px, 6vw, 80px);
  border-bottom: 1px solid var(--hairline-soft);
  scroll-margin-top: 100px;
}
.cat-block:last-child { border-bottom: 0; }
.cat-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.cat-head h2 {
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
}

/* Category preview: five photos in one row (services.html) */
.cat-photo-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 0 clamp(20px, 3vw, 36px);
  overflow-x: auto;
  padding: 2px 0 10px;
  -webkit-overflow-scrolling: touch;
}
.cat-photo-strip__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.cat-photo-strip__cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-soft);
  background: var(--black-elev);
  transition: opacity 0.42s var(--ease), transform 0.48s var(--ease), border-color 0.35s var(--ease);
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cat-photo-strip__cell.is-dim {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cat-photo-strip__cell {
    transition: opacity 0.2s ease;
  }
  .cat-photo-strip__cell.is-dim {
    transform: none;
  }
}
.cat-photo-strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No gray shimmer while strip media loads — rotation waits for decode / prefetch. */
.cat-photo-strip--rotating .cat-photo-strip__cell:has(> img.img-fx:not(.is-loaded))::before {
  display: none;
}
.cat-photo-strip__cell--video .service-strip-vid {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.cat-photo-strip__cell--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .cat-photo-strip {
    gap: 8px;
    scroll-snap-type: x mandatory;
  }
  .cat-photo-strip__inner {
    gap: 8px;
  }
  .cat-photo-strip__cell {
    flex: 0 0 min(30vw, 132px);
    scroll-snap-align: start;
  }
}

/* --- Services list (compact iOS-style on mobile, two-col on desktop) --- */
.cat-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.svc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  border-radius: 8px;
  overflow: hidden;
}
@media (min-width: 760px) {
  .svc-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
  }
}
.svc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.svc-row:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .svc-row {
    padding: 18px 22px;
    gap: 18px;
  }
  .svc-row:nth-child(2n) { border-left: 1px solid var(--hairline-soft); }
  /* Remove last-row borders so the panel ends clean */
  .svc-row:nth-last-child(-n+2) { border-bottom: 0; }
}
.svc-row:hover { background: rgba(255, 255, 255, 0.035); }
.svc-row:hover .svc-row__cta-arrow { transform: translateX(4px); }
.svc-row__body { min-width: 0; }
.svc-name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.05rem, 1.35vw, 1.32rem);
  line-height: 1.18;
  color: var(--ivory);
  letter-spacing: -0.005em;
  margin: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-desc {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 760px) {
  .svc-desc { font-size: 0.84rem; -webkit-line-clamp: 2; }
}
.svc-row__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.svc-row__cta-arrow {
  transition: transform 0.3s var(--ease);
  font-size: 0.85rem;
  line-height: 1;
}
.svc-row:hover .svc-row__cta {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
@media (min-width: 760px) {
  .svc-row__cta {
    padding: 10px 18px;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }
}
@media (max-width: 480px) {
  .svc-row__cta-label { display: none; }
  .svc-row__cta {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
  }
}

/* --- Gallery --- */
body.page--gallery {
  scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px) + clamp(100px, 24vw, 180px));
}

.page--gallery #main {
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
}

/* Title band: #main already clears the fixed header — avoid double “air” */
.page--gallery .gallery-page-hero.page-hero--compact {
  padding-top: clamp(18px, 3.5vw, 32px);
  padding-bottom: clamp(12px, 2.2vw, 22px);
}

/* Grid scrolls under the chip bar — keep bar above masonry (later DOM sibling would paint over otherwise). */
.page--gallery #gallery-sections {
  position: relative;
  z-index: 0;
}

/* Sticky filter chips: stay under the fixed header while scrolling */
.page--gallery .gallery-toolbar {
  position: sticky;
  top: calc(72px + env(safe-area-inset-top, 0px));
  z-index: 90;
  margin: 0;
  padding-block: 10px 12px;
  background: rgba(10, 10, 10, 0.94);
  border-bottom: 1px solid var(--black-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.75);
}
.page--gallery .page-jump a {
  border-color: var(--black-line);
  background: rgba(0, 0, 0, 0.22);
}
.page--gallery .page-jump a:hover {
  background: rgba(0, 0, 0, 0.35);
  color: var(--ivory);
  border-color: rgba(0, 0, 0, 0.65);
}
.page--gallery .page-jump a.is-active {
  color: var(--ivory);
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 -2px 0 0 rgba(184, 151, 74, 0.9);
}
.page--gallery .gallery-toolbar .page-jump {
  margin-top: 0;
  justify-content: center;
}
/* Anchor scroll / filter jump: keep grid clear of sticky bar + header (toolbar can wrap on narrow screens) */
.page--gallery #gallery-mixed-grid {
  scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px) + clamp(96px, 24vw, 140px));
}

.page-jump {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 28px;
}
.page-jump a {
  padding: 10px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: all 0.3s var(--ease);
}
.page-jump a.is-active {
  color: var(--black);
  background: linear-gradient(180deg, rgba(200, 161, 75, 0.95), rgba(200, 161, 75, 0.72));
  border-color: rgba(200, 161, 75, 0.95);
}
.page--gallery .gallery-mixed {
  padding-block: clamp(20px, 4vw, 48px);
}
.cat-head-tight h2 { letter-spacing: -0.02em; }

.subhead {
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin: 56px 0 22px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
}
.cat-head-tight + .subhead { margin-top: 0; padding-top: 0; border-top: 0; }

.gallery-grid {
  columns: 1;
  column-gap: 18px;
}
@media (min-width: 600px) { .gallery-grid { columns: 2; column-gap: 22px; } }
@media (min-width: 1000px) { .gallery-grid { columns: 3; column-gap: 26px; } }
@media (min-width: 1400px) { .gallery-grid { columns: 4; column-gap: 26px; } }
.gallery-grid figure {
  break-inside: avoid;
  margin: 0 0 22px;
  overflow: hidden;
  background: var(--black-elev);
  cursor: zoom-in;
  position: relative;
  z-index: 0;
  /* Reserve space before decode so columns don’t “soup” when images arrive */
  aspect-ratio: 4 / 5;
  width: 100%;
  transition: transform 0.5s var(--ease);
}
@supports (content-visibility: auto) {
  .page--gallery .gallery-grid figure {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
  }
}
.gallery-grid figure img,
.gallery-grid figure video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease), filter 1s var(--ease);
  filter: saturate(0.95);
}
.gallery-grid figure:hover img,
.gallery-grid figure:hover video { transform: scale(1.04); filter: saturate(1.05); }

.gallery-grid .media-vid {
  position: absolute;
  inset: 0;
}
.gallery-grid .media-vid video { object-fit: cover; }
.gallery-grid .media-vid .media-tag {
  position: absolute;
  inset: auto auto 12px 12px;
  z-index: 2;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(10,10,10,0.55);
  color: var(--white);
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Gallery: calmer slot shimmer while photos decode (layout already reserved via aspect-ratio) */
@keyframes gallerySlotShimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -30% 0;
  }
}
.page--gallery .gallery-grid figure:has(> img.img-fx:not(.is-loaded))::before {
  animation: gallerySlotShimmer 1.7s ease-in-out infinite;
  background: linear-gradient(
    118deg,
    rgba(16, 16, 18, 0.98) 0%,
    rgba(38, 34, 30, 0.9) 40%,
    rgba(210, 185, 140, 0.16) 50%,
    rgba(38, 34, 30, 0.9) 60%,
    rgba(14, 14, 16, 0.98) 100%
  );
  background-size: 280% 100%;
}

.page--gallery .gallery-grid figure.bd-gallery-vid-error .media-vid {
  background: var(--black-elev);
}
.page--gallery .gallery-grid figure.bd-gallery-vid-error video {
  opacity: 0.22;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox-stage {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: var(--shadow-deep);
  background: var(--black);
}
.lightbox-stage video { width: auto; height: auto; }
.lightbox-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--ivory);
  font-size: 1.4rem;
  display: grid; place-items: center;
}
.lightbox-close:hover { background: var(--white); color: var(--black); }
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--ivory);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:hover, .lightbox-next:hover { background: var(--white); color: var(--black); }

/* --- Contact --- */
.info-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}
@media (min-width: 720px) { .info-band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .info-band { grid-template-columns: repeat(4, 1fr); } }
.info-card {
  background: var(--black);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.4s var(--ease);
}
.info-card:hover { background: var(--black-soft); }
.info-card .label {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-dim);
}
.info-card .value {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--white);
  font-style: normal;
  margin: 0;
}
.info-card .value a { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.info-card .value a:hover { border-bottom-color: var(--white); }
.info-card .value strong { font-weight: 500; }
.info-card .muted { font-family: "Inter", sans-serif; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.04em; }

.info-band--compact .info-card {
  padding: 18px 18px;
  gap: 6px;
}
@media (min-width: 720px) {
  .info-band--compact .info-card {
    padding: 20px 22px;
  }
}
.info-band--compact .info-card .value {
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.3;
}

.page--contact #main {
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
}
.page--contact #main > section:not(.cta-band) {
  padding-block: clamp(32px, 5vw, 72px);
}
.page--contact .contact-showcase {
  padding-top: clamp(8px, 2vw, 20px);
}

.page-hero--compact {
  padding-top: clamp(110px, 14vw, 150px);
  padding-bottom: clamp(20px, 3vw, 36px);
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.06), transparent 55%), var(--black);
  border-bottom: 1px solid var(--hairline-soft);
}
.page-hero--compact .chapter {
  display: inline-block;
  margin-bottom: 14px;
}
.page-hero--compact h1.display {
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 1;
}
.page-hero--compact .lede {
  margin-top: 16px;
  max-width: 56ch;
  color: var(--text-soft);
}

/* --- Contact page layout --- */
.contact-showcase {
  position: relative;
  background: linear-gradient(180deg, var(--black) 0%, rgba(14, 14, 14, 0.98) 40%, var(--black) 100%);
}
.contact-showcase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(72%, 520px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 161, 75, 0.35), transparent);
  pointer-events: none;
}
.contact-stage {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.5vw, 36px);
}
.contact-stage__intro {
  max-width: 62ch;
}
.contact-kicker {
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 0;
}
.contact-kicker__mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(200, 161, 75, 0.4);
}
.contact-deck {
  margin: 0;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: var(--text-soft);
}

.contact-stage__split {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .contact-stage__split {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(24px, 3.5vw, 40px);
  }
}

/* Contact tiles — 2×2 luxury cards */
.contact-grid--lux {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .contact-grid--lux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
.contact-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: 8px 16px;
  padding: clamp(20px, 2.8vw, 26px) clamp(20px, 2.8vw, 26px) clamp(18px, 2.4vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055) 0%, transparent 42%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(180deg, rgba(22, 22, 22, 0.98), rgba(10, 10, 10, 0.99));
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 20px 56px -34px rgba(0, 0, 0, 0.9);
  transition: border-color 0.4s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.contact-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(200, 161, 75, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.contact-tile::after {
  content: "";
  position: absolute;
  inset: auto -35% -45% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 161, 75, 0.09), transparent 62%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.contact-tile:hover {
  border-color: rgba(200, 161, 75, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 28px 64px -28px rgba(200, 161, 75, 0.12), 0 24px 48px -32px rgba(0, 0, 0, 0.85);
}
.contact-tile:hover::before,
.contact-tile:hover::after {
  opacity: 1;
}
.contact-tile__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 161, 75, 0.28);
  color: var(--gold-light);
  background: linear-gradient(160deg, rgba(200, 161, 75, 0.12), rgba(255, 255, 255, 0.03));
}
.contact-tile__label {
  grid-column: 2;
  grid-row: 1;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-tile__value {
  grid-column: 2;
  grid-row: 2;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.08rem, 1.65vw, 1.35rem);
  line-height: 1.3;
  color: var(--ivory);
  min-width: 0;
}

/* WhatsApp — compact centered tile */
.contact-tile--whatsapp {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  text-align: center;
  gap: 2px 0;
  padding-top: clamp(12px, 1.8vw, 18px);
  padding-bottom: clamp(10px, 1.5vw, 14px);
}
.contact-tile--whatsapp .contact-tile__icon {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  border-color: rgba(37, 211, 102, 0.35);
  background: linear-gradient(145deg, rgba(37, 211, 102, 0.12), rgba(18, 140, 126, 0.08));
  color: rgba(220, 252, 231, 0.95);
}
.contact-tile--whatsapp .contact-tile__label {
  grid-column: 1;
  grid-row: 2;
}
.contact-tile--whatsapp .contact-tile__value {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}
.contact-tile--whatsapp .contact-tile__cta {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  justify-content: center;
  margin-top: 2px;
  padding-top: 8px;
}
.contact-tile--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.45);
}
.contact-wa-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  line-height: 1.35;
}
.contact-wa-card--compact {
  display: block;
  gap: 0;
  font-size: clamp(0.78rem, 1.9vw, 0.88rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ivory);
}
.contact-wa-card--compact .contact-wa-card__inline {
  display: block;
}
.contact-wa-card--compact .contact-wa-card__inline strong {
  font-weight: 600;
  color: var(--white);
}
.contact-wa-card__line {
  display: block;
  font-size: clamp(0.95rem, 2.1vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}
.contact-wa-card__hint {
  display: block;
  max-width: 34ch;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--text-muted);
  text-transform: none;
}

/* Instagram — centered stack so long @handle never collides with grid */
.contact-tile--instagram {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  text-align: center;
  gap: 6px 0;
  padding-top: clamp(22px, 2.8vw, 28px);
  padding-bottom: clamp(18px, 2.4vw, 22px);
}
.contact-tile--instagram .contact-tile__icon {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 4px;
  border-color: rgba(225, 175, 200, 0.35);
  background: linear-gradient(145deg, rgba(200, 161, 75, 0.1), rgba(180, 100, 160, 0.08));
}
.contact-tile--instagram .contact-tile__label {
  grid-column: 1;
  grid-row: 2;
}
.contact-tile--instagram .contact-tile__value {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.contact-tile--instagram .contact-tile__cta {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  padding-top: 16px;
}
.contact-tile--instagram:hover {
  border-color: rgba(225, 175, 200, 0.42);
}
.contact-ig-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  line-height: 1.35;
}
.contact-ig-card__handle {
  display: block;
  font-size: clamp(0.95rem, 2.1vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}
.contact-ig-card__hint {
  display: block;
  max-width: 34ch;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--text-muted);
  text-transform: none;
}

/* Hours tile — schedule card */
.contact-tile--hours {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  text-align: center;
  gap: 2px 0;
  padding-top: clamp(12px, 1.8vw, 18px);
  padding-bottom: clamp(10px, 1.5vw, 14px);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(22, 22, 22, 0.99), rgba(10, 10, 10, 0.99));
}
.contact-tile--hours .contact-tile__icon {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}
.contact-tile--hours .contact-tile__label {
  grid-column: 1;
  grid-row: 2;
}
.contact-tile--hours .contact-tile__value {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}
.contact-tile--hours .contact-tile__cta {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  justify-content: center;
  margin-top: 2px;
  padding-top: 8px;
}
.contact-hours-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: "Inter", sans-serif;
  text-align: center;
}
.contact-hours-card--compact {
  gap: 3px;
}
.contact-hours-card--compact .contact-hours-card__line {
  margin: 0;
  font-size: clamp(0.78rem, 1.9vw, 0.9rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--ivory);
  max-width: 24rem;
}
.contact-hours-card--compact .contact-hours-card__line strong {
  font-weight: 600;
  color: var(--white);
}
.contact-hours-card--compact .contact-hours-card__line--muted {
  font-size: clamp(0.68rem, 1.65vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.contact-hours-card__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px 12px 2px;
}
.contact-hours-card__row--soft {
  opacity: 0.92;
}
.contact-hours-card__days {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-hours-card__time {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ivory);
  line-height: 1.15;
}
.contact-hours-card__note {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  line-height: 1.2;
}
.contact-hours-card__rule {
  height: 1px;
  margin: 2px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.contact-tile--phone {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  text-align: center;
  gap: 12px 0;
  padding: clamp(26px, 3.2vw, 34px) clamp(22px, 3vw, 28px);
  border-color: rgba(200, 161, 75, 0.22);
  background:
    radial-gradient(ellipse 100% 85% at 50% -30%, rgba(200, 161, 75, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.99), rgba(10, 10, 10, 0.99));
}
.contact-tile--phone .contact-tile__icon {
  grid-column: 1;
  grid-row: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(200, 161, 75, 0.38);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(200, 161, 75, 0.22), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 14px 36px -18px rgba(200, 161, 75, 0.45);
}
.contact-tile--phone .contact-tile__label {
  grid-column: 1;
  grid-row: 2;
  margin-top: 2px;
}
.contact-tile--phone .contact-tile__value {
  grid-column: 1;
  grid-row: 3;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(1.22rem, 2.5vw, 1.58rem);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}
.contact-tile--phone .contact-tile__cta {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  padding-top: 16px;
  border-top-color: rgba(200, 161, 75, 0.14);
}

.contact-tile__value strong {
  font-weight: 500;
}
.contact-tile__cta {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Inter", sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s var(--ease);
}
.contact-tile__cta--muted {
  color: var(--text-muted);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.contact-tile:hover .contact-tile__cta {
  color: var(--gold-light);
}
.contact-tile--static {
  cursor: default;
}
.contact-tile--static:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 56px -34px rgba(0, 0, 0, 0.9);
}
.contact-tile--static:hover::before,
.contact-tile--static:hover::after {
  opacity: 0;
}

/* Map / directions card (sidebar) */
.contact-map-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 32px) clamp(22px, 3vw, 30px);
  border: 1px solid rgba(200, 161, 75, 0.22);
  background:
    linear-gradient(165deg, rgba(200, 161, 75, 0.1) 0%, transparent 42%),
    linear-gradient(200deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
    var(--black-soft);
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}
@media (min-width: 960px) {
  .contact-map-card {
    position: sticky;
    top: calc(88px + env(safe-area-inset-top, 0px));
  }
}
.contact-map-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(200, 161, 75, 0.85), transparent);
  opacity: 0.85;
}
.contact-map-card__eyebrow {
  margin: 0 0 8px;
  padding-left: 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(200, 161, 75, 0.9);
}
.contact-directions__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  padding-left: 14px;
  color: var(--ivory);
}
.contact-directions__addr {
  margin: 0 0 22px;
  padding-left: 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--text-soft);
}
.contact-directions__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 14px;
}
.contact-directions__actions .btn,
.contact-directions__actions .btn-ghost {
  justify-content: center;
  width: 100%;
}
.contact-directions__actions .btn svg {
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .contact-directions__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .contact-directions__actions .btn,
  .contact-directions__actions .btn-ghost {
    flex: 1 1 auto;
    min-width: 140px;
  }
}

/* --- Reveal animation --- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

:where(.feat-card .img-wrap, .tile-media, .cat-photo-strip__cell, .gallery-grid figure, .lightbox-stage).bd-media-ready::before {
  display: none !important;
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* --- Image fade-in (smooth crossfade once decoded) --- */
.img-fx {
  opacity: 0;
  transform: scale(1.006);
  transition: opacity 0.38s var(--ease), transform 0.55s var(--ease), filter 0.55s var(--ease);
}
.img-fx.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* Shimmer placeholder while images are still loading (slow networks) */
@keyframes imgFxShimmer {
  0% {
    background-position: 125% 0;
  }
  100% {
    background-position: -25% 0;
  }
}
.img-fx:not(.is-loaded) {
  position: relative;
  z-index: 1;
}
:where(.feat-card .img-wrap, .tile-media, .cat-photo-strip__cell, .gallery-grid figure, .lightbox-stage):has(> img.img-fx:not(.is-loaded))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(20, 20, 20, 0.98) 0%,
    rgba(40, 38, 34, 0.85) 34%,
    rgba(200, 161, 75, 0.18) 50%,
    rgba(40, 38, 34, 0.85) 66%,
    rgba(18, 18, 18, 0.98) 100%
  );
  background-size: 240% 100%;
  animation: imgFxShimmer 1.5s ease-in-out infinite;
}

/* --- Page transition — ribbons + bow (snappy, smooth, playful) --- */
.page-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.48s cubic-bezier(0.33, 0.86, 0.42, 1);
}

.page-fx.is-fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.52s cubic-bezier(0.25, 0.85, 0.35, 1);
}

.page-fx.is-idle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.page-fx.is-covering {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.06s linear;
}

.page-fx__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-clip-path: circle(150vmax at 50% 44%);
  clip-path: circle(150vmax at 50% 44%);
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(200, 161, 75, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 70% 55% at 88% 92%, rgba(200, 161, 75, 0.06) 0%, transparent 42%),
    linear-gradient(168deg, #020202 0%, #101014 42%, #050508 100%);
  will-change: clip-path, filter, opacity;
}

.page-fx__veil::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 248, 235, 0.05) 48%,
    rgba(200, 161, 75, 0.28) 50%,
    rgba(255, 248, 235, 0.06) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: pfxVeilShimmer 0.85s ease-out 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}

.page-fx.is-revealing .page-fx__veil::before,
.page-fx.is-idle .page-fx__veil::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.page-fx__ribbons {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.page-fx__ribbon {
  position: absolute;
  left: -45%;
  width: 190%;
  height: clamp(20px, 4.2vw, 36px);
  border-radius: 999px;
  opacity: 0;
  will-change: transform, opacity;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 161, 75, 0.06) 18%,
    rgba(255, 248, 235, 0.42) 50%,
    rgba(200, 161, 75, 0.1) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 28px rgba(200, 161, 75, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.page-fx__ribbon--1 {
  top: 11%;
  transform: rotate(-11deg) translateX(-12%);
}
.page-fx__ribbon--2 {
  top: 32%;
  transform: rotate(7deg) translateX(-8%);
  height: clamp(16px, 3.4vw, 28px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 250, 240, 0.15) 45%,
    rgba(200, 161, 75, 0.18) 50%,
    rgba(255, 250, 240, 0.12) 55%,
    transparent 100%
  );
}
.page-fx__ribbon--3 {
  top: 58%;
  transform: rotate(-6deg) translateX(-10%);
  height: clamp(18px, 3.8vw, 32px);
}
.page-fx__ribbon--4 {
  top: 78%;
  transform: rotate(10deg) translateX(-14%);
  height: clamp(14px, 3vw, 26px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 161, 75, 0.12) 40%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(200, 161, 75, 0.08) 60%,
    transparent 100%
  );
}

.page-fx__loop {
  position: absolute;
  width: clamp(28px, 6vw, 40px);
  height: clamp(42px, 9vw, 58px);
  border: 2.5px solid rgba(200, 161, 75, 0.55);
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  opacity: 0;
  box-shadow:
    0 0 20px rgba(200, 161, 75, 0.2),
    inset 0 0 12px rgba(255, 248, 235, 0.08);
  will-change: transform, opacity;
}

.page-fx__loop--1 {
  left: min(14%, 4.5rem);
  top: 38%;
}
.page-fx__loop--2 {
  right: min(12%, 4rem);
  top: 44%;
  transform: scaleX(-1);
}
.page-fx__loop--3 {
  left: 50%;
  top: 18%;
  width: clamp(22px, 5vw, 32px);
  height: clamp(34px, 7vw, 48px);
  border-color: rgba(255, 248, 235, 0.35);
  transform: translateX(-50%);
}

.page-fx__bow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(132px, 36vw);
  height: min(80px, 22vw);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.page-fx__bow-wing {
  position: absolute;
  top: 10px;
  width: 58%;
  height: 52px;
  border-radius: 52% 48% 42% 58% / 58% 58% 42% 42%;
  background: radial-gradient(ellipse 80% 70% at 35% 38%, rgba(255, 252, 246, 0.95) 0%, rgba(230, 210, 175, 0.55) 55%, rgba(180, 140, 70, 0.45) 100%);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(200, 161, 75, 0.35);
  opacity: 0;
  will-change: transform, opacity;
}

.page-fx__bow-wing--l {
  left: 0;
  transform-origin: 100% 50%;
  transform: rotate(-32deg) scale(0.4);
}
.page-fx__bow-wing--r {
  right: 0;
  transform-origin: 0% 50%;
  transform: rotate(32deg) scale(0.4);
}

.page-fx__bow-knot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffaf2 0%, #e6cfa0 45%, #b8924a 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: scale(0.2);
  will-change: transform, opacity;
}

.page-fx__bow-tail {
  position: absolute;
  top: 58%;
  width: 10px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200, 161, 75, 0.85), rgba(200, 161, 75, 0.15));
  opacity: 0;
  filter: blur(0.2px);
}

.page-fx__bow-tail--l {
  left: 42%;
  transform: rotate(8deg) translateY(8px);
}
.page-fx__bow-tail--r {
  right: 42%;
  transform: rotate(-8deg) translateY(8px);
}

/* —— Reveal (load in): fast iris + ribbons sweep + bow pop —— */
.page-fx.is-revealing .page-fx__veil {
  animation: pfxLuxOpen 0.64s cubic-bezier(0.55, 0.02, 0.12, 1) forwards;
}

.page-fx.is-revealing .page-fx__ribbon--1 {
  animation: pfxRibbonDash 0.66s cubic-bezier(0.22, 1, 0.36, 1) 0.02s forwards;
}
.page-fx.is-revealing .page-fx__ribbon--2 {
  animation: pfxRibbonDashAlt 0.62s cubic-bezier(0.25, 1, 0.35, 1) 0.08s forwards;
}
.page-fx.is-revealing .page-fx__ribbon--3 {
  animation: pfxRibbonDash 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards;
}
.page-fx.is-revealing .page-fx__ribbon--4 {
  animation: pfxRibbonDashAlt 0.6s cubic-bezier(0.25, 1, 0.35, 1) 0.12s forwards;
}

.page-fx.is-revealing .page-fx__loop--1 {
  animation: pfxLoopSwirl 0.58s cubic-bezier(0.34, 1.2, 0.45, 1) 0.05s forwards;
}
.page-fx.is-revealing .page-fx__loop--2 {
  animation: pfxLoopSwirl 0.56s cubic-bezier(0.34, 1.2, 0.45, 1) 0.1s forwards;
}
.page-fx.is-revealing .page-fx__loop--3 {
  animation: pfxLoopSwirlCenter 0.52s cubic-bezier(0.34, 1.2, 0.45, 1) 0s forwards;
}

.page-fx.is-revealing .page-fx__bow-wing--l {
  animation: pfxBowWingL 0.58s cubic-bezier(0.34, 1.35, 0.45, 1) 0.06s forwards;
}
.page-fx.is-revealing .page-fx__bow-wing--r {
  animation: pfxBowWingR 0.58s cubic-bezier(0.34, 1.35, 0.45, 1) 0.06s forwards;
}
.page-fx.is-revealing .page-fx__bow-knot {
  animation: pfxBowKnot 0.5s cubic-bezier(0.34, 1.45, 0.45, 1) 0.1s forwards;
}
.page-fx.is-revealing .page-fx__bow-tail--l {
  animation: pfxBowTailL 0.45s cubic-bezier(0.4, 1.2, 0.45, 1) 0.22s forwards;
}
.page-fx.is-revealing .page-fx__bow-tail--r {
  animation: pfxBowTailR 0.45s cubic-bezier(0.4, 1.2, 0.45, 1) 0.22s forwards;
}

/* —— Cover (navigate out): quick ribbons converge + bow tuck —— */
.page-fx.is-covering .page-fx__veil {
  animation: pfxLuxClose 0.38s cubic-bezier(0.72, 0, 0.18, 1) forwards;
}

.page-fx.is-covering .page-fx__ribbon--1 {
  animation: pfxRibbonClose 0.38s cubic-bezier(0.55, 0, 0.25, 1) 0s forwards;
}
.page-fx.is-covering .page-fx__ribbon--2 {
  animation: pfxRibbonCloseAlt 0.36s cubic-bezier(0.55, 0, 0.25, 1) 0.03s forwards;
}
.page-fx.is-covering .page-fx__ribbon--3 {
  animation: pfxRibbonClose 0.38s cubic-bezier(0.55, 0, 0.25, 1) 0.02s forwards;
}
.page-fx.is-covering .page-fx__ribbon--4 {
  animation: pfxRibbonCloseAlt 0.34s cubic-bezier(0.55, 0, 0.25, 1) 0.04s forwards;
}

.page-fx.is-covering .page-fx__loop--1,
.page-fx.is-covering .page-fx__loop--2 {
  animation: pfxLoopClose 0.34s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}

.page-fx.is-covering .page-fx__loop--3 {
  animation: pfxLoopCloseCenter 0.34s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}

.page-fx.is-covering .page-fx__bow-wing--l {
  animation: pfxBowCoverL 0.36s cubic-bezier(0.55, 0, 0.2, 1) forwards;
}
.page-fx.is-covering .page-fx__bow-wing--r {
  animation: pfxBowCoverR 0.36s cubic-bezier(0.55, 0, 0.2, 1) forwards;
}
.page-fx.is-covering .page-fx__bow-knot {
  animation: pfxBowKnotCover 0.34s cubic-bezier(0.55, 0, 0.2, 1) forwards;
}
.page-fx.is-covering .page-fx__bow-tail--l {
  animation: pfxBowTailCoverL 0.28s ease forwards;
}
.page-fx.is-covering .page-fx__bow-tail--r {
  animation: pfxBowTailCoverR 0.28s ease forwards;
}

@keyframes pfxVeilShimmer {
  0% {
    background-position: 160% 50%;
  }
  100% {
    background-position: -50% 50%;
  }
}

@keyframes pfxLuxOpen {
  0% {
    -webkit-clip-path: circle(150vmax at 50% 44%);
    clip-path: circle(150vmax at 50% 44%);
    filter: blur(0) saturate(1);
    opacity: 1;
  }
  48% {
    filter: blur(1px) saturate(1.08);
    opacity: 0.94;
  }
  100% {
    -webkit-clip-path: circle(0% at 50% 44%);
    clip-path: circle(0% at 50% 44%);
    filter: blur(12px) saturate(1.18);
    opacity: 0;
  }
}

@keyframes pfxLuxClose {
  0% {
    -webkit-clip-path: circle(0% at 50% 44%);
    clip-path: circle(0% at 50% 44%);
    filter: blur(8px);
    opacity: 0;
  }
  40% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    -webkit-clip-path: circle(150vmax at 50% 44%);
    clip-path: circle(150vmax at 50% 44%);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes pfxRibbonDash {
  0% {
    opacity: 0;
    transform: rotate(-11deg) translateX(-42%) scaleX(0.45);
  }
  32% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-6deg) translateX(38%) scaleX(1.05);
  }
}

@keyframes pfxRibbonDashAlt {
  0% {
    opacity: 0;
    transform: rotate(7deg) translateX(36%) scaleX(0.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(4deg) translateX(-40%) scaleX(1.02);
  }
}

@keyframes pfxRibbonClose {
  0% {
    opacity: 0;
    transform: rotate(-11deg) translateX(35%);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-11deg) translateX(-38%) scaleX(0.9);
  }
}

@keyframes pfxRibbonCloseAlt {
  0% {
    opacity: 0;
    transform: rotate(7deg) translateX(-38%);
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(7deg) translateX(36%) scaleX(0.88);
  }
}

@keyframes pfxLoopSwirl {
  0% {
    opacity: 0;
    transform: rotate(-120deg) scale(0.35);
  }
  55% {
    opacity: 1;
    transform: rotate(18deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(48deg) scale(1.12);
  }
}

@keyframes pfxLoopSwirlCenter {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(-100deg) scale(0.35);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) rotate(16deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(42deg) scale(1.08);
  }
}

@keyframes pfxLoopClose {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.5);
  }
  55% {
    opacity: 0.9;
    transform: rotate(-22deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(-50deg) scale(0.4);
  }
}

@keyframes pfxLoopCloseCenter {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) scale(0.45);
  }
  55% {
    opacity: 0.9;
    transform: translateX(-50%) rotate(-20deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(-44deg) scale(0.38);
  }
}

@keyframes pfxBowWingL {
  0% {
    opacity: 0;
    transform: rotate(-52deg) scale(0.35);
  }
  70% {
    opacity: 1;
    transform: rotate(-24deg) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: rotate(-18deg) scale(1.12);
  }
}

@keyframes pfxBowWingR {
  0% {
    opacity: 0;
    transform: rotate(52deg) scale(0.35);
  }
  70% {
    opacity: 1;
    transform: rotate(24deg) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: rotate(18deg) scale(1.12);
  }
}

@keyframes pfxBowKnot {
  0% {
    opacity: 0;
    transform: scale(0.15) rotate(-25deg);
  }
  72% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) rotate(0deg);
  }
}

@keyframes pfxBowTailL {
  0% {
    opacity: 0;
    transform: rotate(8deg) translateY(22px) scaleY(0.15);
  }
  58% {
    opacity: 0.88;
  }
  100% {
    opacity: 0;
    transform: rotate(8deg) translateY(0) scaleY(1);
  }
}

@keyframes pfxBowTailR {
  0% {
    opacity: 0;
    transform: rotate(-8deg) translateY(22px) scaleY(0.15);
  }
  58% {
    opacity: 0.88;
  }
  100% {
    opacity: 0;
    transform: rotate(-8deg) translateY(0) scaleY(1);
  }
}

@keyframes pfxBowCoverL {
  0% {
    opacity: 0;
    transform: rotate(-18deg) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: rotate(-34deg) scale(1);
  }
}

@keyframes pfxBowCoverR {
  0% {
    opacity: 0;
    transform: rotate(18deg) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: rotate(34deg) scale(1);
  }
}

@keyframes pfxBowKnotCover {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pfxBowTailCoverL {
  0% {
    opacity: 0;
    transform: rotate(8deg) translateY(10px);
  }
  100% {
    opacity: 0.8;
    transform: rotate(8deg) translateY(0);
  }
}

@keyframes pfxBowTailCoverR {
  0% {
    opacity: 0;
    transform: rotate(-8deg) translateY(10px);
  }
  100% {
    opacity: 0.8;
    transform: rotate(-8deg) translateY(0);
  }
}

/* If user prefers reduced motion, hide effect entirely */
@media (prefers-reduced-motion: reduce) {
  .page-fx { display: none !important; }
  .img-fx { opacity: 1; transform: none; animation: none; }
  :where(.feat-card .img-wrap, .tile-media, .cat-photo-strip__cell, .gallery-grid figure, .lightbox-stage):has(> img.img-fx:not(.is-loaded))::before {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Utility --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.muted { color: var(--text-muted); }
.gap-stack { display: flex; flex-direction: column; gap: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* small viewports tweaks */
@media (max-width: 540px) {
  .contact-item { grid-template-columns: 1fr; gap: 6px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lightbox-close { top: 14px; right: 14px; }
}

/* --- Chat lazy launcher: mismo FAB que #rcpBtn (rosa muy claro + punto en la esquina) --- */
.bd-chat-launcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2147483000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(165deg, var(--bd-chat-fab-1) 0%, var(--bd-chat-fab-2) 45%, var(--bd-chat-fab-3) 100%);
  color: var(--bd-chat-fab-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bd-chat-launcher:hover {
  transform: scale(1.08);
  box-shadow:
    0 6px 32px rgba(190, 24, 93, 0.18),
    0 4px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.bd-chat-launcher:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.95);
  outline-offset: 3px;
}
.bd-chat-launcher--error {
  background: linear-gradient(165deg, #fecdd3 0%, #fda4af 100%);
  animation: bdChatShake 0.45s ease;
}
@keyframes bdChatShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.bd-chat-launcher__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(244, 114, 182, 0.35);
  opacity: 0.65;
  pointer-events: none;
}
.bd-chat-launcher__mark {
  display: none;
}
.bd-chat-launcher__bubble {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  opacity: 1;
}
/* Punto “en línea”: misma esquina que #rcpDot dentro de #rcpBtn */
.bd-chat-launcher::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  background: var(--bd-chat-dot);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(134, 16, 64, 0.12);
  pointer-events: none;
  animation: bdChatDotPulse 1.8s ease-in-out infinite;
}
@keyframes bdChatDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}
@media (max-width: 480px) {
  .bd-chat-launcher {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 56px;
    height: 56px;
  }
  .bd-chat-launcher::after {
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
  }
}

/* --- Blog (SEO hub + posts) — aligned with site tokens --- */
.page--blog-hub .page-hero {
  padding-bottom: 56px;
}
.page--blog-post .blog-article > .page-hero.blog-post-hero {
  padding: clamp(88px, 14vw, 120px) 0 clamp(6px, 2vw, 14px);
  margin: 0;
  background: transparent;
  border: none;
}
.page--blog-post .blog-article > .page-hero.blog-post-hero .chapter {
  margin-bottom: 0.65rem;
}
.page--blog-post .blog-article > .page-hero.blog-post-hero .display-2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.page--blog-post .blog-article > .page-hero.blog-post-hero .lede {
  margin-top: clamp(0.75rem, 2vw, 1.1rem);
  margin-bottom: 0;
}
.page--blog-post .blog-article > .page-hero.blog-post-hero + p {
  margin-top: clamp(1.35rem, 3.5vw, 1.85rem);
}
.blog-post-more {
  padding-block: clamp(40px, 6vw, 72px);
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--hairline-soft);
}
.blog-post-more__head {
  text-align: center;
  margin-bottom: clamp(22px, 3.5vw, 36px);
}
.blog-post-more__head .display-2 {
  margin-top: 0.35rem;
}
.blog-post-more__actions {
  text-align: center;
  margin-top: clamp(26px, 4vw, 40px);
  margin-bottom: 0;
}
.blog-list {
  padding-block: clamp(32px, 5vw, 56px);
}
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 32px);
}
@media (min-width: 720px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 14, 0.55);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.blog-card__hit {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 161, 75, 0.35);
}
.blog-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--black-elev);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}
.blog-card__body {
  padding: clamp(18px, 2.5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card__meta {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.blog-card__title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  letter-spacing: -0.02em;
}
.blog-card__title a {
  color: var(--ivory);
  text-decoration: none;
}
.blog-card__title a:hover {
  color: var(--gold-light);
}
.blog-card__excerpt {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  flex: 1;
}
.blog-card__read {
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-article {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 48px);
}
.blog-article .lede {
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height: 1.65;
}
.blog-article h2 {
  margin-top: 2.25rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.blog-article p {
  color: var(--text-soft);
  line-height: 1.7;
}
.blog-article ul {
  color: var(--text-soft);
  line-height: 1.65;
  padding-left: 1.25rem;
}
.blog-article a {
  color: var(--gold-light);
}
.blog-post-more {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}
.blog-post-more .container {
  max-width: var(--max);
  margin-inline: auto;
}