/* EsteticaMente Oasi Urbana - Modern Stylesheet (2026) */

/* ── 1. CASCADE LAYERS ── */
@layer reset, base, themes, components, utilities;

/* Enable transitioning to auto height keywords */
:root {
  interpolate-size: allow-keywords;
}

/* ── 2. FLUID TYPOGRAPHY & DESIGN SYSTEM TOKENS ── */
@layer base {
  :root {
    --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    --space-s: clamp(0.85rem, 0.8rem + 0.25vw, 1.1rem);
    --space-m: clamp(1.25rem, 1.1rem + 0.75vw, 1.85rem);
    --space-l: clamp(2rem, 1.8rem + 1vw, 3rem);
    
    --radius-card: 1.75rem;
    --radius-btn: 2rem;
    --container-width-desktop: 840px;
    
    --font-sans: 'Montserrat', system-ui, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    
    --transition-theme: 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-ui: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    --color-wall-real: oklch(0.82 0.015 85); /* #CBC2B6 */
    --color-wall-dark: oklch(0.61 0.015 85); /* #8c857b */
    
    /* Fluid Font Scale (7-tier scale) */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);       /* ~12px to 13.6px */
    --fs-sm: clamp(0.8125rem, 0.75rem + 0.3125vw, 0.95rem);   /* ~13px to 15.2px */
    --fs-base: clamp(0.9375rem, 0.85rem + 0.4375vw, 1.1rem);  /* ~15px to 17.6px */
    --fs-md: clamp(1.0625rem, 0.95rem + 0.5625vw, 1.25rem);   /* ~17px to 20px */
    --fs-lg: clamp(1.1875rem, 1.05rem + 0.6875vw, 1.45rem);   /* ~19px to 23.2px */
    --fs-xl: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem);      /* ~22px to 28px */
    --fs-xxl: clamp(1.625rem, 1.4rem + 1.125vw, 2.25rem);     /* ~26px to 36px */
  }
}

/* ── 3. DYNAMIC WEATHER-DRIVEN OKLCH THEMES ── */
@layer themes {
  :root, [data-theme="zenith"] {
    --bg-page: oklch(0.96 0.005 85);
    --text-primary: oklch(0.25 0.005 85);
    --text-secondary: oklch(0.48 0.03 235);
    --color-sage: oklch(0.66 0.02 145);
    --color-sage-text: oklch(0.45 0.03 145);
    --card-primary-bg: oklch(0.45 0.03 145);
    
    /* Relative Color Syntax (RCS) computing transparencies */
    --color-accent-bg: oklch(from var(--color-sage) l c h / 0.15);
    --glass-bg: oklch(1 0 0 / 0.6);
    --glass-border: oklch(0.85 0.01 85 / 0.6);
    --shadow-color: oklch(from var(--color-sage) l c h / 0.1);
    --blob-1: oklch(from var(--color-sage) l c h / 0.4);
    --blob-2: oklch(0.72 0.06 85 / 0.4);
    --status-dot: oklch(0.72 0.15 140);
    --logo-filter: none;
  }

  [data-theme="alba"] {
    --bg-page: oklch(0.99 0.004 80);
    --text-primary: oklch(0.35 0.015 250);
    --text-secondary: oklch(0.52 0.015 250);
    --color-sage: oklch(0.70 0.025 240);
    --color-sage-text: oklch(0.48 0.035 150);
    --card-primary-bg: oklch(0.48 0.035 150);
    
    --color-accent-bg: oklch(from var(--color-sage) l c h / 0.15);
    --glass-bg: oklch(1 0 0 / 0.7);
    --glass-border: oklch(1 0 0 / 0.8);
    --shadow-color: oklch(from var(--color-sage) l c h / 0.08);
    --blob-1: oklch(0.88 0.03 10 / 0.5); /* Soft pink sunrise */
    --blob-2: oklch(0.88 0.03 220 / 0.5); /* Soft blue sky */
    --status-dot: oklch(0.72 0.15 140);
    --logo-filter: none;
  }

  [data-theme="alba-rain"] {
    --bg-page: oklch(0.93 0 0);
    --text-primary: oklch(0.35 0.015 250);
    --text-secondary: oklch(0.45 0 0);
    --color-sage: oklch(0.61 0.025 240);
    --color-sage-text: oklch(0.43 0.03 150);
    --card-primary-bg: oklch(0.43 0.03 150);
    
    --color-accent-bg: oklch(from var(--color-sage) l c h / 0.15);
    --glass-bg: oklch(1 0 0 / 0.5);
    --glass-border: oklch(0.82 0 0 / 0.6);
    --shadow-color: oklch(0 0 0 / 0.08);
    --blob-1: oklch(0.78 0.01 250 / 0.5); /* Rainy cloud gray-blue */
    --blob-2: oklch(0.73 0.02 240 / 0.5);
    --status-dot: oklch(0.72 0.15 140);
    --logo-filter: none;
  }

  [data-theme="tramonto"] {
    --bg-page: oklch(0.97 0.01 40);
    --text-primary: oklch(0.24 0.04 330);
    --text-secondary: oklch(0.38 0.04 40);
    --color-sage: oklch(0.60 0.12 50);
    --color-sage-text: oklch(0.43 0.09 45);
    --card-primary-bg: oklch(0.43 0.09 45);
    
    --color-accent-bg: oklch(from var(--color-sage) l c h / 0.15);
    --glass-bg: oklch(from var(--bg-page) l c h / 0.7);
    --glass-border: oklch(from var(--color-sage) l c h / 0.3);
    --shadow-color: oklch(from var(--color-sage) l c h / 0.15);
    --blob-1: oklch(0.68 0.15 10 / 0.4); /* Golden hour pink */
    --blob-2: oklch(0.78 0.11 50 / 0.4); /* Sunset orange */
    --status-dot: oklch(0.72 0.15 140);
    --logo-filter: none;
  }

  [data-theme="tramonto-rain"] {
    --bg-page: oklch(0.89 0.005 85);
    --text-primary: oklch(0.34 0.03 250);
    --text-secondary: oklch(0.44 0.02 250);
    --color-sage: oklch(0.51 0.02 250);
    --color-sage-text: oklch(0.35 0.02 250);
    --card-primary-bg: oklch(0.35 0.02 250);
    
    --color-accent-bg: oklch(from var(--color-sage) l c h / 0.15);
    --glass-bg: oklch(from var(--bg-page) l c h / 0.65);
    --glass-border: oklch(from var(--color-sage) l c h / 0.3);
    --shadow-color: oklch(from var(--color-sage) l c h / 0.15);
    --blob-1: oklch(0.53 0.01 250 / 0.5); /* Moody rainy twilight */
    --blob-2: oklch(0.68 0.005 85 / 0.5);
    --status-dot: oklch(0.72 0.15 140);
    --logo-filter: none;
  }

  [data-theme="notte"] {
    --bg-page: oklch(0.12 0.01 145);
    --text-primary: oklch(0.98 0.005 85);
    --text-secondary: oklch(0.86 0.005 85);
    --color-sage: oklch(0.79 0 0);
    --color-sage-text: oklch(0.87 0 0);
    --card-primary-bg: oklch(0.32 0.025 145);
    
    --color-accent-bg: oklch(1 0 0 / 0.1);
    --glass-bg: oklch(0.18 0.015 145 / 0.6);
    --glass-border: oklch(1 0 0 / 0.15);
    --shadow-color: oklch(0 0 0 / 1);
    --blob-1: oklch(0.18 0.015 145 / 0.8);
    --blob-2: oklch(0.15 0.05 240 / 0.4); /* Midnight indigo */
    --status-dot: oklch(0.82 0.14 150);
    --logo-filter: brightness(1.2) drop-shadow(0 0 10px oklch(1 0 0 / 0.2));
  }

  @media (prefers-contrast: high) {
    :root, [data-theme="zenith"] {
      --color-sage-text: oklch(0.38 0.03 145);
      --card-primary-bg: oklch(0.38 0.03 145);
    }
  }
}

