/* ============================================================
   LUKS MONT — Layout DecaRoy con refresh editorial
   ============================================================ */

:root {
  --bg: #FCFCFB;
  --bg-2: #F4F4F2;
  --bg-dark: #1A1916;
  --ink: #0A0A09;
  --ink-2: #2A2825;
  --muted: #6B6862;
  --line: rgba(10,10,9,0.14);
  --line-strong: rgba(10,10,9,0.32);
  --accent: #1E4032;
  --accent-2: #2E5C48;
  --accent-glow: #4A8268;
  --accent-ink: #1a3a2c;
  --on-accent: #efebe2;

  --pad-section: clamp(5rem, 10vw, 9rem);
  --container: 1280px;
  --gutter: clamp(1.5rem, 4vw, 3rem);

  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background: var(--bg); overflow-x: clip; }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  position: relative;
  /* Niente scroll orizzontale su mobile: se un elemento sfora la viewport non
     deve creare una barra/striscia bianca. 'clip' (non 'hidden') preserva
     position: sticky. max-width come cintura di sicurezza. */
  overflow-x: clip;
  max-width: 100%;
}

body::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: var(--on-accent); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ============ TYPOGRAPHY ============ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.display em { font-style: italic; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s, padding 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled,
.nav.solid {
  background: color-mix(in srgb, var(--bg), transparent 78%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom-color: color-mix(in srgb, var(--line), transparent 60%);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/* Client logo (processed): height-capped, width auto, replaces the wordmark. */
.nav-logo {
  height: clamp(60px, 7.4vw, 92px);
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}
/* Logo CHIARO su navbar chiara → placca scura di contrasto (solo quando serve). */
/* Placca di contrasto SOTTILE: chip morbido semi-trasparente, non un box pieno.
   Applicata solo ai loghi quasi-monocromatici che sparirebbero sul fondo. */
.nav-logo--plate {
  background: rgba(18, 23, 30, 0.72);
  padding: 6px 12px;
  border-radius: 11px;
  box-sizing: content-box;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.4s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--accent-ink); }
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  padding: 11px 20px;
  border: 1px solid color-mix(in srgb, var(--ink), transparent 78%);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--bg), transparent 30%);
  color: var(--ink);
  box-shadow: 0 5px 14px -6px rgba(10, 10, 9, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.nav-cta:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -8px rgba(10, 10, 9, 0.26);
}
.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px -4px rgba(10, 10, 9, 0.20);
  transition-duration: 0.08s;
}
.nav-cta .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg);
    padding: 2rem var(--gutter);
    gap: 1.5rem;
    border-bottom: 1px solid var(--line);
    z-index: 100;
  }
}

/* ============ BUTTONS — floating con ombra permanente ============
   Floating vero: ombra MORBIDA e VISIBILE sempre, cosi' il pulsante
   sembra galleggiare anche a riposo. Spread negativo (-6px) concentra
   l'ombra sotto e morbidizza i bordi laterali (no "muro" pesante).
   Su hover il pulsante si solleva e l'ombra si allunga proporzionalmente. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -6px rgba(10, 10, 9, 0.22);
  transition:
    transform 0.35s var(--ease-out),
    background 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.btn-primary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease-out);
}
.btn-primary:hover svg { transform: translate(3px, -3px); }
.btn-primary:hover {
  background: var(--accent-2);
}
.btn-primary:not(.mission-btn):hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(10, 10, 9, 0.28);
}
.btn-primary:not(.mission-btn):active {
  transform: translateY(0);
  box-shadow: 0 3px 8px -4px rgba(10, 10, 9, 0.22);
  transition-duration: 0.08s; /* press snap, non aspetta i 0.35s */
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid color-mix(in srgb, var(--ink), transparent 80%);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  background: color-mix(in srgb, var(--bg), transparent 30%);
  color: var(--ink);
  /* outline ha bg leggermente trasparente quindi ombra piu' tenue, ma
     comunque visibile per dare il senso di sollevato */
  box-shadow: 0 6px 16px -6px rgba(10, 10, 9, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.35s var(--ease-out),
    background 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}
.btn-outline:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent); /* match bg → no glitchy fade */
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(10, 10, 9, 0.28);
}
.btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px -4px rgba(10, 10, 9, 0.22);
  transition-duration: 0.08s;
}
.btn-outline svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.btn-outline:hover svg { transform: translateX(4px); }

/* ============ HERO ============ */
.hero {
  min-height: 92vh;
  padding: 10rem var(--gutter) 4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  max-width: var(--container);
  margin: 0 auto;
}
.hero-eyebrow {
  margin-bottom: 2.5rem;
}
.hero-title {
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  margin: 0 auto 2rem;
  max-width: 18ch;
}
.hero-title .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.hero.loaded .hero-title .word {
  animation: rise-in 1.1s var(--ease-out) forwards;
}
.hero.loaded .hero-title .word:nth-child(1) { animation-delay: 0.15s; }
.hero.loaded .hero-title .word:nth-child(2) { animation-delay: 0.23s; }
.hero.loaded .hero-title .word:nth-child(3) { animation-delay: 0.31s; }
.hero.loaded .hero-title .word:nth-child(4) { animation-delay: 0.39s; }
.hero.loaded .hero-title .word:nth-child(5) { animation-delay: 0.47s; }
.hero.loaded .hero-title .word:nth-child(6) { animation-delay: 0.55s; }
.hero.loaded .hero-title .word:nth-child(7) { animation-delay: 0.63s; }
.hero.loaded .hero-title .word:nth-child(8) { animation-delay: 0.71s; }
@keyframes rise-in {
  to { transform: translateY(0); opacity: 1; }
}

.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  max-width: 38rem;
  margin: 0 auto;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s var(--ease-out) 0.9s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ============ PAGE HEADER (inner pages) ============ */
