/* =============================================================
   SKI LIFE COACH — styles.css
   Cascade: @layer · Nesting · Scroll-driven animations
   Diagonals: skewY pseudo · Grain: SVG data-URI
   Typography: text-wrap balance · tabular-nums · @counter-style
   Modern: :has() · container queries · grid-template-rows FAQ
   Colors live in theme.css — do not define them here.
   ============================================================= */

@import url('./theme.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Cascade layers ─────────────────────────────────────────── */
@layer reset, base, layout, components, utilities;

/*
 * @property --sky-hue
 * Typed as <number> so CSS can interpolate it across keyframes.
 * The hero background gradient references it to create a slow
 * breathing sky that shifts between dawn-blue and midday-sky hues.
 */
@property --sky-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 238;
}

@keyframes alpine-sky {
  0%   { --sky-hue: 234; }
  40%  { --sky-hue: 248; }
  70%  { --sky-hue: 242; }
  100% { --sky-hue: 234; }
}

@keyframes alpine-sky-dark {
  0%   { --sky-hue: 252; }
  40%  { --sky-hue: 262; }
  70%  { --sky-hue: 256; }
  100% { --sky-hue: 252; }
}

/* Seamless CSS snow: two pseudo-elements offset by half the duration */
@keyframes slc-snowfall {
  to { transform: translateY(100vh); }
}

/* ── Custom counter styles ──────────────────────────────────── */
@counter-style alpine-step {
  system: numeric;
  symbols: '00' '01' '02' '03' '04' '05' '06' '07' '08' '09';
  suffix: '';
  pad: 2 '0';
}

@counter-style em-dash {
  system: cyclic;
  symbols: '—';
  suffix: '  ';
}

/* ════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    font-size: 16px;
    /* CSS scroll-snap: enabled where needed, not globally */
    scroll-behavior: smooth;
    /* hide scrollbar chrome while preserving scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar { display: none; }
  }

  img  { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; }
  a    { color: inherit; text-decoration: none; -webkit-user-drag: none; }
  ul, ol { list-style: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-user-drag: none; }
  * { -webkit-user-drag: none; }
}

/* ════════════════════════════════════════════════════════════ */
@layer base {
  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Softer text rendering on variable-weight fonts */
    text-rendering: optimizeLegibility;
  }

  /* headings */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.12;
    letter-spacing: -.025em;
    /* prevent orphaned single words in headings */
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 900; }
  h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 700; }
  h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; }
  h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); }

  p {
    max-width: 68ch;
    /* fewer widows in body paragraphs */
    text-wrap: pretty;
  }

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

/* ════════════════════════════════════════════════════════════ */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  /* ── Sections ── */
  .section {
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }

  /*
   * Diagonal sections: a skewed ::before pseudo provides the background
   * while content remains un-skewed. The section itself is transparent.
   * --slope controls how steep the diagonal is.
   */
  .section--alt {
    --slope: -1.6deg;
    position: relative;
    isolation: isolate;
    background: transparent;
    padding-block: calc(clamp(3.5rem, 8vw, 6rem) + 2.5vw);

    &::before {
      content: '';
      position: absolute;
      inset: 0 -6%;
      background: var(--bg-alt);
      transform: skewY(var(--slope));
      z-index: -1;
    }

    & > .container { position: relative; z-index: 1; }
  }

  .section--light {
    --slope: 1.4deg;
    position: relative;
    isolation: isolate;
    background: transparent;
    padding-block: calc(clamp(3.5rem, 8vw, 6rem) + 2.5vw);
    color: var(--text-dark);

    &::before {
      content: '';
      position: absolute;
      inset: 0 -6%;
      background: var(--bg-light);
      transform: skewY(var(--slope));
      z-index: -1;
    }

    & > .container { position: relative; z-index: 1; }

    & .text-muted { color: var(--section-light-muted); }
    & p { color: var(--text-dark); }
  }

  /* ── Section typography helpers ── */
  .section-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .9rem;

    /* subtle left tick */
    &::before {
      content: '';
      display: block;
      width: 18px;
      height: 2px;
      background: var(--accent);
      flex-shrink: 0;
    }
  }

  .section-title { margin-bottom: 1rem; }

  .section-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 56ch;
  }

  /* ── Generic grid helpers ── */
  .text-center  { text-align: center; }
  .text-center p { margin-inline: auto; }
}