/* ── 4. GLOBAL BASICS & LAYOUTS ── */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  
  html {
    scroll-behavior: smooth;
    accent-color: var(--color-sage);
  }
}

@layer base {
  body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color var(--transition-theme), color var(--transition-theme);
    min-height: 100dvh; /* Dynamic viewport height to prevent mobile layout shifts */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* Accessibility focus outline styles preserving corner geometries */
  :focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px oklch(from var(--bg-page) l c h);
  }

  @media (pointer: coarse) {
    :focus-visible {
      outline-width: 4px;
      outline-offset: 4px;
    }
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    margin: 0;
    text-wrap: balance; /* 2026: prevents uneven line lengths in headings */
  }

  p, li {
    text-wrap: pretty; /* 2026: prevents orphans and improves paragraph layouts */
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media (prefers-contrast: high) {
    .card {
      border-width: 2px !important;
    }
    .status-badge {
      border-width: 2px !important;
    }
  }
}

/* ── 5. ATMOSPHERIC GRAPHICS ── */
@layer base {
  .bg-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  }

  .blob-container {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
  }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.8;
    transition: background-color var(--transition-theme);
    animation: breathe 10s ease-in-out infinite;
    will-change: transform;
  }

  .blob-1 {
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: var(--blob-1);
  }

  .blob-2 {
    bottom: 10%;
    right: -10%;
    width: 70vw;
    height: 70vw;
    background: var(--blob-2);
    animation-delay: -5s;
  }

  @keyframes breathe {
    0%, 100% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.12) translate(30px, -30px); }
  }
}

/* ── 6. CONTAINER CONTEX & GRID LAYOUTS ── */
@layer components {
  /* Establish main container query context */
  .main-container {
    width: 100%;
    max-width: 420px; /* Base width on mobile screen dimensions */
    padding: var(--space-m) var(--space-s);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    animation: awakening 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
    container-type: inline-size;
    container-name: main-wrapper;
  }

  @keyframes awakening {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Grid Layout: adapts automatically using container queries */
  .grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .col-span-2 {
    grid-column: span 1;
  }

  /* Responsive Container Queries scaling from 420px up to 840px desktop width */
  @container main-wrapper (min-width: 380px) {
    /* When viewport width allows wider margins */
    :host {
      --radius-card: 2rem;
    }
  }

  @container main-wrapper (min-width: 580px) {
    .grid-layout {
      grid-template-columns: repeat(2, 1fr);
    }
    .col-span-2 {
      grid-column: span 2;
    }
    .chi-siamo-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
}

/* ── 7. BRAND LOGO ── */
@layer components {
  .logo-wrapper {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 50%;
    background: oklch(1 0 0 / 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px -10px var(--shadow-color);
    overflow: hidden;
    animation: float 8s ease-in-out infinite;
    will-change: transform;
  }

  .logo-img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    filter: var(--logo-filter);
    transition: filter var(--transition-theme);
    display: block;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
}

/* ── 8. TRUST BADGES & STATUS ── */
@layer components {
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-btn);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-wall-real);
    transition: background-color 0.5s ease;
    flex-shrink: 0;
  }

  .status-dot.active {
    background-color: var(--status-dot);
    animation: pulse 2.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.15); }
  }

  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    margin: 0 auto;
  }

  .trust-badge-stars {
    color: oklch(0.74 0.12 85); /* Premium warm gold */
    font-size: var(--fs-sm);
    letter-spacing: 1px;
  }

  .trust-badge-score {
    color: var(--text-primary);
    font-weight: 700;
  }
}

/* ── 9. CARDS DESIGN ── */
@layer components {
  .card {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px -8px var(--shadow-color);
    transition: transform 0.2s var(--spring), box-shadow 0.3s ease, border-color var(--transition-theme);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    touch-action: pan-y;
  }

  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px -8px var(--shadow-color);
  }

  .card:active {
    transform: scale(0.975);
  }

  /* Stretched link pattern for accessibility: parent has card-stretched-link, anchor has .stretched-link */
  .card-stretched-link {
    position: relative;
  }

  .stretched-link::after {
    position: absolute;
    content: "";
    inset: 0;
    z-index: 1;
  }

  .card--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .card--primary {
    background: var(--card-primary-bg);
    color: oklch(1 0 0) !important;
    border: none;
    box-shadow: 0 10px 24px -6px oklch(from var(--card-primary-bg) l c h / 0.3);
  }

  .card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent-bg);
    color: var(--color-sage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    transition: color var(--transition-theme), background-color var(--transition-theme);
    flex-shrink: 0;
  }

  .card--primary .card-icon {
    background: oklch(1 0 0 / 0.2);
    color: oklch(1 0 0);
  }
}

/* ── 10. REVIEWS & MANTRA CAROUSEL ── */
@layer components {
  .mantra-banner {
    width: 100%;
    text-align: center;
    margin: var(--space-s) 0;
    padding: 1.25rem 1rem;
    border-top: 1px solid oklch(from var(--color-sage) l c h / 0.2);
    border-bottom: 1px solid oklch(from var(--color-sage) l c h / 0.2);
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
  }

  .review-stars {
    font-size: var(--fs-xs);
    color: oklch(0.74 0.12 85);
    letter-spacing: 3px;
    display: block;
    margin-bottom: 2px;
  }

  .mantra-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    transition: opacity 0.8s ease;
    display: block;
    max-width: 520px;
    line-height: 1.55;
  }

  .review-author {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-style: normal;
    transition: opacity 0.8s ease;
    display: block;
  }

  .review-link {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    opacity: 0.6;
    text-decoration: none;
    margin-top: 0.2rem;
    display: inline-block;
    border-bottom: 1px solid oklch(from var(--color-sage) l c h / 0.3);
    transition: opacity var(--transition-ui);
  }

  .review-link:hover {
    opacity: 1;
  }
}

/* ── 11. FAQ DISCRETE ACCORDIONS (2026 SPECS) ── */
@layer components {
  details.card {
    display: block;
    padding: 0;
    overflow: visible;
  }

  summary {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    list-style: none;
    user-select: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: -3px;
    border-radius: var(--radius-card);
  }

  .chevron-icon {
    transition: transform 0.3s var(--spring);
    flex-shrink: 0;
    opacity: 0.5;
  }

  details[open] .chevron-icon {
    transform: rotate(180deg);
  }

  /* Transition accordion height and opacity smoothly */
  .details-content {
    height: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem 0;
    visibility: hidden;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.3s ease,
                padding 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.4s allow-discrete;
    transition-behavior: allow-discrete;
  }

  details[open] .details-content {
    height: auto;
    opacity: 1;
    padding: 0 1.5rem 1.5rem;
    visibility: visible;
    
    @starting-style {
      height: 0px;
      opacity: 0;
      padding: 0 1.5rem 0;
    }
  }

  .details-content h2 {
    font-size: var(--fs-md);
    margin-top: 0;
    font-family: var(--font-serif);
  }

  .details-content h3 {
    font-size: var(--fs-sm);
    margin: 1rem 0 0.3rem;
    color: var(--color-sage-text);
    font-weight: 600;
  }

  .faq-q {
    color: var(--color-sage-text);
  }

  .details-content ul {
    padding-left: 1.2rem;
    margin: 0.5rem 0;
  }

  .details-content li {
    margin-bottom: 0.25rem;
  }

  .details-content hr {
    border: 0;
    border-top: 1px solid oklch(0 0 0 / 0.1);
    margin: 1.5rem 0;
  }
}