.page-header {
  padding: 11rem var(--gutter) 5rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
  max-width: var(--container);
  margin: 0 auto;
}
.page-header .eyebrow { margin-bottom: 2.5rem; }
.page-header h1 {
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 auto 2rem;
  max-width: 22ch;
}
.page-header h1 em { color: var(--accent-ink); }
.page-header h1 .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.page-header.loaded .word {
  animation: rise-in 1s var(--ease-out) forwards;
}
.page-header.loaded .word:nth-child(1) { animation-delay: 0.3s; }
.page-header.loaded .word:nth-child(2) { animation-delay: 0.38s; }
.page-header.loaded .word:nth-child(3) { animation-delay: 0.46s; }
.page-header.loaded .word:nth-child(4) { animation-delay: 0.54s; }
.page-header.loaded .word:nth-child(5) { animation-delay: 0.62s; }
.page-header .lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 42rem;
  margin: 0 auto;
}

/* ============ SECTION (generic) ============ */
section { padding: var(--pad-section) var(--gutter); }
.section-inner { max-width: var(--container); margin: 0 auto; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in.stagger > * { opacity: 1; transform: translateY(0); }
.reveal.in.stagger > *:nth-child(1) { transition-delay: 0.1s; }
.reveal.in.stagger > *:nth-child(2) { transition-delay: 0.25s; }
.reveal.in.stagger > *:nth-child(3) { transition-delay: 0.4s; }
.reveal.in.stagger > *:nth-child(4) { transition-delay: 0.55s; }
.reveal.in.stagger > *:nth-child(5) { transition-delay: 0.7s; }

/* Services list: faster reveal (scoped, doesn't affect other pages) */
.services-list.reveal { transition-duration: 0.5s; }
.services-list.reveal.stagger > * { transition-duration: 0.5s; }
.services-list.reveal.in.stagger > *:nth-child(1) { transition-delay: 0.04s; }
.services-list.reveal.in.stagger > *:nth-child(2) { transition-delay: 0.10s; }
.services-list.reveal.in.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.services-list.reveal.in.stagger > *:nth-child(4) { transition-delay: 0.22s; }
.services-list.reveal.in.stagger > *:nth-child(5) { transition-delay: 0.28s; }

/* ============ MISSION CTA — EXPANDING (scroll-driven, no pin) ============ */
.mission-section {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  position: relative;
}

.mission-sticky {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-card {
  --p: 0;
  width: calc(min(1080px, 92vw) + (min(96vw, 1500px) - min(1080px, 92vw)) * var(--p));
  padding:
    clamp(3.5rem, calc(6vw + 2.5vw * var(--p)), 8rem)
    clamp(1.75rem, calc(4vw + 2vw * var(--p)), 5rem);
  border-radius: calc(40px - 12px * var(--p));
  background: color-mix(in srgb, var(--bg-2), var(--accent) calc(var(--p) * 100%));
  text-align: center;
  position: relative;
  box-shadow:
    0 calc(30px * (1 - var(--p))) calc(80px * (1 - var(--p))) rgba(10, 10, 9, calc(0.10 * (1 - var(--p)))),
    0 calc(6px * (1 - var(--p))) calc(20px * (1 - var(--p))) rgba(10, 10, 9, calc(0.06 * (1 - var(--p))));
}

.mission-card-inner {
  max-width: 70rem;
  margin: 0 auto;
}

.mission-card .eyebrow {
  margin-bottom: 2rem;
  justify-content: center;
  color: color-mix(in srgb, var(--muted), var(--on-accent) calc(var(--p) * 85%));
}

.mission-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, calc(5vw + 1.4vw * var(--p)), 5.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 auto 1.5rem;
  color: color-mix(in srgb, var(--ink), var(--on-accent) calc(var(--p) * 100%));
}
.mission-card h2 em {
  color: color-mix(in srgb, var(--accent-ink), var(--on-accent) calc(var(--p) * 100%));
}

.mission-card p {
  font-size: clamp(1rem, calc(1.3vw + 0.3vw * var(--p)), 1.35rem);
  line-height: 1.55;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  color: color-mix(in srgb, var(--ink-2), var(--on-accent) calc(var(--p) * 90%));
}

.mission-btn {
  background: color-mix(in srgb, var(--ink), var(--bg) calc(var(--p) * 100%));
  color: color-mix(in srgb, var(--bg), var(--ink) calc(var(--p) * 100%));
  /* Stessa ombra di btn-primary ma un filo piu' marcata perche'
     il pulsante cream su sezione dark ha bisogno di piu' lift visivo. */
  box-shadow: 0 10px 24px -6px rgba(10, 10, 9, 0.32);
  transition: transform 0.35s var(--ease-out), background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.mission-btn:hover {
  background: color-mix(in srgb, var(--accent), var(--bg) calc(var(--p) * 60%));
  color: var(--on-accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -8px rgba(10, 10, 9, 0.38);
}
.mission-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -4px rgba(10, 10, 9, 0.32);
  transition-duration: 0.08s;
}
.mission-btn:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(10, 10, 9, 0.08),
    0 6px 18px -10px color-mix(in srgb, var(--accent), transparent 50%);
}

@media (prefers-reduced-motion: reduce) {
  .mission-card { --p: 0 !important; }
}

/* Inverted variant: starts green, expands to light (opposite of default) */
.mission-card--inverted {
  background: color-mix(in srgb, var(--accent), var(--bg-2) calc(var(--p) * 100%));
}
.mission-card--inverted .eyebrow {
  color: color-mix(in srgb, var(--on-accent), var(--muted) calc(var(--p) * 85%));
}
.mission-card--inverted h2 {
  color: color-mix(in srgb, var(--on-accent), var(--ink) calc(var(--p) * 100%));
}
.mission-card--inverted h2 em {
  color: color-mix(in srgb, var(--on-accent), var(--accent-ink) calc(var(--p) * 100%));
}
.mission-card--inverted p {
  color: color-mix(in srgb, var(--on-accent), var(--ink-2) calc(var(--p) * 90%));
}
.mission-card--inverted .mission-btn {
  background: color-mix(in srgb, var(--bg), var(--ink) calc(var(--p) * 100%));
  color: color-mix(in srgb, var(--ink), var(--bg) calc(var(--p) * 100%));
}
.mission-card--inverted .mission-btn:hover {
  background: color-mix(in srgb, var(--bg), var(--accent) calc(var(--p) * 60%));
  color: var(--ink);
}

/* ============ ADVANTAGES — 3 colonne uguali (pattern DecaRoy) ============ */
.advantages-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  position: relative;
}
.advantages-head .eyebrow {
  margin-bottom: 1.5rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.advantages-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}