/* ════════════════════════════════════════════════════════════ */
@layer components {

  /* ── BUTTONS ───────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.75rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      box-shadow var(--transition),
      outline-color var(--transition);
    white-space: nowrap;
    /* accessible focus ring */
    outline: 2px solid transparent;
    outline-offset: 3px;

    &:focus-visible { outline-color: var(--accent); }
  }

  .btn-primary {
    background: var(--accent);
    color: var(--btn-text);
    box-shadow: var(--btn-shadow);

    &:hover {
      background: var(--accent-lt);
      box-shadow: var(--btn-shadow-hover);
    }
  }

  .btn-outline {
    border: 1.5px solid var(--border-lt);
    color: var(--text);

    &:hover { border-color: var(--accent); color: var(--accent); }
  }

  .btn-outline-dark {
    border: 1.5px solid var(--border-dark);
    color: var(--text-dark);

    &:hover { border-color: var(--accent); color: var(--accent); }
  }

  .btn-ghost { color: var(--text-muted); font-size: .9rem; &:hover { color: var(--accent); } }
  .btn-lg    { padding: 1rem 2.25rem; font-size: 1.05rem; }
  .btn-sm    { padding: .55rem 1.25rem; font-size: .85rem; }

  /* ── BOOKING OPTIONS ──────────────────────────────────── */
  .booking-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
  }

  .btn-snowit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .9rem;
    border-radius: var(--radius);
    border: 2px solid #00aaff;
    background: #fff;
    transition: box-shadow var(--transition);
    text-decoration: none;
    flex-shrink: 0;

    &:hover { box-shadow: 0 4px 20px oklch(65% 0.18 220 / .28); }
  }

  .snowit-btn-logo { height: 28px; width: auto; display: block; }

  /* ── SNOWIT BADGE ─────────────────────────────────────── */
  .snowit-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.1rem;
    background: var(--snowit-badge-bg);
    border: 1px solid var(--snowit-badge-border);
    border-radius: var(--radius);
    font-size: .82rem;
    color: var(--text-muted);
    transition: border-color var(--transition), background var(--transition), color var(--transition);

    &:hover {
      border-color: var(--accent);
      background: var(--accent-dim);
      color: var(--text);
    }

    & .snowit-badge__logo { display: flex; align-items: center; }
    & .snowit-badge__text span { color: var(--text); font-weight: 500; }
    & .snowit-badge__note {
      display: block;
      font-size: .72rem;
      color: var(--text-muted);
      margin-top: .25rem;
    }
  }

  /* ── HEADER ────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--header-border);
    transition: background var(--transition), box-shadow var(--transition);

    &.scrolled {
      background: var(--header-scrolled-bg);
      box-shadow: var(--header-shadow);
    }
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--header-text);
    flex-shrink: 0;
  }

  .logo-icon {
    width: 36px; height: 36px;
    background: var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }

  .logo-img { height: 40px; width: auto; display: block; object-fit: contain; }
  .logo-text-wrap { display: flex; flex-direction: column; line-height: 1.2; }
  .logo-sub {
    font-family: var(--font-body);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ── NAV ──────────────────────────────────────────────── */
  .site-nav { display: none; }

  @media (min-width: 900px) {
    .site-nav { display: flex; align-items: center; gap: .25rem; }
  }

  .nav-link {
    font-size: .88rem;
    font-weight: 500;
    color: var(--nav-link-color);
    padding: .4rem .75rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);

    &:hover,
    &[aria-current="page"] {
      color: var(--nav-link-hover-text);
      background: var(--nav-link-hover-bg);
    }
  }

  .header-cta { display: none; }

  @media (min-width: 900px) { .header-cta { display: inline-flex; } }

  /* ── HAMBURGER ────────────────────────────────────────── */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: .5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition);

    &:hover { background: var(--nav-link-hover-bg); }

    & span {
      display: block;
      width: 22px; height: 2px;
      background: var(--text);
      transform-origin: center;
      transition: transform .28s ease, opacity .28s ease;
    }

    &[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    &[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    &[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }

  @media (min-width: 900px) { .hamburger { display: none; } }

  .mobile-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--mobile-menu-bg);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 1.25rem 1.75rem;
    gap: .25rem;
    z-index: 99;
    backdrop-filter: blur(20px);
    animation: slideDown .22s ease;

    &.open { display: flex; }

    & .nav-link {
      font-size: 1rem;
      padding: .75rem 1rem;
      color: var(--text);
      border-radius: var(--radius-sm);

      &:hover { background: var(--nav-link-hover-bg); }
    }

    & .btn { margin-top: .75rem; width: 100%; justify-content: center; }
  }

  @keyframes slideDown {
    from { opacity: 0; translate: 0 -8px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* ── HERO ─────────────────────────────────────────────── */

  /*
   * Animated sky: @property --sky-hue is a typed <number> that
   * CSS can interpolate across keyframes. The gradient reads it
   * so the entire sky breathes slowly between dawn-blue and midday.
   */
  .hero {
    position: relative;
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url('../assets/img/CatinaccioBanner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: oklch(89% 0.024 246); /* fallback sky tone while image loads */
  }

  [data-theme="dark"] .hero {
    background-image:
      linear-gradient(180deg, oklch(10% 0.032 246 / 0.45), oklch(10% 0.032 246 / 0.25)),
      url('../assets/img/CatinaccioBanner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: oklch(10% 0.032 246);
  }

  /*
   * Topographic contour lines — alpine map texture.
   * color-mix() keeps them theme-aware automatically.
   */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 48px,
        color-mix(in oklch, var(--accent) 7%, transparent) 48px,
        color-mix(in oklch, var(--accent) 7%, transparent) 49px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 96px,
        color-mix(in oklch, var(--accent) 3%, transparent) 96px,
        color-mix(in oklch, var(--accent) 3%, transparent) 97px
      );
  }

  /*
   * Film-grain via SVG feTurbulence data-URI.
   * Gives the hero tactile depth — no AI gradients look this gritty.
   */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
  }

  /*
   * CSS snow — two pseudo-elements on .hero__snow, both with
   * identical box-shadow "flake" maps, offset by -13s (half of 26s).
   * One is always entering from above while the other exits below.
   * Zero JS, seamless infinite loop.
   */
  .hero__snow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    opacity: .30;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: white;
      /* 42 snow flakes: offset-x offset-y blur color */
      box-shadow:
         42px  45px 0px rgba(255,255,255,.85),
        135px 128px 1px rgba(255,255,255,.60),
        228px  58px 0px rgba(255,255,255,.75),
        310px 195px 1px rgba(255,255,255,.50),
        415px  82px 0px rgba(255,255,255,.90),
        508px 168px 2px rgba(255,255,255,.45),
        612px  38px 0px rgba(255,255,255,.80),
        718px 215px 1px rgba(255,255,255,.65),
        825px  95px 0px rgba(255,255,255,.70),
        935px 268px 1px rgba(255,255,255,.55),
       1042px 135px 2px rgba(255,255,255,.60),
       1148px  52px 0px rgba(255,255,255,.85),
       1255px 198px 1px rgba(255,255,255,.70),
       1362px  78px 0px rgba(255,255,255,.50),
         88px 312px 0px rgba(255,255,255,.65),
        195px 388px 1px rgba(255,255,255,.80),
        302px 455px 0px rgba(255,255,255,.55),
        408px 335px 2px rgba(255,255,255,.70),
        518px 502px 0px rgba(255,255,255,.60),
        625px 408px 1px rgba(255,255,255,.85),
        732px 352px 0px rgba(255,255,255,.50),
        842px 528px 1px rgba(255,255,255,.75),
        948px 428px 0px rgba(255,255,255,.65),
       1058px 305px 2px rgba(255,255,255,.60),
       1165px 478px 0px rgba(255,255,255,.80),
       1272px 382px 1px rgba(255,255,255,.55),
       1378px 548px 0px rgba(255,255,255,.70),
         68px 608px 0px rgba(255,255,255,.75),
        178px 682px 1px rgba(255,255,255,.60),
        285px 732px 0px rgba(255,255,255,.85),
        392px 658px 2px rgba(255,255,255,.50),
        498px 792px 0px rgba(255,255,255,.70),
        605px 718px 1px rgba(255,255,255,.65),
        715px 648px 0px rgba(255,255,255,.80),
        822px 758px 1px rgba(255,255,255,.55),
        928px 688px 0px rgba(255,255,255,.75),
       1035px 762px 2px rgba(255,255,255,.60),
       1142px 632px 0px rgba(255,255,255,.85),
       1248px 712px 1px rgba(255,255,255,.70),
       1355px 678px 0px rgba(255,255,255,.50),
         18px 158px 1px rgba(255,255,255,.70),
        488px  58px 0px rgba(255,255,255,.75);
      animation: slc-snowfall 26s linear infinite;
    }

    /* offset ::after by half the duration → seamless handoff */
    &::after { animation-delay: -13s; }
  }

  /* Reduce snow opacity in dark mode — white on dark is more prominent */
  [data-theme="dark"] .hero__snow { opacity: .18; }

  /*
   * Five-layer Dolomiti mountain SVG.
   * Each .hero__peak uses a different fill opacity to create
   * atmospheric perspective (far = faint, near = solid).
   * CSS fill + mask-image keep both layers theme-aware.
   */
  .hero__peaks {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%; height: 62%;
    pointer-events: none;
    z-index: 3;
    /* Fade peaks to transparent toward top — blends into sky */
    mask-image: linear-gradient(to top, black 20%, transparent 95%);
    -webkit-mask-image: linear-gradient(to top, black 20%, transparent 95%);
    overflow: visible;
  }

  /* Light mode: snow-white peaks · Dark mode: dark slate silhouettes */
  :root { --peak-fill: oklch(100% 0 0); }
  [data-theme="dark"] { --peak-fill: oklch(40% 0.055 252); }

  .hero__peak {
    fill: var(--peak-fill);
    transition: fill .45s ease;  /* smooth on theme toggle */
  }

  /* Atmospheric perspective — layer 5 = distant (10%), layer 1 = near (78%) */
  .hero__peak--5 { opacity: .10; }
  .hero__peak--4 { opacity: .22; }
  .hero__peak--3 { opacity: .40; }
  .hero__peak--2 { opacity: .58; }
  .hero__peak--1 { opacity: .78; }

  .hero__content {
    position: relative;
    z-index: 4; /* must be > .hero__peaks z-index:3 */
    padding-block: clamp(3rem, 8vh, 5rem);
  }

  .hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--accent-dim);
    border: 1px solid color-mix(in oklch, var(--gold) 30%, transparent);
    /* sharp corners — intentionally not pill-shaped */
    border-radius: var(--radius-sm);
    padding: .35rem 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
  }

  .hero h1 {
    color: oklch(98% 0.005 80);
    text-shadow: 0 1px 8px oklch(0% 0 0 / 0.55);
    margin-bottom: 1rem;

    & em { font-style: italic; color: var(--accent); }
  }

  [data-theme="dark"] .hero h1 { color: oklch(96% 0.010 80); }

  .hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: oklch(96% 0.005 80);
    text-shadow: 0 1px 4px oklch(0% 0 0 / 0.70), 0 2px 12px oklch(0% 0 0 / 0.50);
    margin-bottom: 2rem;
    max-width: 52ch;
  }

  .hero__actions .btn-outline {
    border-color: oklch(100% 0 0 / 0.75);
    color: oklch(97% 0 0);

    &:hover { border-color: var(--accent); color: var(--accent); }
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .hero__snowit-wrap { display: flex; flex-direction: column; gap: .3rem; }

  .trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
  }

  .trust-pill {
    display: inline-flex;
    align-items: center;
    font-size: .71rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: oklch(95% 0.005 80);
    background: oklch(0% 0 0 / 0.40);
    border: 1px solid oklch(100% 0 0 / 0.20);
    border-radius: var(--radius-sm);
    padding: .32rem .8rem;
    backdrop-filter: blur(6px);
  }

  /* ── STATS ROW ─ editorial numbers with tabular-nums ────── */
  .stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 1.75rem 2rem;
    margin-top: 2.5rem;
    /* Solid opaque dark card — fully readable on any hero background,
       both light and dark theme. No overlay, no backdrop-filter. */
    background: oklch(11% 0.042 252);
    border-radius: var(--radius-sm);
    border: 1px solid oklch(100% 0 0 / 0.12);
    /* z-index fix: .hero__peaks is z-index:3, content is z-index:2 —
       raise stats-row above peaks so the solid bg actually covers them */
    position: relative;
    z-index: 4;
  }

  [data-theme="dark"] .stats-row {
    background: oklch(16% 0.048 256);
    border-color: oklch(100% 0 0 / 0.10);
  }

  .stat {
    min-width: 130px;
    padding-left: .9rem;
    border-left: 2px solid oklch(55% 0.12 252);
  }

  [data-theme="dark"] .stat {
    border-left-color: var(--accent);
  }

  .stat__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    /* Bright white in light theme (pops on dark bg); accent gold in dark */
    color: oklch(96% 0.010 80);
    display: block;
    /* tabular-nums: all digits same width — essential for editorial stats */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    line-height: 1;
    margin-bottom: .4rem;
  }

  [data-theme="dark"] .stat__num { color: var(--accent); }

  .stat__label {
    font-size: .95rem;
    font-weight: 600;
    color: oklch(100% 0 0);
    letter-spacing: .01em;
    line-height: 1.3;
    text-shadow:
      0 1px 3px oklch(0% 0 0),
      0 2px 8px oklch(0% 0 0 / 0.9);
  }

  /* ── VALUE GRID ────────────────────────────────────────── */
  .value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .value-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    transition:
      border-color var(--transition),
      box-shadow var(--transition);

    &:hover {
      border-color: var(--card-hover-border);
      /* Inward glow instead of translateY lift */
      box-shadow: 0 0 0 1px var(--card-hover-border),
                  inset 0 0 0 1px color-mix(in oklch, var(--accent) 8%, transparent);
    }

    & .value-card__icon { font-size: 1.75rem; margin-bottom: 1rem; display: block; }
    & h3 { margin-bottom: .5rem; font-size: 1.2rem; }
    & p  { font-size: .92rem; color: var(--text-muted); margin: 0; }
  }

  /* ── LEVELS ────────────────────────────────────────────── */
  .levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .level-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);

    /* Thick left stripe instead of top bar — more editorial */
    &::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 3px;
    }

    &:hover {
      border-color: var(--border-lt);
      box-shadow: var(--shadow-sm);
    }

    &--beginner::before     { background: oklch(72% 0.18 145); }
    &--intermediate::before { background: oklch(60% 0.18 252); }
    &--advanced::before     { background: var(--accent); }

    & .level-tag {
      font-size: .7rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; margin-bottom: .75rem; display: block;
      font-family: var(--font-mono);
    }

    &--beginner     .level-tag { color: oklch(72% 0.18 145); }
    &--intermediate .level-tag { color: oklch(60% 0.18 252); }
    &--advanced     .level-tag { color: var(--accent); }

    & h3 { font-size: 1.1rem; margin-bottom: .5rem; }
    & p  { font-size: .88rem; color: var(--text-muted); margin: 0; }
  }

  /* ── STEPS ─ CSS counter with decimal-leading-zero ─────── */
  .steps {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
    position: relative;
    counter-reset: ski-step;

    &::before {
      content: '';
      position: absolute;
      left: 1.65rem;
      top: 2.5rem;
      bottom: 2.5rem;
      width: 1px;
      background: linear-gradient(to bottom, var(--accent), transparent);
    }
  }

  .step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    counter-increment: ski-step;

    &:last-child { padding-bottom: 0; }
  }

  .step__num {
    flex-shrink: 0;
    width: 3.3rem; height: 3.3rem;
    background: var(--bg-card);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-sm);   /* square-ish, not circle */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    /* hide the HTML text; replace with CSS counter */
    font-size: 0;

    &::after {
      content: counter(ski-step, decimal-leading-zero);
      font-family: var(--font-mono);
      font-size: .95rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -.02em;
    }
  }

  .step__body { padding-top: .6rem; }
  .step__body h3 { margin-bottom: .35rem; font-size: 1.1rem; }
  .step__body p  { font-size: .9rem; color: var(--text-muted); margin: 0; }

  /* ── EXPERIENCES ───────────────────────────────────────── */
  .experiences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  .exp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);

    &:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow);
    }

    & .exp-card__img {
      width: 100%;
      height: 190px;
      background: var(--exp-img-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
    }

    & .exp-card__body { padding: 1.5rem; }

    & .exp-card__tag {
      font-size: .7rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--accent);
      margin-bottom: .5rem; display: block;
      font-family: var(--font-mono);
    }

    & h3 { font-size: 1.1rem; margin-bottom: .5rem; }
    & p  { font-size: .88rem; color: var(--text-muted); margin: 0 0 1rem; }
  }

  /* ── CTA BANNER ────────────────────────────────────────── */
  .cta-banner {
    background: var(--cta-bg);
    border: 1px solid var(--cta-border);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 3.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    color: oklch(90% 0.015 80);
    --text: oklch(90% 0.015 80);
    --text-muted: oklch(65% 0.050 240);

    & h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; color: oklch(90% 0.015 80); }
    & p  { color: oklch(65% 0.050 240); margin: 0; }
    & .cta-banner__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; flex-shrink: 0; }
  }

  /* ── FAQ — grid-template-rows trick (no max-height hack) ── */
  .faq-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 780px;
  }

  .faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition);

    &.open { border-color: var(--faq-open-border); }
  }

  .faq-question {
    width: 100%;
    text-align: left;
    padding: 1.1rem 1.25rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: background var(--transition), color var(--transition);

    &:hover { background: var(--faq-hover-bg); }

    .faq-item.open & { color: var(--faq-open-color); }
  }

  .faq-chevron {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    transition: transform .28s ease;
    color: var(--text-muted);

    .faq-item.open & { transform: rotate(180deg); color: var(--accent); }
  }

  /*
   * FAQ height animation via grid-template-rows: 0fr → 1fr
   * Eliminates the magic-number max-height: 500px approach.
   * The inner div needs min-height: 0 to participate in the grid.
   */
  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;

    .faq-item.open & { grid-template-rows: 1fr; }
  }

  .faq-answer__inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 1.25rem;
    transition: padding .32s ease;
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.72;

    .faq-item.open & { padding: 0 1.25rem 1.25rem; }
  }

  /* ── PROMO GRID ────────────────────────────────────────── */
  .promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;

    @media (max-width: 680px) { grid-template-columns: 1fr; }
  }

  .promo-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    transition: border-color var(--transition), box-shadow var(--transition);

    &:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-sm);
    }

    & .promo-card__icon { font-size: 2rem; margin-bottom: 1rem; }
    & h3 { margin-bottom: .5rem; }
    & p  { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.25rem; }
  }

  /* ── FOOTER ────────────────────────────────────────────── */
  .site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
    padding-block: 3rem 1.5rem;
    --text-muted: var(--footer-muted);
    --text:       var(--footer-text);
    --border:     var(--footer-border);
    --accent:     var(--gold);
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;

    @media (max-width: 680px) { grid-template-columns: 1fr; }
  }

  .footer-brand__desc {
    font-size: .875rem;
    color: var(--text-muted);
    margin: 1rem 0 1.25rem;
    max-width: 30ch;
  }

  .footer-nav-title {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: .9rem;
    font-family: var(--font-mono);
  }

  .footer-links {
    display: flex; flex-direction: column; gap: .4rem;

    & a {
      font-size: .875rem;
      color: var(--text-muted);
      transition: color var(--transition);

      &:hover { color: var(--accent); }
    }
  }

  .footer-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 1.5rem; }

  .footer-bottom {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    font-size: .8rem; color: var(--text-muted);

    & a:hover { color: var(--accent); }
  }

  .footer-dev {
    margin-top: .75rem;
    text-align: center;
    font-size: .85rem;
    color: var(--text-muted);
    opacity: .85;
    font-family: var(--font-mono);

    & a {
      color: var(--text-muted);
      text-decoration: underline;
      font-weight: 600;
      &:hover { color: var(--accent); }
    }
  }

  .social-links { display: flex; gap: .5rem; }

  .social-link {
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    transition: border-color var(--transition), background var(--transition);

    &:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); }
  }

  /* ── PAGE HERO ─────────────────────────────────────────── */
  .page-hero {
    padding-block: clamp(3rem, 7vw, 5rem);
    background: var(--page-hero-bg);
    border-bottom: 1px solid var(--border);
  }

  .breadcrumb {
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    letter-spacing: .02em;

    & a { color: var(--text-muted); &:hover { color: var(--accent); } }
    & span { margin-inline: .4rem; }
  }

  /* ── FORMS ─────────────────────────────────────────────── */
  .form-group { margin-bottom: 1.25rem; }

  .form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .45rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
  }

  .form-control {
    width: 100%;
    padding: .75rem 1rem;
    background: var(--input-bg);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-sm);
    color: var(--input-text);
    font-family: var(--font-body);
    font-size: .95rem;
    transition: border-color var(--transition), box-shadow var(--transition);

    &::placeholder { color: var(--text-muted); opacity: .7; }

    &:focus {
      outline: none;
      border-color: var(--input-focus);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent);
    }

    &.error { border-color: var(--form-error-color); }
  }

  /* :has() — style the label when the sibling input is invalid */
  .form-group:has(.form-control.error) label {
    color: var(--form-error-color);
  }

  /* :has() — highlight the form-group when it contains a focused input */
  .form-group:has(.form-control:focus) label {
    color: var(--accent);
  }

  .field-error {
    display: none;
    font-size: .76rem;
    color: var(--form-error-color);
    margin-top: .3rem;
    font-family: var(--font-mono);
    &.visible { display: block; }
  }

  .form-note    { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; }
  .form-success {
    display: none;
    background: var(--form-success-bg);
    border: 1px solid var(--form-success-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    color: var(--form-success-text);
    font-size: .9rem;
    &.visible { display: block; }
  }
  select.form-control option { background: var(--bg); }

  /* ── CHECKLIST ─────────────────────────────────────────── */
  .checklist {
    display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem;

    & li {
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      font-size: .92rem;
      color: var(--text-muted);

      &::before {
        content: '✓';
        color: var(--accent);
        font-weight: 700;
        flex-shrink: 0;
        margin-top: .05rem;
        font-family: var(--font-mono);
      }
    }
  }

  /* ── BOOKING BOX ────────────────────────────────────────── */
  .booking-box {
    background: var(--booking-box-bg);
    border: 1.5px solid var(--cta-border);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
    margin-block: 2.5rem;
    color: oklch(90% 0.015 80);
    --text: oklch(90% 0.015 80);
    --text-muted: oklch(65% 0.050 240);

    & h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .75rem; color: oklch(90% 0.015 80); }
    & p  { color: oklch(65% 0.050 240); margin-bottom: 1.5rem; }
    & .booking-box__actions {
      display: flex; flex-wrap: wrap; justify-content: center;
      align-items: center; gap: 1rem;
    }
  }

  /* ── INFO BOX ───────────────────────────────────────────── */
  .info-box {
    background: var(--accent-dim);
    border: 1px solid color-mix(in oklch, var(--gold) 24%, transparent);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    padding: 1.25rem 1.5rem;
    margin-block: 1.5rem;

    & p { font-size: .9rem; margin: 0; }
    & strong { color: var(--accent); }
  }

  /* ── TEAM CARDS ─────────────────────────────────────────── */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: border-color var(--transition);

    &:hover { border-color: var(--card-hover-border); }

    & .team-card__avatar {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--accent-dim);
      border: 2px solid var(--accent);
      margin: 0 auto 1rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
    }

    & h4 { margin-bottom: .25rem; font-size: 1rem; }
    & p  { font-size: .82rem; color: var(--text-muted); margin: 0; }
  }

  /* ── BRAND SERVICES ─────────────────────────────────────── */
  .brand-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .brand-service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    transition: border-color var(--transition), box-shadow var(--transition);

    &:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-sm);
    }

    & .brand-service-card__icon { font-size: 1.75rem; margin-bottom: .75rem; }
    & h3 { font-size: 1rem; margin-bottom: .4rem; }
    & p  { font-size: .86rem; color: var(--text-muted); margin: 0; }
  }

  /* ── PROSE (privacy / statuto) ──────────────────────────── */
  .prose {
    max-width: 740px;

    & h2 { font-size: 1.5rem; margin-bottom: .6rem; margin-top: 2rem; }
    & h3 { font-size: 1.1rem; margin-bottom: .4rem; margin-top: 1.5rem; font-family: var(--font-body); }
    & p  { font-size: .93rem; color: var(--text-muted); margin-bottom: .75rem; }
    & ul { margin-bottom: .75rem; }

    & ul li {
      font-size: .93rem;
      color: var(--text-muted);
      padding-left: 1.5rem;
      position: relative;
      margin-bottom: .35rem;
      list-style: em-dash inside;

      &::marker { color: var(--accent); }
    }
  }

  /* ── SECTION LIGHT: scoped component overrides ────────── */
  .section--light {
    & .value-card,
    & .level-card,
    & .faq-item,
    & .exp-card    { background: var(--section-card-bg); border-color: var(--section-card-border); }

    & .value-card p,
    & .level-card p,
    & .faq-answer__inner,
    & .exp-card p  { color: var(--section-light-muted); }

    & .faq-question        { color: var(--text-dark); }
    & .faq-item.open .faq-question { color: var(--accent); }
    & .section-title       { color: var(--text-dark); }

    & .steps::before { background: linear-gradient(to bottom, var(--accent), transparent); }
    & .step__num     { background: var(--section-card-bg); }
    & .step__body p  { color: var(--section-light-muted); }
  }

  /* ── THEME TOGGLE ───────────────────────────────────────── */
  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    transition: background var(--transition);
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid var(--border-lt);
    background: transparent;
    color: var(--text);

    &:hover { background: var(--nav-link-hover-bg); }
  }

  /* ── TEACHER FILTERS ────────────────────────────────────── */
  .teacher-filters { margin-bottom: 2.5rem; }

  .teacher-filters__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;

    & .teacher-filters__field--search { grid-column: 1 / -1; }

    @media (min-width: 900px) {
      grid-template-columns: repeat(5, 1fr);
      & .teacher-filters__field--search { grid-column: auto; }
    }
  }

  /* ── TEACHER GRID — container queries ──────────────────── */
  .teacher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.5rem;
    /* Establish a container for query-based card adjustments */
    container-type: inline-size;
    container-name: teacher-grid;
  }

  .teacher-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);

    &:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow);
    }

    & .teacher-card__img-wrap {
      width: 100%; height: 200px;
      background: var(--bg-alt);
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }

    & .teacher-card__img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: scale var(--transition);

      &[data-slug="andrea-dal-din"] { object-position: top; }
    }

    &:hover .teacher-card__img { scale: 1.03; }

    & .teacher-card__body { padding: 1.25rem 1.5rem 1.5rem; }
    & .teacher-card__name { font-size: 1.15rem; margin-bottom: .25rem; }
    & .teacher-card__loc  { font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; font-family: var(--font-mono); }

    & .teacher-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-bottom: 1rem;
    }

    & .teacher-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
  }

  /* ── TEACHER TAGS ───────────────────────────────────────── */
  .teacher-tag {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .22rem .55rem;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
    font-family: var(--font-mono);

    &--lang  {
      background: oklch(60% 0.18 252 / .12);
      color: oklch(68% 0.16 252);
      border-color: oklch(60% 0.18 252 / .22);
    }

    &--level {
      background: oklch(72% 0.18 145 / .10);
      color: oklch(65% 0.18 145);
      border-color: oklch(72% 0.18 145 / .22);
    }

    &--loc {
      background: oklch(65% 0.16 310 / .10);
      color: oklch(65% 0.14 310);
      border-color: oklch(65% 0.16 310 / .22);
    }
  }

  /* ── TEACHER EMPTY STATE ────────────────────────────────── */
  .teacher-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);

    & p { margin-bottom: 1rem; font-size: 1.05rem; }
  }

  /* ── TEACHER PROFILE ────────────────────────────────────── */
  .teacher-profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;

    @media (max-width: 768px) { grid-template-columns: 1fr; gap: 2rem; }
  }

  .teacher-profile__photo-wrap {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-alt);
    border: 1px solid var(--border);
  }

  .teacher-profile__photo {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  .teacher-profile__name {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 1rem;
  }

  .teacher-profile__bio {
    font-size: 1rem;
    line-height: 1.78;
    color: var(--text-muted);
    margin-bottom: 2rem;
  }

  .teacher-profile__section {
    margin-bottom: 1.25rem;

    & h3 {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: .5rem;
      font-family: var(--font-mono);
    }
  }

  .teacher-profile__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  .teacher-profile__detail-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .25rem;
    font-family: var(--font-mono);
  }

  .teacher-profile__detail-value { font-size: .92rem; color: var(--text); }

  .teacher-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  /* ── PRENOTA FORM ───────────────────────────────────────── */
  .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    @media (max-width: 600px) { grid-template-columns: 1fr; }
  }

  .prenota-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

  .form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    cursor: pointer;

    & input[type="checkbox"] {
      margin-top: .25rem;
      width: 18px; height: 18px;
      accent-color: var(--accent);
      flex-shrink: 0;
    }
  }

  /* ── PRENOTA MAESTRO BANNER ─────────────────────────────── */
  .prenota-maestro-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--accent-dim);
    border: 1px solid color-mix(in oklch, var(--gold) 24%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;

    & .prenota-maestro-banner__img {
      width: 56px; height: 56px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--accent);
      flex-shrink: 0;

      &[data-slug="andrea-dal-din"] { object-position: top; }
    }

    & .prenota-maestro-banner__label   { font-size: .76rem; color: var(--text-muted); margin-bottom: .15rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
    & .prenota-maestro-banner__name    { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
    & .prenota-maestro-banner__change  {
      display: inline-block;
      margin-top: .35rem;
      font-size: .8rem;
      color: var(--text-muted);
      text-decoration: underline;
      transition: color var(--transition);
      &:hover { color: var(--accent); }
    }
  }

  /* ── GIORNATA — INCLUDE GRID ────────────────────────────── */
  .include-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    @media (max-width: 700px) { grid-template-columns: 1fr; }
  }

  .include-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.75rem;

    & h3 { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 1rem; }
    &--yes h3 { color: oklch(72% 0.18 145); }
    &--no  h3 { color: oklch(62% 0.18 25); }
  }

  .include-list {
    list-style: none;
    padding: 0; margin: 0;

    & li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: .6rem;
      font-size: .92rem;
      color: var(--text-muted);
      line-height: 1.5;

      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: oklch(72% 0.18 145);
        font-weight: 700;
        font-family: var(--font-mono);
      }
    }

    &--no li::before { content: '✕'; color: oklch(62% 0.18 25); }
  }

  /* ── GIORNATA — TIMELINE ────────────────────────────────── */
  .timeline {
    max-width: 640px;
    margin: 2rem auto 0;
    position: relative;
    padding-left: 4.5rem;

    &::before {
      content: '';
      position: absolute;
      left: 3.25rem;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, var(--accent) 0%, transparent 100%);
    }
  }

  .timeline__item {
    position: relative;
    margin-bottom: 2rem;

    &:last-child { margin-bottom: 0; }

    &::before {
      content: '';
      position: absolute;
      left: -1.35rem;
      top: .35rem;
      width: 8px; height: 8px;
      border-radius: var(--radius-sm);  /* square dots — matches step__num */
      background: var(--accent);
      border: 2px solid var(--bg);
    }
  }

  .timeline__time {
    position: absolute;
    left: -4.5rem;
    top: .15rem;
    width: 3rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent);
    /* tabular nums so time columns align */
    font-variant-numeric: tabular-nums;
  }

  .timeline__body h3 { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
  .timeline__body p  { font-size: .9rem; color: var(--text-muted); line-height: 1.5; }

  /* ── CONTACT FORM WRAP ──────────────────────────────────── */
  .contact-form-wrap {
    max-width: 720px;
    margin: 2rem auto 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;

    & .form-success { text-align: center; padding: 2rem 1rem; }

    @media (max-width: 600px) { padding: 1.25rem 1rem; }
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    @media (max-width: 600px) { grid-template-columns: 1fr; }
  }

  /* ── STATUTO ─────────────────────────────────────────────── */
  .statuto-list {
    list-style: none;
    padding: 0; margin: .75rem 0;

    & li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: .7rem;
      font-size: .93rem;
      color: var(--text-muted);
      line-height: 1.65;

      /* @counter-style em-dash via list-style */
      list-style: em-dash inside;

      &::marker { color: var(--accent); }
    }
  }

  .statuto-article {
    margin-bottom: 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;

    &__header {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: color-mix(in oklch, var(--gold) 10%, transparent);
      padding: 1rem 1.5rem;
      border-bottom: 1px solid var(--border);
    }

    &__num {
      font-family: var(--font-mono);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent);
      white-space: nowrap;
    }

    &__title {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
      color: var(--text);
    }

    & > p, & > ul { padding: 1.25rem 1.5rem; margin: 0; }
    & > p + ul { padding-top: 0; }
  }

  .statuto-callout {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--cta-border);
    border-radius: var(--radius);
    padding: 2.25rem 2.5rem;
    flex-wrap: wrap;

    & .statuto-callout__icon { font-size: 2.5rem; flex-shrink: 0; }

    & .statuto-callout__body {
      flex: 1;
      min-width: 180px;

      & h2 { font-size: 1.4rem; margin-bottom: .5rem; }
      & p  { color: var(--text-muted); font-size: .93rem; margin: 0; line-height: 1.6; }
    }

    & .btn { flex-shrink: 0; }

    @media (max-width: 640px) { flex-direction: column; align-items: flex-start; }
  }

  /* ── CHI SIAMO — Story ──────────────────────────────────── */
  .story-section { max-width: 820px; margin-inline: auto; }

  .story-quote {
    border-left: 3px solid var(--accent);
    margin: 1.75rem 0 2.25rem;
    padding: 1rem 1.5rem;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--text);
    background: color-mix(in oklch, var(--gold) 8%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.6;
  }

  .story-body { display: flex; flex-direction: column; gap: 2rem; }

  .story-step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;

    & .story-step__icon { font-size: 1.75rem; flex-shrink: 0; margin-top: .15rem; }
    & h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: var(--text); }
    & p  { font-size: 1.02rem; line-height: 1.8; color: var(--text-muted); }
  }

  /* ── COOKIE BANNER ──────────────────────────────────────── */
  .cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--footer-bg, oklch(14% 0.04 252));
    color: var(--footer-text, oklch(90% 0.015 80));
    border-top: 2px solid var(--accent, var(--gold));
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    box-shadow: 0 -4px 24px oklch(0% 0 0 / .3);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);

    &.cookie-banner--visible { transform: translateY(0); }

    & .cookie-banner__text {
      flex: 1;
      min-width: 200px;
      font-size: .875rem;
      line-height: 1.55;

      & a { color: var(--gold); text-decoration: underline; }
    }

    & .cookie-banner__actions {
      display: flex;
      gap: .6rem;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    & .cookie-banner__accept {
      background: var(--gold);
      color: oklch(12% 0.04 252);
      border: none;
      padding: .5rem 1.25rem;
      border-radius: var(--radius-sm);
      font-size: .875rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .2s;
      &:hover { opacity: .85; }
    }

    & .cookie-banner__reject {
      background: transparent;
      color: var(--footer-text, oklch(90% 0.015 80));
      border: 1px solid oklch(100% 0 0 / .24);
      padding: .5rem 1rem;
      border-radius: var(--radius-sm);
      font-size: .875rem;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color .2s;
      &:hover { border-color: oklch(100% 0 0 / .6); }
    }

    @media (max-width: 480px) {
      gap: .75rem;
      padding: .875rem 1rem;

      & .cookie-banner__actions { width: 100%; }
      & .cookie-banner__accept,
      & .cookie-banner__reject  { flex: 1; text-align: center; }
    }
  }

} /* end @layer components */