/* ── 12. RITUALS LISTS ── */
@layer components {
  .rituali-nav-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
  }

  .rituali-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.4rem;
    border-bottom: 1px solid oklch(from var(--color-sage) l c h / 0.18);
    text-decoration: none;
    color: inherit;
    border-radius: 0.5rem;
    transition: background-color var(--transition-ui);
    position: relative;
  }

  .rituali-nav-item:hover {
    background-color: var(--color-accent-bg);
  }

  .rituali-nav-item:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 2px;
  }

  .rituali-nav-list li:last-child .rituali-nav-item {
    border-bottom: none;
  }

  .rituali-nav-body {
    flex: 1;
  }

  .rituali-nav-title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-sage-text);
  }

  .rituali-nav-desc {
    display: block;
    font-size: var(--fs-xs);
    color: oklch(0.45 0 0);
    margin-top: 0.1rem;
    line-height: 1.4;
  }

  .rituali-nav-cta {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-sage-text);
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity var(--transition-ui);
  }

  .rituali-nav-item:hover .rituali-nav-cta {
    opacity: 1;
  }

  /* Grid of treatments */
  .rituali-section {
    margin: var(--space-m) 0 0;
  }

  .rituali-section-header {
    text-align: center;
    margin-bottom: 1rem;
  }

  .rituali-grid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .ritual-card-link {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  }

  .ritual-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -8px var(--shadow-color);
    background-color: var(--color-accent-bg);
  }

  .ritual-card-link:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
  }

  .ritual-card-link.full-width {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .ritual-card-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--color-accent-bg);
    color: var(--color-sage);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ritual-card-link.full-width .ritual-card-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .ritual-card-title {
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }

  .ritual-card-desc {
    font-size: var(--fs-xs);
    color: oklch(0.45 0 0);
    line-height: 1.4;
    margin: 0;
  }

  .ritual-card-cta {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-sage-text);
    margin-top: auto;
  }

  .ritual-card-link.full-width .ritual-card-cta {
    margin-top: 0;
    margin-left: auto;
    white-space: nowrap;
  }
}

/* ── 13. GALLERY DISPLAY ── */
@layer components {
  .gallery-section {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .gallery-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .gallery-scroll::-webkit-scrollbar {
    display: none;
  }

  .gallery-item {
    flex: 0 0 auto;
    width: 200px;
    border-radius: 1.25rem;
    overflow: hidden;
    scroll-snap-align: start;
    margin: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
  }

  .gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--spring);
  }

  .gallery-item:hover img {
    transform: scale(1.04);
  }

  .gallery-hint {
    text-align: center;
    font-size: var(--fs-xs);
    opacity: 0.45;
    margin: 0.5rem 0 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .gallery-nav {
    display: none;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .gallery-nav { display: flex; }
    .gallery-hint { display: none; }
  }

  .gallery-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
    font-size: var(--fs-base);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.6;
    color: var(--text-primary);
  }

  .gallery-btn:hover {
    opacity: 1;
    background-color: var(--color-sage);
    color: #fff;
  }

  .gallery-btn:disabled {
    opacity: 0.2;
    cursor: default;
  }
}

/* ── 14. ARTISTIC ZEN MAP ── */
@layer components {
  .map-placeholder {
    width: 100%;
    height: 140px;
    border-radius: 1rem;
    margin-top: 0.6rem;
    overflow: hidden;
    border: 1px solid oklch(from var(--color-sage) l c h / 0.4);
    position: relative;
    cursor: pointer;
    background-color: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    min-height: 140px;
  }

  .map-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
    background-image:
      radial-gradient(ellipse 800px 600px at 30% 40%, transparent 0%, transparent 48%, oklch(from var(--color-sage) l c h / 0.08) 48%, oklch(from var(--color-sage) l c h / 0.08) 49%, transparent 49%),
      radial-gradient(ellipse 700px 550px at 30% 40%, transparent 0%, transparent 48%, oklch(from var(--color-sage) l c h / 0.06) 48%, oklch(from var(--color-sage) l c h / 0.06) 49%, transparent 49%),
      radial-gradient(ellipse 600px 500px at 30% 40%, transparent 0%, transparent 48%, oklch(from var(--color-sage) l c h / 0.09) 48%, oklch(from var(--color-sage) l c h / 0.09) 49%, transparent 49%),
      radial-gradient(ellipse 500px 450px at 30% 40%, transparent 0%, transparent 48%, oklch(from var(--color-sage) l c h / 0.07) 48%, oklch(from var(--color-sage) l c h / 0.07) 49%, transparent 49%);
  }

  .map-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.85;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 48px, oklch(from var(--color-sage) l c h / 0.04) 48px, oklch(from var(--color-sage) l c h / 0.04) 50px, transparent 50px, transparent 98px, oklch(from var(--color-sage) l c h / 0.05) 98px, oklch(from var(--color-sage) l c h / 0.05) 100px);
    will-change: transform, opacity;
    animation: chronos-breathe 8s ease-in-out infinite;
  }

  @keyframes chronos-breathe {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; }
    50% { transform: scale(1.02) translateY(-3px); opacity: 0.95; }
  }

  @keyframes chronos-breathe-mobile {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.80; }
    50% { transform: scale(1.06) translateY(-6px); opacity: 1; }
  }

  .map-placeholder:hover {
    border-color: var(--color-sage);
    box-shadow: 0 8px 20px oklch(from var(--color-sage) l c h / 0.2);
  }

  .map-label {
    position: relative;
    z-index: 10;
    background: oklch(1 0 0);
    color: oklch(0.24 0.04 120);
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 20px oklch(0 0 0 / 0.2);
    border: 2px solid oklch(1 0 0);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring), border-color 0.3s var(--spring);
  }

  .map-label i {
    color: var(--color-sage);
    font-size: var(--fs-base);
    transition: transform 0.3s ease;
  }

  .map-placeholder:hover .map-label {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px oklch(0 0 0 / 0.25);
    border-color: var(--color-sage);
  }

  .map-placeholder:hover .map-label i {
    color: oklch(0.24 0.04 120);
    transform: rotate(45deg);
  }

  @media (max-width: 768px) {
    .map-placeholder::after {
      animation-name: chronos-breathe-mobile;
    }
  }
}