.advantages-head h2 em { color: var(--accent-ink); }
.advantages-head p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.advantages-head-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(5rem, 12vw, 13rem);
  color: var(--accent-ink);
  opacity: 0.08;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 4vw, 4rem);
}
.advantage {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@media (hover: hover) {
  .advantage:hover {
    transform: translateY(-4px);
  }
}
.advantage-media {
  aspect-ratio: 4/5;
  width: 100%;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: var(--bg);
  position: relative;
  transform: translateZ(0);
}
.advantage-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 1s var(--ease-out);
}
@media (hover: hover) {
  .advantage:hover .advantage-media img { transform: scale(1.05); }
}
.advantage-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(10,10,9,0.18));
}
.advantage h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0;
}
.advantage h3 em { font-style: italic; color: var(--accent-ink); }
.advantage p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 32ch;
  margin: 0;
}

/* Floating CTA: small circle in default state, expands to rounded panel on hover.
   In expanded state: italic display label bottom-left, arrow bottom-right,
   rounded stripes top-left, all floating inside the bottom half of the image. */
.advantage-cta {
  position: absolute;
  bottom: clamp(1rem, 1.5vw, 1.4rem);
  right: clamp(1rem, 1.5vw, 1.4rem);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 17px;
  gap: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(10, 10, 9, 0.18);
  transition:
    width 0.6s var(--ease-out),
    height 0.6s var(--ease-out),
    bottom 0.6s var(--ease-out),
    right 0.6s var(--ease-out),
    border-radius 0.6s var(--ease-out),
    background 0.4s var(--ease-out),
    color 0.4s,
    box-shadow 0.4s,
    padding 0.6s var(--ease-out);
}
.advantage-cta-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: -0.015em;
  line-height: 1.08;
  /* Wrap (don't clip): the CTA text is arbitrary per language/business,
     so a nowrap label + overflow:hidden parent truncated long strings
     (e.g. "Kontaktirajte nas" lost its final "S" on desktop). Wrapping +
     opacity/transform reveal is length-agnostic and never clips. */
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0.6rem;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out);
}
.advantage-cta > svg:last-child {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out);
}
.advantage-cta-decor {
  position: absolute;
  top: clamp(1.75rem, 2.8vw, 2.8rem);
  left: clamp(1.75rem, 2.8vw, 2.8rem);
  width: clamp(52px, 6vw, 76px);
  height: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out);
  pointer-events: none;
}
.advantage-cta-decor rect {
  fill: currentColor;
  opacity: 0.45;
}
@media (hover: hover) {
  .advantage:hover .advantage-cta-decor {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }
  .advantage:hover .advantage-cta {
    width: calc(100% - 2 * clamp(1rem, 1.5vw, 1.4rem));
    height: 52%;
    bottom: clamp(1rem, 1.5vw, 1.4rem);
    right: clamp(1rem, 1.5vw, 1.4rem);
    border-radius: clamp(14px, 1.6vw, 22px);
    background: linear-gradient(to top, rgba(10, 10, 9, 0.55), rgba(10, 10, 9, 0.12) 50%, rgba(10, 10, 9, 0.04));
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    color: var(--bg);
    box-shadow: 0 10px 32px rgba(10, 10, 9, 0.22);
    padding: clamp(1.4rem, 2.4vw, 2.4rem);
  }
  .advantage:hover .advantage-cta-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
  .advantage:hover .advantage-cta > svg:last-child {
    width: 26px;
    height: 26px;
  }
}

/* Touch/scroll-triggered expansion (JS adds .is-expanded on viewport entry) */
.advantage.is-expanded {
  transform: translateY(-4px);
}
.advantage.is-expanded .advantage-media img { transform: scale(1.05); }
.advantage.is-expanded .advantage-cta-decor {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.advantage.is-expanded .advantage-cta {
  width: calc(100% - 2 * clamp(1rem, 1.5vw, 1.4rem));
  height: 52%;
  bottom: clamp(1rem, 1.5vw, 1.4rem);
  right: clamp(1rem, 1.5vw, 1.4rem);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: linear-gradient(to top, rgba(10, 10, 9, 0.55), rgba(10, 10, 9, 0.12) 50%, rgba(10, 10, 9, 0.04));
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  color: var(--bg);
  box-shadow: 0 10px 32px rgba(10, 10, 9, 0.22);
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
}
.advantage.is-expanded .advantage-cta-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.advantage.is-expanded .advantage-cta > svg:last-child {
  width: 26px;
  height: 26px;
}

@media (max-width: 900px) {
  .advantages-grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .advantage-media { aspect-ratio: 5/4; }
}

/* ============ FEATURE SECTION (editorial card overlap on image) ============ */
section.feature {
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  overflow: hidden;
}
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.feature.mirror .feature-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.feature.mirror .feature-media { order: 2; }
.feature.mirror .feature-text { order: 1; }

.feature-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--bg-2);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 1.4s var(--ease-out);
}
.feature-media:hover img { transform: scale(1.04); }
.feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 9, 0.22));
}

.feature-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  z-index: 2;
}
.feature-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--bg);
  padding: clamp(2rem, 3.5vw, 3.25rem);
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 24px 60px rgba(10, 10, 9, 0.10);
  margin-left: clamp(-12vw, -7vw, -3rem);
  z-index: 2;
  position: relative;
  max-width: none;
}
.feature.mirror .feature-text {
  margin-left: 0;
  margin-right: clamp(-12vw, -7vw, -3rem);
}