/* ════════════════════════════════════════════════════════════ */
@layer utilities {

  /* ── Accessibility ──────────────────────────────────────── */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }

  /* ── Text helpers ───────────────────────────────────────── */
  .text-accent  { color: var(--accent); }
  .text-muted   { color: var(--text-muted); }

  /* ── Partials system ────────────────────────────────────── */
  .nav-link--active    { color: var(--accent) !important; font-weight: 600; }
  .nav-link--secondary { font-size: .82rem; opacity: .75; &:hover { opacity: 1; } }
  .form-success[hidden]{ display: none; }
  .form-wa-fallback    { margin-top: .75rem; font-size: .9rem; }

  /* ── Responsive ─────────────────────────────────────────── */
  @media (max-width: 900px) {
    .footer-top  { grid-template-columns: 1fr 1fr; }
    .hero__actions { flex-direction: column; align-items: flex-start; }
    .cta-banner  { flex-direction: column; }
  }

  @media (max-width: 600px) {
    .footer-top              { grid-template-columns: 1fr; }
    .booking-box__actions    { flex-direction: column; }

    /* ── Hero stats: 2-column grid on mobile ── */
    .stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      padding: 1.25rem;
    }
    .stat { min-width: 0; }

    /* ── Trust pills: slightly larger on mobile ── */
    .trust-pill { font-size: .8rem; }
  }
}