/* ── 15. WHATSAPP FLOATING BUTTON ── */
@layer components {
  .wa-float {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 50px;
    height: 50px;
    background-color: oklch(0.69 0.19 142); /* WA Brand Green in OKLCH */
    color: oklch(1 0 0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px var(--color-wall-dark);
    z-index: 100;
    text-decoration: none;
    transition: var(--transition-ui);
    animation: wa-pulse 2s infinite;
  }

  /* Landing 2.0: nascosto mentre l'hero (che ha già una CTA WhatsApp propria) è in vista */
  .wa-float.is-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    animation: none;
  }

  .wa-float:hover {
    transform: scale(1.1);
  }

  .wa-float:focus-visible {
    outline: 3px solid oklch(1 0 0);
    outline-offset: 3px;
  }

  @keyframes wa-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
}

/* ── 16. NEWSLETTER PANEL ── */
@layer components {
  .newsletter-strip {
    margin: var(--space-m) 0 0;
    padding: 2rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .newsletter-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--blob-1) 0%, transparent 70%);
    opacity: 0.35;
    pointer-events: none;
  }

  .newsletter-strip > * {
    position: relative;
    z-index: 1;
  }

  .newsletter-strip .eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-sage-text);
    display: block;
    margin-bottom: 0.5rem;
  }

  .newsletter-strip h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 400;
    font-style: italic;
    margin: 0 0 0.45rem;
  }

  .newsletter-strip p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .newsletter-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--card-primary-bg);
    color: oklch(1 0 0);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-btn);
    box-shadow: 0 6px 18px oklch(from var(--color-sage) l c h / 0.3);
    transition: transform 0.18s var(--spring), box-shadow 0.18s ease;
  }

  .newsletter-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px oklch(from var(--color-sage) l c h / 0.4);
  }

  .newsletter-cta:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 4px;
  }

  .newsletter-note {
    display: block;
    margin-top: 0.75rem;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    opacity: 0.7;
  }
}

/* ── 17. FOOTER & SOCIALS ── */
@layer components {
  footer {
    margin-top: var(--space-m);
    opacity: 0.8;
    text-align: center;
    font-size: var(--fs-xs);
    padding-bottom: 2rem;
    width: 100%;
  }

  .social-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: var(--fs-xl);
  }

  .social-link {
    transition: transform 0.2s ease;
    color: var(--text-secondary);
  }

  .social-link.mail { color: var(--color-sage-text); }
  .social-link.ig   { color: oklch(0.55 0.18 340); } /* Instagram Pink */
  .social-link.fb   { color: oklch(0.55 0.14 250); } /* Facebook Blue */
  .social-link.tt   { color: var(--text-primary); }

  .social-link:hover {
    transform: scale(1.15);
  }

  .social-link:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 4px;
    border-radius: 4px;
  }
}

/* ── 18. SHIMMER & RIPPLE ACTIONS ── */
@layer utilities {
  .shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.3), transparent);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
    pointer-events: none;
  }

  .ripple {
    position: absolute;
    border-radius: 50%;
    background: oklch(1 0 0 / 0.3);
    pointer-events: none;
    animation: ripple-out 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    transform-origin: center;
  }

  @keyframes shimmer {
    100% { transform: translateX(100%); }
  }

  @keyframes ripple-out {
    from { transform: scale(0); opacity: 0.5; }
    to { transform: scale(1); opacity: 0; }
  }
}

/* ── 19. ABOUT SECTION (CHI SIAMO) ── */
@layer components {
  .chi-siamo-section {
    width: 100%;
    padding: 2rem 0 0.5rem;
    border-top: 1px solid oklch(from var(--color-sage) l c h / 0.2);
  }

  .section-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-sage);
    margin: 0 0 0.4rem;
    display: block;
  }

  .section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--text-primary);
    margin: 0 0 1.4rem;
    font-weight: 400;
  }

  .chi-siamo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .chi-siamo-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .chi-siamo-foto {
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    object-position: center 38%;
    display: block;
    max-height: 220px;
  }

  .chi-siamo-foto-placeholder {
    width: 100%;
    height: 160px;
    border-radius: 1rem;
    background: var(--color-accent-bg);
    border: 1px dashed oklch(from var(--color-sage) l c h / 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chi-siamo-placeholder-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-sage-text);
    opacity: 0.75;
  }

  .chi-siamo-testo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .chi-siamo-testo p {
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
  }

  .chi-siamo-testo strong {
    color: var(--text-primary);
  }

  .chi-siamo-payoff {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--color-sage-text);
    text-align: right;
    margin: 0;
    opacity: 0.9;
  }

  .tag {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.22rem 0.55rem;
    background: var(--color-accent-bg);
    color: var(--color-sage);
    border-radius: 1rem;
    border: 1px solid oklch(from var(--color-sage) l c h / 0.25);
  }

  .chi-siamo-note {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 1.25rem 0 0;
    padding: 0 0.25rem;
    text-align: center;
  }
}

/* ── 20. BLOG MODULE ── */
@layer components {
  .blog-section {
    width: 100%;
    padding: 2rem 0 0.5rem;
    border-top: 1px solid oklch(from var(--color-sage) l c h / 0.2);
  }

  .blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .blog-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: default;
    text-decoration: none;
    color: inherit;
  }

  .blog-card:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
  }

  .blog-card-accent {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .blog-card-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation: accent-slide 4s linear infinite;
    will-change: transform;
  }

  .kobido-accent::before {
    background: linear-gradient(90deg, oklch(0.68 0.12 75), oklch(0.79 0.11 85), oklch(0.68 0.12 75), oklch(0.79 0.11 85), oklch(0.68 0.12 75));
  }

  .scrub-accent::before {
    background: linear-gradient(90deg, oklch(0.38 0.12 45), oklch(0.55 0.15 45), oklch(0.63 0.17 45), oklch(0.55 0.15 45), oklch(0.38 0.12 45));
  }

  .ayurveda-accent::before {
    background: linear-gradient(90deg, oklch(0.48 0.11 115), oklch(0.66 0.02 145), oklch(0.72 0.15 85), oklch(0.66 0.02 145), oklch(0.48 0.11 115));
  }

  .cloudskin-accent::before {
    background: linear-gradient(90deg, oklch(0.72 0.06 255), oklch(0.85 0.03 250), oklch(0.72 0.06 255), oklch(0.85 0.03 250), oklch(0.72 0.06 255));
  }

  .mannequinskin-accent::before {
    background: linear-gradient(90deg, oklch(0.82 0.05 85), oklch(0.93 0.02 90), oklch(0.82 0.05 85), oklch(0.93 0.02 90), oklch(0.82 0.05 85));
  }

  .vascolare-accent::before {
    background: linear-gradient(90deg, oklch(0.55 0.16 25), oklch(0.65 0.14 30), oklch(0.55 0.16 25), oklch(0.65 0.14 30), oklch(0.55 0.16 25));
  }

  .decontratturante-accent::before {
    background: linear-gradient(90deg, oklch(0.50 0.09 55), oklch(0.62 0.10 60), oklch(0.50 0.09 55), oklch(0.62 0.10 60), oklch(0.50 0.09 55));
  }

  @keyframes accent-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .blog-card-body {
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .blog-tag {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-sage-text);
  }

  .blog-card-title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-style: italic;
    margin: 0;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.35;
  }

  .blog-card-excerpt {
    font-size: var(--fs-sm);
    line-height: 1.72;
    color: var(--text-secondary);
    margin: 0;
  }

  .blog-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-sage-text);
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid oklch(from var(--color-sage) l c h / 0.15);
    transition: gap 0.2s ease;
  }

  .blog-card:hover .blog-card-cta {
    gap: 0.7rem;
  }

  .blog-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .blog-badge-soon {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.55rem;
    background: var(--color-accent-bg);
    color: var(--color-sage);
    border-radius: 1rem;
    border: 1px solid oklch(from var(--color-sage) l c h / 0.3);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .blog-badge-live {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.55rem;
    background: var(--color-sage);
    color: oklch(1 0 0);
    border-radius: 1rem;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
  }

  a.blog-card {
    cursor: pointer;
  }
}