.feature-lede {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.25rem;
}
.feature-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent-ink);
  line-height: 1;
}
.feature-rule {
  width: 32px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
.feature-lede .eyebrow {
  color: var(--ink-2);
}
.feature-lede .eyebrow::before { display: none; }

.feature-text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.feature-text h2 em { color: var(--accent-ink); }
.feature-text p {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 32rem;
}
.feature-text .btn-outline,
.feature-text .btn-primary {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  section.feature { padding: clamp(3rem, 8vw, 5rem) 0; }
  .feature-grid,
  .feature.mirror .feature-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .feature-media,
  .feature.mirror .feature-media {
    aspect-ratio: 4/5;
    border-radius: clamp(18px, 4vw, 24px);
    order: 1;
    margin: 0 var(--gutter);
  }
  .feature-text,
  .feature.mirror .feature-text {
    order: 2;
    margin: clamp(-5rem, -10vw, -3rem) calc(var(--gutter) + 0.75rem) 0;
    padding: clamp(1.75rem, 5vw, 2.5rem);
    background: var(--bg);
    border-radius: clamp(18px, 4vw, 24px);
    box-shadow: 0 -10px 32px rgba(10, 10, 9, 0.10);
    max-width: none;
    width: auto;
  }
}

/* ============ ABOUT PAGE — INTRO (editorial 2-col) ============ */
.about-intro {
  max-width: 76rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  text-align: left;
  position: relative;
}
.about-intro-head {
  position: relative;
}
.about-intro-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
}
.about-intro-head h2 em { color: var(--accent-ink); }

/* Decorative chapter mark — huge italic "01" sitting behind the heading */
.about-chapter-mark {
  position: absolute;
  top: -0.3em;
  right: -0.1em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8rem, 14vw, 14rem);
  line-height: 0.85;
  color: var(--accent-ink);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  z-index: 0;
}

.about-intro-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 0.25rem;
}
.about-intro-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding: 0.1em 0 0.15em clamp(1rem, 1.8vw, 1.5rem);
  margin: 0;
}
.about-intro-body p:not(.about-intro-lead) {
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
}

.about-intro-cta {
  align-self: flex-start;
  margin-top: 0.25rem;
  margin-left: clamp(1rem, 1.8vw, 1.5rem);
}

/* Decorative divider — accent line + accent dot, between lead and body */
.about-intro-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0.25rem 0;
}
.about-intro-divider::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--line-strong);
}
.about-intro-divider::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 900px) {
  .about-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
  }
  .about-chapter-mark {
    font-size: clamp(6rem, 22vw, 9rem);
    top: -0.25em;
    right: -0.05em;
    opacity: 0.07;
  }
}

.about-showcase {
  --p: 0;
  margin: clamp(3rem, 6vw, 5rem) 0;
  width: calc(min(64rem, 86vw) + (min(96rem, 96vw) - min(64rem, 86vw)) * var(--p));
  max-width: 96vw;
  aspect-ratio: 21/9;
  border-radius: calc(20px + 12px * var(--p));
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

@media (prefers-reduced-motion: reduce) {
  .about-showcase { --p: 1 !important; }
}
.about-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 1.4s var(--ease-out);
}
.about-showcase:hover img { transform: scale(1.03); }
@media (max-width: 720px) {
  .about-showcase { aspect-ratio: 4/3; border-radius: 18px; }
}

.about-mission {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.about-mission .eyebrow { margin-bottom: 1.5rem; justify-content: center; }
.about-mission h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.about-mission h3 em { color: var(--accent-ink); }
.about-mission p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--ink-2);
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.pillar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.pillar-media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-2);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.pillar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
  transition: transform 1s var(--ease-out);
}
.pillar:hover .pillar-media img { transform: scale(1.04); }
.pillar-num {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-110%, -20%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(8rem, 16vw, 14rem);
  color: var(--accent-ink);
  opacity: 0.08;
  line-height: 0.85;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  margin: 0;
}
.pillar h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.pillar p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 22rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .about-pillars { grid-template-columns: 1fr; }
}

.about-cta {
  text-align: center;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line);
}

/* Mission CTA — fullscreen variant: snaps open when pinned, snaps closed when leaving */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.mission-section--full {
  padding: 0;
  min-height: 160vh;
  position: relative;
}
.mission-section--full > .mission-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mission-card--full {
  --p: 0;
  width: calc(min(1080px, 92vw) + (100vw - min(1080px, 92vw)) * var(--p));
  height: calc(clamp(360px, 52vh, 560px) + (100vh - clamp(360px, 52vh, 560px)) * var(--p));
  border-radius: calc(40px - 40px * var(--p));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: --p 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.mission-card--full.is-open { --p: 1; }
.mission-card--full {
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 10, 9, 0.10), 0 6px 20px rgba(10, 10, 9, 0.06);
  translate: 0 var(--scroll-offset, 0px);
}
.mission-card--full.is-open {
  will-change: translate;
}
.mission-card--full .mission-card-inner {
  flex: 0 1 auto;
  width: 100%;
  max-width: 70rem;
}
@media (prefers-reduced-motion: reduce) {
  .mission-section--full { min-height: 0; }
  .mission-section--full > .mission-sticky { position: static; height: auto; }
  .mission-card--full { transition: none; }
}
.about-cta h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.about-cta h3 em { color: var(--accent-ink); }
.about-cta p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36rem;
  margin: 0 auto 2rem;
}

