@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/comfortaa-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@view-transition {
  navigation: auto;
}


/* Ruoli tipografici: unico punto in cui i componenti ricevono font, corpo,
   interlinea, spaziatura e peso. Ogni valore viene da tokens.css. */
@layer base {
  .eyebrow,
  .hero-kicker,
  .home-path-copy small,
  .room-count,
  .home-path > small,
  .breadcrumb,
  .room-pagination small,
  .distance-list--detailed h3 span,
  .contact-block small,
  .legal-copy h3,
  .footer-label {
    font-family: var(--text-label-font);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-tracking);
    line-height: var(--text-label-leading);
  }

  .room-gallery-heading p,
  .distance-list span,
  .footer-links a,
  .footer-button,
  .legal-updated,
  .footer-meta {
    font-family: var(--text-small-font);
    font-size: var(--text-small-size);
    font-weight: var(--text-small-weight);
    letter-spacing: var(--text-small-tracking);
    line-height: var(--text-small-leading);
  }

  .text-link,
  .button,
  .menu-toggle,
  .home-path-action,
  .sticky-actions a,
  .desktop-nav a,
  .header-book,
  .hero-slider-status,
  .services summary {
    font-family: var(--text-ui-font);
    font-size: var(--text-ui-size);
    font-weight: var(--text-ui-weight);
    letter-spacing: var(--text-ui-tracking);
    line-height: var(--text-ui-leading);
  }

  body,
  .feature-list li,
  .distance-list--detailed p {
    font-family: var(--text-body-font);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    letter-spacing: var(--text-body-tracking);
    line-height: var(--text-body-leading);
  }

  .lead,
  .hero-summary,
  .room-size,
  .room-pagination strong,
  .distance-list strong,
  .distance-list--detailed h3,
  .contact-social a,
  .mobile-menu nav a {
    font-family: var(--text-lede-font);
    font-size: var(--text-lede-size);
    font-weight: var(--text-lede-weight);
    letter-spacing: var(--text-lede-tracking);
    line-height: var(--text-lede-leading);
  }

  .experience-index strong,
  .home-path > strong,
  .contact-block a,
  .contact-block address,
  .legal-copy h2 {
    font-family: var(--text-h4-font);
    font-size: var(--text-h4-size);
    font-weight: var(--text-h4-weight);
    letter-spacing: var(--text-h4-tracking);
    line-height: var(--text-h4-leading);
  }

  .display--m,
  .room-directory-copy h3,
  .home-path-copy strong,
  .room h3,
  .experience h2,
  .experience h3 {
    font-family: var(--text-h3-font);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    letter-spacing: var(--text-h3-tracking);
    line-height: var(--text-h3-leading);
  }

  .display--l {
    font-family: var(--text-h2-font);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-tracking);
    line-height: var(--text-h2-leading);
  }

  h1.display--l,
  .room-detail-size {
    font-family: var(--text-h1-font);
    font-size: var(--text-h1-size);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-tracking);
    line-height: var(--text-h1-leading);
  }

  .display--xl {
    font-family: var(--text-display-font);
    font-size: min(var(--text-display-size), var(--text-display-fit-size));
    font-weight: var(--text-display-weight);
    letter-spacing: var(--text-display-tracking);
    line-height: var(--text-display-leading);
  }

  /* Frecce e simboli che accompagnano link e pulsanti */
  .text-link::after,
  .home-path-action::after,
  .hero-slider-button,
  .services summary::after {
    font-family: var(--font-ui);
    font-size: var(--text-body-size);
    font-weight: var(--weight-regular);
    line-height: var(--leading-none);
  }

  .body-copy { max-width: var(--measure-body); }
  .lead { max-width: var(--measure-lede); }
}

/* Stili storici del sito. Tra F1 e F3 vengono ridistribuiti nei livelli
   base, layout, components e motion dichiarati in tokens.css. */