/* ── 21. PERCORSI SU MISURA ── */
@layer components {
  .percorsi-section {
    margin: var(--space-m) 0 0;
  }

  .percorsi-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .percorso-card {
    padding: 1.1rem 1.2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .percorso-tag {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-sage-text);
    display: block;
    margin-bottom: 0.4rem;
  }

  .percorso-title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
  }

  .percorso-desc {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.65rem;
  }

  .percorso-rituali {
    font-size: var(--fs-xs);
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.7rem;
    background: var(--color-accent-bg);
    border-radius: 0.5rem;
  }

  .percorso-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-sage-text);
    text-decoration: none;
    transition: gap 0.15s ease;
  }

  .percorso-cta:hover {
    gap: 0.65rem;
  }

  .percorso-cta:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .percorso-card--custom {
    background: var(--card-primary-bg);
    border-color: transparent;
    text-align: center;
    align-items: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    cursor: pointer;
  }

  .percorso-card--custom:hover {
    opacity: 0.92;
  }

  .percorso-card--custom:focus-visible {
    outline: 2px solid oklch(1 0 0);
    outline-offset: 3px;
    border-radius: var(--radius-card);
  }

  .percorso-card--faro {
    border: 1.5px solid var(--color-sage);
    background: var(--color-accent-bg);
  }

  .percorso-faro-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-sage-text);
    display: block;
    margin-bottom: 0.4rem;
  }

  .percorso-faro-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-sage-text);
  }

  .percorso-faro-flow .chip {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
  }

  .percorso-faro-flow .arrow {
    opacity: 0.5;
  }

  .percorso-cta--btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    background: var(--card-primary-bg);
    color: oklch(1 0 0);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .percorso-cta--btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
  }

  .percorso-cta--btn:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 3px;
  }

  .percorsi-nota {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.9rem;
    font-style: italic;
  }
}

/* ── 22. E-E-A-T CERTIFICATIONS PANEL ── */
@layer components {
  .eetrust-block {
    margin-top: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--color-accent-bg);
    border-radius: var(--radius-card);
    border: 1px solid var(--glass-border);
  }

  .eetrust-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-sage-text);
    margin: 0 0 0.55rem;
  }

  .eetrust-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
  }

  .eetrust-list li {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 1.25rem;
    position: relative;
  }

  .eetrust-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-sage-text);
    font-weight: 700;
    font-size: var(--fs-xs);
    top: 0.1em;
  }
}

/* ── 23. QUICK BOXES (ANSWER-FIRST) ── */
@layer components {
  .info-box {
    margin: 0;
    padding: 1.4rem 1.5rem;
    background: var(--color-accent-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
  }

  .info-box > strong {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.7rem;
  }

  .info-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .info-box li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: var(--fs-sm);
    font-weight: 300;
    line-height: 1.55;
    color: var(--text-secondary);
    padding: 0.42rem 0;
    border-top: 1px solid var(--glass-border);
  }

  .info-box li:first-child {
    border-top: none;
  }

  .info-box li i {
    color: var(--color-sage-text);
    font-size: var(--fs-base);
    margin-top: 0.2rem;
    width: 1rem;
    text-align: center;
    flex: none;
  }

  .info-box li strong {
    color: var(--text-primary);
    font-weight: 600;
  }
}