/* ============ HERO FEATURE — immersive tile w/ glass card overlay ============ */
section.hero-feature {
  padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 2.5vw, 2.5rem) clamp(3rem, 5vw, 5rem);
}
.hero-feature-tile {
  position: relative;
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  min-height: clamp(540px, 78vh, 780px);
  background: var(--bg-2);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.hero-feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.95) contrast(1.05);
}
.hero-feature-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(10, 10, 9, 0.45) 0%, rgba(10, 10, 9, 0.15) 45%, transparent 75%),
    linear-gradient(0deg, rgba(10, 10, 9, 0.25), transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.hero-feature-card {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  width: clamp(340px, 44%, 600px);
  z-index: 2;
  padding: clamp(2rem, 3.2vw, 3rem);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid color-mix(in srgb, white 20%, transparent);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  box-shadow: 0 30px 60px -30px rgba(10, 10, 9, 0.25);
}
/* Eyebrow lede with accent dot */
.hero-feature-lede {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  align-self: flex-start;
}
.hero-feature-lede .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

/* Two-line title with dramatic scale contrast */
.hero-feature-title {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.6rem, 2.7vw, 2.45rem);
  text-wrap: balance;
}
.hero-feature-title .line { display: block; }
.hero-feature-title .line-1 {
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  font-style: normal;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin-bottom: 0.1em;
  font-weight: 400;
}
.hero-feature-title .line-2 {
  font-size: clamp(2.5rem, 4.2vw, 3.6rem);
  font-style: italic;
  color: var(--accent-ink);
  line-height: 0.92;
}

/* Body with highlighted phrase */
.hero-feature-body {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.hero-feature-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.005em;
}

/* Integrated CTA — editorial footer bar with circular accent ripple on hover */
.hero-feature-cta {
  margin: auto calc(-1 * clamp(2rem, 3.2vw, 3rem)) calc(-1 * clamp(2rem, 3.2vw, 3rem));
  padding: clamp(1.2rem, 1.8vw, 1.7rem) clamp(2rem, 3.2vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  background: transparent;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: color 0.55s var(--ease-out);
}
.hero-feature-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: circle(0% at calc(100% - 2.5rem) 50%);
  transition: clip-path 0.7s var(--ease-out);
  z-index: -1;
}
.hero-feature-cta:hover { color: var(--on-accent); }
.hero-feature-cta:hover::before {
  clip-path: circle(150% at calc(100% - 2.5rem) 50%);
}

.hero-feature-cta-label,
.hero-feature-cta-arrow {
  position: relative;
  z-index: 1;
}

.hero-feature-cta-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.55vw, 1.45rem);
  letter-spacing: -0.005em;
  line-height: 1;
}

.hero-feature-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.hero-feature-cta-arrow svg {
  width: 26px;
  height: 26px;
}

/* Stagger entry animation tied to the section's .reveal.in state */
.hero-feature .hero-feature-card > *:not(.hero-feature-title),
.hero-feature .hero-feature-title .line {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero-feature.reveal.in .hero-feature-card > *:not(.hero-feature-title),
.hero-feature.reveal.in .hero-feature-title .line {
  opacity: 1;
  transform: translateY(0);
}
.hero-feature.reveal.in .hero-feature-lede           { transition-delay: 0.15s; }
.hero-feature.reveal.in .hero-feature-title .line-1  { transition-delay: 0.30s; }
.hero-feature.reveal.in .hero-feature-title .line-2  { transition-delay: 0.45s; }
.hero-feature.reveal.in .hero-feature-body           { transition-delay: 0.65s; }
.hero-feature.reveal.in .hero-feature-cta            { transition-delay: 0.80s; }

@media (prefers-reduced-motion: reduce) {
  .hero-feature .hero-feature-card > *:not(.hero-feature-title),
  .hero-feature .hero-feature-title .line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .hero-feature-tile {
    min-height: 0;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: transparent;
  }
  .hero-feature-img {
    position: relative;
    height: clamp(280px, 50vh, 480px);
  }
  .hero-feature-overlay { display: none; }
  .hero-feature-card {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: -3rem 1rem 0;
    max-width: none;
    background: var(--bg);
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============ SERVICES INTRO — section opener above the services list ============ */
section.services-intro-section {
  padding: clamp(4rem, 7vw, 7rem) var(--gutter) clamp(2rem, 4vw, 4rem);
  overflow: hidden;
}
.services-intro {
  max-width: var(--container);
  margin: 0 auto;
}
.services-intro-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.services-intro-card > *:not(.services-intro-mark) {
  position: relative;
  z-index: 1;
}

/* Big italic watermark behind text — slow horizontal drift */
.services-intro-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 16vw, 16rem);
  color: var(--accent-ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  line-height: 1;
  z-index: 0;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  animation: markDrift 18s ease-in-out infinite alternate;
}
@keyframes markDrift {
  from { transform: translate(-53%, -50%); }
  to   { transform: translate(-47%, -50%); }
}

/* Live pulse indicator above the eyebrow */
.services-intro-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex: 0 0 auto;
}
.services-intro-pulse::before,
.services-intro-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: pulseRing 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.services-intro-pulse::after { animation-delay: 1.3s; }
@keyframes pulseRing {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(3.4); }
}

.services-intro-card .eyebrow {
  margin-bottom: 0.75rem;
  justify-content: center;
}
.services-intro-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
}
.services-intro-card h2 em { color: var(--accent-ink); font-style: italic; }
.services-intro-card p {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 38rem;
}

/* Heading word-by-word stagger reveal */
.services-intro-card h2 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.services-intro.reveal.in .services-intro-card h2 .word { opacity: 1; transform: translateY(0); }
.services-intro.reveal.in .services-intro-card h2 .word:nth-child(1) { transition-delay: 0.10s; }
.services-intro.reveal.in .services-intro-card h2 .word:nth-child(2) { transition-delay: 0.18s; }
.services-intro.reveal.in .services-intro-card h2 .word:nth-child(3) { transition-delay: 0.26s; }
.services-intro.reveal.in .services-intro-card h2 .word:nth-child(4) { transition-delay: 0.34s; }
.services-intro.reveal.in .services-intro-card h2 .word:nth-child(5) { transition-delay: 0.42s; }

/* Continuous accent shimmer on the italic word */
.services-intro.reveal.in .services-intro-card h2 em {
  display: inline-block;
  animation: emShimmer 4.5s ease-in-out infinite;
}
@keyframes emShimmer {
  0%, 100% { color: var(--accent-ink); }
  50%      { color: var(--accent-2); }
}

