/* ── TAN MON CHERI FONT ── */
    @font-face {
      font-family: 'Tan Mon Cheri';
      src: url('fonts/TAN-MON CHERI-Regular.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    }

    /* ── TANGERINE FONT ── */
    @import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&dillay=swap');

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

    :root {
      --orange: #cf6a51;
      --orange-light: #fde8d4;
      --charcoal: #1A1714;
      --cream: #FFF9F5;
      --muted: #6b6560;
      --zen-gold: #ffb465;
      --zen-gold-light: #e8d5b5;
      --malva: #b98fb9;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden; /* blocca scroll orizzontale a livello viewport */
      max-width: 100%;
    }

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      color: var(--charcoal);
      background: var(--cream);
      background-image: radial-gradient(ellipse at top, rgba(201, 169, 97, 0.03) 0%, transparent 50%);
      overflow-x: hidden;
      max-width: 100%;
      position: relative;
    }

    body.no-scroll {
      overflow: hidden;
    }

    /* ── ORIENTAL PATTERNS ── */
    .oriental-pattern {
      position: relative;
    }


    .oriental-pattern::before {
      top: 0;
    }

    .oriental-pattern::after {
      bottom: 0;
    }

    /* ── ZEN SECTION DIVIDER ── */
    .zen-divider {
      position: relative;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--charcoal);
      z-index: 3;
      overflow: hidden;
    }

    /* zen-divider che precede la sezione articoli: sfuma dal charcoal al cream */
    .zen-divider--to-cream {
      height: 80px;
      background: linear-gradient(to bottom, var(--charcoal) 0%, var(--cream) 100%);
    }

    .zen-divider::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 5%;
      width: 38%;
      height: 1px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, transparent 0%, var(--zen-gold) 100%);
      opacity: 0.55;
      overflow: hidden;
    }

    /* linea destra: speculare, cresce da destra verso il centro */
    .zen-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 5%;
      width: 38%;
      height: 1px;
      transform: translateY(-50%);
      background: linear-gradient(270deg, transparent 0%, var(--zen-gold) 100%);
      opacity: 0.55;
    }

    .zen-divider-inner {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 1;
    }

    .zen-divider-petal {
      width: 34px;
      height: 34px;
      display: block;
      animation: divider-spin 20s linear infinite;
      flex-shrink: 0;
    }

    @keyframes divider-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .zen-divider-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--zen-gold);
      opacity: 0.45;
      flex-shrink: 0;
    }

    .zen-divider-dot.lg {
      width: 8px;
      height: 8px;
      opacity: 0.65;
    }

    /* ── SPLASH SCREEN ── */
    #splash {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--charcoal);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity 0.9s ease, transform 0.9s ease;
    }

    #splash.fade-out {
      opacity: 0;
      transform: scale(1.04);
      pointer-events: none;
    }

    /* petali cadenti */
    .splash-petal {
      position: absolute;
      top: -60px;
      pointer-events: none;
      animation: petal-fall linear infinite;
      will-change: transform, opacity;
    }

    @keyframes petal-fall {
      0% {
        transform: translateY(0) rotate(0deg) translateX(0px);
        opacity: 0;
      }

      8% {
        opacity: 1;
      }

      90% {
        opacity: 0.7;
      }

      100% {
        transform: translateY(110vh) rotate(720deg) translateX(60px);
        opacity: 0;
      }
    }

    /* cerchio/mandala decorativo */
    .splash-mandala {
      position: absolute;
      width: 440px;
      height: 440px;
      border-radius: 50%;
      border: 1px solid rgba(201, 169, 97, 0.12);
      animation: mandala-pulse 4s ease-in-out infinite;
    }

    .splash-mandala:nth-child(2) {
      width: 360px;
      height: 360px;
      border-color: rgba(201, 169, 97, 0.18);
      animation-delay: -1s;
    }

    .splash-mandala:nth-child(3) {
      width: 280px;
      height: 280px;
      border-color: rgba(201, 169, 97, 0.25);
      animation-delay: -2s;
    }

    @keyframes mandala-pulse {

      0%,
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
      }

      50% {
        transform: scale(1.04) rotate(3deg);
        opacity: 1;
      }
    }

    .splash-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
    }

    /* fiore centrale animato */
    .splash-flower {
      width: 200px;
      height: auto;
      object-fit: contain;
      animation: flower-bloom 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    

    @keyframes flower-bloom {
      from {
        transform: scale(0) rotate(-90deg);
        opacity: 0;
      }

      to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    .splash-title {
      font-family: 'Tan Mon Cheri', serif;
      font-size: clamp(24px, 5.4vw, 40px);
      color: #FFE085;
      letter-spacing: 4px;
      text-transform: uppercase;
      opacity: 0;
      animation: splash-fadein 0.9s ease 0.7s forwards;
    }

    .splash-title span {
      color: #FFE085;
    }

    .splash-subtitle {
      font-size: 13px;
      color: var(--zen-gold);
      letter-spacing: 2.5px;
      text-transform: uppercase;
      opacity: 0;
      animation: splash-fadein 0.9s ease 1.1s forwards;
    }

    @keyframes splash-fadein {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .splash-tagline {
      font-family: 'Tangerine', cursive;
      font-size: clamp(13px, 2.5vw, 22px);
      color: rgba(255, 255, 255, 0.692);
      letter-spacing: 4px;
      text-transform: lowercase;
      font-style: italic;
      opacity: 0;
      margin-top: -18px;
      animation: splash-fadein 0.9s ease 0.95s forwards;
    }

    /* barra di caricamento */
    .splash-loader-wrap {
      width: 160px;
      height: 2px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
      opacity: 0;
      animation: splash-fadein 0.6s ease 1.4s forwards;
    }

    .splash-loader-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--zen-gold), var(--orange));
      border-radius: 2px;
      transition: width 0.12s linear;
    }

    /* ideogramma decorativo */
    .splash-kanji {
      font-family: 'Noto Serif SC', serif;
      font-size: 72px;
      color: rgba(201, 169, 97, 0.06);
      position: absolute;
      user-select: none;
      pointer-events: none;
      letter-spacing: 20px;
    }

    .splash-kanji.top {
      top: 6%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 48px;
    }

    .splash-kanji.bottom {
      bottom: 6%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 48px;
    }

    .splash-kanji.left {
      left: 4%;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg);
    }

    .splash-kanji.right {
      right: 4%;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
    }


    .zen-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      margin-right: 6px;
      color: black;
      font-size: 24px;
    }

    .corner-ornament {
      position: absolute;
      width: 50px;
      height: 50px;
      opacity: 0.25;
      pointer-events: none;
      z-index: 1;
    }

    .corner-ornament.top-right {
      top: 25px;
      right: 30px;
    }

    .corner-ornament.bottom-left {
      bottom: 25px;
      left: 30px;
    }

    .corner-ornament svg {
      stroke: var(--zen-gold);
      stroke-width: 1.5;
      fill: none;
    }

    /* ── NAVBAR ── */
    .nav {
      background: var(--charcoal);
      padding: 14px 6%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
      border-bottom: 2px solid var(--zen-gold);
    }

    .nav-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    .nav-social {
      display: flex;
      gap: 12px;
    }

    .nav-social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      color: rgba(255, 255, 255, 0.7);
      transition: all 0.25s;
      border-radius: 50%;
      border: 1px solid transparent;
    }

    .nav-social a:hover {
      color: var(--zen-gold);
      border-color: var(--zen-gold);
      background: rgba(201, 169, 97, 0.1);
      transform: translateY(-2px);
    }

    .nav-social svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .nav-title {
      font-family: 'Noto Serif SC', serif;
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: left;
    }

    .nav-title span {
      color: var(--zen-gold);
    }

    .btn-nav {
      background: var(--orange);
      color: #fff;
      border: 2px solid transparent;
      padding: 12px 28px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .25s;
      white-space: nowrap;
    }

    .btn-nav:hover {
      background: var(--malva);
      border-color: var(--zen-gold);
    }

    /* ── LOGO BANNER ── */
    .logo-banner {
      width: 100%;
      background: linear-gradient(135deg, var(--orange-light) 0%, rgba(201, 169, 97, 0.12) 50%, var(--cream) 100%);
      border-bottom: 2px solid var(--zen-gold-light);
      position: relative;
      overflow: visible;          /* era hidden: bloccava l'altezza su mobile */
      display: block;             /* flex causava collasso altezza su alcuni browser mobile */
      line-height: 0;             /* elimina spazio fantasma sotto l'img */
      padding: 0;
    }

    .logo-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--orange), var(--zen-gold), var(--orange), transparent);
      opacity: 0.8;
      z-index: 2;
    }

        .logo-banner::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(242, 113, 33, 0.08) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .logo-banner .img-wrapper {
      width: 100%;
      max-width: 100%;
      position: relative;
      z-index: 1;
      display: block;
      margin: 0;
      padding: 0;
      line-height: 0;
    }

    .logo-banner img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;             /* block rimuove lo spazio inline sotto l'img */
      margin: 0;
      padding: 0;
      border: none;
    }

    .logo-banner .img-placeholder {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--muted);
      background: linear-gradient(135deg, var(--orange-light) 0%, rgba(201, 169, 97, 0.15) 100%);
      border: none;
      border-radius: 0;
      padding: 0;
      text-align: center;
    }
    .logo-banner .img-placeholder svg {
      opacity: 0.4;
      stroke: var(--zen-gold);
    }

    .logo-banner .img-placeholder p {
      font-size: 13px;
      font-weight: 500;
      margin: 0;
    }

    /* ── HAMBURGER ── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 44px;
      height: 44px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 8px;
      margin-left: auto;
    }

    .hamburger-line {
      display: block;
      width: 26px;
      height: 3px;
      background: var(--zen-gold);
      border-radius: 2px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hamburger-line:nth-child(2) {
      margin: 5px 0;
    }

    .hamburger.active .hamburger-line:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .hamburger-line:nth-child(2) {
      opacity: 0;
      transform: translateX(-10px);
    }

    .hamburger.active .hamburger-line:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    /* ── FULLSCREEN OVERLAY MENU ── */
    .nav-overlay {
      position: fixed;
      inset: 0;
      background: linear-gradient(145deg, var(--charcoal) 0%, #25211c 100%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      transform: translateX(100%);
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 40px 20px;
      overflow-y: auto;
    }

    .nav-overlay.active {
      transform: translateX(0);
    }

    .nav-overlay-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 24px;
      width: 100%;
      max-width: 400px;
    }

    .nav-overlay-logo {
      height: 90px;
      width: auto;
      margin-bottom: 8px;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    }

    .nav-overlay-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .nav-title-overlay {
      font-family: 'Noto Serif SC', serif;
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .nav-title-overlay span {
      color: var(--orange);
    }

    .nav-overlay-social {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }

    .nav-overlay-social a {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--zen-gold);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: all 0.3s;
    }

    .nav-overlay-social a:hover {
      background: var(--zen-gold);
      color: var(--charcoal);
      transform: scale(1.05);
    }

    .nav-overlay-social svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }

    .nav-overlay-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .nav-link {
      font-family: 'Noto Serif SC', serif;
      font-size: 22px;
      color: #fff;
      text-decoration: none;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s;
    }

    .nav-link:hover {
      color: var(--orange);
      padding-left: 15px;
    }

    .nav-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      color: var(--zen-gold);
      font-size: 32px;
      cursor: pointer;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s;
      z-index: 10;
    }

    .nav-close:hover {
      transform: rotate(90deg);
      color: #fff;
    }

    .nav-overlay-cta {
      margin-top: 10px;
      width: 100%;
      max-width: 260px;
      padding: 14px;
      font-size: 15px;
    }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg, var(--orange) 40%, var(--malva) 80%);
      padding: 60px 6% 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url('../img/hero-bg.jpg') center/cover no-repeat;
      opacity: 0.15;
      pointer-events: none;
      z-index: -1;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 400px;
      height: 400px;
      border: 30px solid rgba(255, 255, 255, 0.12);
      border-radius: 50%;
      animation: float 20s ease-in-out infinite;
      pointer-events: none;
    }



    .hero-row {
      display: flex;
      align-items: center;
      gap: 50px;
      width: 100%;
    }

    .hero-img-col {
      flex: 0 0 320px;
      max-width: 320px;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .hero-img-frame {
      width: 100%;
      aspect-ratio: 4 / 5;
      border-radius: 24px;
      overflow: hidden;
      border: 4px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      position: relative;
    }

    .hero-img-frame .img-wrapper,
    .hero-img-frame .img-placeholder {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      overflow: hidden;
    }

    .hero-img-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 16px;
    }

    .hero-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: rgba(255, 255, 255, 0.85);
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(201, 169, 97, 0.18) 100%);
      border: 2px dashed rgba(255, 255, 255, 0.4);
      border-radius: 16px;
    }

    .hero-placeholder svg {
      opacity: 0.7;
      stroke: #fff;
    }

    .hero-placeholder p {
      font-size: 13px;
      font-weight: 500;
      margin: 0;
      text-align: center;
    }

    .hero-content {
      flex: 1;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.25);
      color: #fff;
      font-size: 11px;
      padding: 5px 16px;
      border-radius: 24px;
      margin-bottom: 20px;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .hero-content h1 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 700;
      color: #fff;
      line-height: 1.12;
      margin-bottom: 14px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .hero-content .subtitle {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.7;
      margin-bottom: 34px;
      font-weight: 400;
    }