/* ── 24. GENERIC LAYOUT UTILITIES ── */
@layer utilities {
  .font-serif { font-family: var(--font-serif); }
  .text-center { text-align: center; }
  .text-sm { font-size: var(--fs-sm); }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ── 25. VIEW TRANSITIONS CUSTOM ANIMATION SPEC ── */
@layer base {
  @view-transition {
    navigation: auto;
  }

  /* Disable cross-fade to let Web Animations API handle the circular clip transition */
  ::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
}

/* ── 26. INLINE SVG ICON MASKS ── */
@layer components {
  .fas, .fab {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .fa-arrow-right    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"); }
  .fa-book-open      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V83.8c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 34.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V83.8c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 34.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/svg%3E"); }
  .fa-calendar-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm324.9 92.1L220.9 398.1l-45.4-45.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l68.3 68.3c6 6 14.1 9.4 22.6 9.4s16.6-3.4 22.6-9.4l128.2-128.3c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm324.9 92.1L220.9 398.1l-45.4-45.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l68.3 68.3c6 6 14.1 9.4 22.6 9.4s16.6-3.4 22.6-9.4l128.2-128.3c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E"); }
  .fa-check          { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); }
  .fa-chevron-down   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E"); }
  .fa-chevron-right  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E"); }
  .fa-copy           { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E"); }
  .fa-envelope       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E"); }
  .fa-location-arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M444.52 3.52L28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-39.19-16.79-71.97-63.97-63.97z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M444.52 3.52L28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-39.19-16.79-71.97-63.97-63.97z'/%3E%3C/svg%3E"); }
  .fa-map            { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M565.6 36.2C572.1 40.7 576 48.1 576 56V456c0 9.7-5.8 18.5-14.8 22.4l-176 80c-5.5 2.5-11.8 2.6-17.4 .3L192 407.5 32.4 478.3c-5.3 2.4-11.4 2.2-16.6-.6S0 469.7 0 464V64c0-9.7 5.8-18.5 14.8-22.4l176-80c5.5-2.5 11.8-2.6 17.4-.3L384 104.5 543.6 33.7c5.3-2.4 11.4-2.2 16.6 .6zM384 152.7L192 72.7V359.3L384 439.3V152.7zm48 0V439.3l96-43.6V109.1l-96 43.6zM144 72.7L48 115.1V402.5l96-43.6V72.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M565.6 36.2C572.1 40.7 576 48.1 576 56V456c0 9.7-5.8 18.5-14.8 22.4l-176 80c-5.5 2.5-11.8 2.6-17.4 .3L192 407.5 32.4 478.3c-5.3 2.4-11.4 2.2-16.6-.6S0 469.7 0 464V64c0-9.7 5.8-18.5 14.8-22.4l176-80c5.5-2.5 11.8-2.6 17.4-.3L384 104.5 543.6 33.7c5.3-2.4 11.4-2.2 16.6 .6zM384 152.7L192 72.7V359.3L384 439.3V152.7zm48 0V439.3l96-43.6V109.1l-96 43.6zM144 72.7L48 115.1V402.5l96-43.6V72.7z'/%3E%3C/svg%3E"); }
  .fa-map-marker-alt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E"); }
  .fa-moon           { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.2c-6.3-.3-12.6-.4-19-.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.2c-6.3-.3-12.6-.4-19-.4z'/%3E%3C/svg%3E"); }
  .fa-phone-alt      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E"); }
  .fa-umbrella       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 0C159.6 0 59.4 89.8 37.5 208c54.2-42.5 131.5-64 250.5-64s196.3 21.5 250.5 64C516.6 89.8 416.4 0 288 0zm0 176c-128.4 0-218.3 28.4-258.3 80.6C16.3 278.5 16 302 16 304c0 8.8 7.2 16 16 16h88v16c0 44.2 35.8 80 80 80 8.8 0 16 7.2 16 16v16c0 8.8 7.2 16 16 16h112c8.8 0 16-7.2 16-16v-16c0-8.8 7.2-16 16-16 44.2 0 80-35.8 80-80v-16h88c8.8 0 16-7.2 16-16 0-2-.3-25.5-13.7-47.4C506.3 204.4 416.4 176 288 176z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 0C159.6 0 59.4 89.8 37.5 208c54.2-42.5 131.5-64 250.5-64s196.3 21.5 250.5 64C516.6 89.8 416.4 0 288 0zm0 176c-128.4 0-218.3 28.4-258.3 80.6C16.3 278.5 16 302 16 304c0 8.8 7.2 16 16 16h88v16c0 44.2 35.8 80 80 80 8.8 0 16 7.2 16 16v16c0 8.8 7.2 16 16 16h112c8.8 0 16-7.2 16-16v-16c0-8.8 7.2-16 16-16 44.2 0 80-35.8 80-80v-16h88c8.8 0 16-7.2 16-16 0-2-.3-25.5-13.7-47.4C506.3 204.4 416.4 176 288 176z'/%3E%3C/svg%3E"); }
  .fa-whatsapp       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); }
  .fa-spa            { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M183.1 235.3c33.7 20.7 62.9 48.1 85.8 80.5c7 9.9 13.4 20.3 19.1 31c5.7-10.8 12.1-21.1 19.1-31c22.9-32.4 52.1-59.8 85.8-80.5C437.6 207.8 490.1 192 546 192h9.9c11.1 0 20.1 9 20.1 20.1C576 360.1 456.1 480 308.1 480H288 267.9C119.9 480 0 360.1 0 212.1C0 201 9 192 20.1 192H30c55.9 0 108.4 15.8 153.1 43.3zM301.5 37.6c15.7 16.9 61.1 71.8 84.4 164.6c-38 21.6-71.4 50.8-97.9 85.6c-26.5-34.8-59.9-63.9-97.9-85.6c23.2-92.8 68.6-147.7 84.4-164.6C278 33.9 282.9 32 288 32s10 1.9 13.5 5.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M183.1 235.3c33.7 20.7 62.9 48.1 85.8 80.5c7 9.9 13.4 20.3 19.1 31c5.7-10.8 12.1-21.1 19.1-31c22.9-32.4 52.1-59.8 85.8-80.5C437.6 207.8 490.1 192 546 192h9.9c11.1 0 20.1 9 20.1 20.1C576 360.1 456.1 480 308.1 480H288 267.9C119.9 480 0 360.1 0 212.1C0 201 9 192 20.1 192H30c55.9 0 108.4 15.8 153.1 43.3zM301.5 37.6c15.7 16.9 61.1 71.8 84.4 164.6c-38 21.6-71.4 50.8-97.9 85.6c-26.5-34.8-59.9-63.9-97.9-85.6c23.2-92.8 68.6-147.7 84.4-164.6C278 33.9 282.9 32 288 32s10 1.9 13.5 5.6z'/%3E%3C/svg%3E"); }
  .fa-star           { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E"); }
  .fa-comments       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/svg%3E"); }
  .fa-wand-magic-sparkles { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E"); }
}

/* ══════════════════════════════════════════════════════════════════════
   LANDING 2.0 — hero immersivo, nav sticky, bande editoriali (piano
   2026-07-04-landing-2-0-ui-ux-immersiva.md). Solo aggiunte: nessuna
   regola sopra è stata toccata; index-2026.html/index.html restano
   invariati nell'aspetto.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 27. STICKY NAV ── */
@layer components {
  :root {
    --nav-h: 4rem;
  }

  .site-nav {
    position: sticky;
    top: 0;
    z-index: 500;
    width: 100%;
    height: var(--nav-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-auto-flow: dense;
    align-items: center;
    gap: var(--space-s);
    padding: 0 var(--space-m);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    transition: height var(--transition-ui), background-color var(--transition-theme), border-color var(--transition-theme);
  }

  .site-nav.is-scrolled {
    height: calc(var(--nav-h) - 0.65rem);
    box-shadow: 0 8px 24px -14px var(--shadow-color);
  }

  /* Logotipo sempre centrato in nav — il nome del brand va letto in ogni schermata */
  .site-nav-logo {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    text-decoration: none;
  }

  .site-nav-logo img {
    height: 32px;
    width: auto;
    display: block;
  }

  .site-nav-links {
    grid-column: 1;
    justify-self: start;
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-m);
    align-items: center;
  }

  .site-nav-links a {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.82;
    transition: opacity 0.2s, color var(--transition-theme);
  }

  .site-nav-links a:hover,
  .site-nav-links a:focus-visible {
    opacity: 1;
    color: var(--color-sage-text);
  }

  .site-nav-cta {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--card-primary-bg);
    color: oklch(1 0 0) !important;
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.6rem 1.05rem;
    border-radius: var(--radius-btn);
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px oklch(from var(--card-primary-bg) l c h / 0.4);
    transition: transform 0.2s var(--spring);
    flex-shrink: 0;
  }

  .site-nav-cta:active {
    transform: scale(0.96);
  }

  .site-nav-toggle {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
  }

  .site-nav-drawer {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--bg-page);
    border-bottom: 1px solid var(--glass-border);
    padding: var(--space-s) var(--space-m) var(--space-m);
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 499;
    box-shadow: 0 16px 32px -16px var(--shadow-color);
  }

  .site-nav-drawer.is-open {
    display: flex;
  }

  .site-nav-drawer a {
    padding: 0.75rem 0.25rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    border-bottom: 1px solid oklch(from var(--color-sage) l c h / 0.12);
  }

  @media (min-width: 860px) {
    .site-nav-links {
      display: flex;
      justify-content: flex-end;
    }
    .site-nav-toggle {
      display: none;
    }
  }
}

/* ── 28. HERO IMMERSIVO ── */
@layer components {
  .hero-immersive {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    min-height: calc(100svh - var(--nav-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    color: oklch(0.99 0 0);
    isolation: isolate;
  }

  .hero-immersive-media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .hero-immersive-media img,
  .hero-immersive-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-immersive-media video {
    display: none;
    position: absolute;
    inset: 0;
  }

  .hero-immersive-media.hero-video-active video {
    display: block;
  }

  .hero-immersive-media.hero-video-active img {
    visibility: hidden;
  }

  .hero-immersive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to top,
      oklch(from var(--card-primary-bg) l c h / 0.9) 0%,
      oklch(from var(--card-primary-bg) l c h / 0.4) 45%,
      oklch(from var(--card-primary-bg) l c h / 0.18) 68%,
      oklch(from var(--card-primary-bg) l c h / 0.5) 100%
    );
    transition: background var(--transition-theme);
  }

  .hero-immersive-content {
    position: relative;
    width: 100%;
    max-width: var(--container-width-desktop);
    padding: var(--space-l) var(--space-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
  }

  .hero-immersive-top {
    position: absolute;
    top: var(--space-m);
    left: 0;
    right: 0;
    z-index: 1;
    padding-inline: var(--space-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }

  .hero-immersive-logo img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    filter: drop-shadow(0 2px 10px oklch(0 0 0 / 0.35));
  }

  .hero-immersive-logotipo img {
    height: clamp(28px, 22px + 1.5vw, 38px);
    width: auto;
    filter: drop-shadow(0 2px 8px oklch(0 0 0 / 0.3));
    margin: 0.3rem 0 0.1rem;
  }

  /* Mobile: logo spostato sotto "Benvenuta", logotipo nascosto. Desktop: invariato (logo+logotipo restano nel blocco contenuto) */
  .hero-logo-top {
    margin-top: 0.35rem;
  }

  .hero-logo-content,
  .hero-logotipo-content {
    display: none;
  }

  @media (min-width: 860px) {
    .hero-logo-top {
      display: none;
    }

    .hero-logo-content,
    .hero-logotipo-content {
      display: block;
    }
  }

  .hero-immersive .status-badge,
  .hero-immersive .trust-badge {
    background: oklch(1 0 0 / 0.14);
    border-color: oklch(1 0 0 / 0.28);
    color: oklch(0.99 0 0);
  }

  .hero-immersive .trust-badge-score {
    color: oklch(0.99 0 0);
  }

  .hero-immersive .trust-badge-stars {
    color: oklch(0.84 0.12 85);
  }

  .hero-immersive-payoff {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(2rem, 1.55rem + 2.5vw, 3.2rem);
    line-height: 1.1;
    margin: var(--space-xs) 0 0;
  }

  @media (max-width: 859px) {
    .hero-immersive-payoff {
      font-size: clamp(1.5rem, 1.15rem + 2vw, 2.4rem);
    }
  }

  .hero-immersive-h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 500;
    max-width: 32ch;
    opacity: 0.92;
    margin: 0;
  }

  .hero-immersive-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--space-s);
  }

  .hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: oklch(0.99 0 0);
    color: var(--card-primary-bg) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-btn);
    box-shadow: 0 10px 24px -8px oklch(0 0 0 / 0.35);
    transition: transform 0.2s var(--spring);
  }

  .hero-cta-primary:active {
    transform: scale(0.97);
  }

  .hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: oklch(1 0 0 / 0.12);
    border: 1px solid oklch(1 0 0 / 0.4);
    color: oklch(0.99 0 0) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-sm);
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-btn);
    backdrop-filter: blur(8px);
    transition: background-color 0.2s;
  }

  .hero-immersive .status-badge {
    margin: 0;
  }

  .hero-cta-secondary:hover {
    background: oklch(1 0 0 / 0.24);
  }
}