@media (prefers-reduced-motion: reduce) {
  .services-intro-card h2 .word { opacity: 1; transform: none; transition: none; }
  .services-intro-mark,
  .services-intro-pulse::before,
  .services-intro-pulse::after,
  .services-intro.reveal.in .services-intro-card h2 em { animation: none; }
}

/* ============ SERVICES PAGE ============ */
.services-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4rem);
  max-width: var(--container);
  margin: 0 auto;
}
.service-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-bottom: clamp(3rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.service-item:last-child { border-bottom: none; }
.service-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--accent-ink);
  line-height: 1;
  align-self: start;
  padding-top: 0.5rem;
}
.service-content { display: flex; flex-direction: column; gap: 1rem; }
.service-content .eyebrow { margin-bottom: 0.25rem; }
.service-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.service-content h3 em { color: var(--accent-ink); }
.service-content p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 50rem;
}

/* Service CTA — editorial pill-link with accent arrow circle, row-hover responsive */
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 0.5rem;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  transition: color 0.4s var(--ease-out);
}
.service-cta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 52px; /* don't underline the arrow circle */
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.service-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 52px;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.55s var(--ease-out);
}
.service-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.45s var(--ease-out);
  flex: 0 0 auto;
}
.service-cta-arrow svg {
  width: 13px;
  height: 13px;
  transition: transform 0.45s var(--ease-out);
}

/* Hover — triggered on CTA itself OR anywhere on the service item */
.service-cta:hover,
.service-item:hover .service-cta { color: var(--accent-ink); }
.service-cta:hover::after,
.service-item:hover .service-cta::after { transform: scaleX(1); }
.service-cta:hover .service-cta-arrow,
.service-item:hover .service-cta-arrow {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.service-cta:hover .service-cta-arrow svg,
.service-item:hover .service-cta-arrow svg { transform: translate(2px, -2px); }
.service-item:hover .service-media img { transform: scale(1.04); }
.service-item:hover .service-num { color: var(--accent-2); }
.service-num { transition: color 0.4s var(--ease-out); }
.service-media {
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 1s var(--ease-out);
}
.service-media:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .service-item {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "num content"
      "media media";
    row-gap: 2rem;
  }
  .service-num { grid-area: num; }
  .service-content { grid-area: content; }
  .service-media { grid-area: media; aspect-ratio: 16/10; }
}

/* ============ CONTACT PAGE ============ */
.contact-page {
  padding-top: 9rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}
.contact-text .eyebrow { margin-bottom: 1.5rem; }
.contact-text h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.contact-text h1 em { color: var(--accent-ink); }
.contact-text p {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 32rem;
  margin-bottom: 2.5rem;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  list-style: none;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.contact-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  transition: color 0.3s;
}
a.contact-value:hover { color: var(--accent-ink); }
.contact-value em { font-style: italic; }
.contact-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 1.5rem;
  margin-top: 4px;
}
.contact-hours span {
  font-size: 14px;
  color: var(--ink-2);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============ CONTACT FORM ============ */
.contact-form-section {
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
  margin-top: clamp(5rem, 9vw, 8rem);
}
.contact-form-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.contact-form-head .eyebrow { margin-bottom: 1.5rem; }
.contact-form-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.contact-form-head h2 em { color: var(--accent-ink); }
.contact-form-head p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 28rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-field input,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
}
.form-field textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.55;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.form-field input:hover,
.form-field textarea:hover {
  border-color: var(--line-strong);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 85%);
}
.form-submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .contact-form-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============ CONTACT MAP ============ */
.contact-map-section {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.contact-map-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.contact-map-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 36rem;
}
.contact-map-head .eyebrow { margin-bottom: 1.25rem; }
.contact-map-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.contact-map-head h2 em { color: var(--accent-ink); }
.contact-map {
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(360px, 55vh, 560px);
  filter: grayscale(0.2) contrast(0.95);
}
.contact-map-btn { margin-top: clamp(1.25rem, 2vw, 1.75rem); }