@layer components {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    background: var(--surface-page);
  }

  ::view-transition-old(root) {
    animation: page-leave var(--dur-micro) var(--ease-out) both;
  }

  ::view-transition-new(root) {
    animation: page-enter var(--dur-ui) var(--ease-out) both;
  }

  @keyframes page-leave {
    to { opacity: 0; }
  }

  @keyframes page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text-primary);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
    background: var(--surface-media-warm);
  }

  /* Every editorial photograph is clipped by its own frame. The image may crop,
     but it never stretches or escapes the component that owns it. */
  :where(
    .hero,
    .hero-slider,
    .home-story-media,
    .media-story-media,
    .full-bleed-story,
    .home-path-media,
    .room-directory-media,
    .room-media,
    .experience-media,
    .photo-band,
    .gallery-strip figure,
    .room-gallery figure,
    .image-collection figure
  ) {
    overflow: hidden;
  }

  :where(
    .hero-media,
    .home-story-media img,
    .media-story-media img,
    .full-bleed-story > img,
    .home-path-media img,
    .room-directory-media img,
    .room-media img,
    .experience-media img,
    .photo-band img,
    .gallery-strip img,
    .room-gallery img,
    .image-collection img
  ) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  button,
  a,
  summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  :where([id]) {
    scroll-margin-top: calc(var(--header-h) + 24px);
  }

  button {
    color: inherit;
    font: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--focus-halo);
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    background: var(--surface-section);
    transform: translateY(-160%);
    transition: transform var(--dur-micro) var(--ease-standard);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .l-shell {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
    margin-inline: auto;
  }

  .l-editorial {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
    margin-inline: auto;
  }

  .eyebrow {
    margin: 0 0 var(--stack-s);
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .display {
    margin: 0;
    overflow-wrap: normal;
    text-wrap: balance;
    word-break: normal;
  }

  .nowrap {
    white-space: nowrap;
  }

  p,
  li {
    text-wrap: pretty;
  }

  .lead {
    max-width: var(--measure-reading);
    margin: var(--stack-m) 0 0;
    color: var(--text-secondary);
  }

  .body-copy {
    max-width: var(--measure-copy);
    color: var(--text-secondary);
  }

  .body-copy p {
    margin: 0 0 var(--stack-s);
  }

  .body-copy p:last-child {
    margin-bottom: 0;
  }

  .text-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    text-transform: uppercase;
  }

  .text-link::after {
    content: "→";
    transition: transform var(--dur-micro) var(--ease-standard);
  }

  .text-link:hover::after {
    transform: translateX(4px);
  }

  .button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border: 1px solid currentColor;
    color: var(--text-primary);
    background: var(--surface-section);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--dur-micro) var(--ease-standard), background var(--dur-micro) var(--ease-standard);
  }

  .button:hover {
    color: var(--text-inverse);
    background: var(--surface-inverse-hover);
  }

  .button--light {
    color: var(--text-inverse);
    background: var(--surface-inverse);
  }

  .button--light:hover {
    color: var(--text-primary);
    background: transparent;
  }

  .button--outline {
    color: var(--text-primary);
    background: transparent;
  }

  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    height: var(--header-h);
    color: var(--text-primary);
    transition: height var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard), background var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard);
    view-transition-name: site-header;
  }

  .site-header.is-scrolled,
  .site-header.menu-active,
  .header-on-light .site-header {
    height: 64px;
    color: var(--text-primary);
    background: var(--surface-header);
    box-shadow: 0 1px 0 var(--border-subtle);
    backdrop-filter: blur(12px);
  }

  .site-header.menu-active {
    backdrop-filter: none;
  }

  .header-inner {
    display: grid;
    height: 100%;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand {
    position: relative;
    z-index: 102;
    width: 115.2px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-self: start;
  }

  .brand img {
    width: 100%;
    background: transparent;
    filter: invert(1);
    transition: filter var(--dur-micro) var(--ease-standard);
  }

  .site-header.is-scrolled .brand img,
  .site-header.menu-active .brand img,
  .header-on-light .site-header .brand img {
    filter: invert(1);
  }

  .desktop-nav {
    display: none;
  }

  .header-book {
    display: none;
  }

  .menu-toggle {
    position: relative;
    z-index: 102;
    display: inline-flex;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    text-transform: none;
  }

  .mobile-menu {
    position: fixed;
    z-index: 101;
    inset: 0;
    display: grid;
    align-content: start;
    padding: calc(var(--header-h) + var(--space-4) + env(safe-area-inset-top)) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--text-primary);
    background: var(--surface-page);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur-micro) var(--ease-standard), visibility var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-menu nav {
    display: grid;
    width: min(100%, 42rem);
    gap: 0;
  }

  .mobile-menu nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    white-space: nowrap;
  }

  .mobile-menu-actions {
    display: grid;
    width: min(100%, 42rem);
    margin-top: var(--space-5);
    gap: var(--space-3);
  }

  .mobile-menu-actions .button {
    width: 100%;
    min-height: 48px;
    padding-inline: var(--space-4);
    text-align: center;
  }

  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: max(100svh, 680px);
    color: var(--text-primary);
    background: var(--surface-media);
  }

  .hero::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--overlay-hero);
    content: "";
  }

  .hero-media {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 54% center;
  }

  .hero-slider {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: var(--surface-media);
  }

  .hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 54% center;
    opacity: 0;
    transform: scale(1.012);
    transition: opacity var(--dur-media) var(--ease-standard), transform var(--dur-media) var(--ease-out);
  }

  .hero-slide--territory {
    object-position: center;
  }

  .hero-slide--house {
    object-position: center;
  }

  .hero-slide--portrait {
    object-position: center 38%;
  }

  /* Foto dello slider lontane da quella attiva: fuori dal layout, quindi non scaricate */
  .hero-slide:not(.is-active, .is-near) {
    display: none;
  }

  .hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
  }

  .hero-slider-controls {
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    bottom: 32px;
    display: grid;
    align-items: center;
    color: var(--text-primary);
    background: var(--overlay-soft);
    grid-template-columns: 48px auto 48px;
    backdrop-filter: blur(8px);
  }

  .hero-slider-button {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
  }

  .hero-slider-button:hover {
    background: var(--surface-glass);
  }

  .hero-slider-status {
    min-width: 64px;
    margin: 0;
    text-align: center;
  }

  .hero-home {
    place-items: center;
    text-align: center;
  }

  .hero-home .hero-inner {
    width: min(calc(100% - (var(--gutter) * 2)), 1040px);
    padding-top: var(--space-8);
    transform: translateY(3%);
  }

  .hero-home h1 {
    max-width: 14ch;
    margin-inline: auto;
  }

  .hero-kicker {
    margin: 0 0 var(--stack-s);
    text-transform: uppercase;
  }

  .hero-summary {
    max-width: 600px;
    margin: var(--stack-m) auto 0;
    text-wrap: pretty;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--stack-l);
    gap: var(--space-4) var(--space-5);
  }

  .hero--internal {
    align-items: end;
    min-height: max(100svh, 680px);
  }

  .hero--internal .hero-inner {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
    margin-inline: auto;
    padding-bottom: var(--section);
  }

  .hero--internal h1 {
    max-width: 14ch;
  }

  .hero--internal .hero-summary {
    margin-inline: 0;
  }

  .section {
    padding-block: var(--section);
    color: var(--text-primary);
    background: var(--surface-page);
  }

  main > .section:nth-of-type(even) {
    background: var(--surface-section);
  }

  .section--large {
    padding-block: var(--section);
  }

  .section--tight {
    padding-block: var(--section-compact);
  }

  .section--dark {
    color: var(--text-primary);
    background: var(--surface-section);
  }

  .section--dark .eyebrow,
  .section--dark .body-copy,
  .section--dark .lead {
    color: var(--text-muted);
  }

  .story-intro {
    display: grid;
    gap: var(--stack-m);
  }

  .story-intro .story-heading {
    max-width: 960px;
  }

  .story-intro .body-copy {
    justify-self: start;
  }

  .story-intro--centered {
    display: block;
    text-align: center;
  }

  .story-intro--centered .story-heading,
  .story-intro--centered .lead,
  .story-intro--centered .body-copy {
    margin-inline: auto;
  }

  .story-intro--centered .body-copy {
    margin-top: var(--stack-m);
    justify-self: auto;
  }

  .section-actions {
    margin-top: var(--stack-m);
  }

  .media-story {
    display: grid;
    gap: var(--stack-l);
    align-items: center;
  }

  .media-story-media {
    overflow: hidden;
    aspect-ratio: 4 / 5;
  }

  .media-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-story-content {
    max-width: var(--measure-copy);
  }

  .media-story-content .display {
    margin-bottom: var(--stack-m);
  }

  .media-story--reverse .media-story-media {
    order: -1;
  }

  .full-bleed-story {
    position: relative;
    isolation: isolate;
    min-height: min(85svh, 900px);
    display: grid;
    align-items: end;
    padding-block: var(--section);
    color: var(--text-primary);
    background: var(--surface-media);
  }

  .full-bleed-story::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--overlay-story);
    content: "";
  }

  .full-bleed-story > img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .full-bleed-copy > * {
    max-width: var(--measure-reading);
  }

  .full-bleed-copy .body-copy {
    margin-top: var(--stack-s);
    color: var(--text-on-photo);
  }

  .full-bleed-copy .lead {
    color: var(--text-primary);
  }

  .full-bleed-story .eyebrow,
  .booking-band .eyebrow {
    color: var(--text-on-photo-muted);
  }

  .chapter-heading {
    max-width: var(--measure-reading);
    margin-bottom: var(--stack-xl);
  }

  .chapter-heading .lead {
    margin-top: var(--stack-s);
  }

  .chapter-heading--centered {
    margin-inline: auto;
    text-align: center;
  }

  .chapter-heading--centered .lead {
    margin-inline: auto;
  }

  .room-list,
  .experience-list {
    display: grid;
    gap: var(--section);
  }

  .home-story {
    display: grid;
    align-items: center;
    gap: var(--stack-l);
  }

  .home-story-media {
    overflow: hidden;
    aspect-ratio: 4 / 5;
  }

  .home-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-story-copy {
    max-width: var(--measure-copy);
  }

  .home-story-copy .display {
    margin-bottom: var(--stack-s);
  }

  .home-paths {
    display: grid;
    gap: var(--stack-xl);
  }

  /* Percorsi senza immagine (Territorio): etichetta sopra, titolo sotto */
  .home-path:not(:has(> .home-path-media)) {
    display: block;
  }

  .home-path > small {
    display: block;
    margin-bottom: var(--stack-xs);
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .home-path > strong {
    display: block;
  }

  .home-path {
    display: grid;
    align-items: center;
    padding-bottom: var(--stack-xl);
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--stack-m);
    text-decoration: none;
  }

  .home-path-media {
    margin: 0;
    aspect-ratio: 4 / 3;
  }

  .home-path-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-reveal) var(--ease-out);
  }

  .home-path:hover .home-path-media img {
    transform: scale(1.018);
  }

  .home-path-copy {
    display: flex;
    max-width: var(--measure-copy);
    align-items: flex-start;
    flex-direction: column;
  }

  .home-path-copy small {
    margin-bottom: var(--stack-s);
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .home-path-description {
    margin-top: var(--stack-s);
    color: var(--text-secondary);
  }

  .home-path-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    margin-top: var(--stack-m);
    gap: var(--space-3);
    text-transform: uppercase;
  }

  .home-path-action::after {
    content: "→";
    transition: transform var(--dur-micro) var(--ease-standard);
  }

  .home-path:hover .home-path-action::after {
    transform: translateX(4px);
  }

  .room-directory {
    display: grid;
    border-top: 1px solid var(--border-subtle);
  }

  .room-directory-item {
    display: grid;
    padding: var(--stack-l) 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--stack-m);
  }

  .room-directory-media {
    overflow: hidden;
    aspect-ratio: 3 / 2;
  }

  .room-directory-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-ui) var(--ease-standard);
  }

  .room-directory-item:hover .room-directory-media img {
    transform: scale(1.015);
  }

  .room-directory-copy {
    align-self: center;
  }

  .room-directory-copy h3 {
    margin: 0;
  }

  .room-directory-copy p {
    max-width: var(--measure-copy);
    margin: var(--stack-s) 0 0;
    color: var(--text-secondary);
  }

  .room-directory-copy .room-count {
    margin: 0 0 var(--stack-xs);
  }

  .room-detail-intro {
    display: grid;
    gap: var(--stack-l);
  }

  .room-detail-meta {
    display: grid;
    align-content: start;
    gap: var(--stack-s);
  }

  .room-detail-size {
    margin: 0;
  }

  .room-gallery-section {
    padding-block: var(--section-compact) var(--section);
    color: var(--text-primary);
    background: var(--surface-section);
  }

  .room-gallery-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: var(--stack-l);
    gap: var(--stack-m);
  }

  .room-gallery-heading p {
    margin: 0;
    color: var(--text-secondary);
  }

  .room-gallery {
    display: grid;
    width: calc(100% + var(--gutter));
    grid-auto-columns: min(84vw, 520px);
    grid-auto-flow: column;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 var(--gutter) var(--space-4) 0;
    scroll-padding-left: var(--gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--text-accent) var(--surface-media-warm);
    scrollbar-width: thin;
  }

  .room-gallery figure {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  .room-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .breadcrumb {
    position: absolute;
    z-index: 2;
    top: calc(var(--header-h) + 24px);
    left: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
  }

  .breadcrumb a {
    min-width: var(--target-min);
    min-height: var(--target-min);
    display: inline-flex;
    align-items: center;
  }

  .breadcrumb span::before {
    margin-right: var(--space-2);
    content: "/";
    opacity: 0.65;
  }

  .room-pagination {
    display: grid;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
    background: var(--surface-page);
    grid-template-columns: 1fr 1fr;
  }

  .room-pagination a {
    display: grid;
    min-height: 112px;
    align-content: center;
    padding: var(--space-5);
    gap: var(--space-1);
    text-decoration: none;
  }

  .room-pagination a + a {
    border-left: 1px solid var(--border-subtle);
    text-align: right;
  }

  .room-pagination small {
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .room,
  .experience {
    display: grid;
    gap: var(--stack-l);
    align-items: center;
  }

  .room-media,
  .experience-media {
    overflow: hidden;
    aspect-ratio: 4 / 5;
  }

  .room-media img,
  .experience-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .room-count {
    margin: 0 0 var(--stack-s);
    color: var(--text-accent);
  }

  .room h3,
  .experience h2,
  .experience h3 {
    margin: 0;
  }

  .room-size {
    display: block;
    margin-top: var(--stack-s);
  }

  .room-copy,
  .experience-copy {
    max-width: var(--measure-copy);
    margin-top: var(--stack-s);
    color: var(--text-secondary);
  }

  .feature-list {
    display: flex;
    flex-wrap: wrap;
    margin: var(--stack-m) 0 0;
    padding: 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
  }

  .feature-list li {
    width: 50%;
    padding: var(--space-3) var(--space-2) var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
  }

  .services {
    margin-top: var(--stack-m);
    border-bottom: 1px solid var(--border-subtle);
  }

  .services summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
  }

  .services summary::-webkit-details-marker { display: none; }
  .services summary::after { content: "+"; }
  .services[open] summary::after { content: "−"; }
  .services .feature-list { margin: 0 0 var(--stack-m); border-top: 0; }

  .distance-list {
    margin: var(--stack-l) 0 0;
    padding: 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
  }

  .distance-list li {
    display: grid;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-1);
  }

  .distance-list span {
    color: var(--text-secondary);
  }

  .distance-list--detailed li {
    gap: var(--space-3);
    padding-block: var(--stack-m);
  }

  .distance-list--detailed h3 {
    margin: 0;
  }

  .distance-list--detailed h3 span {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .distance-list--detailed p {
    margin: 0;
    color: var(--text-secondary);
  }

  .photo-band {
    overflow: hidden;
    width: 100%;
    min-height: 0;
    aspect-ratio: 21 / 9;
  }

  .photo-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
  }

  .gallery-strip {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-4);
  }

  .gallery-strip figure {
    margin: 0;
    overflow: hidden;
    min-height: 320px;
  }

  .gallery-strip figure:first-child {
    grid-row: span 2;
  }

  .gallery-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-collection-heading {
    display: grid;
    max-width: var(--measure-reading);
    gap: var(--space-3);
    margin-bottom: var(--stack-l);
  }

  .image-collection-heading > * {
    margin: 0;
  }

  .image-collection {
    display: grid;
    width: calc(100% + var(--gutter));
    grid-auto-columns: min(84vw, 520px);
    grid-auto-flow: column;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 var(--gutter) var(--space-4) 0;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--text-accent) var(--surface-media-warm);
    scrollbar-width: thin;
  }

  .image-collection figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }

  .image-collection img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .booking-band {
    padding-block: var(--section);
    color: var(--text-primary);
    background: var(--surface-section);
  }

  .booking-band-inner {
    display: grid;
    gap: var(--stack-l);
  }

  .booking-band-copy {
    max-width: 800px;
  }

  .booking-band .body-copy {
    color: var(--text-muted);
  }

  .booking-actions {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: var(--space-4) var(--space-5);
  }

  .contact-grid {
    display: grid;
    gap: var(--stack-xl);
  }

  .contact-details {
    display: grid;
    margin-top: var(--stack-l);
    gap: var(--stack-m);
  }

  .contact-block {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }

  .contact-block small {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .contact-block a,
  .contact-block address {
    font-style: normal;
    text-decoration: none;
  }

  .contact-block a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .contact-social a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.28em;
  }

  .map-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 0;
    aspect-ratio: 4 / 3;
    align-items: end;
    padding: var(--space-6);
    overflow: hidden;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    background: var(--surface-page);
    text-decoration: none;
  }

  .map-panel::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      linear-gradient(28deg, transparent 35%, var(--map-line-strong) 36%, transparent 37%),
      linear-gradient(145deg, transparent 47%, var(--map-line) 48%, transparent 49%),
      radial-gradient(circle at 78% 26%, var(--surface-inverse) 0 5px, transparent 6px),
      radial-gradient(circle at 78% 26%, transparent 0 15px, var(--border-subtle) 16px 17px, transparent 18px),
      var(--surface-page);
    content: "";
  }

  .map-panel-content {
    max-width: 360px;
  }

  .site-footer {
    padding: var(--space-9) 0 var(--space-8);
    color: var(--text-primary);
    border-top: 1px solid var(--border-faint);
    background-color: var(--surface-footer);
    background-image: var(--surface-footer-gradient);
  }

  .footer-grid {
    display: grid;
    gap: var(--stack-l);
  }

  .footer-brand {
    width: clamp(190px, 18vw, 230px);
    height: auto;
    margin-bottom: var(--space-6);
    background: transparent;
    filter: brightness(0) invert(1);
    object-fit: contain;
    object-position: left center;
  }

  .footer-label {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--text-faint);
    text-transform: uppercase;
  }

  .footer-grid address {
    font-style: normal;
  }

  .footer-contact a {
    display: inline-flex;
    max-width: 100%;
    min-height: 44px;
    align-items: center;
    overflow-wrap: anywhere;
  }

  .footer-contact-copy {
    margin: 0;
    color: var(--text-muted);
  }

  .footer-contact a + .footer-contact-copy {
    margin-top: var(--space-3);
  }

  .footer-social {
    margin-top: var(--space-6);
  }

  .footer-social .footer-label {
    margin-bottom: var(--space-2);
  }

  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
  }

  .social-links a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.28em;
  }

  .footer-links {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .footer-links a,
  .footer-button {
    width: fit-content;
    min-height: 44px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
  }

  .footer-meta {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-faint);
    gap: var(--space-2) var(--space-5);
    color: var(--text-faint);
  }

  .sticky-actions {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    color: var(--text-primary);
    background: var(--surface-section);
    box-shadow: 0 -1px 0 var(--border-faint);
    grid-template-columns: 1fr 1fr;
    transition: transform var(--dur-micro) var(--ease-standard);
  }

  .sticky-actions.is-hidden {
    transform: translateY(100%);
  }

  .sticky-actions a {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .sticky-actions a + a {
    border-left: 1px solid var(--border-subtle);
  }

  .legal-page {
    min-height: 70svh;
    padding: calc(var(--header-h) + var(--section)) 0 var(--section);
    color: var(--text-primary);
    background: var(--surface-page);
  }

  .legal-page h1 {
    max-width: 12ch;
  }

  .legal-updated {
    margin: var(--stack-s) 0 0;
    color: var(--text-secondary);
  }

  .legal-copy {
    margin-top: var(--stack-xl);
    color: var(--text-secondary);
  }

  .legal-copy section {
    max-width: var(--measure-reading);
    padding-top: var(--stack-l);
    border-top: 1px solid var(--border-subtle);
  }

  .legal-copy section + section {
    margin-top: var(--stack-l);
  }

  .legal-copy h2 {
    margin: 0 0 var(--stack-s);
    color: var(--text-primary);
  }

  .legal-copy h3 {
    margin: var(--stack-m) 0 var(--stack-xs);
    color: var(--text-accent);
    text-transform: uppercase;
  }

  .legal-copy p,
  .legal-copy ul {
    margin: 0 0 var(--stack-s);
  }

  .legal-copy ul {
    padding-left: var(--space-5);
  }

  .legal-copy li + li {
    margin-top: var(--stack-2xs);
  }

  .legal-copy strong {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
  }

  .legal-copy a {
    overflow-wrap: anywhere;
  }


  .experience-index {
    display: grid;
    margin: var(--space-9) 0 0;
    padding: 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
  }

  .experience-index li {
    display: grid;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-4);
  }

  .experience-index p {
    max-width: var(--measure-copy);
    margin: 0;
    color: var(--text-muted);
  }

  @media (min-width: 30rem) {

    .mobile-menu-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {

    .site-header.is-scrolled,
    .site-header.menu-active,
    .header-on-light .site-header { height: 72px; }


    .story-intro,
    .booking-band-inner {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      column-gap: var(--grid-gap);
    }

    .story-intro .story-heading { grid-column: 1 / 8; }
    .story-intro .body-copy { grid-column: 1 / 7; grid-row: 2; }
    .booking-band-copy { grid-column: 1 / 7; }
    .booking-actions { grid-column: 1 / -1; }

    .home-path {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      column-gap: var(--grid-gap);
    }

    .home-path-media { grid-column: 1 / 5; }
    .home-path-copy { grid-column: 6 / 9; }
    .home-path:nth-child(even) .home-path-media { grid-column: 5 / 9; order: 2; }
    .home-path:nth-child(even) .home-path-copy { grid-column: 1 / 4; order: 1; }

    .media-story,
    .home-story,
    .room,
    .experience,
    .contact-grid {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      column-gap: var(--grid-gap);
    }

    .media-story-media,
    .room-media,
    .experience-media { grid-column: 1 / 5; }
    .media-story-content,
    .home-story-copy,
    .room-content,
    .experience-content { grid-column: 6 / 9; }
    .media-story--reverse .media-story-media,
    .room:nth-child(even) .room-media,
    .experience:nth-child(even) .experience-media { grid-column: 5 / 9; order: 2; }
    .media-story--reverse .media-story-content,
    .room:nth-child(even) .room-content,
    .experience:nth-child(even) .experience-content { grid-column: 1 / 4; order: 1; }
    .home-story-media { grid-column: 1 / 5; }
    .home-story-copy { grid-column: 6 / 9; }
    .room-directory-item { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); }
    .room-directory-media { grid-column: 1 / 5; }
    .room-directory-copy { grid-column: 6 / 9; }
    .room-detail-intro { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); }
    .room-detail-meta { grid-column: 1 / 3; }
    .room-detail-intro .body-copy { grid-column: 4 / 9; }
    .contact-copy { grid-column: 1 / 4; }
    .map-panel { grid-column: 5 / 9; }

    .footer-grid {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      column-gap: var(--grid-gap);
    }

    .footer-main { grid-column: 1 / 4; }
    .footer-contact { grid-column: 4 / 6; }
    .footer-links { grid-column: 7 / 9; }
    .footer-meta { grid-column: 1 / -1; }

    .experience-index li {
      grid-template-columns: 1fr 1fr;
      align-items: baseline;
      gap: var(--grid-gap);
    }
  }

  @media (min-width: 64rem) {

    .header-inner {
      grid-template-columns: auto 1fr auto;
      gap: var(--space-7);
    }

    .brand { width: 144px; }
    .menu-toggle,
    .mobile-menu { display: none; }

    .desktop-nav {
      display: flex;
      justify-content: center;
      gap: var(--cluster);
    }

    .desktop-nav a {
      position: relative;
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      text-decoration: none;
      text-transform: none;
    }

    .desktop-nav a::after {
      position: absolute;
      right: 0;
      bottom: 8px;
      left: 0;
      height: 1px;
      background: currentColor;
      content: "";
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--dur-micro) var(--ease-standard);
    }

    .desktop-nav a:hover::after,
    .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

    .header-book {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      padding-inline: var(--space-5);
      border: 1px solid currentColor;
      text-decoration: none;
    }

    .site-header.is-scrolled { height: 80px; }

    .story-intro,
    .booking-band-inner,
    .media-story,
    .home-story,
    .room,
    .experience,
    .contact-grid,
    .footer-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--grid-gap);
    }

    .eyebrow,
    .story-intro .story-heading { grid-column: 1 / 10; }
    .story-intro .body-copy { grid-column: 1 / 7; grid-row: 2; }

    .home-path {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .home-path-media { grid-column: 1 / 8; }
    .home-path-copy { grid-column: 9 / 13; }
    .home-path:nth-child(even) .home-path-media { grid-column: 6 / 13; }
    .home-path:nth-child(even) .home-path-copy { grid-column: 1 / 5; }

    .media-story-media,
    .room-media,
    .experience-media { grid-column: 1 / 8; }
    .media-story-content,
    .home-story-copy,
    .room-content,
    .experience-content { grid-column: 9 / 13; }

    .media-story--reverse .media-story-media,
    .room:nth-child(even) .room-media,
    .experience:nth-child(even) .experience-media { grid-column: 6 / 13; }
    .media-story--reverse .media-story-content,
    .room:nth-child(even) .room-content,
    .experience:nth-child(even) .experience-content { grid-column: 1 / 5; }

    .home-story-media { grid-column: 1 / 8; }
    .home-story-copy { grid-column: 9 / 13; }
    .room-directory-item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
    .room-directory-media { grid-column: 1 / 8; }
    .room-directory-copy { grid-column: 9 / 13; }
    .room-directory-item:nth-child(even) .room-directory-media { grid-column: 6 / 13; order: 2; }
    .room-directory-item:nth-child(even) .room-directory-copy { grid-column: 1 / 5; order: 1; }
    .room-detail-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
    .room-detail-meta { grid-column: 1 / 4; }
    .room-detail-intro .body-copy { grid-column: 7 / 13; max-width: none; }
    .room-gallery-heading p { display: none; }
    .room-gallery {
      width: 100%;
      grid-auto-flow: row;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--grid-gap);
      overflow: visible;
      padding: 0;
    }
    .room-gallery figure { grid-column: span 6; aspect-ratio: 3 / 2; }
    .room-gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
    .room-gallery figure:nth-child(4) { grid-column: 1 / 8; }
    .room-gallery figure:nth-child(5) { grid-column: 8 / 13; }

    .booking-band-copy { grid-column: 1 / 8; }
    .booking-actions { grid-column: 9 / 13; }
    .contact-copy { grid-column: 1 / 5; }
    .map-panel { grid-column: 6 / 13; }
    .map-panel { aspect-ratio: 16 / 10; }

    .gallery-strip {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--grid-gap);
    }

    .gallery-strip figure:first-child { grid-column: 1 / 9; }
    .gallery-strip figure:not(:first-child) { grid-column: 10 / 13; }

    .image-collection {
      width: 100%;
      grid-auto-flow: row;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--grid-gap);
      overflow: visible;
      padding: 0;
    }

    .image-collection figure {
      grid-column: span 4;
      aspect-ratio: 4 / 5;
    }

    .image-collection figure:first-child,
    .image-collection figure:nth-child(4n) {
      grid-column: span 8;
      aspect-ratio: 16 / 10;
    }

    .image-collection figure:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      aspect-ratio: 21 / 9;
    }

    .footer-main { grid-column: 1 / 5; }
    .footer-contact { grid-column: 5 / 9; }
    .footer-links { grid-column: 10 / 13; }

    .sticky-actions { display: none; }
  }


  @media (max-width: 47.99rem) {
    .hero--internal {
      min-height: 100svh;
    }

    .hero-home {
      align-items: end;
      text-align: left;
    }

    .hero-home .hero-inner {
      display: flex;
      min-height: max(100svh, 568px);
      flex-direction: column;
      justify-content: flex-end;
      padding-top: calc(var(--header-h) + var(--space-7));
      padding-bottom: calc(var(--section) + env(safe-area-inset-bottom));
      transform: none;
    }

    .hero-home h1 { margin-inline: 0; }
    .hero-home .hero-summary { margin-inline: 0; }
    .hero-actions { justify-content: flex-start; }
    .hero-slider-controls {
      right: var(--gutter);
      top: calc(100svh - 64px - env(safe-area-inset-bottom));
      bottom: auto;
      grid-template-columns: repeat(2, 48px);
    }
    .hero-slider-status {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .hero-actions { gap: var(--space-3) var(--space-4); }
    .hero--internal .hero-inner {
      padding-top: calc(var(--header-h) + var(--space-7));
      padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom));
    }
    .booking-actions { align-items: flex-start; flex-direction: column; }
    .room-gallery-heading { display: block; }
    .room-gallery-heading p { margin-top: var(--space-3); }
    .room-pagination { grid-template-columns: 1fr; }
    .room-pagination a + a { border-top: 1px solid var(--border-subtle); border-left: 0; text-align: left; }
    .photo-band { aspect-ratio: 4 / 5; }
    .gallery-strip { grid-template-columns: 1fr; }
    .gallery-strip figure:first-child { grid-row: auto; }
    .map-panel { min-height: 0; }
    .site-footer { padding: var(--space-8) 0 var(--space-9); }
  }

  @media (max-width: 22.5rem) {
    .hero-home { min-height: max(100svh, 568px); }
    .hero-home .hero-inner {
      padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom));
      transform: translateY(-16px);
    }
    .hero-home .hero-actions .text-link { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: var(--dur-instant) !important;
      animation-duration: var(--dur-instant) !important;
      animation-iteration-count: 1 !important;
    }
    .hero-slide { transition: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }
}