/* ── 29. BANDE EDITORIALI ── */
@layer components {
  .band {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
    padding: var(--space-l) 0;
  }

  .band-media img {
    width: 100%;
    border-radius: var(--radius-card);
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
  }

  .band-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
  }

  .band-text p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--fs-sm);
  }

  @media (min-width: 700px) {
    .band {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: var(--space-l);
    }
    .band--reverse .band-media {
      order: 2;
    }
    .band--reverse .band-text {
      order: 1;
    }
    .band-media img {
      aspect-ratio: 5 / 4;
    }
  }
}

/* ── 30. RITUAL CARD FOTOGRAFICA ── */
@layer components {
  .ritual-card--photo {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
  }

  .ritual-card--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--spring);
    z-index: -2;
  }

  .ritual-card--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, oklch(0.15 0.01 145 / 0.85) 0%, oklch(0.15 0.01 145 / 0.2) 55%, transparent 78%);
  }

  .ritual-card--photo:hover img,
  .ritual-card--photo:focus-visible img {
    transform: scale(1.06);
  }

  @media (prefers-reduced-motion: reduce) {
    .ritual-card--photo img {
      transition: none;
    }
  }

  .ritual-card--photo-body {
    position: relative;
    padding: var(--space-s);
    color: oklch(0.99 0 0);
    width: 100%;
  }

  .ritual-card--photo-title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    margin: 0 0 0.2rem;
  }

  .ritual-card--photo-desc {
    font-size: var(--fs-xs);
    opacity: 0.85;
    margin: 0 0 0.4rem;
    line-height: 1.35;
  }

  .ritual-card--photo-cta {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.95;
  }

  .rituali-grid-photo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  @media (min-width: 860px) {
    .rituali-grid-photo {
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
  }
}

/* ── 31. QUOTE BAND ── */
@layer components {
  .quote-band {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background: var(--card-primary-bg);
    color: oklch(0.99 0 0);
    padding: var(--space-l) var(--space-m);
    text-align: center;
    transition: background-color var(--transition-theme);
  }

  .quote-band p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 1.2rem + 2vw, 2.4rem);
    max-width: 22ch;
    margin: 0 auto;
    line-height: 1.25;
  }
}