/* ============ GALLERY HERO ============ */
.gallery-hero {
  min-height: 100vh;
  padding: clamp(8rem, 14vw, 12rem) var(--gutter) clamp(3rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gallery-hero .eyebrow {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.gallery-hero-title {
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.gallery-hero-title em {
  font-style: italic;
  color: var(--accent-ink);
}
.gallery-hero-sub {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36rem;
}
.gallery-hero-scroll {
  position: absolute;
  bottom: clamp(2rem, 4vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  animation: gallery-scroll-bob 2.5s var(--ease) infinite;
}
.gallery-hero-scroll svg {
  width: 18px;
  height: 18px;
}
@keyframes gallery-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ============ GALLERY SECTIONS ============ */
.gallery-sections {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 4rem);
}

.gallery-layout {
  width: 100%;
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: var(--bg-2);
  margin: 0;
}
.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.gallery-tile:hover img { transform: scale(1.04); }

.gallery-tile figcaption {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--bg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.gallery-tile:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 50%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.gallery-tile:hover::after { opacity: 1; }

.gallery-tile .cap-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.gallery-tile .cap-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Layout: featured asymmetric */
.layout-feature {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.layout-feature .gallery-tile.main { aspect-ratio: 4/5; }
.layout-feature .gallery-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.layout-feature .gallery-stack .gallery-tile { aspect-ratio: 4/3; }

/* Layout: full bleed */
.layout-full .gallery-tile { aspect-ratio: 21/9; }

/* Layout: diptych offset */
.layout-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.layout-diptych .gallery-tile { aspect-ratio: 4/5; }
.layout-diptych .gallery-tile.offset {
  margin-top: clamp(3rem, 8vw, 6rem);
}

/* Layout: triple grid */
.layout-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.layout-triple .gallery-tile { aspect-ratio: 3/4; }

/* Layout: portrait + landscape pair */
.layout-pair {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
.layout-pair .gallery-tile.tall { aspect-ratio: 3/4; }
.layout-pair .gallery-tile.wide { aspect-ratio: 4/3; }

@media (max-width: 900px) {
  .layout-feature,
  .layout-diptych,
  .layout-pair {
    grid-template-columns: 1fr;
  }
  .layout-triple { grid-template-columns: 1fr 1fr; }
  .layout-diptych .gallery-tile.offset { margin-top: 0; }
  .gallery-hero-title { font-size: clamp(3rem, 18vw, 8rem); }
}

@media (max-width: 560px) {
  .layout-triple { grid-template-columns: 1fr; }
}

/* ============ LIGHTBOX ============ */
.gallery-tile { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 9, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  padding: clamp(2rem, 5vw, 4rem);
  backdrop-filter: blur(10px);
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-figure {
  margin: 0;
  max-width: min(1400px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  transform: scale(0.96);
  transition: transform 0.45s var(--ease-out);
}
.lightbox.is-open .lightbox-figure { transform: scale(1); }
.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: clamp(8px, 1.2vw, 16px);
  display: block;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  color: var(--bg);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 14px;
  text-align: center;
  max-width: 600px;
}
.lightbox-caption:empty { display: none; }
.lightbox-caption .cap-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent-glow);
}
.lightbox-caption .cap-title {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--bg), transparent 15%);
}

.lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--bg);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
  backdrop-filter: blur(8px);
}
.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
.lightbox-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.lightbox-close {
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.5rem);
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev { left: clamp(1rem, 3vw, 2.5rem); }
.lightbox-next { right: clamp(1rem, 3vw, 2.5rem); }

.lightbox-counter {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  color: color-mix(in srgb, var(--bg), transparent 30%);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .lightbox-btn { width: 42px; height: 42px; }
  .lightbox-img { max-height: 68vh; }
  .lightbox-prev { left: 0.75rem; }
  .lightbox-next { right: 0.75rem; }
}

/* ============ FOOTER ============ */
footer {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem;
  background: var(--bg-dark);
  color: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-inner { max-width: var(--container); margin: 0 auto; }
.footer-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.footer-logo {
  height: clamp(72px, 10vw, 128px);
  width: auto;
  max-width: 340px;
  object-fit: contain;
  display: block;
}
/* Logo SCURO su footer scuro → placca chiara di contrasto (solo quando serve). */
.footer-logo--plate {
  background: rgba(255, 255, 255, 0.94);
  padding: 8px 13px;
  border-radius: 12px;
  box-sizing: content-box;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
.footer-brand em { color: var(--accent-glow); }
.footer-tag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.6;
  max-width: 22rem;
  line-height: 1.55;
  text-align: right;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-social { margin: 0; padding: 0; }
.footer-col-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1rem;
}
.footer-col p, .footer-col a, .footer-col li {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.7;
  list-style: none;
}
.footer-col a:hover { color: var(--accent-glow); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 12px;
  opacity: 0.6;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom a:hover { color: var(--accent-glow); }
@media (max-width: 768px) {
  .footer-tag { text-align: left; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ PRIVACY PAGE ============ */
.privacy-content {
  max-width: 760px;
  margin: 0 auto;
}
.privacy-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 400;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
  color: var(--accent-ink);
}
.privacy-content p, .privacy-content li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.privacy-content ul { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.privacy-content a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.privacy-content strong { color: var(--ink); font-weight: 500; }

/* ============ MOTION RESPECT ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Gallery — uniform responsive grid
   ============================================================ */
.gallery-sections {
  padding: var(--pad-section) clamp(1.25rem, 5vw, 4rem);
  max-width: var(--container);
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .gallery-grid { grid-template-columns: 1fr; }
}
.gallery-grid .gallery-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-2);
  cursor: pointer;
}
.gallery-grid .gallery-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-grid .gallery-tile:hover img { transform: scale(1.05); }
.gallery-grid .gallery-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.1rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(10,10,9,0.62) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery-grid .gallery-tile:hover figcaption { opacity: 1; }
.gallery-grid .gallery-tile .cap-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  opacity: 0.7;
}
.gallery-grid .gallery-tile .cap-title {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* Neutral fallback when an image slot has no generated image yet.
   Coherent with the cream palette — never a broken box / alt text. */
.media-missing {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%);
  position: relative;
}
.media-missing::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(10,10,9,0.04) 0%, transparent 60%);
}

/* ============ AURORA BACKGROUND ============
   Drifting, blurred brand-colour blobs behind the whole page. Tied to the
   site primary (--accent) and its light tone (--accent-glow), so the
   background always matches the brand. body is transparent; html paints
   the base paper (--bg) and the aurora multiplies over it. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: multiply;
  opacity: 0.4;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 62vw; height: 62vw; left: -16vw; top: -22vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent), transparent 40%), transparent 66%);
  animation: aurora-drift 26s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 56vw; height: 56vw; right: -16vw; top: 24%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-glow), transparent 38%), transparent 66%);
  animation: aurora-drift 33s ease-in-out infinite reverse;
}
.aurora span:nth-child(3) {
  width: 52vw; height: 52vw; left: 24%; bottom: -22vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent), transparent 50%), transparent 66%);
  animation: aurora-drift 40s ease-in-out infinite;
}
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: multiply;
}
@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5vw, -4vw) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none; }
}

/* ============================================================
   BLOG — indice articoli + pagina articolo long-form.
   Costruito sui token del sito (--accent, --bg-2, --font-*),
   così eredita palette, font e sfondo di ogni cliente.
   ============================================================ */

/* Offset per la nav fissa (come le altre pagine interne). */
.blog-page,
.article-page { padding-top: clamp(7rem, 12vw, 10.5rem); }

/* ---- Indice ---- */
.blog-index { padding-bottom: var(--pad-section); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg), #fff 55%);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 90%);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s;
  box-shadow: 0 10px 30px -22px rgba(10, 10, 9, 0.35);
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -28px rgba(10, 10, 9, 0.45);
  border-color: color-mix(in srgb, var(--accent), transparent 55%);
}
.blog-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent), var(--bg-2) 78%);
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  flex: 1;
}
.blog-card-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.blog-card-excerpt {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.blog-card-more {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.blog-card-more svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease-out); }
.blog-card:hover .blog-card-more svg { transform: translate(3px, -3px); }