.bio-cards {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .bio-card {
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 14px;
      padding: 18px 20px;
      backdrop-filter: blur(4px);
      transition: transform .25s, border-color .25s;
    }

    .bio-card:hover {
      transform: translateX(4px);
      border-color: var(--zen-gold);
    }

    .bio-card .label {
      font-family: 'Noto Serif SC', serif;
      font-size: 24px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--zen-gold-light);
      margin-bottom: 12px;
      font-weight: 600;
    }

    .bio-card ul {
      list-style: none;
      padding-left: 0;
    }

    .bio-card ul li {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.95);
      padding: 0;
      display: flex;
      align-items: baseline;
      gap: 8px;
      line-height: 1.5;
      
    }

    .bio-card ul li::before {
      content: '•';
      color: var(--zen-gold);
      flex-shrink: 0;
      font-size: 23px;
      line-height: 1.5;
      min-width: 8px;
    }

    .hero-actions {
      margin-top: 32px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    /* ── HERO BIO ROW ── */
    .hero-bio-row {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      width: 100%;
      margin-top: 28px;
    }

    .hero-bio-row .bio-cards {
      flex: 1 1 auto;
      margin-top: 0;
    }

    .hero-carousel,
    #heroCarousel,
    #footerCarousel {
      display: block;
      position: relative;
      width: 100%;
      max-width: 100vw;
      height: 100vh;
      height: 100dvh;          
      min-height: 500px;
      overflow: hidden;
      background: var(--charcoal);
      border-radius: 0 !important;
    }

    #heroCarousel {
      background: linear-gradient(135deg, var(--orange) 40%, var(--malva) 80%);
    }

    #footerCarousel {
      background: linear-gradient(135deg, var(--orange) 0%, var(--malva) 60%, var(--charcoal) 100%);
    }

    #heroCarousel .t-gallery-slide::before {
      display: none;
    }

    #footerCarousel .t-gallery-slide::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(to bottom, var(--charcoal) 0%, transparent 30%);
    }

    #heroCarousel .t-gallery-slide::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.45) 100%);
    }

    #footerCarousel .t-gallery-slide::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to top,    var(--charcoal) 0%, transparent 30%),
        linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.55) 100%);
    }

    .hero-carousel .t-gallery-track {
      display: flex;
      width: 100%;
      height: 100%;
      min-height: inherit;
      transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .hero-carousel .t-gallery-slide {
      min-width: 100%;
      height: 100%;
      min-height: inherit;
      position: relative;
      background: var(--charcoal);
      overflow: hidden;
    }

    .hero-carousel .t-gallery-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center top;
      display: block;
    }

    #heroCarousel .t-gallery-slide img,
    #footerCarousel .t-gallery-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain !important;
      object-position: center top !important;
      display: block;
    }

    .hero-carousel .t-gallery-slide video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: var(--charcoal);
    }

    .hero-carousel .t-gallery-slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.45) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .hero-carousel .t-gallery-slide.is-video::before {
      display: none !important;
    }

    .hero-carousel .t-gallery-nav {
      display: none !important;
    }

    .hero-carousel-dots {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
      align-items: center;
    }

    .hero-carousel-dot {
      position: relative;
      width: 44px;
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.30);
      border: none;
      cursor: pointer;
      padding: 0;
      min-width: unset;
      min-height: unset;
      overflow: hidden;
      transition: background 0.3s;
    }

    .hero-carousel-dot::after {
      display: none;
    }

    .hero-carousel-dot::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--zen-gold);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: none;
    }

    .hero-carousel-dot.active::before {
      transform: scaleX(1);
      transition: transform var(--dot-duration, 5000ms) linear;
    }

    .hero-carousel-dot:hover {
      background: rgba(255, 255, 255, 0.55);
    }

    .btn-white {
      background: #fff;
      color: var(--orange);
      border: none;
      padding: 14px 32px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all .25s;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    }

    .btn-white:hover {
      background: var(--orange-light);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .btn-ghost {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, 0.6);
      padding: 14px 32px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all .25s;
    }

    .btn-ghost:hover {
      border-color: var(--zen-gold);
      background: rgba(201, 169, 97, 0.15);
      color: var(--zen-gold-light);
    }

    /* ── STATS ── */
    .stats {
      background: var(--charcoal);
      padding: 36px 6%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stat {
      text-align: center;
      padding: 10px 36px;
      position: relative;
    }

    .stat .num {
      font-family: 'Noto Serif SC', serif;
      font-size: 34px;
      font-weight: 700;
      color: var(--zen-gold);
    }

    .stat .lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.55);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-top: 3px;
    }

    /* ── TRATTAMENTI (CAROUSEL) ── */
    .treatments {
      background: linear-gradient(135deg, var(--cream) 0%, var(--malva) 35%, var(--orange) 70%, var(--malva) 100%);
      padding: 90px 0;
      position: relative;
    }


    .sec-head {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .sec-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.4);
      color: var(--charcoal);
      font-size: 12px;
      padding: 6px 18px;
      border-radius: 30px;
      margin-bottom: 20px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.5);
      align-self: center;
    }

    .sec-head h2 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(30px, 5vw, 48px);
      font-weight: 700;
      color: var(--charcoal);
      margin-bottom: 18px;
      width: 100%;
    }

    .sec-head h2::before {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: var(--zen-gold);
      margin: 0 auto 18px auto;
      border-radius: 2px;
      opacity: 0.8;
    }

    .sec-head p {
      font-size: 18px;
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .carousel-wrapper {
      position: relative;
      width: 100%;
      padding: 20px 0;
      overflow: hidden;
    }

    .carousel-track {
      display: flex;
      gap: 24px;
      padding: 0 6%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      min-width: 100%;
      align-items: flex-start;
    }

    .carousel-track::-webkit-scrollbar {
      display: none;
    }

    .t-slide {
      flex: 0 0 calc(50% - 12px);
      scroll-snap-align: center;
      width: 100%;
      margin: 0 auto;
    }

    .t-card {
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      overflow: hidden;
      cursor: pointer;
      transition: transform .28s, box-shadow .28s, border-color .28s;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .t-card:hover {
      box-shadow: 0 15px 45px rgba(242, 113, 33, 0.18);
      border-color: var(--zen-gold-light);
    }

    /* GALLERY */
    .t-gallery {
      position: relative;
      width: 100%;
      height: 520px;
      overflow: hidden;
      background: var(--orange-light);
      border-radius: 20px 20px 0 0;
    }

    .t-gallery-track {
      display: flex;
      transition: transform 0.5s ease;
      height: 100%;
    }

    .t-gallery-slide {
      min-width: 100%;
      height: 100%;
      position: relative;
    }

    .t-gallery-slide::after,
    .t-gallery-placeholder::after {
      content: '✦';
      position: absolute;
      bottom: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--zen-gold);
      font-size: 16px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--zen-gold-light);
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 8;
      pointer-events: none;
      transition: transform 0.3s, background 0.3s;
    }

    .t-card:hover .t-gallery-slide::after {
      transform: scale(1.1);
      background: var(--zen-gold);
      color: #fff;
    }

    .t-gallery-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .t-gallery-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--muted);
      background: linear-gradient(135deg, var(--orange-light) 0%, rgba(201, 169, 97, 0.15) 100%);
      border: 2px dashed var(--zen-gold-light);
      position: relative;
    }

    .t-gallery-placeholder svg {
      opacity: 0.4;
      stroke: var(--zen-gold);
    }

    .t-gallery-placeholder p {
      font-size: 13px;
      font-weight: 500;
      margin: 0;
      text-align: center;
      padding: 0 10px;
    }

    .t-gallery-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.95);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      z-index: 10;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .t-gallery-nav:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    .t-gallery-nav.prev {
      left: 10px;
    }

    .t-gallery-nav.next {
      right: 10px;
    }

    .t-gallery-nav svg {
      width: 18px;
      height: 18px;
      stroke: var(--charcoal);
      stroke-width: 2.5;
      fill: none;
    }

    .t-gallery-dots {
      display: none;
      position: absolute;
      bottom: 75px;
      left: 50%;
      transform: translateX(-50%);
      gap: 8px;
      z-index: 10;
    }

    .t-gallery-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      border: 2px solid rgba(255, 255, 255, 0.8);
      cursor: pointer;
      transition: all 0.3s;
      padding: 0;
    }

    .t-gallery-dot.active {
      background: #fff;
      transform: scale(1.2);
    }

    .t-gallery-dot:hover {
      background: rgba(255, 255, 255, 0.9);
    }

    .t-header-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(253, 232, 212, 0.95);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      z-index: 10;
    }

    .t-header-overlay h3 {
      font-family: 'Noto Serif SC', serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--charcoal);
      line-height: 1.3;
      margin: 0;
    }

    .t-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #fff;
      border: 1px solid var(--zen-gold-light);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .t-btn:hover {
      background: var(--zen-gold-light);
    }

    .t-btn.open {
      background: var(--orange);
      border-color: var(--orange);
    }

    .t-btn svg {
      transition: transform .3s;
    }

    .t-btn.open svg {
      transform: rotate(180deg);
    }

    .t-btn.open svg path {
      stroke: #fff;
    }

    .t-body {
      padding: 24px;
      flex-grow: 1;
    }

    .t-teaser {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 0;
    }

    .t-expand {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .t-expand.open {
      max-height: 2000px;
    }

    .t-inner {
      position: relative;
      padding-top: 22px;
      margin-top: 22px;
    }

    .t-inner::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--zen-gold-light) 30%, var(--zen-gold) 50%, var(--zen-gold-light) 70%, transparent 100%);
      opacity: 0.7;
    }

    .t-inner::after {
      content: '✦';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      color: var(--zen-gold);
      background: #fff;
      padding: 0 6px;
      line-height: 1;
      opacity: 0.85;
    }

    .t-inner p {
      font-size: 14.5px;
      color: var(--muted);
      line-height: 1.75;
      margin-bottom: 15px;
    }

    .t-list {
      list-style: none;
    }

    .t-list li {
      font-size: 14px;
      color: var(--muted);
      padding: 6px 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .t-list li::before {
      content: '✦';
      color: var(--orange);
      flex-shrink: 0;
      margin-top: 3px;
      font-size: 10px;
    }

    .t-price {
      display: inline-block;
      background: var(--orange);
      color: #fff;
      font-size: 14.5px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 24px;
      margin-top: 16px;
      border: 2px solid var(--zen-gold);
      transition: transform .2s;
    }

    .t-card:hover .t-price {
      transform: scale(1.03);
    }

    /* ── CTA / CONTATTI ── */
    .cta-sec {
      background: linear-gradient(135deg, var(--orange) 0%, var(--malva) 100%);
      padding: 95px 6%;
      text-align: center;
      position: relative;
      overflow: hidden;
    }



    .cta-sec h2 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(32px, 5vw, 46px);
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .cta-sec>p {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.92);
      margin-bottom: 40px;
      max-width: 580px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-simple {
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(4px);
      border-radius: 24px;
      padding: 44px 34px;
      max-width: 540px;
      margin: 0 auto;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.28);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .cta-simple::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 26px;
      padding: 2px;
      background: linear-gradient(135deg, var(--zen-gold), transparent 40%, transparent 60%, var(--zen-gold));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0.6;
    }

    .cta-simple h3 {
      font-family: 'Noto Serif SC', serif;
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 16px;
    }

    .cta-simple p {
      color: rgba(255, 255, 255, 0.92);
      font-size: 16.5px;
      margin-bottom: 28px;
    }

    /* ── SHARED BUTTON BASE (btn-contact + contact-phone a) ── */
    .btn-contact,
    .contact-phone a {
      background: #fff;
      color: var(--orange);
      border: 2px solid transparent;
      padding: 14px 32px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all .25s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    }

    .btn-contact:hover,
    .contact-phone a:hover {
      background: var(--orange-light);
      border-color: var(--zen-gold);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .btn-contact svg,
    .contact-phone svg {
      width: 18px;
      height: 18px;
      fill: var(--orange);
      flex-shrink: 0;
    }

    .contact-phone {
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.28);
    }

    .contact-phone span {
      font-family: 'Noto Serif SC', serif;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--charcoal);
      padding: 30px 6%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      border-top: 2px solid var(--zen-gold);
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: repeating-linear-gradient(90deg, var(--zen-gold) 0px, var(--zen-gold) 2px, transparent 2px, transparent 12px);
      opacity: 0.5;
    }

    footer .logo {
      font-family: 'Noto Serif SC', serif;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 1px;
    }

    footer .logo span {
      color: var(--zen-gold);
    }

    footer .copy {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.42);
    }

    footer nav {
      display: flex;
      gap: 24px;
    }

    footer nav a {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.5);
      text-decoration: none;
      transition: color .25s;
      position: relative;
    }

    footer nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--zen-gold);
      transform: scaleX(0);
      transition: transform .25s;
    }

    footer nav a:hover {
      color: var(--zen-gold);
    }

    footer nav a:hover::after {
      transform: scaleX(1);
    }

    /* ══════════════════════════════════════════════════
       RESPONSIVE — ordine: desktop → tablet → mobile
    ══════════════════════════════════════════════════ */

    /* ── Desktop: hamburger nascosto ── */
    @media (min-width: 769px) {
      .hamburger,
      .nav-overlay {
        display: none !important;
      }
    }

    /* ── TABLET (769px – 1024px) ── */
    @media (min-width: 769px) and (max-width: 1024px) {
      .hero { padding: 50px 5%; }
      .hero-row { gap: 32px; }
      .hero-img-col { flex: 0 0 260px; max-width: 260px; }
      .hero-content h1 { font-size: clamp(28px, 4vw, 42px); }

      #heroCarousel, #footerCarousel {
        height: 80vh !important;
        min-height: 420px !important;
      }

      .t-slide { flex: 0 0 calc(50% - 12px); }
      .t-gallery { height: 460px; }
      .treatments { padding: 70px 0; }
      .carousel-track { padding: 0 4%; }
      .sec-head { padding: 0 5%; }
      .cta-simple { padding: 48px 36px; }
    }

    /* ══════════════════════════════════════════════════
       MOBILE  ≤ 768px  — regola principale
    ══════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Navbar ── */
      .nav {
        padding: 12px 5%;
        flex-direction: row;
      }
      .nav-social { display: none !important; }
      .nav-cta-desktop { display: none !important; }
      .nav-left {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }
      .nav-title {
        font-size: 16px;
        letter-spacing: 1.5px;
        text-align: left;
        margin: 0;
        white-space: nowrap;
      }
      .hamburger { display: flex; }
      .nav-overlay { display: flex; }

      /* ── Hero (testo) ── */
      .hero {
        flex-direction: column;
        padding: 40px 5% 48px;
        text-align: center;
      }
      .hero-row {
        flex-direction: column;
        align-items: center;
        gap: 28px;
      }
      .hero-content {
        align-items: center;
        text-align: center;
        width: 100%;
      }
      .hero-content .subtitle {
        font-size: 15.5px;
        text-align: center;
      }
      .hero-bio-row { flex-direction: column; }

      /* ── Hero foto ── */
      .hero-img-col {
        flex: none;
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .hero-img-frame {
        max-width: 260px;
        width: 60vw;
        margin: 0 auto;
        padding: 12px;
      }

      /* ── Bio cards ── */
      .bio-cards { width: 100%; align-items: stretch; }
      .bio-card { width: 100%; padding: 16px 18px; }
      .bio-card .label { font-size: 20px; }
      .bio-card ul { text-align: left; }
      .bio-card ul li { font-size: 13px; gap: 6px; }
      .bio-card ul li::before { font-size: 14px; line-height: 1.5; min-width: 12px; }

      /* ── Pulsanti hero ── */
      .hero-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 300px;
        margin: 28px auto 0;
      }
      .btn-white,
      .btn-ghost {
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      /* ── Splash ── */
      .splash-subtitle { font-size: 12px; letter-spacing: 1.5px; }
      .splash-tagline  { font-size: 22px; letter-spacing: 2px; margin-top: -10px; }

      /* ── Hero Carousel ── */
      .hero-carousel { display: block; }
      #heroCarousel {
        height: 60vh;
        height: 60dvh;
        min-height: 320px;
        border-radius: 0 !important;
      }
      .hero-carousel-dot { width: 28px; }
      .hero-carousel .t-gallery-slide img {
        object-fit: contain;
        object-position: center top;
      }
      #heroCarousel .t-gallery-slide::before { display: none; }
      #heroCarousel .t-gallery-slide::after {
        content: '';
        position: absolute; inset: 0;
        z-index: 1; pointer-events: none;
        background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.45) 100%);
      }

      /* ── Footer Carousel ── */
      #footerCarousel {
        position: relative;
        height: auto !important;
        aspect-ratio: 4 / 3;
        min-height: 220px;
        max-height: 55dvh;
        border-radius: 0 !important;
      }
      #footerCarousel .t-gallery-track {
        position: absolute; inset: 0;
        height: 100%; min-height: unset;
      }
      #footerCarousel .t-gallery-slide { height: 100%; min-height: unset; }
      #footerCarousel .t-gallery-slide::before {
        content: '';
        position: absolute; inset: 0;
        z-index: 2; pointer-events: none;
        background: linear-gradient(to bottom, var(--charcoal) 0%, transparent 22%);
      }
      #footerCarousel .t-gallery-slide::after {
        content: '';
        position: absolute; inset: 0;
        z-index: 1; pointer-events: none;
        background:
          linear-gradient(to top,    var(--charcoal) 0%, transparent 22%),
          linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.55) 100%);
      }

      /* ── Stats ── */
      .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 28px 4%;
      }
      .stat {
        padding: 16px 10px;
        border-right: 1px solid rgba(255,255,255,.07);
        border-bottom: 1px solid rgba(255,255,255,.07);
      }
      .stat:nth-child(2n) { border-right: none; }
      .stat:nth-child(n+3) { border-bottom: none; }
      .stat .num { font-size: 26px; }
      .stat .lbl { font-size: 10px; }

      /* ── Trattamenti carousel → colonna ── */
      .treatments { padding: 60px 0; }
      .carousel-wrapper { overflow: visible; padding: 0; }
      .carousel-track {
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding: 0 5%;
        overflow-x: visible;
        scroll-snap-type: none;
      }
      .t-slide {
        flex: 0 0 100%;
        width: 100%;
        margin-right: 0;
        scroll-snap-align: none;
        align-self: flex-start;
      }
      .t-gallery { height: 360px; }
      .t-gallery-dots { bottom: 70px; }
      .t-header-overlay h3 { font-size: 16px; }
      .t-gallery-nav { width: 38px; height: 38px; min-width: 44px; min-height: 44px; top: 50%; }
      .t-gallery-nav svg { width: 16px; height: 16px; }

      /* ── CTA / Contatti ── */
      .cta-sec { padding: 70px 5% 80px; }
      .cta-sec > p {
        font-size: 16px;
        margin-bottom: 32px;
      }
      .cta-simple {
        padding: 32px 20px;
        border-radius: 18px;
      }
      .cta-simple h3 { font-size: 22px; }
      .cta-simple p  { font-size: 15px; }
      .btn-contact {
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        padding: 13px 20px;
      }
      .contact-phone { margin-top: 18px; padding-top: 18px; }
      .contact-phone a {
        width: 100%;
        justify-content: center;
        font-size: 15px;
      }
      .corner-ornament { width: 36px; height: 36px; }
      .corner-ornament.top-right  { top: 16px; right: 16px; }
      .corner-ornament.bottom-left { bottom: 16px; left: 16px; }

      /* ── Articoli: overlay sempre visibile su touch ── */
      .art-cta-overlay { opacity: 1; pointer-events: auto; }
      .art-read-btn    { transform: translateY(0); }
      .art-preview-wrap { height: 220px; }

      /* ── Articoli: carosello 1 card alla volta su mobile ── */
      .articoli-sec { padding: 56px 0 64px; }
      .articoli-head { padding: 0 5%; margin-bottom: 36px; }
      .articoli-head p { font-size: 15px; }
      .articoli-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 8px 5% 20px;
        max-width: none;
        margin: 0;
        scrollbar-width: none;
        scroll-padding-left: 5%;
      }
      .articoli-grid::-webkit-scrollbar { display: none; }
      .art-card {
        flex: 0 0 85vw;
        scroll-snap-align: start;
      }

      /* ── Logo banner ── */
      .logo-banner { overflow: visible; }
      .logo-banner img { width: 100%; height: auto; max-height: none; }

      /* ── Footer ── */
      footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 5%;
        gap: 12px;
      }
      footer .logo { font-size: 16px; }
      footer nav { gap: 18px; justify-content: center; }
      footer .copy { font-size: 11px; }
    }

    /* ══════════════════════════════════════════════════
       MOBILE SMALL  ≤ 480px
    ══════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .hero-content h1 { font-size: clamp(26px, 8vw, 38px); }
      .splash-tagline  { font-size: 20px; letter-spacing: 1.5px; margin-top: -6px; }
      .sec-head h2     { font-size: clamp(26px, 7vw, 36px); }
      .sec-head p      { font-size: 15px; }
      .t-gallery       { height: 300px; }
      .t-body          { padding: 18px; }
      .t-teaser        { font-size: 13.5px; }
      .cta-sec h2      { font-size: clamp(24px, 7vw, 34px); }
      .contact-phone a { font-size: 15px; }
      .t-gallery-slide::after,
      .t-gallery-placeholder::after {
        width: 24px; height: 24px; font-size: 14px;
        bottom: 10px; right: 10px;
      }
      .art-preview-wrap { height: 190px; }
      .art-card-title   { font-size: 13px; padding: 12px 14px 16px; }
    }

    /* ══════════════════════════════════════════════════
       LANDSCAPE MOBILE  (altezza < 500px)
    ══════════════════════════════════════════════════ */
    @media (orientation: landscape) and (max-height: 500px) {
      #heroCarousel, #footerCarousel {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: unset !important;
        overflow: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
      }
      .hero-carousel .t-gallery-slide img {
        object-fit: contain !important;
        object-position: center;
      }
      #heroCarousel .t-gallery-slide::before,
      #footerCarousel .t-gallery-slide::before { display: none !important; }
      #heroCarousel .t-gallery-slide::after,
      #footerCarousel .t-gallery-slide::after {
        background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.45) 100%) !important;
      }
      .hero-carousel-dots { bottom: 16px; }
    }

    .t-gallery-slide img {
      cursor: zoom-in;
    }

    .t-gallery-slide.is-video::before {
      top: calc(50% - 30px); /* shift up half the overlay height (≈ 60px / 2) */
    }

    .t-gallery-dot {
      min-width: 28px;
      min-height: 28px;
    }

    .t-gallery-slide video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: pointer;
    }

    .t-gallery-slide.is-video::before {
      content: '';
      position: absolute;
      top: calc(50% - 30px);
      left: 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      background: rgba(0, 0, 0, 0.52) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/28px no-repeat;
      border: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      z-index: 5;
      pointer-events: none;
    }

    .lb-slide video {
      max-width: 100%;
      max-height: 75vh;
      border-radius: 10px;
      display: block;
      background: #000;
      outline: none;
    }

    .lb-thumb.is-video {
      background: #111;
      position: relative;
    }

    .lb-thumb.is-video::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.85)'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat;
    }

    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(10, 8, 6, 0.96);
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: lbFadeIn 0.25s ease;
    }

    .lightbox.active {
      display: flex;
    }

    @keyframes lbFadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .lb-inner {
      position: relative;
      width: 100%;
      max-width: 900px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .lb-main {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 16px;
      background: #111;
      max-height: 75vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lb-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      width: 100%;
    }

    .lb-slide {
      min-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      max-height: 75vh;
    }

    .lb-slide img {
      max-width: 100%;
      max-height: 75vh;
      object-fit: contain;
      border-radius: 10px;
      display: block;
      cursor: zoom-out;
    }

    .lb-slide .lb-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: rgba(255, 255, 255, 0.45);
      padding: 60px 30px;
      font-size: 14px;
    }

    .lb-slide .lb-placeholder svg {
      stroke: rgba(255, 255, 255, 0.3);
    }

    .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
      z-index: 10;
    }

    .lb-nav:hover {
      background: var(--orange);
      transform: translateY(-50%) scale(1.08);
    }

    .lb-nav.lb-prev {
      left: 10px;
    }

    .lb-nav.lb-next {
      right: 10px;
    }

    .lb-nav svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 2.5;
      fill: none;
    }

    .lb-counter {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.55);
      color: rgba(255, 255, 255, 0.8);
      font-size: 13px;
      padding: 4px 14px;
      border-radius: 20px;
      z-index: 10;
      letter-spacing: 0.5px;
    }

    .lb-close {
      position: fixed;
      top: 18px;
      right: 20px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
      z-index: 10;
      font-size: 20px;
      line-height: 1;
    }

    .lb-close:hover {
      background: var(--orange);
      transform: rotate(90deg);
    }

    /* thumbnail strip */
    .lb-thumbs {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 4px 2px;
      max-width: 100%;
    }

    .lb-thumbs::-webkit-scrollbar {
      display: none;
    }

    .lb-thumb {
      flex-shrink: 0;
      width: 72px;
      height: 52px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.25s, transform 0.25s;
      background: #222;
    }

    .lb-thumb:hover {
      transform: scale(1.06);
    }

    .lb-thumb.active {
      border-color: var(--orange);
    }

    .lb-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lb-thumb-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.25);
      font-size: 10px;
      background: #1a1714;
    }

    /* title in lightbox */
    .lb-title {
      color: rgba(255, 255, 255, 0.75);
      font-family: 'Noto Serif SC', serif;
      font-size: 15px;
      letter-spacing: 0.5px;
      text-align: center;
    }

    @media (max-width: 600px) {
      .lb-nav {
        width: 38px;
        height: 38px;
      }

      .lb-thumb {
        width: 58px;
        height: 42px;
      }
    }

    /* Service pages */
    .service-page {
      background: var(--cream);
    }

    .service-nav {
      position: sticky;
      top: 0;
    }

    .service-brand {
      text-decoration: none;
    }

    .service-hero {
      padding: 48px 6% 64px;
      background: linear-gradient(135deg, var(--orange) 0%, var(--malva) 100%);
      color: #fff;
    }

    .breadcrumbs {
      max-width: 1180px;
      margin: 0 auto 28px;
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
    }

    .breadcrumbs a {
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    }

    .breadcrumbs span::before {
      content: '/';
      margin-right: 10px;
      color: rgba(255, 255, 255, 0.55);
    }

    .service-grid {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
      gap: 48px;
      align-items: center;
    }

    .service-kicker {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.78);
      margin-bottom: 14px;
    }

    .service-copy h1 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(34px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: 0;
      margin-bottom: 22px;
    }

    .service-lead {
      max-width: 720px;
      font-size: clamp(17px, 2vw, 21px);
      line-height: 1.72;
      color: rgba(255, 255, 255, 0.92);
      margin-bottom: 30px;
    }

    .service-cta {
      text-decoration: none;
      width: fit-content;
    }

    .service-media {
      display: block;
      border-radius: 18px;
      overflow: hidden;
      border: 3px solid rgba(255, 255, 255, 0.32);
      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
      aspect-ratio: 4 / 5;
      background: rgba(255, 255, 255, 0.14);
    }

    .service-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .service-content {
      max-width: 920px;
      margin: 0 auto;
      padding: 66px 6% 78px;
    }

    .service-content h2 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(26px, 4vw, 38px);
      line-height: 1.2;
      letter-spacing: 0;
      margin: 42px 0 14px;
      color: var(--charcoal);
    }

    .service-content h2:first-child {
      margin-top: 0;
    }

    .service-content h3 {
      font-size: 19px;
      line-height: 1.35;
      margin: 28px 0 10px;
      color: var(--orange);
    }

    .service-content p {
      font-size: 17px;
      line-height: 1.78;
      color: var(--muted);
    }

    .service-link-grid {
      max-width: 980px;
      margin: 0 auto 34px;
      padding: 0 6%;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .service-link-grid a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid rgba(207, 106, 81, 0.28);
      border-radius: 8px;
      background: #fff;
      color: var(--charcoal);
      text-align: center;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 6px 18px rgba(26, 23, 20, 0.06);
      transition: transform 0.2s, border-color 0.2s, color 0.2s;
    }

    .service-link-grid a:hover {
      transform: translateY(-2px);
      border-color: var(--orange);
      color: var(--orange);
    }

    @media (max-width: 768px) {
      .service-hero {
        padding: 32px 5% 46px;
      }

      .service-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .service-media {
        max-width: 420px;
        width: 100%;
      }

      .service-copy h1 {
        font-size: clamp(32px, 9vw, 44px);
      }

      .service-lead,
      .service-content p {
        font-size: 16px;
      }

      .service-link-grid {
        grid-template-columns: 1fr 1fr;
        padding: 0 5%;
      }
    }

    /* ═══════════════════════════════════════════
       ARTICOLI INTERATTIVI
    ═══════════════════════════════════════════ */

    .articoli-sec {
      background: var(--cream);
      padding: 80px 6% 90px;
      position: relative;
      overflow: hidden;
      border-top: 2px solid var(--zen-gold);
      border-bottom: 2px solid rgba(201,169,97,.35);
    }

    /* radial glow top-right (gold) */
    .articoli-sec::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 420px; height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,169,97,.12) 0%, transparent 70%);
      pointer-events: none;
    }

    /* radial glow bottom-left (malva) */
    .articoli-sec::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 320px; height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(185,143,185,.10) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── Header sezione ── */
    .articoli-head {
      text-align: center;
      margin-bottom: 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .articoli-head h2 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(28px, 4.5vw, 44px);
      font-weight: 700;
      color: var(--charcoal);
      margin-bottom: 14px;
    }

    .articoli-head h2::before {
      content: '';
      display: block;
      width: 48px; height: 3px;
      background: var(--zen-gold);
      margin: 0 auto 18px;
      border-radius: 2px;
      opacity: .8;
    }

    .articoli-head p {
      font-size: 17px;
      color: var(--muted);
      line-height: 1.7;
    }

    .articoli-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .art-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid rgba(201,169,97,.2);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(26,23,20,.06);
      transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
    }

    .art-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(26,23,20,.12);
    }

    .art-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px 10px;
      gap: 8px;
    }

    .art-tag {
      display: inline-block;
      background: rgba(201,169,97,.13);
      color: #9e7c2a;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .9px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid rgba(201,169,97,.3);
      white-space: nowrap;
    }

    .art-source {
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: .5px;
      text-transform: uppercase;
      opacity: .65;
      white-space: nowrap;
    }

    .art-preview-wrap {
      position: relative;
      width: 100%;
      height: 340px;
      overflow: hidden;
      background: #f5f0ea;
      flex-shrink: 0;
    }

    .art-preview-img {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
      transition: transform .6s ease;
    }

    .art-card:hover .art-preview-img {
      transform: scale(1.03);
    }

    .art-scroll-mask {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 110px;
      background: linear-gradient(to bottom, transparent 0%, rgba(245,240,234,.95) 100%);
      pointer-events: none;
      z-index: 2;
    }

    .art-cta-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 28px;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 40%,
        rgba(26, 23, 20, 0.18) 65%,
        rgba(26, 23, 20, 0.52) 100%
      );
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease, background .35s ease;
      z-index: 4;
    }
    .art-card:hover .art-cta-overlay,
    .art-cta-overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Bottone "Leggi l'articolo" */
    .art-read-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--orange);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      text-decoration: none;
      padding: 12px 24px;
      border-radius: 50px;
      box-shadow: 0 6px 22px rgba(207,106,81,.45);
      transition: background .25s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .25s;
      transform: translateY(8px);
    }

    .art-card:hover .art-read-btn,
    .art-cta-overlay.visible .art-read-btn {
      transform: translateY(0);
    }

    .art-read-btn:hover {
      background: var(--malva);
      box-shadow: 0 8px 28px rgba(185,143,185,.45);
      transform: translateY(-2px);
    }

    .art-read-btn svg {
      width: 16px; height: 16px;
      flex-shrink: 0;
      transition: transform .25s;
    }

    .art-read-btn:hover svg {
      transform: translateX(3px);
    }

    /* Fallback quando lo screenshot non può caricarsi */
    .art-preview-wrap.art-fallback {
      background: linear-gradient(135deg,
        rgba(201,169,97,.18) 0%,
        rgba(185,143,185,.14) 50%,
        rgba(207,106,81,.1) 100%);
    }

    /* ── Titolo sotto la preview ── */
    .art-card-title {
      font-family: 'Noto Serif SC', serif;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: var(--charcoal);
      padding: 16px 18px 20px;
    }

    /* ── Articoli: responsive breakpoint intermedio (tablet) ── */
    @media (max-width: 1100px) {
      .articoli-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    /* ── Articoli: 1 card per riga su mobile ── */
    @media (max-width: 768px) {
      .articoli-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5%;
        max-width: none;
        margin: 0;
        overflow-x: unset;
      }
      .art-card {
        flex: unset;
        width: 100%;
      }
    }