/* ── 32. REVIEWS STRIP ── */
@layer components {
  .reviews-strip {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-m) 0;
  }

  .reviews-strip-header {
    text-align: center;
  }

  .reviews-marquee {
    display: flex;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }

  .reviews-marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    gap: var(--space-s);
    padding-inline: calc(var(--space-s) / 2);
    animation: reviews-marquee-scroll 48s linear infinite;
  }

  .reviews-marquee:hover .reviews-marquee-track {
    animation-play-state: paused;
  }

  @keyframes reviews-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .reviews-marquee-track {
      animation: none;
    }
    .reviews-marquee-track[aria-hidden="true"] {
      display: none;
    }
  }

  .review-card {
    flex: 0 0 auto;
    width: min(78vw, 320px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: var(--space-s);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .review-card-stars {
    color: oklch(0.74 0.12 85);
    font-size: var(--fs-sm);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 0.4rem;
  }

  .review-card p {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
  }

  .review-card cite {
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 600;
    color: var(--text-primary);
  }

}

/* ── 33. SCROLL REVEAL (colma un gap: .reveal era referenziata in
   index-2026.html/js ma priva di stile — nessun elemento esistente
   cambia aspetto, oggi è un no-op) ── */
@layer components {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal--delay-1.visible {
    transition-delay: 0.08s;
  }

  .reveal--delay-2.visible {
    transition-delay: 0.16s;
  }

  .reveal--delay-3.visible {
    transition-delay: 0.24s;
  }

  .reveal--delay-4.visible {
    transition-delay: 0.32s;
  }

  .reveal--delay-5.visible {
    transition-delay: 0.4s;
  }

  .reveal--delay-6.visible {
    transition-delay: 0.48s;
  }

  .reveal--delay-7.visible {
    transition-delay: 0.56s;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}

/* ── 34. LARGHEZZA DESKTOP — respiro maggiore per la 2.0 ──
   Nota: .main-container non può interrogare la propria container-query
   (sarebbe circolare, essendo lei stessa il container "main-wrapper") —
   qui serve @media, non @container. */
@layer components {
  @media (min-width: 860px) {
    .main-container {
      max-width: 1100px;
    }
  }
}

/* ── 35. BOOKING 2.0 — WIZARD, STEPPER, RIEPILOGO, CALENDARIO ── */
@layer components {
  /* Hero compatta booking: variante ridotta di .hero-immersive, stesso overlay tema solare */
  .hero-immersive--compact {
    min-height: clamp(280px, 38svh, 420px);
  }

  /* Layout a due colonne: wizard + riepilogo sticky laterale (desktop) */
  .booking-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  @media (min-width: 960px) {
    .booking-shell {
      grid-template-columns: minmax(0, 1fr) 340px;
    }
  }

  /* Stepper etichettato */
  .booking-stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0 0 var(--space-m);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .booking-stepper::-webkit-scrollbar {
    display: none;
  }

  .booking-stepper-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    opacity: 0.6;
  }

  .booking-stepper-item::after {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--glass-border);
    margin: 0 0.25rem;
  }

  .booking-stepper-item:last-child::after {
    display: none;
  }

  .booking-stepper-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    font-weight: 700;
    font-size: var(--fs-xs);
    flex-shrink: 0;
  }

  .booking-stepper-item.is-done {
    opacity: 1;
  }

  .booking-stepper-item.is-done .booking-stepper-dot {
    background: var(--color-sage);
    border-color: var(--color-sage);
    color: oklch(0.99 0 0);
  }

  .booking-stepper-item.is-current {
    opacity: 1;
    font-weight: 700;
    color: var(--text-primary);
  }

  .booking-stepper-item.is-current .booking-stepper-dot {
    background: var(--card-primary-bg);
    border-color: var(--card-primary-bg);
    color: oklch(0.99 0 0);
  }

  .booking-stepper-item.is-clickable {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
  }

  .booking-stepper-label {
    white-space: nowrap;
  }

  @media (max-width: 599px) {
    .booking-stepper-label {
      display: none;
    }
    .booking-stepper-item.is-current .booking-stepper-label {
      display: inline;
    }
  }

  /* Riepilogo: pannello sticky desktop / barra bottom mobile */
  .booking-summary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: var(--space-m);
    display: none;
    flex-direction: column;
    gap: var(--space-s);
  }

  .booking-summary.is-active {
    display: flex;
  }

  @media (min-width: 960px) {
    .booking-summary.is-active {
      position: sticky;
      top: calc(var(--nav-h) + var(--space-m));
    }
  }

  .booking-summary-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--radius-card) - 0.5rem);
    display: block;
  }

  .booking-summary-title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    margin: 0;
  }

  .booking-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    gap: var(--space-s);
  }

  .booking-summary-edit {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-sage-text);
    text-decoration: underline;
    cursor: pointer;
  }

  /* Barra bottom compatta (mobile) */
  .booking-summary-bar {
    display: none;
  }

  .booking-summary-bar.is-active {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--glass-border);
  }

  .booking-summary-bar-text {
    font-size: var(--fs-xs);
    line-height: 1.3;
  }

  .booking-summary-bar-text strong {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
  }

  @media (min-width: 960px) {
    .booking-summary-bar {
      display: none !important;
    }
  }

  /* Card operatrice */
  .op-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    text-align: left;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
  }

  .op-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .op-card-body {
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .op-card-name {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    margin: 0;
  }

  .op-card-role {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
  }

  .op-card.is-recommended {
    border-color: var(--color-sage);
    box-shadow: 0 0 0 2px oklch(from var(--color-sage) l c h / 0.25);
  }

  .op-card.is-recommended .op-card-body::before {
    content: "Prima disponibile";
    align-self: flex-start;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-sage-text);
    background: var(--color-accent-bg);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-btn);
    margin-bottom: 0.3rem;
  }

  /* Card preferenze del Rituale ("Come possiamo accoglierti meglio") */
  .pref-card {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: var(--space-m);
    background: var(--glass-bg);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .pref-card-title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    margin: 0;
  }

  .pref-card-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-sm);
  }

  /* Calendario premium: 3 stati leggibili + skeleton */
  .calendar-premium {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: var(--space-m);
  }

  .calendar-premium-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
    margin-top: var(--space-s);
  }

  .calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--fs-sm);
    border: none;
    background: none;
    font-family: inherit;
    color: var(--text-primary);
  }

  .calendar-day.is-available {
    background: var(--color-accent-bg);
    color: var(--color-sage-text);
    font-weight: 600;
    cursor: pointer;
  }

  .calendar-day.is-full {
    color: var(--text-secondary);
    opacity: 0.45;
    text-decoration: line-through;
  }

  .calendar-day.is-closed {
    color: var(--text-secondary);
    opacity: 0.25;
  }

  .calendar-day.is-selected {
    background: var(--card-primary-bg);
    color: oklch(0.99 0 0);
  }

  .calendar-day.is-skeleton {
    background: linear-gradient(90deg, var(--glass-border) 25%, transparent 37%, var(--glass-border) 63%);
    background-size: 400% 100%;
    animation: calendar-skeleton-shimmer 1.4s ease infinite;
  }

  @keyframes calendar-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar-day.is-skeleton {
      animation: none;
    }
  }

  .calendar-next-available {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--space-s);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-sage-text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
  }

  /* Slot orari: target ≥44px, gruppi Mattina/Pomeriggio */
  .slot-group {
    margin-top: var(--space-m);
  }

  .slot-group-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
  }

  .slot-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .slot-pill {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    border-radius: var(--radius-btn);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    color: var(--text-primary);
  }

  .slot-pill.is-selected {
    background: var(--card-primary-bg);
    border-color: var(--card-primary-bg);
    color: oklch(0.99 0 0);
    font-weight: 600;
  }

  .slot-pill:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  /* Validazione inline per campo */
  .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--space-s);
  }

  .field-group label {
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .field-group input,
  .field-group select,
  .field-group textarea {
    font: inherit;
    font-size: var(--fs-base);
    padding: 0.75rem 0.9rem;
    min-height: 44px;
    border-radius: calc(var(--radius-card) / 2.5);
    border: 1px solid var(--glass-border);
    background: var(--bg-page);
    color: var(--text-primary);
  }

  .field-group.has-error input,
  .field-group.has-error select,
  .field-group.has-error textarea {
    border-color: oklch(0.55 0.18 25);
  }

  .field-error {
    font-size: var(--fs-xs);
    color: oklch(0.45 0.18 25);
    display: none;
  }

  .field-group.has-error .field-error {
    display: block;
  }

  /* Conformità normativa: informativa neutra vs alert (minorenni, note sanitarie) */
  .compliance-notice {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-s);
    padding: var(--space-s);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: calc(var(--radius-card) / 2.5);
  }

  .compliance-notice strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
  }

  .compliance-notice a {
    color: var(--color-sage-text);
  }

  .compliance-alert {
    font-size: var(--fs-xs);
    line-height: 1.6;
    margin-bottom: var(--space-s);
    padding: var(--space-s);
    background: oklch(0.96 0.03 25);
    border: 1px solid oklch(0.85 0.08 25);
    border-radius: calc(var(--radius-card) / 2.5);
    color: oklch(0.4 0.14 25);
  }

  .compliance-alert strong {
    display: block;
    margin-bottom: 0.25rem;
  }

  .compliance-alert .pref-card-option {
    color: oklch(0.4 0.14 25);
  }

  /* Overlay a foglio (pannello "Le mie prenotazioni") */
  .overlay-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: oklch(0 0 0 / 0.4);
    align-items: flex-end;
    justify-content: center;
  }

  .overlay-sheet.is-open {
    display: flex;
  }

  /* Bottone secondario su sfondo pagina (non l'hero) — .hero-cta-secondary è testo bianco, pensata solo sopra la foto scura dell'hero */
  .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-sm);
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s;
  }

  .btn-outline:hover {
    background: var(--color-accent-bg);
  }

  .btn-outline.is-danger {
    color: oklch(0.45 0.18 25);
    border-color: oklch(0.85 0.08 25);
  }

  .overlay-sheet-panel {
    background: var(--bg-page);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding: var(--space-m);
  }
}