/* ════════════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS
   Progressive enhancement: @supports ensures graceful fallback
   in Firefox and Safari where animation-timeline is not yet
   available. Elements simply appear without animation there.
   ════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  @keyframes slc-reveal {
    from {
      opacity: 0;
      translate: 0 1.25rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  /* Cards: reveal as they enter the viewport */
  .value-card,
  .level-card,
  .exp-card,
  .promo-card,
  .brand-service-card {
    animation: slc-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }

  /* Teacher cards: slightly later range for density */
  .teacher-card,
  .team-card {
    animation: slc-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }

  /* Steps: stagger via animation-range offset per child */
  .step:nth-child(1) { animation: slc-reveal linear both; animation-timeline: view(); animation-range: entry 0%   entry 50%; }
  .step:nth-child(2) { animation: slc-reveal linear both; animation-timeline: view(); animation-range: entry 5%   entry 55%; }
  .step:nth-child(3) { animation: slc-reveal linear both; animation-timeline: view(); animation-range: entry 10%  entry 60%; }
  .step:nth-child(4) { animation: slc-reveal linear both; animation-timeline: view(); animation-range: entry 15%  entry 65%; }
  .step:nth-child(5) { animation: slc-reveal linear both; animation-timeline: view(); animation-range: entry 20%  entry 70%; }

  /* Stats: count-up feel via a Y-only reveal */
  @keyframes stat-reveal {
    from { opacity: 0; translate: 0 .75rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  .stat {
    animation: stat-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/*
 * Mountain parallax — scroll-driven, separate @supports block.
 * Uses animation-timeline: scroll() (not view()) so it tracks
 * the root scroller, not the element's own visibility.
 * Each layer translates upward at a different rate as the user
 * scrolls down, creating genuine depth (close = moves more).
 *
 * Keyframe values are translateY only — no opacity change —
 * so the mask-image fade on .hero__peaks handles the upper edge.
 */
@supports (animation-timeline: scroll()) {
  @keyframes peak-parallax-5 { to { translate: 0 -18px; } }
  @keyframes peak-parallax-4 { to { translate: 0 -32px; } }
  @keyframes peak-parallax-3 { to { translate: 0 -52px; } }
  @keyframes peak-parallax-2 { to { translate: 0 -76px; } }
  @keyframes peak-parallax-1 { to { translate: 0 -108px; } }

  .hero__peak--5 {
    animation: peak-parallax-5 linear both;
    animation-timeline: scroll();
    animation-range: 0px 600px;
  }
  .hero__peak--4 {
    animation: peak-parallax-4 linear both;
    animation-timeline: scroll();
    animation-range: 0px 600px;
  }
  .hero__peak--3 {
    animation: peak-parallax-3 linear both;
    animation-timeline: scroll();
    animation-range: 0px 600px;
  }
  .hero__peak--2 {
    animation: peak-parallax-2 linear both;
    animation-timeline: scroll();
    animation-range: 0px 600px;
  }
  .hero__peak--1 {
    animation: peak-parallax-1 linear both;
    animation-timeline: scroll();
    animation-range: 0px 600px;
  }
}