/* Ingressi animati. Lo stato nascosto esiste solo se il JavaScript ha preparato
   il movimento (html.motion-ready); senza JS o con "riduci movimento" tutto resta visibile.
   Lo stato nascosto si applica di colpo; la transizione esiste solo in entrata (.is-visible). */
@layer motion {
  /* Prima che il motore parta: niente lampi di contenuto, con rete di sicurezza */
  .motion-ready:not(.motion-live) :is(.hero-inner, .reveal) > * {
    opacity: 0;
    animation: motion-failsafe var(--dur-instant) var(--ease-linear) var(--dur-failsafe) forwards;
  }

  @keyframes motion-failsafe {
    to { opacity: 1; }
  }

  /* Stati iniziali */
  .motion-live [data-reveal="item"] {
    opacity: 0;
    transform: translate3d(0, var(--rise), 0);
  }

  .reveal-line {
    display: block;
    /* La maschera taglia solo sotto la riga (con margine per le discendenti):
       nessun padding o margine, il titolo occupa lo stesso spazio del testo normale. */
    clip-path: inset(calc(var(--line-overscan) * -1) calc(var(--line-overscan) * -1) calc(var(--line-bleed) * -1) calc(var(--line-overscan) * -1));
  }

  .reveal-line-inner {
    display: block;
  }

  .motion-live [data-reveal="lines"] .reveal-line-inner {
    transform: translate3d(0, 135%, 0);
  }

  .motion-live [data-reveal="media"] {
    clip-path: inset(var(--media-inset) var(--media-inset) var(--media-inset) var(--media-inset));
  }

  .motion-live [data-reveal="media"] img,
  .motion-live .hero > .hero-media {
    transform: scale(var(--media-zoom));
  }

  /* Entrata: blocchi in sequenza, titoli riga per riga, immagini che si aprono */
  .motion-live [data-reveal="item"].is-visible {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-reveal) var(--ease-reveal),
      transform var(--dur-reveal) var(--ease-reveal);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  .motion-live [data-reveal="lines"].is-visible .reveal-line-inner {
    transform: none;
    transition: transform var(--dur-media) var(--ease-reveal);
    transition-delay: calc(var(--i, 0) * var(--stagger) + var(--l, 0) * var(--stagger-line));
  }

  .motion-live [data-reveal="media"].is-visible {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--dur-media) var(--ease-reveal);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  .motion-live [data-reveal="media"].is-visible img,
  .motion-live .hero.is-visible > .hero-media {
    transform: none;
    transition: transform var(--dur-media) var(--ease-reveal);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-live [data-reveal],
    .motion-live [data-reveal] .reveal-line-inner,
    .motion-live [data-reveal] img,
    .motion-live .hero > .hero-media {
      opacity: 1;
      transform: none;
      clip-path: none;
    }
  }
}