/* ---- Articolo ---- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: var(--pad-section);
}
.article-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 1.6rem;
  transition: color 0.3s, gap 0.3s;
}
.article-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.article-back:hover { color: var(--accent-ink); gap: 0.6rem; }

/* Navigazione tra articoli (precedente / successivo) */
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 88%);
  padding-top: 1.6rem;
}
.article-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 48%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  transition: gap 0.3s;
}
.article-nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
.article-nav .nav-next { margin-left: auto; text-align: right; }
.article-nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-nav a:hover { gap: 0.75rem; }
.article-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.article-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.8rem 0 1rem;
  text-wrap: balance;
}
.article-meta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  align-items: center;
}
.article-meta .sep { opacity: 0.4; }
.article-hero {
  margin: clamp(1.8rem, 4vw, 2.8rem) 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--accent), var(--bg-2) 78%);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Corpo long-form: misura confortevole, tipografia curata. */
.article-body {
  font-family: var(--font-sans);
  font-size: 1.075rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.article-body > * + * { margin-top: 1.35rem; }
.article-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 2.8rem;
  margin-bottom: 0.2rem;
}
.article-body h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  margin-top: 1.8rem;
}
.article-body p { margin: 0; }
.article-body ul,
.article-body ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; }
.article-body li { line-height: 1.7; }
.article-body li::marker { color: var(--accent); }
.article-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong { color: var(--ink); font-weight: 700; }

/* FAQ */
.article-faq {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 88%);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
}
.article-faq h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.article-faq-item { padding: 1.1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink), transparent 92%); }
.article-faq-q {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.article-faq-a {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* CTA di chiusura articolo (riusa il linguaggio della mission-card). */
.article-cta {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 22px;
  background: color-mix(in srgb, var(--accent), var(--bg-2) 12%);
  color: var(--on-accent);
  text-align: center;
}
.article-cta p {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 auto 1.4rem;
  max-width: 44ch;
  color: color-mix(in srgb, var(--on-accent), transparent 8%);
}
.article-cta .btn-primary {
  background: var(--on-accent);
  color: var(--accent);
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-body { font-size: 1.02rem; }
}

/* --- CTA di prenotazione (solo per i clienti con Booking/Airbnb/…) --------
   Affianca il pulsante contatti nella mission-section. La sezione ha sfondo
   scuro, quindi il bordo/testo di .btn-outline (tarati su fondo chiaro) qui
   sparirebbero: li riportiamo sui token invertiti come fa .mission-btn. */
.mission-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* La mission-card e' text-align:center e titolo/testo si centrano con
     margin:auto; questo wrapper pero' e' un flex a tutta larghezza, quindi
     senza justify-content il pulsante restava incollato a sinistra mentre
     tutto il resto era centrato (isatti.net, 2026-08-17). Su mobile il
     difetto non si vedeva: la media query lo rende a tutta larghezza. */
  justify-content: center;
  gap: 12px;
}
.mission-btn-book {
  border-color: color-mix(in srgb, var(--bg), transparent 65%);
  background: transparent;
  color: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mission-btn-book:hover {
  background: color-mix(in srgb, var(--bg), transparent 88%);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg), transparent 40%);
}
/* Nome del portale: piccolo e discreto, l'azione resta il testo principale. */
.mission-btn-book-src {
  opacity: 0.62;
  font-size: 0.85em;
}
@media (max-width: 560px) {
  .mission-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mission-actions > a {
    justify-content: center;
  }
}


/* ============ CONTACT PHOTO (portrait next to the contact list) ============ */
.contact-photo-wrap {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: flex-start;
}
.contact-photo {
  width: clamp(140px, 18vw, 220px);
  aspect-ratio: 3/4;
  border-radius: clamp(14px, 2vw, 22px);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-2);
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-photo-wrap .contact-list { flex: 1; }
@media (max-width: 560px) {
  .contact-photo-wrap { flex-direction: column; }
  .contact-photo { width: 160px; }
}

/* ============ SERVICE ITEM EXTRA (side-by-side kitchen renders) ============ */
.service-item-extra { grid-column: 1 / -1; }
.service-item-extra-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.service-item-extra-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: clamp(14px, 2vw, 22px);
}
.service-item-extra-caption {
  margin-top: 1rem;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 720px) {
  .service-item-extra-gallery { grid-template-columns: 1fr; }
}

/* Logo 3x larger (header and footer). The header grows at the top of the page and
   returns to the previous size once the page scrolls, so it does not cover the content.
   The pages load this sheet as styles.css?v=20260929 so browsers do not keep an older cached copy. */
:root { --logo-extra: clamp(120px, 14.8vw, 184px); }
.nav-logo {
  height: clamp(180px, 22.2vw, 276px);
  max-width: 960px;
  transition: height 0.3s var(--ease-out);
}
.nav.scrolled .nav-logo { height: clamp(60px, 7.4vw, 92px); }
.footer-logo {
  height: clamp(216px, 30vw, 384px);
  max-width: 1020px;
}
.hero { padding-top: calc(10rem + var(--logo-extra)); }
.page-header { padding-top: calc(11rem + var(--logo-extra)); }
.contact-page { padding-top: calc(9rem + var(--logo-extra)); }
.gallery-hero { padding-top: calc(clamp(8rem, 14vw, 12rem) + var(--logo-extra)); }

/* Services: section without its own side photo (the kitchen designs below are the main images) */
.service-item--no-media { grid-template-columns: 56px minmax(0, 1fr); }
@media (max-width: 900px) {
  .service-item--no-media { grid-template-areas: "num content"; }
}