/*

 * Domus Murano · Stylesheet

 *

 * Estratto e adattato dal wireframe approvato.

 * Caricato:

 *   - Sul frontend del sito (pubblico)

 *   - Nell'iframe di preview di Elementor

 *

 * NON viene caricato nell'editor Elementor (l'admin) per evitare

 * conflitti con il pannello widget.

 */





  :root {

    /* Brand colors ufficiali */

    --white: #FFFFFF;

    --cream: #E5DEDA;          /* Background principale */

    --cream-deep: #EDDCD3;     /* Surface / placeholder bg */

    --rose: #AE7773;           /* Accent brand (era oro) */

    --ink-soft: #434342;       /* Testo secondario */

    --ink: #1D1D1B;            /* Testo primario */



    /* Derivati di servizio */

    --rose-soft: rgba(174, 119, 115, 0.4);

    --line: #D4C9C4;

    --muted: #8B7E78;

    --wire: #B5A39E;



    /* Font stack: Orelo viene forzato come font heading se disponibile. */

    --dm-font-heading: 'Orelo', 'Cormorant Garamond', Georgia, serif;

    --dm-font-body: 'Manrope', Arial, sans-serif;

  }



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



  html { scroll-behavior: smooth; }



  body {

    background: var(--cream);

    color: var(--ink);

    font-family: var(--dm-font-body);

    font-weight: 300;

    font-size: 15px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;

  }

  body.modal-open { overflow: hidden; }



  .serif { font-family: var(--dm-font-heading); }



  /* ===== PAGE NAVIGATION ===== */

  .brand-logo {

    cursor: pointer;

    display: flex;

    align-items: center;

    height: 56px;

  }

  .brand-logo img {

    height: 100%;

    width: auto;

    /* Su bg bianco non serve mix-blend-mode: il PNG si fonde nativamente */

  }



  .nav-links {

    display: flex;

    gap: 36px;

    list-style: none;

  }

  .nav-links button {

    background: none;

    border: none;

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: var(--ink-soft);

    cursor: pointer;

    padding: 4px 0;

    position: relative;

    transition: color 0.3s;

    font-weight: 400;

  }

  .nav-links button::after {

    content: '';

    position: absolute;

    bottom: -2px; left: 0;

    width: 0; height: 1px;

    background: var(--rose);

    transition: width 0.3s ease;

  }

  .nav-links button:hover, .nav-links button.active {

    color: var(--ink);

  }

  .nav-links button.active::after { width: 100%; }



  .lang-switch {

    display: flex;

    gap: 14px;

    font-size: 11px;

    letter-spacing: 0.25em;

    align-items: center;

  }

  .lang-switch span {

    cursor: pointer;

    padding-bottom: 2px;

    transition: color 0.3s;

  }

  .lang-switch span.active { color: var(--ink); border-bottom: 1px solid var(--rose); }

  .lang-switch span:not(.active) { color: var(--muted); }

  .lang-switch .sep { color: var(--line); border: none; cursor: default; }



  /* Hamburger button (visibile solo da mobile) */

  .hamburger {

    display: none;

    flex-direction: column;

    justify-content: space-between;

    width: 28px;

    height: 18px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 0;

    z-index: 1002;

    position: relative;

  }

  .hamburger span {

    display: block;

    width: 100%;

    height: 1.5px;

    background: var(--ink);

    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    transform-origin: center;

  }

  .hamburger.open span:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

  }

  .hamburger.open span:nth-child(2) {

    opacity: 0;

    transform: translateX(20px);

  }

  .hamburger.open span:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

  }



  /* Lang switch dentro al menu mobile */

  .nav-lang-mobile { display: none; }

  .lang-switch-mobile {

    display: flex;

    gap: 14px;

    font-size: 13px;

    letter-spacing: 0.3em;

    margin-top: 24px;

  }

  .lang-switch-mobile span.active { color: var(--ink); border-bottom: 1px solid var(--rose); padding-bottom: 2px; }

  .lang-switch-mobile span:not(.active):not(.sep) { color: var(--muted); }

  .lang-switch-mobile .sep { color: var(--line); }



  /* ===== PAGE LAYOUT ===== */

  .page.active { display: block; }



  @keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

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

  }



  .container { max-width: 1680px; margin: 0 auto; padding: 0 64px; }



  /* Full-bleed sections: escono dal container per occupare tutta la larghezza viewport */

  .full-bleed {

    width: 100vw;

    position: relative;

    left: 50%;

    right: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

  }

  .full-bleed > .container { padding-left: 64px; padding-right: 64px; }

  .full-bleed.is-dark { background: var(--ink); color: var(--cream); }

  .full-bleed.is-cream { background: var(--cream-deep); }

  .full-bleed.is-dark .section-num,

  .full-bleed.is-dark .hero-eyebrow { color: var(--rose); }

  .full-bleed.is-dark a { color: var(--rose); }

  .full-bleed.is-dark .section-title,

  .full-bleed.is-dark .section-title em { color: var(--cream); }

  .full-bleed.is-dark .section-title em { color: var(--rose); }

  .full-bleed.is-dark .section-intro { color: rgba(229, 222, 218, 0.75); }



  /* ===== WIREFRAME BOX STYLE ===== */

  .wf-box {

    background: var(--cream-deep);

    border: 1px dashed var(--wire);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    position: relative;

    overflow: hidden;

  }

  .wf-box::before {

    content: '';

    position: absolute;

    inset: 0;

    background-image: linear-gradient(135deg, transparent 49%, var(--wire) 49.5%, var(--wire) 50.5%, transparent 51%);

    opacity: 0.18;

  }

  .wf-box .label {

    position: relative;

    z-index: 1;

    background: var(--cream);

    padding: 6px 14px;

    border: 1px solid var(--wire);

  }



  /* Variante con immagine reale: mantiene struttura ma nasconde decorazione wireframe */

  .wf-box.wf-img {

    background-size: cover;

    background-position: center;

    background-color: var(--cream-deep);

    border-style: solid;

    border-color: var(--line);

  }

  .wf-box.wf-img::before { display: none; }

  .wf-box.wf-img .label { display: none; }



  /* ===== HOME PAGE ===== */

  .hero {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 80px;

    align-items: center;

    min-height: 78vh;

    padding: 40px 0 80px;

    position: relative;

  }

  .hero-text { position: relative; }

  .hero-eyebrow {

    color: var(--rose);

    font-size: 11px;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    margin-bottom: 32px;

    display: flex;

    align-items: center;

    gap: 16px;

    font-weight: 500;

  }

  .hero-eyebrow::before {

    content: '';

    width: 40px; height: 1px;

    background: var(--rose);

  }

  .hero h1 {

    font-family: var(--dm-font-heading);

    font-size: clamp(42px, 5vw, 76px);

    font-weight: 300;

    line-height: 1.0;

    letter-spacing: -0.01em;

    margin-bottom: 28px;

    color: var(--ink);

  }

  .hero h1 em {

    font-style: italic;

    color: var(--rose);

    font-weight: 400;

  }

  .hero-sub {

    font-size: 17px;

    max-width: 440px;

    color: var(--ink-soft);

    margin-bottom: 40px;

    line-height: 1.7;

  }

  .hero-cta {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 16px 32px;

    border: 1px solid var(--ink);

    color: var(--ink);

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    background: transparent;

    cursor: pointer;

    font-family: var(--dm-font-body);

    transition: all 0.3s;

    font-weight: 400;

  }

  .hero-cta:hover { background: var(--ink); color: var(--cream); }

  .hero-cta .arrow { transition: transform 0.3s; }

  .hero-cta:hover .arrow { transform: translateX(4px); }



  .hero-visual {

    aspect-ratio: 3/4;

    position: relative;

  }

  .hero-visual .wf-box { height: 100%; }

  .hero-visual::after {

    content: '';

    position: absolute;

    bottom: -30px; right: -30px;

    width: 180px; height: 180px;

    border: 1px solid var(--rose);

    z-index: -1;

  }



  .hero-meta {

    position: absolute;

    bottom: 60px;

    right: 0;

    text-align: right;

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--muted);

  }

  .hero-meta strong { color: var(--ink); display: block; margin-bottom: 4px; font-weight: 500; }



  /* ===== SECTIONS ===== */

  section { padding: 100px 0; border-top: 1px solid var(--line); }



  .section-head {

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 60px;

    margin-bottom: 60px;

    align-items: end;

  }

  .section-num {

    font-family: var(--dm-font-heading);

    font-style: italic;

    font-size: 22px;

    color: var(--rose);

  }

  .section-title {

    font-family: var(--dm-font-heading);

    font-size: clamp(32px, 3.6vw, 50px);

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: -0.01em;

  }

  .section-title em { font-style: italic; color: var(--rose); }

  .section-intro {

    color: var(--ink-soft);

    max-width: 520px;

    line-height: 1.8;

    font-size: 16px;

  }

  .section-intro a { color: var(--rose); text-decoration: none; border-bottom: 1px solid var(--rose); }



  /* Featured Works (Home) */

  .works-grid {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: 24px;

  }

  .work-card {

    cursor: pointer;

    transition: transform 0.5s ease;

  }

  .work-card:hover { transform: translateY(-6px); }

  .work-card .wf-box { aspect-ratio: 4/5; margin-bottom: 16px; }

  .work-card h3 {

    font-family: var(--dm-font-heading);

    font-size: 24px;

    font-weight: 400;

    margin-bottom: 4px;

  }

  .work-card .work-meta {

    font-size: 11px;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--muted);

  }

  .work-card.span-7 { grid-column: span 7; }

  .work-card.span-7 .wf-box { aspect-ratio: 16/10; }

  .work-card.span-5 { grid-column: span 5; }

  .work-card.span-5 .wf-box { aspect-ratio: 4/5; }

  .work-card.span-4 { grid-column: span 4; }

  .work-card.span-4 .wf-box { aspect-ratio: 3/4; }



  /* Quote Block */

  .quote-block {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

    align-items: center;

    padding: 120px 0;

  }

  .quote-portrait .wf-box { aspect-ratio: 3/4; }

  .quote-text {

    font-family: var(--dm-font-heading);

    font-size: clamp(26px, 2.6vw, 34px);

    font-weight: 300;

    line-height: 1.35;

    font-style: italic;

    color: var(--cream);

    position: relative;

  }

  .quote-text::before {

    content: '"';

    font-size: 120px;

    color: var(--rose);

    position: absolute;

    top: -40px;

    left: -50px;

    line-height: 1;

    font-family: var(--dm-font-heading);

  }

  .quote-attr {

    margin-top: 32px;

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(229, 222, 218, 0.6);

    font-style: normal;

    font-family: var(--dm-font-body);

  }

  .quote-attr strong { color: var(--cream); font-weight: 500; display: block; margin-bottom: 4px; }



  /* ===== FASCIA PROCESSO (split editoriale con 4 step) ===== */

  .process-strip {

    display: grid;

    grid-template-columns: 1fr 2.4fr;

    min-height: 520px;

  }

  .process-intro {

    background: var(--cream-deep);

    padding: 80px 64px;

    display: flex;

    flex-direction: column;

    justify-content: center;

  }

  .process-intro .eyebrow {

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 32px;

    font-weight: 500;

  }

  .process-intro h2 {

    font-family: var(--dm-font-heading);

    font-size: clamp(30px, 3vw, 44px);

    font-weight: 300;

    line-height: 1.1;

    letter-spacing: -0.01em;

    color: var(--ink);

    margin-bottom: 48px;

  }

  .process-intro .approach-link {

    align-self: flex-start;

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--ink);

    text-decoration: none;

    background: none;

    border: none;

    border-bottom: 1px solid var(--ink);

    padding: 0 0 6px 0;

    cursor: pointer;

    font-weight: 500;

    transition: color 0.3s, border-color 0.3s;

  }

  .process-intro .approach-link:hover { color: var(--rose); border-color: var(--rose); }



  .process-steps {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    background: var(--ink);

    transition: grid-template-columns 0.65s cubic-bezier(0.4, 0, 0.2, 1);

  }

  .process-steps[data-active="0"] { grid-template-columns: 2.6fr 0.5fr 0.5fr 0.5fr; }

  .process-steps[data-active="1"] { grid-template-columns: 0.5fr 2.6fr 0.5fr 0.5fr; }

  .process-steps[data-active="2"] { grid-template-columns: 0.5fr 0.5fr 2.6fr 0.5fr; }

  .process-steps[data-active="3"] { grid-template-columns: 0.5fr 0.5fr 0.5fr 2.6fr; }

  .process-step {

    position: relative;

    padding: 48px 32px;

    display: flex;

    flex-direction: column;

    color: var(--cream);

    overflow: hidden;

    min-height: 600px;

    cursor: pointer;

    transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  }

  /* Step compatto: padding ridotto */

  .process-steps[data-active] .process-step:not(.is-active) { padding: 48px 18px; }

  .process-step + .process-step { border-left: 1px solid rgba(229, 222, 218, 0.08); }

  .process-step .step-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    background-color: #333;

    opacity: 0.55;

    z-index: 0;

  }

  .process-step::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(29,29,27,0.35) 0%, rgba(29,29,27,0.78) 100%);

    z-index: 1;

  }

  .process-step > * { position: relative; z-index: 2; }

  .process-step .step-icon {

    width: 32px;

    height: 32px;

    color: var(--rose);

    margin-bottom: 24px;

    opacity: 0.95;

    transition: opacity 0.4s ease, margin-bottom 0.4s ease;

  }

  .process-step .step-icon svg {

    width: 100%;

    height: 100%;

    display: block;

  }

  .process-step .num {

    font-family: var(--dm-font-heading);

    font-size: 52px;

    font-weight: 300;

    line-height: 1;

    color: var(--cream);

    margin-bottom: 32px;

    transition: font-size 0.4s ease, margin-bottom 0.4s ease;

  }

  .process-step .label {

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: var(--cream);

    font-weight: 500;

    margin-bottom: 20px;

    transition: font-size 0.4s ease, letter-spacing 0.4s ease;

  }

  .process-step p {

    color: rgba(229, 222, 218, 0.78);

    font-size: 14px;

    line-height: 1.7;

    width: 280px;

    flex-shrink: 0;

  }



  /* Step COMPATTO: nascondo del tutto p e step-details (evita testo che si rompe in molte righe) */

  .process-steps[data-active] .process-step:not(.is-active) p,

  .process-steps[data-active] .process-step:not(.is-active) .step-details {

    display: none;

  }

  .process-steps[data-active] .process-step:not(.is-active) .step-icon { margin-bottom: 20px; opacity: 0.7; }

  .process-steps[data-active] .process-step:not(.is-active) .num { font-size: 38px; margin-bottom: 18px; }

  .process-steps[data-active] .process-step:not(.is-active) .label { font-size: 10px; letter-spacing: 0.25em; }



  /* Step ATTIVO: animation fade-in (solo opacity, no translate Y per evitare percezione di salto) */

  .process-step.is-active p { animation: stepFadeIn 0.4s 0.3s both; }

  .process-step.is-active .step-details { animation: stepFadeIn 0.4s 0.45s both; }

  @keyframes stepFadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

  }



  .step-details {

    margin-top: 32px;

    padding-top: 24px;

    border-top: 1px solid rgba(229, 222, 218, 0.16);

    width: 480px;

    flex-shrink: 0;

  }

  .step-details h4 {

    font-family: var(--dm-font-body);

    font-size: 10px;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: var(--rose);

    font-weight: 600;

    margin: 0 0 18px 0;

  }

  .step-details ul {

    list-style: none;

    padding: 0;

    margin: 0;

  }

  .step-details li {

    font-family: var(--dm-font-body);

    font-size: 13.5px;

    line-height: 1.6;

    color: rgba(229, 222, 218, 0.88);

    padding-left: 20px;

    margin-bottom: 12px;

    position: relative;

  }

  .step-details li::before {

    content: '';

    width: 10px;

    height: 1px;

    background: var(--rose);

    position: absolute;

    left: 0;

    top: 11px;

  }



  /* Hover su step compatto = preview di attivazione */

  .process-step:not(.is-active):hover { background: rgba(174, 119, 115, 0.06); }

  .process-step:not(.is-active):hover .num { color: var(--cream); }

  .process-step:not(.is-active):hover .step-icon { opacity: 1; }



  /* ===== VISION BLOCK (about preview in home) ===== */

  .vision-block {

    display: grid;

    grid-template-columns: 1fr 1.1fr;

    gap: 80px;

    align-items: center;

    padding: 80px 0 40px;

  }

  .vision-visual .wf-box {

    aspect-ratio: 4/5;

  }

  .vision-text .section-num {

    color: var(--rose);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    font-weight: 500;

  }



  /* ===== ABOUT PAGE ===== */

  .about-hero {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    margin-bottom: 100px;

    align-items: start;

  }

  .about-hero .wf-box { aspect-ratio: 3/4; }

  .about-intro-text { padding-top: 40px; }

  .about-intro-text h2 {

    font-family: var(--dm-font-heading);

    font-size: clamp(36px, 4.2vw, 58px);

    font-weight: 300;

    line-height: 1.05;

    margin-bottom: 32px;

  }

  .about-intro-text h2 em { font-style: italic; color: var(--rose); }

  .about-intro-text p {

    margin-bottom: 20px;

    line-height: 1.9;

    color: var(--ink-soft);

    font-size: 16px;

  }



  .about-timeline {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 48px;

    padding: 80px 0;

    border-top: 1px solid var(--line);

  }

  .timeline-item .year {

    font-family: var(--dm-font-heading);

    font-size: 56px;

    color: var(--rose);

    font-weight: 300;

    line-height: 1;

    margin-bottom: 16px;

  }

  .timeline-item h4 {

    font-family: var(--dm-font-heading);

    font-size: 22px;

    font-weight: 500;

    margin-bottom: 12px;

  }

  .timeline-item p {

    color: var(--ink-soft);

    font-size: 14px;

    line-height: 1.7;

  }



  .values-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 60px;

    padding: 80px 0;

    border-top: 1px solid var(--line);

  }

  .value-item .num {

    font-family: var(--dm-font-heading);

    font-style: italic;

    color: var(--rose);

    font-size: 16px;

    margin-bottom: 16px;

  }

  .value-item h4 {

    font-family: var(--dm-font-heading);

    font-size: 28px;

    font-weight: 400;

    margin-bottom: 16px;

    line-height: 1.2;

  }

  .value-item p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }



  /* ===== CATALOGO PAGE ===== */

  .catalogo-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    margin-bottom: 60px;

    align-items: end;

  }

  .catalogo-header h2 {

    font-family: var(--dm-font-heading);

    font-size: clamp(38px, 4.6vw, 64px);

    font-weight: 300;

    line-height: 1.0;

  }

  .catalogo-header h2 em { font-style: italic; color: var(--rose); }



  .filter-bar {

    display: flex;

    gap: 28px;

    padding: 24px 0;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    margin-bottom: 60px;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

  }

  .filter-bar-left { display: flex; gap: 28px; flex-wrap: wrap; }

  .filter-bar button {

    background: none;

    border: none;

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--muted);

    cursor: pointer;

    padding: 4px 0;

    white-space: nowrap;

    transition: color 0.3s;

  }

  .filter-bar button.active, .filter-bar button:hover { color: var(--ink); }

  .filter-bar button.active { color: var(--rose); }

  .filter-bar .count { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }



  .catalogo-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 56px 32px;

  }

  .product-card {

    cursor: pointer;

    transition: transform 0.4s ease;

  }

  .product-card:hover { transform: translateY(-6px); }

  .product-card .wf-box {

    aspect-ratio: 4/5;

    margin-bottom: 20px;

    transition: border-color 0.3s;

  }

  .product-card:hover .wf-box { border-color: var(--rose); }

  .product-card:hover .wf-box .label { border-color: var(--rose); color: var(--rose); }

  .product-card .cat {

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--rose);

    margin-bottom: 8px;

  }

  .product-card h3 {

    font-family: var(--dm-font-heading);

    font-size: 26px;

    font-weight: 400;

    margin-bottom: 6px;

  }

  .product-card .year {

    font-size: 13px;

    color: var(--muted);

    font-style: italic;

    font-family: var(--dm-font-heading);

    margin-bottom: 12px;

  }

  .product-card .open-info {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 10px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--ink);

    border-bottom: 1px solid var(--ink);

    padding-bottom: 4px;

  }



  /* ===== PRODUCT MODAL/POPUP ===== */

  .modal-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(29, 29, 27, 0.65);

    backdrop-filter: blur(8px);

    z-index: 2000;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

  }

  .modal-backdrop.active {

    opacity: 1;

    pointer-events: all;

  }

  .modal {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -48%);

    width: min(1200px, 92vw);

    height: min(90vh, 860px);

    background: var(--cream);

    z-index: 2001;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease, transform 0.4s ease;

    overflow: hidden;

    border: 1px solid var(--line);

    box-shadow: 0 40px 80px rgba(29, 29, 27, 0.25);

  }

  .modal.active {

    opacity: 1;

    pointer-events: all;

    transform: translate(-50%, -50%);

  }

  .modal-close {

    position: absolute;

    top: 24px; right: 24px;

    width: 44px; height: 44px;

    border-radius: 50%;

    background: var(--cream);

    border: 1px solid var(--line);

    cursor: pointer;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    color: var(--ink);

    transition: all 0.3s;

  }

  .modal-close:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }



  .modal-content {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    height: 100%;

  }

  .modal-gallery {

    background: var(--cream-deep);

    position: relative;

    display: flex;

    flex-direction: column;

  }

  .modal-main-image {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

  }

  .modal-main-image .wf-box {

    width: 100%;

    height: 100%;

    background: transparent;

  }

  .modal-thumbs {

    display: flex;

    gap: 12px;

    padding: 20px 32px;

    border-top: 1px solid var(--line);

    background: var(--cream);

  }

  .modal-thumb {

    width: 60px;

    height: 60px;

    border: 1px dashed var(--wire);

    background: var(--cream-deep);

    cursor: pointer;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    color: var(--muted);

    transition: border-color 0.3s;

  }

  .modal-thumb.active { border-color: var(--rose); border-style: solid; }

  .modal-thumb:hover { border-color: var(--rose); }



  .modal-info {

    padding: 40px 44px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    background: var(--white);

    /* Scrollbar nascosta (fallback nel caso il contenuto fosse extra-lungo) */

    scrollbar-width: none;

    -ms-overflow-style: none;

  }

  .modal-info::-webkit-scrollbar { width: 0; height: 0; display: none; }

  .modal-info .cat {

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--rose);

    margin-bottom: 14px;

  }

  .modal-info h2 {

    font-family: var(--dm-font-heading);

    font-size: 40px;

    font-weight: 300;

    line-height: 1.05;

    margin-bottom: 6px;

  }

  .modal-info .subtitle {

    font-family: var(--dm-font-heading);

    font-style: italic;

    color: var(--muted);

    font-size: 17px;

    margin-bottom: 24px;

  }

  .modal-info .description {

    color: var(--ink-soft);

    line-height: 1.7;

    margin-bottom: 24px;

    font-size: 14.5px;

  }



  .modal-specs {

    border-top: 1px solid var(--line);

    margin-bottom: 24px;

  }

  .spec-row {

    display: grid;

    grid-template-columns: 130px 1fr;

    padding: 12px 0;

    border-bottom: 1px solid var(--line);

    align-items: start;

  }

  .spec-row .lbl {

    font-size: 10px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--muted);

    padding-top: 2px;

  }

  .spec-row .val {

    font-size: 13.5px;

    color: var(--ink);

    line-height: 1.55;

  }

  .spec-row .val strong { color: var(--rose); font-weight: 500; }



  .modal-actions {

    display: flex;

    gap: 14px;

    margin-top: auto;

    padding-top: 20px;

  }

  .modal-actions .btn-primary {

    flex: 1;

    padding: 15px 24px;

    background: var(--ink);

    color: var(--cream);

    border: none;

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    cursor: pointer;

    font-family: var(--dm-font-body);

    transition: background 0.3s;

  }

  .modal-actions .btn-primary:hover { background: var(--rose); }

  .modal-actions .btn-secondary {

    padding: 15px 24px;

    background: transparent;

    color: var(--ink);

    border: 1px solid var(--ink);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    cursor: pointer;

    font-family: var(--dm-font-body);

    transition: all 0.3s;

  }

  .modal-actions .btn-secondary:hover { background: var(--ink); color: var(--cream); }



  /* ===== BLOG PAGE ===== */

  .blog-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    margin-bottom: 60px;

    align-items: end;

  }

  .blog-header h2 {

    font-family: var(--dm-font-heading);

    font-size: clamp(38px, 4.6vw, 64px);

    font-weight: 300;

    line-height: 1.0;

  }

  .blog-header h2 em { font-style: italic; color: var(--rose); }



  .blog-cat-bar {

    display: flex;

    gap: 28px;

    padding: 24px 0;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    margin-bottom: 60px;

    overflow-x: auto;

    flex-wrap: wrap;

  }

  .blog-cat-bar button {

    background: none;

    border: none;

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--muted);

    cursor: pointer;

    padding: 4px 0;

    white-space: nowrap;

    transition: color 0.3s;

  }

  .blog-cat-bar button.active { color: var(--rose); }

  .blog-cat-bar button:hover { color: var(--ink); }



  /* Featured Article */

  .featured-article {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 60px;

    margin-bottom: 100px;

    align-items: center;

    cursor: pointer;

  }

  .featured-article .wf-box { aspect-ratio: 5/4; }

  .featured-article .article-text { padding: 20px 0; }

  .featured-article .featured-tag {

    display: inline-block;

    padding: 6px 14px;

    background: var(--rose);

    color: var(--white);

    font-size: 10px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    margin-bottom: 24px;

    font-weight: 500;

  }

  .featured-article .cat-date {

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 16px;

  }

  .featured-article .cat-date .accent { color: var(--rose); }

  .featured-article h3 {

    font-family: var(--dm-font-heading);

    font-size: clamp(30px, 3.4vw, 46px);

    font-weight: 300;

    line-height: 1.1;

    margin-bottom: 20px;

  }

  .featured-article h3 em { font-style: italic; color: var(--rose); }

  .featured-article .excerpt {

    color: var(--ink-soft);

    line-height: 1.8;

    margin-bottom: 24px;

    font-size: 16px;

  }

  .featured-article .read-more {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--ink);

    border-bottom: 1px solid var(--ink);

    padding-bottom: 4px;

  }



  /* Article Grid */

  .articles-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 48px 32px;

  }

  .article-card { cursor: pointer; transition: transform 0.4s; }

  .article-card:hover { transform: translateY(-6px); }

  .article-card .wf-box {

    aspect-ratio: 4/3;

    margin-bottom: 20px;

  }

  .article-card .meta {

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 12px;

  }

  .article-card .meta .accent { color: var(--rose); }

  .article-card .meta .sep { width: 4px; height: 4px; background: var(--line); border-radius: 50%; }

  .article-card h4 {

    font-family: var(--dm-font-heading);

    font-size: 26px;

    font-weight: 400;

    line-height: 1.2;

    margin-bottom: 12px;

  }

  .article-card .excerpt {

    color: var(--ink-soft);

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 16px;

  }

  .article-card .read {

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--rose);

  }



  /* Newsletter */

  .newsletter-block {

    margin-top: 100px;

    padding: 80px;

    background: var(--ink);

    color: var(--cream);

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

  }

  .newsletter-block h3 {

    font-family: var(--dm-font-heading);

    font-size: 44px;

    font-weight: 300;

    line-height: 1.1;

  }

  .newsletter-block h3 em { font-style: italic; color: var(--rose); }

  .newsletter-block p {

    margin-top: 16px;

    color: rgba(229, 222, 218, 0.7);

    line-height: 1.7;

  }

  .newsletter-form {

    display: flex;

    gap: 12px;

    margin-top: 8px;

  }

  .newsletter-form input {

    flex: 1;

    background: transparent;

    border: none;

    border-bottom: 1px solid rgba(229, 222, 218, 0.3);

    color: var(--cream);

    padding: 14px 0;

    font-family: var(--dm-font-body);

    font-size: 14px;

    outline: none;

  }

  .newsletter-form input::placeholder { color: rgba(229, 222, 218, 0.4); }

  .newsletter-form input:focus { border-bottom-color: var(--rose); }

  .newsletter-form button {

    background: var(--rose);

    color: var(--white);

    border: none;

    padding: 14px 28px;

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    cursor: pointer;

    font-family: var(--dm-font-body);

    font-weight: 500;

  }



  /* Home Blog Preview */

  .home-blog-preview {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

  }



  /* ===== CONTATTI PAGE ===== */

  .contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    margin-bottom: 100px;

  }

  .contact-info h2 {

    font-family: var(--dm-font-heading);

    font-size: clamp(36px, 4.4vw, 60px);

    font-weight: 300;

    line-height: 1.0;

    margin-bottom: 40px;

  }

  .contact-info h2 em { font-style: italic; color: var(--rose); }

  .contact-info p {

    color: var(--ink-soft);

    line-height: 1.9;

    margin-bottom: 48px;

    max-width: 420px;

  }



  .contact-detail {

    display: grid;

    grid-template-columns: 130px 1fr;

    padding: 24px 0;

    border-top: 1px solid var(--line);

    align-items: start;

  }

  .contact-detail:last-of-type { border-bottom: 1px solid var(--line); }

  .contact-detail .lbl {

    font-size: 11px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--rose);

  }

  .contact-detail .val {

    font-family: var(--dm-font-heading);

    font-size: 20px;

    line-height: 1.4;

    color: var(--ink);

  }

  .contact-detail .val span {

    display: block;

    font-family: var(--dm-font-body);

    font-size: 13px;

    color: var(--muted);

    margin-top: 4px;

  }



  .contact-form { padding-top: 40px; }

  .contact-form .eyebrow {

    color: var(--rose);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    margin-bottom: 24px;

  }

  .contact-form h3 {

    font-family: var(--dm-font-heading);

    font-size: 36px;

    font-weight: 300;

    line-height: 1.2;

    margin-bottom: 40px;

  }

  .form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    margin-bottom: 24px;

  }

  .form-field {

    display: flex;

    flex-direction: column;

  }

  .form-field label {

    font-size: 10px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 10px;

  }

  .form-field input, .form-field textarea, .form-field select {

    border: none;

    border-bottom: 1px solid var(--line);

    background: transparent;

    padding: 8px 0 12px;

    font-family: var(--dm-font-body);

    font-size: 15px;

    color: var(--ink);

    outline: none;

  }

  .form-field input:focus, .form-field textarea:focus, .form-field select:focus {

    border-bottom-color: var(--rose);

  }

  .form-field.full { grid-column: 1 / -1; }

  .form-field textarea { resize: vertical; min-height: 100px; }



  .submit-btn {

    margin-top: 32px;

    padding: 18px 40px;

    background: var(--ink);

    color: var(--cream);

    border: none;

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    cursor: pointer;

    font-family: var(--dm-font-body);

    transition: background 0.3s;

  }

  .submit-btn:hover { background: var(--rose); }



  /* ===== FOOTER ===== */

  footer {

    background: var(--ink);

    color: var(--cream);

    padding: 80px 0 40px;

    margin-top: 100px;

  }

  .footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 60px;

    margin-bottom: 60px;

  }

  .footer-logo {

    margin-bottom: 24px;

    height: 60px;

  }

  .footer-logo img {

    height: 100%;

    width: auto;

  }

  .footer-brand p {

    color: rgba(229, 222, 218, 0.6);

    line-height: 1.7;

    max-width: 320px;

    font-size: 14px;

  }

  .footer-col h5 {

    font-size: 10px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--rose);

    margin-bottom: 20px;

    font-weight: 500;

  }

  .footer-col ul { list-style: none; }

  .footer-col li {

    margin-bottom: 10px;

    font-size: 14px;

    color: rgba(229, 222, 218, 0.7);

    cursor: pointer;

    transition: color 0.3s;

  }

  .footer-col li:hover { color: var(--rose); }



  .footer-bottom {

    border-top: 1px solid rgba(229, 222, 218, 0.1);

    padding-top: 32px;

    display: flex;

    justify-content: space-between;

    font-size: 11px;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: rgba(229, 222, 218, 0.5);

  }



  /* Press Strip */

  .press-strip {

    padding: 60px 0;

    border-top: 1px solid var(--line);

  }

  .press-strip .eyebrow {

    text-align: center;

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    margin-bottom: 32px;

  }

  .press-logos {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

  }

  .press-logo {

    font-family: var(--dm-font-heading);

    font-size: 22px;

    color: var(--muted);

    font-style: italic;

    opacity: 0.7;

  }



  /* ===================================================

     RESPONSIVE — Mobile-first considerations

     Breakpoints: 1200 / 1000 / 768 / 480

     =================================================== */



  /* Desktop ridotto */

  @media (max-width: 1200px) {

    .container { padding: 0 32px; }

    .nav-links { gap: 24px; }

    .hero { gap: 60px; }

    .quote-block { gap: 60px; }

    .about-hero, .blog-header, .catalogo-header { gap: 60px; }

  }



  /* Tablet — attiva hamburger menu */

  @media (max-width: 1000px) {

    .hamburger { display: flex; }



    .nav-links {

      position: fixed;

      top: 0;

      right: 0;

      width: 100%;

      height: 100vh;

      height: 100dvh;

      background: var(--cream);

      flex-direction: column;

      justify-content: center;

      align-items: center;

      gap: 28px;

      padding: 0;

      transform: translateX(100%);

      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

      z-index: 1000;

      list-style: none;

      margin: 0;

    }

    .nav-links.open { transform: translateX(0); }

    .nav-links button {

      font-family: var(--dm-font-heading);

      font-size: 32px;

      font-weight: 300;

      letter-spacing: 0.02em;

      text-transform: none;

      color: var(--ink);

      padding: 8px 0;

    }

    .nav-links button.active { color: var(--rose); font-style: italic; }

    .nav-links button.active::after { display: none; }

    .nav-links button::after { display: none; }

    .nav-lang-mobile { display: block; }



    .lang-switch { display: none; }



    body.menu-open { overflow: hidden; }

  }



  /* Tablet portrait & small tablet */

  @media (max-width: 900px) {

    .container { padding: 0 24px; }



    /* Hero */

    .hero {

      grid-template-columns: 1fr;

      gap: 48px;

      min-height: auto;

      padding: 20px 0 60px;

    }

    .hero-visual { aspect-ratio: 4/5; max-height: 70vh; }

    .hero-meta {

      position: static;

      text-align: left;

      margin-top: 0;

    }



    /* Quote */

    .quote-block {

      grid-template-columns: 1fr;

      gap: 48px;

      padding: 80px 0;

    }

    .quote-text::before { font-size: 80px; top: -30px; left: -20px; }



    /* Process strip — stack su tablet, accordion verticale */

    .process-strip { grid-template-columns: 1fr; min-height: auto; }

    .process-intro { padding: 60px 32px; }

    .process-steps,

    .process-steps[data-active],

    .process-steps[data-active="0"],

    .process-steps[data-active="1"],

    .process-steps[data-active="2"],

    .process-steps[data-active="3"] {

      grid-template-columns: 1fr;

      grid-template-rows: auto auto auto auto;

    }

    .process-step { min-height: 0; padding: 32px 28px !important; border-top: 1px solid rgba(229, 222, 218, 0.08); }

    .process-step:first-child { border-top: none; }

    /* Su tablet/mobile: descrizione e dettagli SEMPRE visibili (override display:none) */

    .process-steps[data-active] .process-step:not(.is-active) p,

    .process-steps[data-active] .process-step:not(.is-active) .step-details {

      display: block;

    }

    .process-steps[data-active] .process-step:not(.is-active) .num { font-size: 44px; margin-bottom: 24px; }

    .process-steps[data-active] .process-step:not(.is-active) .label { font-size: 11px; letter-spacing: 0.32em; }

    /* Disabilita animation su mobile (no toggle interattivo) */

    .process-step.is-active p,

    .process-step.is-active .step-details { animation: none; }



    /* Vision block — stack su tablet */

    .vision-block { grid-template-columns: 1fr; gap: 48px; padding: 60px 0 20px; }

    .vision-visual .wf-box { aspect-ratio: 16/10; max-height: 60vh; }



    /* About / Catalogo / Blog / Contatti headers */

    .about-hero,

    .catalogo-header,

    .blog-header,

    .contact-grid,

    .featured-article,

    .newsletter-block,

    .section-head {

      grid-template-columns: 1fr;

      gap: 40px;

    }

    .about-intro-text { padding-top: 0; }

    .contact-grid { gap: 60px; }



    /* Multi-column grids → 2 colonne */

    .catalogo-grid,

    .articles-grid,

    .home-blog-preview,

    .values-grid,

    .about-timeline,

    .process-steps {

      grid-template-columns: repeat(2, 1fr);

      gap: 32px;

    }



    /* Footer 2 colonne */

    .footer-grid {

      grid-template-columns: 1fr 1fr;

      gap: 40px;

    }

    .footer-brand { grid-column: 1 / -1; }



    /* Works grid: simplificare span layout */

    .works-grid {

      grid-template-columns: repeat(2, 1fr);

      gap: 16px;

    }

    .works-grid .work-card.span-7,

    .works-grid .work-card.span-5,

    .works-grid .work-card.span-4 {

      grid-column: span 1;

      margin-top: 0;

    }

    .works-grid .work-card.span-7 .wf-box,

    .works-grid .work-card.span-5 .wf-box {

      aspect-ratio: 4/5;

    }



    section { padding: 60px 0; }

    .section-head { margin-bottom: 40px; }



    /* Modal: passa a singola colonna */

    .modal {

      width: 96vw;

      height: 92vh;

      height: 92dvh;

    }

    .modal-content { grid-template-columns: 1fr; overflow-y: auto; }

    .modal-info { padding: 32px 24px; }

    .modal-info h2 { font-size: 36px; }

  }



  /* Mobile (smartphone) */

  @media (max-width: 640px) {

    .container { padding: 0 20px; }



    /* Wireframe label — versione corta */

    



    .brand-logo { height: 38px; }



    /* Grid → 1 colonna ovunque */

    .catalogo-grid,

    .articles-grid,

    .home-blog-preview,

    .values-grid,

    .about-timeline,

    .footer-grid,

    .works-grid,

    .process-steps {

      grid-template-columns: 1fr;

      gap: 32px;

    }

    .footer-brand { grid-column: span 1; }



    /* Hero sizes */

    .hero { padding: 16px 0 48px; }

    .hero h1 { font-size: clamp(40px, 11vw, 60px); margin-bottom: 20px; }

    .hero-sub { font-size: 15px; margin-bottom: 32px; }

    .hero-eyebrow { font-size: 10px; margin-bottom: 24px; }

    .hero-cta { padding: 14px 24px; font-size: 10px; letter-spacing: 0.25em; }

    .hero-visual::after { display: none; }



    /* Section titles */

    .section-title { font-size: clamp(34px, 8vw, 48px); }

    .about-intro-text h2 { font-size: clamp(38px, 9vw, 58px); }

    .catalogo-header h2,

    .blog-header h2,

    .contact-info h2,

    .featured-article h3 { font-size: clamp(36px, 9vw, 56px); }



    /* Quote */

    .quote-block { padding: 60px 0; }

    .quote-text { font-size: 22px; }

    .quote-text::before { font-size: 60px; top: -20px; left: -10px; }



    /* Forms */

    .form-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }

    .submit-btn { width: 100%; padding: 16px; }



    /* Filtri orizzontali con scroll */

    .filter-bar,

    .blog-cat-bar {

      flex-wrap: nowrap;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

      padding: 16px 0;

      gap: 20px;

      margin-bottom: 40px;

      scrollbar-width: none;

    }

    .filter-bar::-webkit-scrollbar,

    .blog-cat-bar::-webkit-scrollbar { display: none; }

    .filter-bar-left { flex-wrap: nowrap; gap: 20px; padding-right: 20px; }

    .filter-bar .count { display: none; }



    /* Modal full-screen */

    .modal {

      width: 100vw;

      height: 100vh;

      height: 100dvh;

      max-height: none;

      border: none;

      top: 0;

      left: 0;

      transform: translate(0, 0);

    }

    .modal.active { transform: translate(0, 0); }

    .modal-content {

      grid-template-columns: 1fr;

      overflow-y: auto;

      height: 100%;

    }

    .modal-gallery { height: auto; flex-shrink: 0; }

    .modal-main-image { aspect-ratio: 1/1; flex: none; min-height: 0; }

    .modal-thumbs {

      padding: 10px 16px;

      gap: 8px;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

    }

    .modal-thumb {

      width: 44px;

      height: 44px;

      font-size: 9px;

    }

    .modal-info { padding: 24px 20px 32px; }

    .modal-info .cat { font-size: 10px; margin-bottom: 12px; }

    .modal-info h2 { font-size: 28px; line-height: 1.1; margin-bottom: 6px; }

    .modal-info .subtitle { font-size: 14px; margin-bottom: 20px; }

    .modal-info .description { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }

    .modal-specs { margin-bottom: 28px; }

    .modal-specs .spec-row {

      grid-template-columns: 110px 1fr;

      gap: 12px;

      padding: 10px 0;

      font-size: 13px;

    }

    .modal-actions { flex-direction: column; gap: 10px; margin-top: 8px; }

    .modal-actions .btn-primary,

    .modal-actions .btn-secondary { width: 100%; padding: 14px 20px; font-size: 11px; }

    .modal-close {

      top: 10px; right: 10px;

      width: 36px; height: 36px;

      background: rgba(255, 255, 255, 0.92);

      backdrop-filter: blur(8px);

      font-size: 16px;

    }



    /* Newsletter */

    .newsletter-block {

      padding: 48px 24px;

      grid-template-columns: 1fr;

      gap: 32px;

      margin-top: 60px;

    }

    .newsletter-block h3 { font-size: 28px; }

    .newsletter-form { flex-direction: column; }

    .newsletter-form button { width: 100%; padding: 16px; }



    /* Featured article */

    .featured-article { gap: 24px; margin-bottom: 60px; }



    /* Footer */

    footer { padding: 60px 0 32px; margin-top: 60px; }

    .footer-bottom {

      flex-direction: column;

      gap: 12px;

      text-align: center;

    }

    .footer-grid { gap: 32px; margin-bottom: 40px; }



    /* Press strip */

    .press-strip { padding: 40px 0; }

    .press-logos {

      justify-content: center;

      gap: 24px;

    }

    .press-logo { font-size: 18px; }



    /* Contact details */

    .contact-detail {

      grid-template-columns: 1fr;

      gap: 6px;

      padding: 20px 0;

    }

    .contact-info p { margin-bottom: 32px; }

    .contact-form { padding-top: 0; }

    .contact-form h3 { font-size: 28px; margin-bottom: 24px; }



    /* About timeline */

    .timeline-item .year { font-size: 44px; }



    /* Mobile menu — riadatta dimensioni link */

    .nav-links button { font-size: 28px; }

  }



  /* Mobile piccolo (<380px) */

  @media (max-width: 380px) {

    .container { padding: 0 16px; }

    .hero h1 { font-size: 36px; }

    .section-title { font-size: 30px; }

    .nav-links button { font-size: 24px; }

  }

  /* ===== CORPORATE / REGALI AZIENDALI ===== */

  .corporate-strip {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

    gap: 0;

    padding: 0;

    align-items: stretch;

  }

  .corporate-strip > .corporate-text,

  .corporate-strip > .corporate-visual {

    min-width: 0;

  }

  .corporate-strip > .corporate-text {

    background: var(--cream);

    padding: 96px 64px;

    display: flex;

    flex-direction: column;

    justify-content: center;

  }

  .corporate-strip > .corporate-visual {

    background: var(--cream-deep);

    padding: 0;

    display: flex;

    align-items: stretch;

    justify-content: center;

  }

  .corporate-text .eyebrow {

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: var(--rose);

    font-weight: 500;

    margin-bottom: 28px;

  }

  .corporate-points {

    list-style: none;

    padding: 0;

    margin: 36px 0 0 0;

  }

  .corporate-points li {

    font-family: var(--dm-font-body);

    font-size: 14px;

    line-height: 1.7;

    color: var(--ink-soft);

    padding: 16px 0 16px 28px;

    border-bottom: 1px solid var(--line);

    position: relative;

  }

  .corporate-points li:last-child { border-bottom: none; }

  .corporate-points li::before {

    content: '';

    width: 14px;

    height: 1px;

    background: var(--rose);

    position: absolute;

    left: 0;

    top: 27px;

  }

  .corporate-points li strong {

    color: var(--ink);

    font-weight: 600;

    margin-right: 8px;

    letter-spacing: 0.01em;

  }



/* Corporate strip: controlli linee punti */

.dm-corp-points-prefix-lines-no .corporate-points li {

  padding-left: 0 !important;

}

.dm-corp-points-prefix-lines-no .corporate-points li::before {

  content: none !important;

  display: none !important;

}

.dm-corp-points-separator-lines-no .corporate-points li {

  border-bottom: none !important;

}

.dm-corp-points-separator-lines-no .corporate-points li:last-child {

  border-bottom: none !important;

}

  .corporate-visual {

    position: relative;

  }

  .corporate-visual .wf-box,

  .corporate-visual .wf-img,

  .corporate-visual .wf-placeholder {

    aspect-ratio: auto;

    width: 100%;

    height: 100%;

    min-height: 620px;

  }

  .corporate-badge {

    position: absolute;

    bottom: -40px;

    left: -40px;

    background: var(--ink);

    color: var(--cream);

    padding: 24px 28px;

    max-width: 280px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    box-shadow: 0 30px 60px -20px rgba(29, 29, 27, 0.4);

  }

  .corporate-badge .badge-num {

    font-family: var(--dm-font-heading);

    font-size: 28px;

    font-weight: 300;

    color: var(--rose);

    line-height: 1;

  }

  .corporate-badge .badge-label {

    font-family: var(--dm-font-body);

    font-size: 12px;

    line-height: 1.5;

    color: rgba(229, 222, 218, 0.85);

  }



  /* Corporate page hero */

  .corporate-hero {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 80px;

    padding: 80px 0 100px;

    align-items: center;

  }

  .corporate-hero h1 {

    font-family: var(--dm-font-heading);

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1.05;

    font-weight: 300;

    color: var(--ink);

    margin-bottom: 32px;

  }

  .corporate-hero h1 em { color: var(--rose); font-style: italic; }

  .corporate-hero .lead {

    font-family: var(--dm-font-body);

    font-size: 16px;

    line-height: 1.75;

    color: var(--ink-soft);

    max-width: 540px;

  }

  .corporate-hero .visual .wf-box {

    aspect-ratio: 4/5;

    width: 100%;

  }



  /* Target clients grid */

  .corporate-targets {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

  }

  .corporate-target {

    padding: 48px 32px;

    text-align: center;

    border-right: 1px solid var(--line);

  }

  .corporate-target:last-child { border-right: none; }

  .corporate-target .icon {

    width: 32px;

    height: 32px;

    margin: 0 auto 24px;

    color: var(--rose);

  }

  .corporate-target h4 {

    font-family: var(--dm-font-heading);

    font-size: 22px;

    font-weight: 400;

    color: var(--ink);

    margin: 0 0 8px;

    letter-spacing: -0.005em;

  }

  .corporate-target p {

    font-family: var(--dm-font-body);

    font-size: 12px;

    color: var(--muted);

    line-height: 1.5;

  }



  /* Corporate services grid */

  .corporate-services {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 48px;

  }

  .corporate-service {

    padding: 40px 0;

    border-top: 1px solid var(--line);

  }

  .corporate-service .num {

    font-family: var(--dm-font-heading);

    font-size: 14px;

    letter-spacing: 0.3em;

    color: var(--rose);

    margin-bottom: 16px;

    text-transform: uppercase;

  }

  .corporate-service h3 {

    font-family: var(--dm-font-heading);

    font-size: 28px;

    font-weight: 400;

    color: var(--ink);

    margin: 0 0 12px;

  }

  .corporate-service p {

    font-family: var(--dm-font-body);

    font-size: 14px;

    line-height: 1.7;

    color: var(--ink-soft);

  }



  /* Case studies / esempi */

  .case-studies {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

    margin-top: 56px;

  }

  .case-study {

    overflow: hidden;

  }

  .case-study .wf-box {

    aspect-ratio: 4/5;

    margin-bottom: 24px;

    transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);

  }

  .case-study:hover .wf-box { transform: scale(1.045); }

  .case-study .cat {

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.3em;

    color: var(--rose);

    text-transform: uppercase;

    margin-bottom: 8px;

  }

  .case-study h4 {

    font-family: var(--dm-font-heading);

    font-size: 24px;

    font-weight: 400;

    color: var(--ink);

    margin: 0 0 8px;

  }

  .case-study p {

    font-family: var(--dm-font-body);

    font-size: 13px;

    color: var(--muted);

    line-height: 1.6;

  }



  /* Corporate CTA finale */

  .corporate-cta-final {

    background: var(--ink);

    color: var(--cream);

    padding: 100px 64px;

    text-align: center;

    margin-top: 80px;

  }

  .corporate-cta-final h2 {

    font-family: var(--dm-font-heading);

    font-size: clamp(36px, 4vw, 56px);

    font-weight: 300;

    margin-bottom: 24px;

  }

  .corporate-cta-final h2 em { color: var(--rose); font-style: italic; }

  .corporate-cta-final p {

    font-family: var(--dm-font-body);

    font-size: 16px;

    color: rgba(229, 222, 218, 0.75);

    max-width: 580px;

    margin: 0 auto 40px;

    line-height: 1.7;

  }

  .corporate-cta-final .cta-actions {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

  }

  .corporate-cta-final .btn-primary {

    background: var(--rose);

    color: var(--white);

    border: none;

    padding: 16px 32px;

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    cursor: pointer;

    font-weight: 500;

    transition: background 0.3s;

  }

  .corporate-cta-final .btn-primary:hover { background: #9a6360; }

  .corporate-cta-final .btn-secondary {

    background: transparent;

    color: var(--cream);

    border: 1px solid rgba(229, 222, 218, 0.3);

    padding: 16px 32px;

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    cursor: pointer;

    font-weight: 500;

    transition: all 0.3s;

  }

  .corporate-cta-final .btn-secondary:hover { background: rgba(229, 222, 218, 0.06); }



  @media (max-width: 900px) {

    .corporate-strip { grid-template-columns: 1fr; gap: 48px; padding: 80px 0; }

    .corporate-badge { position: static; margin-top: -40px; max-width: 100%; }

    .corporate-hero { grid-template-columns: 1fr; gap: 48px; padding: 60px 0 80px; }

    .corporate-targets { grid-template-columns: repeat(2, 1fr); }

    .corporate-target { padding: 32px 20px; }

    .corporate-target:nth-child(odd) { border-right: 1px solid var(--line); }

    .corporate-target:nth-child(even) { border-right: none; }

    .corporate-services { grid-template-columns: 1fr; gap: 0; }

    .case-studies { grid-template-columns: 1fr; gap: 40px; }

    .corporate-cta-final { padding: 60px 24px; }

  }







  /* Scroll reveal — fade-in con leggera traslazione verticale */

  [data-reveal] {

    opacity: 0;

    transform: translateY(28px);

    transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),

                transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);

  }

  [data-reveal].is-revealed {

    opacity: 1;

    transform: translateY(0);

  }



  /* Stagger — ogni figlio appare 0.08s dopo il precedente */

  [data-reveal-stagger] > * {

    opacity: 0;

    transform: translateY(24px);

    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),

                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);

  }

  [data-reveal-stagger].is-revealed > * {

    opacity: 1;

    transform: translateY(0);

  }

  [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0s; }

  [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.08s; }

  [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.16s; }

  [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.24s; }

  [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.32s; }

  [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.40s; }

  [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 0.48s; }

  [data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 0.56s; }

  [data-reveal-stagger].is-revealed > *:nth-child(9) { transition-delay: 0.64s; }

  [data-reveal-stagger].is-revealed > *:nth-child(n+10) { transition-delay: 0.72s; }



  /* Hover image zoom — restituisce tattilità alle card */

  .work-card .wf-img,

  .product-card .wf-img,

  .blog-card .wf-img,

  .blog-featured .wf-img,

  .article-card .wf-img,

  .vision-image .wf-img {

    transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);

  }

  .work-card:hover .wf-img,

  .product-card:hover .wf-img,

  .blog-card:hover .wf-img,

  .blog-featured:hover .wf-img,

  .article-card:hover .wf-img {

    transform: scale(1.045);

  }

  /* Containers devono clippare il zoom */

  .work-card,

  .product-card,

  .blog-card,

  .blog-featured,

  .article-card,

  .vision-image { overflow: hidden; }



  /* Ken Burns lento sull'hero — drift impercettibile */

  .hero-visual .wf-img {

    animation: kenBurns 24s ease-in-out infinite alternate;

    transform-origin: center center;

  }

  @keyframes kenBurns {

    0% { transform: scale(1) translate(0, 0); }

    100% { transform: scale(1.06) translate(-1.5%, -1%); }

  }



  /* Rispetta utenti con prefers-reduced-motion */

  @media (prefers-reduced-motion: reduce) {

    [data-reveal],

    [data-reveal-stagger] > * {

      opacity: 1 !important;

      transform: none !important;

      transition: none !important;

    }

    .hero-visual .wf-img { animation: none; }

  }





  

  

  

  



  /* Multi-device preview overlay */

  

  

  

  

  

  

  .device {

    margin: 0 auto 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

  }

  .device-label {

    font-family: var(--dm-font-body);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 18px;

    font-weight: 500;

  }

  .device-label strong { color: var(--ink); font-weight: 600; }

  .device-window {

    background: var(--white);

    border: 1px solid var(--line);

    box-shadow: 0 30px 80px -20px rgba(29, 29, 27, 0.25);

    overflow: hidden;

    position: relative;

  }

  .device-window iframe {

    border: none;

    display: block;

    transform-origin: top left;

  }



  /* Desktop: 1440 × 900 scaled 0.55 → 792 × 495 visible */

  .device[data-device="desktop"] .device-window {

    width: 792px;

    height: 495px;

  }

  .device[data-device="desktop"] iframe {

    width: 1440px;

    height: 900px;

    transform: scale(0.55);

  }



  /* Laptop: 1280 × 800 scaled 0.55 → 704 × 440 */

  .device[data-device="laptop"] .device-window {

    width: 704px;

    height: 440px;

  }

  .device[data-device="laptop"] iframe {

    width: 1280px;

    height: 800px;

    transform: scale(0.55);

  }



  /* Mobile: 390 × 780 scaled 0.85 → 332 × 663 */

  .device[data-device="mobile"] .device-window {

    width: 332px;

    height: 663px;

    border-radius: 16px;

  }

  .device[data-device="mobile"] iframe {

    width: 390px;

    height: 780px;

    transform: scale(0.85);

  }



  /* Quando il sito è in iframe embed mode: nascondi controlli wireframe */

  

  

  



  @media (max-width: 900px) {

    

  }







/* ===================================================

   DOMUS MURANO · Elementor compatibility fixes v1.0.1

   - allinea i nomi classi dei widget al CSS del wireframe

   - evita widget invisibili in preview Elementor quando il JS reveal non è ancora reinizializzato

   - mantiene le proporzioni anche se un'immagine non è ancora stata caricata da Elementor

   =================================================== */



.hero-block {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  min-height: 78vh;
  padding: 40px 0 80px;

  position: relative;

  border: none;

}

.hero-block h1 {

  font-family: var(--dm-font-heading);

  font-size: clamp(42px, 5vw, 76px);

  font-weight: 300;

  line-height: 1.0;

  letter-spacing: -0.01em;

  margin-bottom: 28px;

  color: var(--ink);

}

.hero-block h1 em {
  font-style: italic;
  color: var(--rose);
  font-weight: 400;
}

/*
 * Altezza fissa Hero: il vecchio aspect-ratio 3/4 restringeva la colonna
 * immagine quando la sezione riceveva un'altezza esplicita, lasciando una
 * fascia vuota sul bordo destro. In modalità fissa la griglia determina
 * entrambe le dimensioni e l'immagine di sfondo riempie l'intera colonna.
 */
.dm-hero-height-mode-fixed .hero-block {
  align-items: stretch;
}

.dm-hero-height-mode-fixed .hero-block > .hero-text,
.dm-hero-height-mode-fixed .hero-block > .hero-visual {
  min-width: 0;
  min-height: 0;
  max-height: none;
}

.dm-hero-height-mode-fixed .hero-block > .hero-visual {
  width: 100% !important;
  height: auto;
  aspect-ratio: auto !important;
  align-self: stretch;
  justify-self: stretch;
}

.dm-hero-height-mode-fixed .hero-block > .hero-visual > .wf-box,
.dm-hero-height-mode-fixed .hero-block > .hero-visual > .wf-img,
.dm-hero-height-mode-fixed .hero-block > .hero-visual > .wf-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none;
  max-height: none !important;
  background-size: cover;
}


.vision-image .wf-box,

.vision-visual .wf-box {

  aspect-ratio: 4/5;

  width: 100%;

}

.vision-content .section-num,

.vision-text .section-num {

  color: var(--rose);

  font-size: 11px;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  font-weight: 500;

}

.vision-content .section-title,

.vision-text .section-title {

  margin-top: 16px;

}



.product-card .product-cat,

.product-card .cat {

  display: block;

  font-size: 11px;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--rose);

  margin-bottom: 8px;

}

.product-card .product-sub,

.product-card .year {

  display: block;

  font-size: 13px;

  color: var(--muted);

  font-style: italic;

  font-family: var(--dm-font-heading);

  margin-bottom: 12px;

}



.wf-placeholder {

  aspect-ratio: inherit;

  min-height: 220px;

}

.hero-visual .wf-placeholder,

.hero-visual .wf-img { height: 100%; }

.article-card .wf-placeholder,

.article-card .wf-img { aspect-ratio: 4/3; margin-bottom: 20px; }

.work-card .wf-placeholder,

.work-card .wf-img { margin-bottom: 16px; }

.work-card.span-7 .wf-placeholder { aspect-ratio: 16/10; }

.work-card.span-5 .wf-placeholder { aspect-ratio: 4/5; }

.product-card .wf-placeholder { aspect-ratio: 4/5; margin-bottom: 20px; }

.case-study .wf-placeholder { aspect-ratio: 4/5; margin-bottom: 24px; }

.quote-portrait .wf-placeholder { aspect-ratio: 3/4; }

.corporate-visual .wf-placeholder { aspect-ratio: 4/5; width: 100%; }



.dm-modal-image {

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

}

.dm-modal-specs .spec-row { display: grid; }



body.elementor-editor-active [data-reveal],

body.elementor-editor-preview [data-reveal],

body.elementor-editor-active [data-reveal-stagger] > *,

body.elementor-editor-preview [data-reveal-stagger] > *,

.elementor-editor-active [data-reveal],

.elementor-editor-preview [data-reveal],

.elementor-editor-active [data-reveal-stagger] > *,

.elementor-editor-preview [data-reveal-stagger] > * {

  opacity: 1 !important;

  transform: none !important;

}



@media (max-width: 900px) {
  .hero-block {
    grid-template-columns: 1fr;
    gap: 48px;

    min-height: auto;

    padding: 20px 0 60px;
  }

  .dm-hero-height-mode-fixed .hero-block {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .dm-hero-height-mode-fixed .hero-block.dm-hero-mobile-reverse {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .dm-hero-height-mode-fixed .hero-block > .hero-visual,
  .dm-hero-height-mode-fixed .hero-block > .hero-visual > .wf-box,
  .dm-hero-height-mode-fixed .hero-block > .hero-visual > .wf-img,
  .dm-hero-height-mode-fixed .hero-block > .hero-visual > .wf-placeholder {
    min-height: 0 !important;
  }

  .vision-image .wf-box,
  .vision-visual .wf-box {
    aspect-ratio: 16/10;
    max-height: 60vh;

  }

}



@media (max-width: 640px) {

  .hero-block { padding: 16px 0 48px; }

  .hero-block h1 {

    font-size: clamp(40px, 11vw, 60px);

    margin-bottom: 20px;

  }

}



@media (max-width: 380px) {

  .hero-block h1 { font-size: 36px; }

}





/* ===================================================

   DOMUS MURANO · Mobile refinement v1.3.0

   Ottimizzazione specifica per Hello Elementor + widget singoli.

   Obiettivi:

   - nessun overflow orizzontale

   - proporzioni stabili anche senza immagini

   - accordion processo leggibile su tablet/mobile

   - popup catalogo realmente fullscreen su smartphone

   - CTA e card più comode al touch

   =================================================== */



html,

body {

  max-width: 100%;

  overflow-x: hidden;

}



.hero-block,

.vision-block,

.quote-block,

.process-strip,

.corporate-strip,

.catalogo-grid,

.home-blog-preview,

.articles-grid,

.works-grid,

.case-studies,

.corporate-targets,

.corporate-services,

.about-timeline,

.values-grid,

.contact-grid,

.newsletter-block {

  width: 100%;

  max-width: 100%;

}



.wf-box,

.wf-img,

.wf-placeholder {

  max-width: 100%;

}



.hero-cta,

.submit-btn,

.newsletter-form button,

.modal-actions .btn-primary,

.modal-actions .btn-secondary,

.corporate-cta-final .btn-primary,

.corporate-cta-final .btn-secondary {

  min-height: 48px;

  touch-action: manipulation;

}



@media (max-width: 1024px) {

  .container,

  .full-bleed > .container {

    padding-left: 28px;

    padding-right: 28px;

  }



  .hero-block,

  .hero {

    gap: 56px;

  }



  .section-head {

    gap: 42px;

  }



  .corporate-targets {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .corporate-target:nth-child(2n) {

    border-right: none;

  }



  .corporate-target:last-child {

    grid-column: 1 / -1;

    border-top: 1px solid var(--line);

  }

}



@media (max-width: 900px) {

  section {

    padding-top: 64px;

    padding-bottom: 64px;

  }



  .container,

  .full-bleed > .container {

    padding-left: 24px;

    padding-right: 24px;

  }



  .hero-block,

  .hero {

    grid-template-columns: minmax(0, 1fr);

    gap: 36px;

    min-height: auto;

    padding: 34px 0 58px;

  }



  .hero-text {

    max-width: 680px;

  }



  .hero-sub,

  .section-intro,

  .corporate-hero .lead,

  .contact-info p {

    max-width: none;

  }



  .hero-visual {

    width: 100%;

    max-height: none;

    aspect-ratio: 4 / 5;

  }



  .hero-visual .wf-box,

  .hero-visual .wf-img,

  .hero-visual .wf-placeholder {

    width: 100%;

    height: 100%;

    min-height: 420px;

  }



  .hero-visual::after {

    display: none;

  }



  .hero-meta {

    position: static;

    text-align: left;

    margin-top: 28px;

  }



  .section-head,

  .about-hero,

  .catalogo-header,

  .blog-header,

  .contact-grid,

  .featured-article,

  .newsletter-block,

  .vision-block,

  .corporate-strip,

  .corporate-hero,

  .quote-block {

    grid-template-columns: minmax(0, 1fr);

  }



  .section-head {

    gap: 18px;

    margin-bottom: 38px;

  }



  .section-num {

    font-size: 18px;

  }



  .vision-block,

  .corporate-strip {

    gap: 42px;

    padding-top: 68px;

    padding-bottom: 68px;

  }



  .vision-image .wf-box,

  .vision-visual .wf-box,

  .vision-image .wf-img,

  .vision-visual .wf-img,

  .vision-image .wf-placeholder,

  .vision-visual .wf-placeholder {

    aspect-ratio: 4 / 3;

    max-height: none;

    min-height: 360px;

  }



  .quote-block {

    gap: 40px;

    padding: 72px 0;

  }



  .quote-text {

    padding-left: 18px;

  }



  .quote-text::before {

    left: -2px;

  }



  /* Fix importante: il CSS precedente a 900px riportava .process-steps a 2 colonne. */

  .process-strip {

    grid-template-columns: minmax(0, 1fr);

  }



  .process-intro {

    padding: 56px 28px;

  }



  .process-steps,

  .process-steps[data-active],

  .process-steps[data-active="0"],

  .process-steps[data-active="1"],

  .process-steps[data-active="2"],

  .process-steps[data-active="3"] {

    display: grid;

    grid-template-columns: minmax(0, 1fr) !important;

    grid-template-rows: none;

  }



  .process-step {

    min-height: auto;

    padding: 34px 28px !important;

    border-left: 0 !important;

    border-top: 1px solid rgba(229, 222, 218, 0.12);

  }



  .process-step:first-child {

    border-top: 0;

  }



  .process-step p,

  .process-step .step-details {

    width: 100%;

    max-width: 640px;

  }



  .process-steps[data-active] .process-step:not(.is-active) p,

  .process-steps[data-active] .process-step:not(.is-active) .step-details {

    display: block;

  }



  .process-step .num,

  .process-steps[data-active] .process-step:not(.is-active) .num {

    font-size: 42px;

    margin-bottom: 20px;

  }



  .process-step .label,

  .process-steps[data-active] .process-step:not(.is-active) .label {

    font-size: 11px;

    letter-spacing: 0.26em;

  }



  .step-details {

    margin-top: 26px;

    padding-top: 20px;

  }



  .catalogo-grid,

  .articles-grid,

  .home-blog-preview,

  .works-grid,

  .case-studies,

  .values-grid,

  .about-timeline,

  .corporate-services {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 36px 22px;

  }



  .works-grid .work-card,

  .works-grid .work-card.span-7,

  .works-grid .work-card.span-5,

  .works-grid .work-card.span-4 {

    grid-column: auto;

  }



  .works-grid .work-card .wf-box,

  .works-grid .work-card.span-7 .wf-box,

  .works-grid .work-card.span-5 .wf-box,

  .works-grid .work-card.span-4 .wf-box {

    aspect-ratio: 4 / 5;

  }



  .modal {

    width: min(96vw, 760px);

    height: min(92dvh, 860px);

  }



  .modal-content {

    grid-template-columns: minmax(0, 1fr);

    overflow-y: auto;

  }



  .modal-gallery {

    min-height: 0;

  }



  .modal-main-image {

    aspect-ratio: 4 / 3;

    flex: none;

  }



  .modal-main-image .wf-box,

  .dm-modal-image {

    min-height: 320px;

  }



  .modal-info {

    overflow: visible;

  }

}



@media (max-width: 640px) {

  .container,

  .full-bleed > .container {

    padding-left: 20px;

    padding-right: 20px;

  }



  section {

    padding-top: 52px;

    padding-bottom: 52px;

  }



  .hero-block,

  .hero {

    gap: 28px;

    padding: 22px 0 48px;

  }



  .hero-eyebrow {

    gap: 12px;

    margin-bottom: 22px;

    font-size: 9.5px;

    letter-spacing: 0.24em;

    line-height: 1.5;

  }



  .hero-eyebrow::before {

    width: 28px;

    flex: 0 0 28px;

  }



  .hero-block h1,

  .hero h1,

  .corporate-hero h1 {

    font-size: clamp(40px, 12vw, 54px);

    line-height: 0.98;

    margin-bottom: 22px;

  }



  .hero-sub,

  .section-intro,

  .about-intro-text p,

  .corporate-hero .lead,

  .contact-info p,

  .featured-article .excerpt {

    font-size: 15px;

    line-height: 1.75;

  }



  .hero-visual .wf-box,

  .hero-visual .wf-img,

  .hero-visual .wf-placeholder {

    min-height: 360px;

  }



  .hero-cta {

    width: 100%;

    justify-content: center;

    padding: 15px 18px;

    font-size: 10px;

    letter-spacing: 0.22em;

    text-align: center;

  }



  .hero-meta {

    margin-top: 24px;

    font-size: 10px;

    line-height: 1.6;

    letter-spacing: 0.22em;

  }



  .section-head {

    gap: 12px;

    margin-bottom: 30px;

  }



  .section-num {

    font-size: 14px;

  }



  .section-title,

  .catalogo-header h2,

  .blog-header h2,

  .contact-info h2,

  .about-intro-text h2,

  .featured-article h3,

  .corporate-cta-final h2 {

    font-size: clamp(34px, 10.2vw, 46px);

    line-height: 1.02;

  }



  .vision-block,

  .corporate-strip {

    gap: 32px;

    padding-top: 56px;

    padding-bottom: 56px;

  }



  .vision-image .wf-box,

  .vision-visual .wf-box,

  .vision-image .wf-img,

  .vision-visual .wf-img,

  .vision-image .wf-placeholder {

    aspect-ratio: 4 / 5;

    min-height: 320px;

  }



  .quote-block {

    padding: 58px 0;

  }



  .quote-portrait .wf-box,

  .quote-portrait .wf-img,

  .quote-portrait .wf-placeholder {

    aspect-ratio: 4 / 5;

    min-height: 320px;

  }



  .quote-text {

    font-size: 24px;

    line-height: 1.32;

    padding-left: 0;

    padding-top: 28px;

  }



  .quote-text::before {

    font-size: 58px;

    top: -14px;

    left: 0;

  }



  .quote-attr {

    margin-top: 24px;

  }



  .process-intro {

    padding: 46px 20px;

  }



  .process-intro h2 {

    font-size: clamp(32px, 10vw, 42px);

    margin-bottom: 30px;

  }



  .process-step {

    padding: 30px 20px !important;

  }



  .process-step .step-icon {

    width: 28px;

    height: 28px;

    margin-bottom: 20px;

  }



  .process-step .num,

  .process-steps[data-active] .process-step:not(.is-active) .num {

    font-size: 38px;

    margin-bottom: 16px;

  }



  .process-step .label,

  .process-steps[data-active] .process-step:not(.is-active) .label {

    font-size: 10px;

    letter-spacing: 0.22em;

    margin-bottom: 16px;

  }



  .process-step p {

    font-size: 14px;

    line-height: 1.65;

  }



  .step-details {

    margin-top: 22px;

    padding-top: 18px;

  }



  .step-details h4 {

    font-size: 9.5px;

    letter-spacing: 0.24em;

    margin-bottom: 14px;

  }



  .step-details li {

    font-size: 13px;

    line-height: 1.55;

    margin-bottom: 10px;

  }



  .catalogo-grid,

  .articles-grid,

  .home-blog-preview,

  .works-grid,

  .case-studies,

  .values-grid,

  .about-timeline,

  .corporate-services,

  .corporate-targets {

    grid-template-columns: minmax(0, 1fr);

    gap: 34px;

  }



  .work-card h3,

  .product-card h3,

  .article-card h4,

  .case-study h4,

  .corporate-service h3,

  .value-item h4 {

    font-size: 25px;

    line-height: 1.12;

  }



  .product-card .wf-box,

  .product-card .wf-img,

  .product-card .wf-placeholder,

  .work-card .wf-box,

  .work-card .wf-img,

  .work-card .wf-placeholder,

  .case-study .wf-box,

  .case-study .wf-img,

  .case-study .wf-placeholder {

    min-height: 320px;

  }



  .article-card .wf-box,

  .article-card .wf-img,

  .article-card .wf-placeholder,

  .featured-article .wf-box,

  .featured-article .wf-img,

  .featured-article .wf-placeholder {

    min-height: 250px;

  }



  .filter-bar,

  .blog-cat-bar {

    position: relative;

    margin-left: -20px;

    margin-right: -20px;

    padding-left: 20px;

    padding-right: 20px;

    gap: 18px;

    scroll-padding-left: 20px;

  }



  .filter-bar-left {

    min-width: max-content;

  }



  .filter-bar button,

  .blog-cat-bar button {

    font-size: 10px;

    letter-spacing: 0.2em;

    min-height: 36px;

  }



  .corporate-points {

    margin-top: 28px;

  }



  .corporate-points li {

    padding: 14px 0 14px 24px;

    font-size: 13.5px;

  }



  .corporate-visual .wf-box,

  .corporate-visual .wf-img,

  .corporate-visual .wf-placeholder,

  .corporate-hero .visual .wf-box,

  .corporate-hero .visual .wf-img,

  .corporate-hero .visual .wf-placeholder {

    aspect-ratio: 4 / 5;

    min-height: 330px;

  }



  .corporate-badge {

    position: static;

    margin-top: 16px;

    padding: 22px 20px;

    max-width: none;

  }



  .corporate-target {

    border-right: none !important;

    border-top: 1px solid var(--line);

    padding: 30px 20px;

  }



  .corporate-target:first-child {

    border-top: 0;

  }



  .corporate-target:last-child {

    grid-column: auto;

  }



  .corporate-service {

    padding: 30px 0;

  }



  .corporate-cta-final {

    margin-top: 50px;

    padding: 58px 20px;

  }



  .corporate-cta-final .cta-actions {

    flex-direction: column;

  }



  .corporate-cta-final .btn-primary,

  .corporate-cta-final .btn-secondary {

    width: 100%;

  }



  .newsletter-block {

    padding: 42px 20px;

    margin-top: 52px;

  }



  .newsletter-form input {

    min-height: 48px;

  }



  .press-logos {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px 22px;

    text-align: center;

  }



  .press-logo {

    font-size: 19px;

  }



  .contact-detail {

    grid-template-columns: minmax(0, 1fr);

  }



  .contact-detail .val {

    font-size: 19px;

    word-break: break-word;

  }



  /* Modal prodotto: mobile reale, non solo ridimensionato. */

  .modal {

    width: 100vw;

    height: 100dvh;

    max-height: none;

    inset: 0;

    top: 0;

    left: 0;

    transform: none !important;

    border: 0;

  }



  .modal.active {

    transform: none !important;

  }



  .modal-content {

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

  }



  .modal-gallery {

    flex: 0 0 auto;

  }



  .modal-main-image {

    aspect-ratio: 1 / 1;

  }



  .modal-main-image .wf-box,

  .dm-modal-image {

    min-height: 0;

    height: 100%;

  }



  .modal-thumbs {

    padding: 10px 16px;

  }



  .modal-info {

    padding: 24px 20px 34px;

  }



  .modal-info h2,

  .dm-modal-title {

    font-size: 30px;

    line-height: 1.05;

  }



  .modal-specs .spec-row,

  .spec-row {

    grid-template-columns: minmax(0, 1fr);

    gap: 4px;

    padding: 12px 0;

  }



  .spec-row .lbl {

    font-size: 9.5px;

    letter-spacing: 0.24em;

  }



  .modal-actions {

    flex-direction: column;

    gap: 10px;

    margin-top: 16px;

  }



  .modal-close {

    top: 12px;

    right: 12px;

    width: 40px;

    height: 40px;

    z-index: 20;

  }

}



@media (max-width: 430px) {

  .container,

  .full-bleed > .container {

    padding-left: 18px;

    padding-right: 18px;

  }



  .hero-block h1,

  .hero h1,

  .corporate-hero h1 {

    font-size: clamp(37px, 12vw, 48px);

  }



  .section-title,

  .catalogo-header h2,

  .blog-header h2,

  .contact-info h2,

  .about-intro-text h2,

  .featured-article h3,

  .corporate-cta-final h2 {

    font-size: clamp(32px, 10.5vw, 42px);

  }



  .hero-visual .wf-box,

  .hero-visual .wf-img,

  .hero-visual .wf-placeholder,

  .vision-image .wf-box,

  .vision-visual .wf-box,

  .quote-portrait .wf-box,

  .corporate-visual .wf-box,

  .corporate-hero .visual .wf-box {

    min-height: 300px;

  }



  .product-card .wf-box,

  .work-card .wf-box,

  .case-study .wf-box {

    min-height: 300px;

  }



  .article-card .wf-box,

  .featured-article .wf-box {

    min-height: 230px;

  }



  .process-intro,

  .process-step {

    padding-left: 18px !important;

    padding-right: 18px !important;

  }



  .filter-bar,

  .blog-cat-bar {

    margin-left: -18px;

    margin-right: -18px;

    padding-left: 18px;

    padding-right: 18px;

    scroll-padding-left: 18px;

  }

}



@media (max-width: 380px) {

  .container,

  .full-bleed > .container {

    padding-left: 16px;

    padding-right: 16px;

  }



  .hero-block h1,

  .hero h1,

  .corporate-hero h1 {

    font-size: 36px;

  }



  .hero-sub,

  .section-intro,

  .about-intro-text p,

  .corporate-hero .lead,

  .contact-info p {

    font-size: 14.5px;

  }



  .hero-cta {

    letter-spacing: 0.16em;

  }



  .section-title,

  .catalogo-header h2,

  .blog-header h2,

  .contact-info h2,

  .about-intro-text h2,

  .featured-article h3,

  .corporate-cta-final h2 {

    font-size: 32px;

  }



  .filter-bar,

  .blog-cat-bar {

    margin-left: -16px;

    margin-right: -16px;

    padding-left: 16px;

    padding-right: 16px;

  }

}



/* ===================================================

   DOMUS MURANO · Widget pagina Home completa v1.3.0

   =================================================== */

.dm-home-page {

  width: 100%;

  overflow-x: clip;

}



.dm-home-page > .dm-home-section:not(.full-bleed) {

  max-width: 1680px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 64px;

  padding-right: 64px;

}



.dm-home-page .hero-cta {

  text-decoration: none;

}



.dm-home-page .process-step .step-details h4 {

  font-family: var(--dm-font-body);

  font-size: 10px;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: var(--rose);

  font-weight: 600;

  margin: 0 0 18px 0;

}



.dm-home-page .process-step .step-details ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.dm-home-page .process-step .step-details li {

  font-family: var(--dm-font-body);

  font-size: 13.5px;

  line-height: 1.6;

  color: rgba(229, 222, 218, 0.88);

  padding-left: 20px;

  margin-bottom: 12px;

  position: relative;

}



.dm-home-page .process-step .step-details li::before {

  content: '';

  width: 10px;

  height: 1px;

  background: var(--rose);

  position: absolute;

  left: 0;

  top: 11px;

}



@media (max-width: 1200px) {

  .dm-home-page > .dm-home-section:not(.full-bleed) {

    padding-left: 32px;

    padding-right: 32px;

  }

}



@media (max-width: 900px) {

  .dm-home-page > .dm-home-section:not(.full-bleed) {

    padding-left: 24px;

    padding-right: 24px;

  }

}



@media (max-width: 640px) {

  .dm-home-page > .dm-home-section:not(.full-bleed) {

    padding-left: 20px;

    padding-right: 20px;

  }

}



@media (max-width: 430px) {

  .dm-home-page > .dm-home-section:not(.full-bleed) {

    padding-left: 18px;

    padding-right: 18px;

  }

}



@media (max-width: 380px) {

  .dm-home-page > .dm-home-section:not(.full-bleed) {

    padding-left: 16px;

    padding-right: 16px;

  }

}





/* ===== Page widgets per pagina ===== */

.dm-page-widget { width: 100%; }

.dm-page-widget a { text-decoration: none; }

@media (min-width: 901px) {

  .dm-page-corporate .corporate-services.dm-corp-cols-2 { grid-template-columns: repeat(2, 1fr); }

  .dm-page-corporate .corporate-services.dm-corp-cols-3 { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 900px) {

  .dm-page-corporate .corporate-services.dm-corp-cols-2,

  .dm-page-corporate .corporate-services.dm-corp-cols-3 { grid-template-columns: 1fr !important; }

}

.dm-page-catalogo .modal .modal-gallery .wf-box { width: 100%; height: 100%; }

.dm-page-catalogo .modal-actions a.btn-primary,

.dm-page-corporate .corporate-cta-final a.btn-primary,

.dm-page-corporate .corporate-cta-final a.btn-secondary { display: inline-flex; align-items: center; justify-content: center; }





/* ===================================================

   DOMUS MURANO · Corporate strip two blocks v1.3.1

   Blocco testo e blocco immagine sono pannelli separati,

   con sfondo gestibile da Elementor in modo indipendente.

   =================================================== */

.corporate-strip {

  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

  gap: 0;

  align-items: stretch;

  padding: 0;

}



.corporate-strip > .corporate-text,

.corporate-strip > .corporate-visual {

  min-width: 0;

}



.corporate-strip > .corporate-text {

  background: var(--cream);

  padding: 96px 64px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.corporate-strip > .corporate-visual {

  background: var(--cream-deep);

  padding: 0;

  display: flex;

  align-items: stretch;

  justify-content: center;

}



.corporate-strip > .corporate-visual .wf-box,

.corporate-strip > .corporate-visual .wf-img,

.corporate-strip > .corporate-visual .wf-placeholder {

  width: 100%;

  height: 100%;

  min-height: 620px;

  aspect-ratio: auto;

  margin: 0;

}



@media (max-width: 900px) {

  .corporate-strip {

    grid-template-columns: minmax(0, 1fr);

  }



  .corporate-strip > .corporate-text {

    padding: 64px 28px;

  }



  .corporate-strip > .corporate-visual .wf-box,

  .corporate-strip > .corporate-visual .wf-img,

  .corporate-strip > .corporate-visual .wf-placeholder {

    min-height: 420px;

    aspect-ratio: 4 / 5;

  }

}



@media (max-width: 640px) {

  .corporate-strip > .corporate-text {

    padding: 52px 20px;

  }



  .corporate-strip > .corporate-visual .wf-box,

  .corporate-strip > .corporate-visual .wf-img,

  .corporate-strip > .corporate-visual .wf-placeholder {

    min-height: 330px;

  }

}





/* ===================================================

   DOMUS MURANO · Corporate strip equal-height v1.3.3

   I due pannelli restano sempre allineati in altezza.

   =================================================== */

.corporate-strip {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

  gap: 0;

  align-items: stretch;

  min-height: 620px;

  padding: 0;

}



.corporate-strip > .corporate-text,

.corporate-strip > .corporate-visual {

  align-self: stretch;

  min-height: inherit;

  height: auto;

  min-width: 0;

  box-sizing: border-box;

}



.corporate-strip > .corporate-text {

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.corporate-strip > .corporate-visual {

  display: flex;

  align-items: stretch;

  justify-content: stretch;

  overflow: hidden;

}



.corporate-strip > .corporate-visual .wf-box,

.corporate-strip > .corporate-visual .wf-img,

.corporate-strip > .corporate-visual .wf-placeholder {

  flex: 1 1 auto;

  width: 100%;

  height: auto;

  min-height: 0;

  margin: 0;

  aspect-ratio: auto;

  background-size: cover;

  background-position: center;

}



@media (min-width: 901px) {

  .corporate-strip > .corporate-visual .wf-box,

  .corporate-strip > .corporate-visual .wf-img,

  .corporate-strip > .corporate-visual .wf-placeholder {

    min-height: inherit;

  }

}



@media (max-width: 900px) {

  .corporate-strip {

    grid-template-columns: 1fr;

    min-height: 0;

  }



  .corporate-strip > .corporate-text,

  .corporate-strip > .corporate-visual {

    min-height: 0;

  }



  .corporate-strip > .corporate-visual .wf-box,

  .corporate-strip > .corporate-visual .wf-img,

  .corporate-strip > .corporate-visual .wf-placeholder {

    min-height: 420px;

    aspect-ratio: 4 / 5;

  }

}



@media (max-width: 640px) {

  .corporate-strip > .corporate-visual .wf-box,

  .corporate-strip > .corporate-visual .wf-img,

  .corporate-strip > .corporate-visual .wf-placeholder {

    min-height: 330px;

  }

}



/* ===================================================

   DOMUS MURANO · Corporate strip image + style controls v1.3.3

   Default: immagine intera visibile, senza taglio. Da Elementor è possibile

   passare a cover e modificare font/colori dei singoli elementi.

   =================================================== */

.corporate-strip > .corporate-visual .wf-box,

.corporate-strip > .corporate-visual .wf-img,

.corporate-strip > .corporate-visual .wf-placeholder {

  background-size: contain;

  background-position: center center;

  background-repeat: no-repeat;

  background-color: transparent;

  border: 0;

}



.corporate-strip > .corporate-visual .wf-placeholder {

  background-color: rgba(255,255,255,0.12);

  border: 1px dashed var(--line);

}



.corporate-strip .corporate-badge {

  z-index: 2;

}



/* ===================================================

   DOMUS MURANO · Corporate strip final image/badge fix v1.3.4

   - immagine renderizzata con <img> per evitare taglio indesiderato

   - badge sempre dentro il pannello immagine, con posizione personalizzabile

   =================================================== */

.corporate-strip > .corporate-visual {

  position: relative;

  overflow: hidden;

}



.corporate-strip > .corporate-visual .dm-corporate-image-wrap {

  flex: 1 1 auto;

  width: 100%;

  height: auto;

  min-height: inherit;

  display: flex;

  align-items: stretch;

  justify-content: center;

  overflow: hidden;

}



.corporate-strip > .corporate-visual .dm-corporate-image {

  width: 100%;

  height: 100%;

  min-height: inherit;

  display: block;

  object-fit: contain;

  object-position: center center;

}



.corporate-strip > .corporate-visual .dm-corporate-image-wrap .wf-placeholder {

  width: 100%;

  height: 100%;

  min-height: inherit;

}



.corporate-strip .corporate-badge {

  --dm-badge-x: 32px;

  --dm-badge-y: 32px;

  position: absolute;

  left: auto;

  right: auto;

  top: auto;

  bottom: auto;

  transform: none;

  z-index: 3;

  max-width: calc(100% - (var(--dm-badge-x, 32px) * 2));

  box-sizing: border-box;

}



.corporate-strip .corporate-badge--bottom-left {

  left: var(--dm-badge-x, 32px);

  bottom: var(--dm-badge-y, 32px);

}



.corporate-strip .corporate-badge--bottom-right {

  right: var(--dm-badge-x, 32px);

  bottom: var(--dm-badge-y, 32px);

}



.corporate-strip .corporate-badge--top-left {

  left: var(--dm-badge-x, 32px);

  top: var(--dm-badge-y, 32px);

}



.corporate-strip .corporate-badge--top-right {

  right: var(--dm-badge-x, 32px);

  top: var(--dm-badge-y, 32px);

}



.corporate-strip .corporate-badge--static {

  position: static;

  width: auto;

  max-width: none;

  margin: 24px;

  align-self: flex-start;

}



@media (max-width: 900px) {

  .corporate-strip > .corporate-visual .dm-corporate-image-wrap,

  .corporate-strip > .corporate-visual .dm-corporate-image {

    min-height: 420px;

  }

}



@media (max-width: 640px) {

  .corporate-strip > .corporate-visual .dm-corporate-image-wrap,

  .corporate-strip > .corporate-visual .dm-corporate-image {

    min-height: 330px;

  }



  .corporate-strip .corporate-badge {

    --dm-badge-x: 20px;

    --dm-badge-y: 20px;

  }

}



/* ===================================================

   DOMUS MURANO · Corporate strip full height controls v1.3.7

   Modalità: auto / altezza minima / altezza fissa.

   =================================================== */

.dm-corporate-height-mode-auto .corporate-strip {

  min-height: 0 !important;

  height: auto !important;

  max-height: none !important;

}



.dm-corporate-height-mode-auto .corporate-strip > .corporate-text,

.dm-corporate-height-mode-auto .corporate-strip > .corporate-visual,

.dm-corporate-height-mode-auto .corporate-strip .dm-corporate-image-wrap,

.dm-corporate-height-mode-auto .corporate-strip .dm-corporate-image {

  min-height: 0 !important;

  height: auto !important;

  max-height: none !important;

}



.dm-corporate-height-mode-auto .corporate-strip > .corporate-visual .dm-corporate-image {

  height: auto !important;

  max-width: 100%;

}



.dm-corporate-height-mode-fixed .corporate-strip {

  align-items: stretch;

}



.dm-corporate-height-mode-fixed .corporate-strip > .corporate-text,

.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual,

.dm-corporate-height-mode-fixed .corporate-strip .dm-corporate-image-wrap,

.dm-corporate-height-mode-fixed .corporate-strip .dm-corporate-image {

  min-height: 0 !important;

}



.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual {

  overflow: hidden;

}



.dm-corporate-height-mode-fixed .corporate-strip .dm-corporate-image-wrap,

.dm-corporate-height-mode-fixed .corporate-strip .dm-corporate-image {

  height: 100%;

  max-height: 100%;

}



@media (max-width: 900px) {

  .dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image-wrap,

  .dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image,

  .dm-corporate-height-mode-auto .corporate-strip > .corporate-visual .dm-corporate-image-wrap,

  .dm-corporate-height-mode-auto .corporate-strip > .corporate-visual .dm-corporate-image {

    min-height: 0 !important;

  }

}



/* ==========================================================

   V1.3.7 — Mobile friendly + builder responsive controls

   ========================================================== */

.dm-home-page,

.dm-page-widget > .container {

  display: flex;

  flex-direction: column;

}

.dm-home-page > .dm-home-section,

.dm-page-widget > .container > .dm-page-section {

  width: 100%;

  max-width: 100%;

}

.dm-page-widget,

.dm-home-page,

.dm-page-section,

.dm-home-section,

.dm-page-widget * {

  box-sizing: border-box;

}

.dm-page-widget img,

.dm-home-page img {

  max-width: 100%;

  height: auto;

}

.dm-page-widget a,

.dm-home-page a {

  text-decoration: none;

}

.dm-page-widget .wf-box,

.dm-home-page .wf-box {

  min-width: 0;

}



/* Impostazioni griglie desktop/tablet più sicure */

.dm-page-widget .corporate-services,

.dm-page-widget .case-studies,

.dm-page-widget .catalogo-grid,

.dm-page-widget .articles-grid,

.dm-page-widget .values-grid,

.dm-page-widget .about-timeline,

.dm-home-page .works-grid,

.dm-home-page .home-blog-preview {

  min-width: 0;

}



@media (max-width: 1024px) {

  .dm-page-widget > .container,

  .dm-home-page .container,

  .dm-page-widget .container {

    max-width: 100%;

    padding-left: 28px !important;

    padding-right: 28px !important;

  }



  .dm-home-page .hero,

  .dm-page-widget .corporate-hero,

  .dm-page-widget .about-hero,

  .dm-page-widget .catalogo-header,

  .dm-page-widget .blog-header,

  .dm-page-widget .featured-article,

  .dm-page-widget .contact-grid,

  .dm-page-widget .newsletter-block,

  .dm-home-page .vision-block,

  .dm-home-page .quote-block,

  .dm-home-page .section-head,

  .dm-page-widget .section-head {

    grid-template-columns: 1fr !important;

    gap: 44px !important;

  }



  .dm-home-page .corporate-strip,

  .dm-page-widget .corporate-strip {

    grid-template-columns: 1fr !important;

    align-items: stretch !important;

    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;

  }



  .dm-home-page .corporate-text,

  .dm-home-page .corporate-visual,

  .dm-page-widget .corporate-text,

  .dm-page-widget .corporate-visual {

    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;

  }



  .dm-home-page .corporate-visual,

  .dm-page-widget .corporate-visual {

    display: flex !important;

    flex-direction: column;

  }



  .dm-home-page .dm-corporate-image-wrap,

  .dm-page-widget .dm-corporate-image-wrap {

    min-height: 420px;

    height: auto;

  }



  .dm-home-page .dm-corporate-image,

  .dm-page-widget .dm-corporate-image {

    width: 100%;

    max-width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

  }



  .dm-page-widget .catalogo-grid,

  .dm-page-widget .articles-grid,

  .dm-page-widget .case-studies,

  .dm-page-widget .values-grid,

  .dm-page-widget .about-timeline,

  .dm-home-page .home-blog-preview,

  .dm-home-page .works-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 36px 24px !important;

  }



  .dm-page-widget .corporate-targets {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  }



  .dm-page-widget .corporate-services,

  .dm-page-widget .corporate-services.dm-corp-cols-3,

  .dm-page-widget .corporate-services.dm-corp-cols-2,

  .dm-page-widget .corporate-services.dm-corp-cols-1 {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 32px !important;

  }



  .dm-home-page .process-strip,

  .dm-page-widget .process-strip {

    grid-template-columns: 1fr !important;

  }



  .dm-home-page .process-steps,

  .dm-home-page .process-steps[data-active],

  .dm-home-page .process-steps[data-active="0"],

  .dm-home-page .process-steps[data-active="1"],

  .dm-home-page .process-steps[data-active="2"],

  .dm-home-page .process-steps[data-active="3"],

  .dm-page-widget .process-steps,

  .dm-page-widget .process-steps[data-active],

  .dm-page-widget .process-steps[data-active="0"],

  .dm-page-widget .process-steps[data-active="1"],

  .dm-page-widget .process-steps[data-active="2"],

  .dm-page-widget .process-steps[data-active="3"] {

    grid-template-columns: 1fr !important;

  }



  .dm-home-page .process-step,

  .dm-page-widget .process-step {

    min-height: 0 !important;

    padding: 36px 30px !important;

  }



  .dm-home-page .process-step p,

  .dm-home-page .step-details,

  .dm-page-widget .process-step p,

  .dm-page-widget .step-details {

    width: 100% !important;

    max-width: 100% !important;

  }



  .dm-home-page .process-steps[data-active] .process-step:not(.is-active) p,

  .dm-home-page .process-steps[data-active] .process-step:not(.is-active) .step-details,

  .dm-page-widget .process-steps[data-active] .process-step:not(.is-active) p,

  .dm-page-widget .process-steps[data-active] .process-step:not(.is-active) .step-details {

    display: block !important;

  }

}



@media (max-width: 768px) {

  .dm-page-widget > .container,

  .dm-home-page .container,

  .dm-page-widget .container {

    padding-left: 22px !important;

    padding-right: 22px !important;

  }



  .dm-home-page .hero,

  .dm-page-widget .corporate-hero,

  .dm-page-widget .about-hero,

  .dm-page-widget .catalogo-header,

  .dm-page-widget .blog-header,

  .dm-page-widget .featured-article,

  .dm-page-widget .contact-grid,

  .dm-page-widget .newsletter-block,

  .dm-home-page .vision-block,

  .dm-home-page .quote-block,

  .dm-home-page .section-head,

  .dm-page-widget .section-head {

    gap: 30px !important;

  }



  .dm-home-page .hero,

  .dm-home-page .dm-home-section,

  .dm-page-widget .dm-page-section {

    padding-top: 52px;

    padding-bottom: 52px;

  }



  .dm-home-page .hero h1,

  .dm-page-widget .corporate-hero h1,

  .dm-page-widget .about-intro-text h2,

  .dm-page-widget .catalogo-header h2,

  .dm-page-widget .blog-header h2,

  .dm-page-widget .contact-info h2,

  .dm-home-page .section-title,

  .dm-page-widget .section-title {

    font-size: clamp(34px, 10vw, 52px) !important;

    line-height: 1.02 !important;

  }



  .dm-home-page .hero-sub,

  .dm-page-widget .lead,

  .dm-page-widget .section-intro,

  .dm-page-widget .contact-info p,

  .dm-home-page .section-intro {

    max-width: 100% !important;

    font-size: 15px !important;

    line-height: 1.75 !important;

  }



  .dm-home-page .hero-meta {

    position: static !important;

    text-align: left !important;

    margin-top: 26px !important;

  }



  .dm-home-page .hero-visual,

  .dm-page-widget .corporate-hero .visual,

  .dm-page-widget .about-hero .wf-box,

  .dm-home-page .vision-visual .wf-box,

  .dm-page-widget .featured-article .wf-box {

    width: 100% !important;

    max-height: none !important;

  }



  .dm-page-widget .catalogo-grid,

  .dm-page-widget .articles-grid,

  .dm-page-widget .case-studies,

  .dm-page-widget .values-grid,

  .dm-page-widget .about-timeline,

  .dm-home-page .home-blog-preview,

  .dm-home-page .works-grid,

  .dm-page-widget .corporate-services,

  .dm-page-widget .corporate-services.dm-corp-cols-3,

  .dm-page-widget .corporate-services.dm-corp-cols-2,

  .dm-page-widget .corporate-services.dm-corp-cols-1 {

    grid-template-columns: 1fr !important;

    gap: 34px !important;

  }



  .dm-page-widget .corporate-targets {

    grid-template-columns: 1fr !important;

  }



  .dm-page-widget .corporate-target {

    border-right: none !important;

    border-bottom: 1px solid var(--line);

  }



  .dm-home-page .work-card,

  .dm-page-widget .product-card,

  .dm-page-widget .article-card,

  .dm-page-widget .case-study {

    transform: none !important;

  }



  .dm-home-page .dm-corporate-image-wrap,

  .dm-page-widget .dm-corporate-image-wrap {

    min-height: 320px;

  }



  .dm-home-page .corporate-badge,

  .dm-page-widget .corporate-badge {

    position: static !important;

    transform: none !important;

    margin-top: 18px !important;

    max-width: 100% !important;

    width: 100% !important;

  }



  .dm-home-page .hero-cta,

  .dm-page-widget .hero-cta,

  .dm-page-widget .submit-btn,

  .dm-page-widget .newsletter-form button,

  .dm-page-widget .btn-primary,

  .dm-page-widget .btn-secondary {

    width: 100%;

    justify-content: center;

    text-align: center;

    min-height: 48px;

  }



  .dm-page-widget .filter-bar,

  .dm-page-widget .blog-cat-bar {

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .dm-page-widget .filter-bar::-webkit-scrollbar,

  .dm-page-widget .blog-cat-bar::-webkit-scrollbar { display: none; }



  .dm-page-widget .filter-bar-left {

    flex-wrap: nowrap !important;

    min-width: max-content;

  }



  .dm-page-widget .contact-detail,

  .dm-page-widget .form-row,

  .dm-page-widget .modal-specs .spec-row {

    grid-template-columns: 1fr !important;

    gap: 8px !important;

  }



  .dm-page-widget .newsletter-block {

    padding: 42px 24px !important;

  }



  .dm-page-widget .newsletter-form {

    flex-direction: column !important;

  }



  .dm-page-widget input,

  .dm-page-widget select,

  .dm-page-widget textarea,

  .dm-home-page input,

  .dm-home-page select,

  .dm-home-page textarea {

    width: 100%;

    max-width: 100%;

    font-size: 16px !important; /* evita zoom iOS */

  }

}



@media (max-width: 480px) {

  .dm-page-widget > .container,

  .dm-home-page .container,

  .dm-page-widget .container {

    padding-left: 18px !important;

    padding-right: 18px !important;

  }



  .dm-home-page .hero,

  .dm-home-page .dm-home-section,

  .dm-page-widget .dm-page-section {

    padding-top: 42px;

    padding-bottom: 42px;

  }



  .dm-home-page .hero-eyebrow,

  .dm-page-widget .hero-eyebrow,

  .dm-page-widget .eyebrow,

  .dm-home-page .eyebrow,

  .dm-home-page .section-num,

  .dm-page-widget .section-num {

    font-size: 10px !important;

    letter-spacing: .22em !important;

  }



  .dm-home-page .hero-eyebrow::before,

  .dm-page-widget .hero-eyebrow::before {

    width: 28px !important;

    flex: 0 0 28px;

  }



  .dm-home-page .hero h1,

  .dm-page-widget .corporate-hero h1,

  .dm-page-widget .about-intro-text h2,

  .dm-page-widget .catalogo-header h2,

  .dm-page-widget .blog-header h2,

  .dm-page-widget .contact-info h2,

  .dm-home-page .section-title,

  .dm-page-widget .section-title {

    font-size: clamp(31px, 10.8vw, 44px) !important;

  }



  .dm-home-page .hero-cta,

  .dm-page-widget .hero-cta,

  .dm-page-widget .submit-btn,

  .dm-page-widget .newsletter-form button,

  .dm-page-widget .btn-primary,

  .dm-page-widget .btn-secondary {

    padding: 14px 18px !important;

    font-size: 10px !important;

    letter-spacing: .22em !important;

  }



  .dm-page-widget .product-card h3,

  .dm-page-widget .article-card h4,

  .dm-home-page .work-card h3,

  .dm-page-widget .case-study h4 {

    font-size: 24px !important;

  }



  .dm-home-page .process-intro,

  .dm-page-widget .process-intro,

  .dm-home-page .process-step,

  .dm-page-widget .process-step {

    padding-left: 22px !important;

    padding-right: 22px !important;

  }



  .dm-home-page .process-step .num,

  .dm-page-widget .process-step .num {

    font-size: 40px !important;

    margin-bottom: 18px !important;

  }



  .dm-home-page .dm-corporate-image-wrap,

  .dm-page-widget .dm-corporate-image-wrap {

    min-height: 260px;

  }



  .dm-page-widget .modal,

  .dm-home-page .modal {

    width: 100vw !important;

    height: 100dvh !important;

    max-height: none !important;

    border: none !important;

  }

}





/* ===================================================

   DOMUS MURANO · Hero mobile order control v1.3.7

   =================================================== */

.hero-block.dm-hero-mobile-reverse .hero-text,

.hero-block.dm-hero-mobile-reverse .hero-visual {

  order: initial;

}



@media (max-width: 900px) {

  .hero-block.dm-hero-mobile-reverse .hero-visual {

    order: 1;

  }



  .hero-block.dm-hero-mobile-reverse .hero-text {

    order: 2;

  }

}





/* ===================================================

   DOMUS MURANO · Hero mobile full width image v1.3.8

   - su smartphone l'immagine Hero può uscire dal container Elementor

   - il testo resta impaginato con i padding della pagina

   =================================================== */

.hero-block.dm-hero-mobile-full .hero-visual {

  max-width: 100%;

}



@media (max-width: 767px) {

  .hero-block.dm-hero-mobile-full,

  .hero.dm-hero-mobile-full {

    overflow: visible;

  }



  .hero-block.dm-hero-mobile-full .hero-visual,

  .hero.dm-hero-mobile-full .hero-visual {

    width: 100vw !important;

    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;

    margin-right: calc(50% - 50vw) !important;

    justify-self: center;

  }



  .hero-block.dm-hero-mobile-full .hero-visual .wf-box,

  .hero-block.dm-hero-mobile-full .hero-visual .wf-img,

  .hero-block.dm-hero-mobile-full .hero-visual .wf-placeholder,

  .hero.dm-hero-mobile-full .hero-visual .wf-box,

  .hero.dm-hero-mobile-full .hero-visual .wf-img,

  .hero.dm-hero-mobile-full .hero-visual .wf-placeholder {

    width: 100vw !important;

    max-width: 100vw !important;

    border-left: 0 !important;

    border-right: 0 !important;

  }



  .hero-block.dm-hero-mobile-full .hero-visual::after,

  .hero.dm-hero-mobile-full .hero-visual::after {

    display: none !important;

  }

}





/* ===================================================

   DOMUS MURANO · Hero mobile full width text v1.3.9

   - il blocco testo può occupare tutta la viewport su smartphone

   - il contenuto resta controllabile tramite padding responsive Elementor

   =================================================== */

@media (max-width: 767px) {

  .hero-block.dm-hero-mobile-text-full,

  .hero.dm-hero-mobile-text-full {

    overflow: visible;

  }



  .hero-block.dm-hero-mobile-text-full .hero-text,

  .hero.dm-hero-mobile-text-full .hero-text {

    width: 100vw !important;

    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;

    margin-right: calc(50% - 50vw) !important;

    box-sizing: border-box !important;

  }



  .hero-block.dm-hero-mobile-text-full .hero-sub,

  .hero.dm-hero-mobile-text-full .hero-sub {

    max-width: none !important;

  }



  .hero-block.dm-hero-mobile-text-full .hero-cta,

  .hero.dm-hero-mobile-text-full .hero-cta {

    width: 100%;

    justify-content: center;

  }



  .hero-block.dm-hero-mobile-text-full .hero-meta,

  .hero.dm-hero-mobile-text-full .hero-meta {

    width: 100%;

  }

}



/* ===================================================

   DOMUS MURANO · Catalog gallery modal v1.4.1

   - più immagini nel popup prodotto tramite thumbnails

   =================================================== */

.modal-thumbs[hidden],

.dm-modal-thumbs[hidden] {

  display: none !important;

}



.modal-thumbs,

.dm-modal-thumbs,

.dm-inline-modal-thumbs {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

}



.modal-thumbs::-webkit-scrollbar,

.dm-modal-thumbs::-webkit-scrollbar,

.dm-inline-modal-thumbs::-webkit-scrollbar {

  display: none;

}



.modal-thumb {

  appearance: none;

  -webkit-appearance: none;

  padding: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border-style: solid;

}



.modal-thumb.active {

  border-color: var(--rose);

  box-shadow: inset 0 0 0 1px var(--rose);

}



.dm-inline-modal-image,

.dm-modal-image {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



@media (max-width: 640px) {

  .modal-thumbs,

  .dm-modal-thumbs,

  .dm-inline-modal-thumbs {

    padding: 10px 16px;

    gap: 8px;

  }



  .modal-thumb {

    width: 52px;

    height: 52px;

  }

}



/* ===================================================

   DOMUS MURANO · Catalog modal controls v1.4.2

   - immagine popup non tagliata di default

   - controlli Elementor per fit, posizione, dimensioni popup e layout griglia

   =================================================== */

.catalogo-grid {

  grid-template-columns: repeat(var(--dm-catalog-columns-desktop, 3), minmax(0, 1fr)) !important;

  column-gap: var(--dm-catalog-column-gap, 32px) !important;

  row-gap: var(--dm-catalog-row-gap, 56px) !important;

}



.modal {

  width: min(var(--dm-modal-width, 1200px), 96vw) !important;

  height: min(var(--dm-modal-height, 90vh), 920px) !important;

}



.modal-content {

  grid-template-columns: minmax(0, var(--dm-modal-gallery-width, 52%)) minmax(0, 1fr) !important;

}



.modal-gallery {

  background: var(--dm-modal-gallery-bg, var(--cream-deep)) !important;

}



.modal-info {

  background: var(--dm-modal-info-bg, var(--white)) !important;

}



.modal-main-image {

  min-height: var(--dm-modal-image-min-height, 520px);

}



.dm-inline-modal-image,

.dm-modal-image,

.modal-main-image .wf-img {

  background-size: var(--dm-modal-image-fit, contain) !important;

  background-position: var(--dm-modal-image-position, center center) !important;

  background-repeat: no-repeat !important;

}



.modal-thumb {

  width: var(--dm-modal-thumb-size, 60px) !important;

  height: var(--dm-modal-thumb-size, 60px) !important;

}



.modal.dm-modal-thumbs-top .modal-thumbs,

.modal.dm-modal-thumbs-top .dm-modal-thumbs,

.modal.dm-modal-thumbs-top .dm-inline-modal-thumbs {

  order: -1;

  border-top: 0;

  border-bottom: 1px solid var(--line);

}



.modal-actions .btn-primary[hidden],

.modal-specs[hidden] {

  display: none !important;

}



@media (max-width: 900px) {

  .catalogo-grid {

    grid-template-columns: repeat(var(--dm-catalog-columns-tablet, 2), minmax(0, 1fr)) !important;

  }



  .modal {

    width: min(var(--dm-modal-width, 760px), 96vw) !important;

    height: min(var(--dm-modal-height, 92vh), 92dvh) !important;

  }



  .modal-content {

    grid-template-columns: 1fr !important;

  }



  .modal-main-image {

    min-height: min(var(--dm-modal-image-min-height, 360px), 58vh);

  }

}



@media (max-width: 640px) {

  .catalogo-grid {

    grid-template-columns: repeat(var(--dm-catalog-columns-mobile, 1), minmax(0, 1fr)) !important;

  }



  .modal {

    width: 100vw !important;

    height: 100dvh !important;

  }



  .modal-main-image {

    min-height: min(var(--dm-modal-image-min-height, 320px), 52vh);

  }



  .dm-inline-modal-image,

  .dm-modal-image,

  .modal-main-image .wf-img {

    background-size: var(--dm-modal-image-fit, contain) !important;

  }

}



/* ===================================================

   DOMUS MURANO · Rich text + global style controls v1.5.6

   =================================================== */

.dm-rich-text > *:first-child { margin-top: 0; }

.dm-rich-text > *:last-child { margin-bottom: 0; }

.dm-rich-text p { margin: 0 0 1em; }

.dm-rich-text ul,

.dm-rich-text ol { margin: 0.8em 0 0.8em 1.35em; padding: 0; }

.dm-rich-text li { margin: 0.35em 0; }

.dm-rich-text a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }

.dm-rich-text strong,

.dm-rich-text b { font-weight: 600; }

.dm-rich-text em,

.dm-rich-text i { font-style: italic; }



.dm-modal-image-shell {

  width: 100%;

  height: 100%;

  min-height: var(--dm-modal-image-min-height, 520px);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: transparent;

  border: 0 !important;

}



.dm-modal-image-shell::before { display: none !important; }



.dm-modal-image,

.dm-inline-modal-image {

  display: block;

  width: 100%;

  height: 100%;

  max-width: 100%;

  max-height: 100%;

  object-fit: var(--dm-modal-image-fit, contain) !important;

  object-position: var(--dm-modal-image-position, center center) !important;

  background: none !important;

}



.dm-modal-image[hidden],

.dm-inline-modal-image[hidden] {

  display: none !important;

}



.dm-modal-image-placeholder { display: none; }

.dm-modal-image[hidden] + .dm-modal-image-placeholder { display: inline-flex; }



.modal-main-image {

  display: flex;

  align-items: stretch;

  justify-content: stretch;

}



.dm-modal-counter {

  position: absolute;

  right: 24px;

  bottom: 96px;

  z-index: 4;

  padding: 6px 10px;

  background: rgba(29, 29, 27, 0.72);

  color: var(--cream);

  font-family: var(--dm-font-body);

  font-size: 10px;

  letter-spacing: 0.18em;

}



.dm-modal-counter[hidden] { display: none !important; }



@media (max-width: 900px) {

  .dm-modal-image-shell {

    min-height: min(var(--dm-modal-image-min-height, 360px), 58vh);

  }

  .dm-modal-counter {

    right: 16px;

    bottom: 78px;

  }

}



@media (max-width: 640px) {

  .dm-modal-image-shell {

    min-height: min(var(--dm-modal-image-min-height, 320px), 52vh);

  }

  .dm-modal-counter {

    right: 14px;

    bottom: 68px;

  }

}

.modal.dm-modal-hide-counter .dm-modal-counter { display: none !important; }





/* ===== ORELO DEFAULT FONT OVERRIDES =====

   Orelo viene usato come font principale dei titoli se il file font è disponibile.

   Le Typography Controls di Elementor possono comunque sovrascrivere questi valori. */

.hero h1,

.hero-block h1,

.section-title,

.about-intro-text h2,

.catalogo-header h2,

.blog-header h2,

.contact-info h2,

.corporate-hero h1,

.modal-info h2,

.work-card h3,

.product-card h3,

.article-card h4,

.featured-article h3,

.newsletter-block h3,

.quote-text,

.quote-attr strong,

.timeline-item .year,

.timeline-item h4,

.value-item h4,

.corporate-target h4,

.corporate-service h3,

.case-study h4,

.press-logo,

.footer-logo,

.serif {

  font-family: var(--dm-font-heading);

}





/* ===================================================

   DOMUS MURANO · Corporate strip text overflow guard v1.5.6

   Mantiene il testo dentro al blocco senza generare scrollbar automatiche.

   Lo scroll interno viene applicato solo se scelto manualmente dal controllo

   “Overflow contenuto testo”.

   =================================================== */

.dm-corp-text-safe-yes .corporate-strip {

  overflow-x: hidden;

  overflow-y: visible;

}



.dm-corp-text-safe-yes .corporate-strip > .corporate-text {

  min-width: 0;

  max-width: 100%;

  overflow-x: hidden;

  overscroll-behavior: contain;

}



.dm-corp-text-safe-yes .corporate-strip > .corporate-text > *,

.dm-corp-text-safe-yes .corporate-strip .section-title,

.dm-corp-text-safe-yes .corporate-strip .section-title *,

.dm-corp-text-safe-yes .corporate-strip .section-intro,

.dm-corp-text-safe-yes .corporate-strip .section-intro *,

.dm-corp-text-safe-yes .corporate-strip .corporate-points,

.dm-corp-text-safe-yes .corporate-strip .corporate-points li,

.dm-corp-text-safe-yes .corporate-strip .corporate-points li *,

.dm-corp-text-safe-yes .corporate-strip .hero-cta {

  max-width: 100%;

  box-sizing: border-box;

}



.dm-corp-text-break-yes .corporate-strip .section-title,

.dm-corp-text-break-yes .corporate-strip .section-title *,

.dm-corp-text-break-yes .corporate-strip .section-intro,

.dm-corp-text-break-yes .corporate-strip .section-intro *,

.dm-corp-text-break-yes .corporate-strip .corporate-points li,

.dm-corp-text-break-yes .corporate-strip .corporate-points li *,

.dm-corp-text-break-yes .corporate-strip .hero-cta,

.dm-corp-text-break-yes .corporate-strip .hero-cta * {

  overflow-wrap: anywhere;

  word-break: normal;

}



/* Evita scrollbar inserite automaticamente dal fix precedente.

   Se dal pannello Elementor scegli “Scroll interno”, lo stile inline del widget

   potrà comunque applicare overflow-y:auto. */

.dm-corp-text-safe-yes.dm-corporate-height-mode-fixed .corporate-strip > .corporate-text {

  justify-content: flex-start;

}



@media (max-width: 1280px) and (min-width: 901px) {

  .dm-corp-text-safe-yes .corporate-strip > .corporate-text {

    justify-content: flex-start;

    overflow-y: visible;

  }



  .dm-corp-text-safe-yes .corporate-strip .section-title {

    max-width: 100%;

  }



  .dm-corp-text-safe-yes .corporate-strip .corporate-points {

    margin-top: clamp(22px, 2.6vw, 36px);

  }



  .dm-corp-text-safe-yes .corporate-strip .corporate-points li {

    padding-top: clamp(10px, 1.2vw, 16px);

    padding-bottom: clamp(10px, 1.2vw, 16px);

  }

}



@media (max-width: 1024px) {

  .dm-corp-text-safe-yes .corporate-strip > .corporate-text {

    justify-content: flex-start;

    overflow-y: visible;

  }



  .dm-corp-text-safe-yes .corporate-strip {

    overflow: visible;

  }

}





/* ===================================================

   DOMUS MURANO · Corporate strip internal mouse scroll v1.5.6

   Quando il controllo “Overflow contenuto testo” è impostato su “Scroll interno”,

   la rotellina/touchpad lavora direttamente sul blocco testo.

   =================================================== */

.dm-corp-text-overflow-auto .corporate-strip > .corporate-text,

.dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text {

  overflow-y: auto !important;

  overflow-x: hidden !important;

  overscroll-behavior-y: contain;

  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;

  min-height: 0;

  touch-action: pan-y;

}



.dm-corp-text-overflow-auto.dm-corp-text-safe-yes .corporate-strip > .corporate-text,

.dm-corp-text-overflow-auto.dm-corp-text-safe-yes .dm-home-section--corporate .corporate-strip > .corporate-text {

  overflow-y: auto !important;

}



.dm-corp-text-overflow-auto.dm-corporate-height-mode-fixed .corporate-strip > .corporate-text,

.dm-corp-text-overflow-auto.dm-corporate-height-mode-fixed .dm-home-section--corporate .corporate-strip > .corporate-text {

  height: 100%;

  max-height: 100%;

}



@media (max-width: 1280px) and (min-width: 901px) {

  .dm-corp-text-overflow-auto .corporate-strip > .corporate-text,

  .dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text {

    overflow-y: auto !important;

  }

}



@media (max-width: 1024px) {

  .dm-corp-text-overflow-auto .corporate-strip > .corporate-text,

  .dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text {

    overflow-y: auto !important;

  }

}



/* ===================================================

   DOMUS MURANO · Corporate strip real internal scroll v1.5.6

   Lo scroll è agganciato al contenitore interno del testo, così la rotellina

   funziona anche quando Elementor/viewport cambiano altezza della sezione.

   =================================================== */

.corporate-strip > .corporate-text {

  min-height: 0;

  min-width: 0;

}



.corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  min-height: 0;

  box-sizing: border-box;

  outline: none;

}



.dm-corp-text-safe-yes .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-safe-yes .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  overflow-x: hidden;

  max-width: 100%;

}



.dm-corp-text-overflow-auto .corporate-strip > .corporate-text,

.dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text {

  overflow: hidden !important;

  min-height: 0 !important;

  max-height: 100%;

}



.dm-corp-text-overflow-auto .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  overflow-y: auto !important;

  overflow-x: hidden !important;

  overscroll-behavior-y: contain;

  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;

  min-height: 0 !important;

  max-height: 100%;

  height: 100%;

  touch-action: pan-y;

  pointer-events: auto;

}



.dm-corp-text-overflow-auto.dm-corporate-height-mode-fixed .corporate-strip > .corporate-text,

.dm-corp-text-overflow-auto.dm-corporate-height-mode-fixed .dm-home-section--corporate .corporate-strip > .corporate-text {

  height: 100% !important;

  max-height: 100% !important;

}



.dm-corp-text-overflow-auto.dm-corporate-height-mode-fixed .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-overflow-auto.dm-corporate-height-mode-fixed .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  height: 100% !important;

  max-height: 100% !important;

}



/* Se l'altezza non è fissa ma viene impostata solo come massima, lo scroll interno

   deve comunque avere un limite reale su cui lavorare. */

.dm-corp-text-overflow-auto.dm-corporate-height-mode-min .corporate-strip > .corporate-text,

.dm-corp-text-overflow-auto.dm-corporate-height-mode-min .dm-home-section--corporate .corporate-strip > .corporate-text {

  max-height: inherit;

}



@media (max-width: 1280px) and (min-width: 901px) {

  .dm-corp-text-overflow-auto .corporate-strip > .corporate-text,

  .dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text {

    overflow: hidden !important;

  }



  .dm-corp-text-overflow-auto .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

  .dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

    overflow-y: auto !important;

    max-height: 100%;

  }

}



@media (max-width: 1024px) {

  .dm-corp-text-overflow-auto .corporate-strip > .corporate-text,

  .dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text {

    overflow: hidden !important;

  }



  .dm-corp-text-overflow-auto .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

  .dm-corp-text-overflow-auto .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

    overflow-y: auto !important;

  }

}



/* ===================================================

   DOMUS MURANO · Catalog builder scoped modal fix v1.6.0

   - popup meno fullwidth e responsive per device

   - scroll interno completo colonna testo

   - blocco reale pagina dietro popup

   - griglia catalogo visibile subito

   =================================================== */

html.dm-modal-scroll-locked {

  overflow: hidden !important;

  overscroll-behavior: none !important;

}

body.dm-modal-scroll-locked-body,

body.modal-open.dm-modal-scroll-locked-body {

  position: fixed !important;

  overflow: hidden !important;

  overscroll-behavior: none !important;

}

body.modal-open {

  overflow: hidden !important;

  overscroll-behavior: none !important;

}



.catalogo-grid[data-dm-catalog-grid],

.catalogo-grid[data-dm-catalog-grid] > * {

  opacity: 1 !important;

  transform: none !important;

}



.modal,

.dm-page-widget .modal,

.dm-home-page .modal {

  width: min(var(--dm-modal-width, 1120px), 88vw) !important;

  height: min(var(--dm-modal-height, 86vh), 860px) !important;

  max-width: 88vw !important;

  max-height: 86dvh !important;

  inset: auto !important;

  top: 50% !important;

  left: 50% !important;

  right: auto !important;

  bottom: auto !important;

  transform: translate(-50%, -48%) !important;

  border: 1px solid var(--line) !important;

  border-radius: var(--dm-modal-radius, 0px) !important;

  overflow: hidden !important;

}

.modal.active,

.dm-page-widget .modal.active,

.dm-home-page .modal.active {

  transform: translate(-50%, -50%) !important;

}



.modal-content {

  height: 100% !important;

  min-height: 0 !important;

  display: grid !important;

  grid-template-columns: minmax(0, var(--dm-modal-gallery-width, 52%)) minmax(0, 1fr) !important;

  overflow: hidden !important;

}

.modal-gallery,

.modal-info {

  min-height: 0 !important;

  max-height: 100% !important;

}

.modal-gallery {

  overflow: hidden !important;

}

.modal-info {

  overflow-y: auto !important;

  overflow-x: hidden !important;

  overscroll-behavior: contain !important;

  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: thin !important;

  scrollbar-color: rgba(29, 29, 27, 0.25) transparent !important;

}

.modal-info::-webkit-scrollbar {

  width: 8px !important;

  display: block !important;

}

.modal-info::-webkit-scrollbar-track {

  background: transparent !important;

}

.modal-info::-webkit-scrollbar-thumb {

  background: rgba(29, 29, 27, 0.22) !important;

  border-radius: 999px !important;

}

.modal-main-image {

  min-height: 0 !important;

  height: auto !important;

  flex: 1 1 auto !important;

  overflow: hidden !important;

}

.dm-modal-image-shell {

  min-height: 0 !important;

  height: 100% !important;

  padding: var(--dm-modal-image-padding, 0px) !important;

}

.dm-modal-image,

.dm-inline-modal-image {

  width: 100% !important;

  height: 100% !important;

  object-fit: var(--dm-modal-image-fit, contain) !important;

  object-position: var(--dm-modal-image-position, center center) !important;

}

.modal-thumbs,

.dm-modal-thumbs,

.dm-inline-modal-thumbs {

  flex: 0 0 auto !important;

  max-width: 100% !important;

}

.modal-backdrop.active {

  pointer-events: all !important;

}



@media (max-width: 1024px) {

  .modal,

  .dm-page-widget .modal,

  .dm-home-page .modal {

    width: min(var(--dm-modal-width-tablet, 92vw), 94vw) !important;

    height: min(var(--dm-modal-height-tablet, 88vh), 90dvh) !important;

    max-width: 94vw !important;

    max-height: 90dvh !important;

  }

  .modal-content {

    grid-template-columns: 1fr !important;

    grid-template-rows: minmax(260px, 46%) minmax(0, 1fr) !important;

    overflow: hidden !important;

  }

  .modal-gallery {

    min-height: 0 !important;

  }

}



@media (max-width: 640px) {

  .modal,

  .dm-page-widget .modal,

  .dm-home-page .modal {

    width: min(var(--dm-modal-width-mobile, 96vw), 96vw) !important;

    height: min(var(--dm-modal-height-mobile, 92vh), 92dvh) !important;

    max-width: 96vw !important;

    max-height: 92dvh !important;

    border-radius: 0 !important;

  }

  .modal-content {

    grid-template-rows: minmax(220px, 42%) minmax(0, 1fr) !important;

  }

  .modal-info {

    padding: 24px 20px 30px !important;

  }

  .modal-close {

    top: 10px !important;

    right: 10px !important;

  }

}



/* DOMUS MURANO · Catalog modal image switch fix v1.6.0 */

.dm-modal-image-shell.is-loading .dm-modal-image-placeholder { display: inline-flex; }

.dm-modal-image.is-loading[hidden] { display: none !important; }

.dm-modal-image-shell.is-loaded .dm-modal-image-placeholder { display: none !important; }





/* ===================================================

   DOMUS MURANO · Corporate strip page scroll pass-through v1.6.3

   Se l'overflow testo è impostato su "Visibile" o "Nascosto", il blocco testo

   non deve trattenere la rotellina: lo scroll deve passare alla pagina.

   Lo scroll interno resta attivo solo con "Overflow contenuto testo" = "Scroll interno".

   =================================================== */

.dm-corp-text-overflow-visible .corporate-strip > .corporate-text,

.dm-corp-text-overflow-visible .dm-home-section--corporate .corporate-strip > .corporate-text,

.dm-corp-text-overflow-hidden .corporate-strip > .corporate-text,

.dm-corp-text-overflow-hidden .dm-home-section--corporate .corporate-strip > .corporate-text,

.dm-corp-text-overflow-visible .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-overflow-visible .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-overflow-hidden .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-overflow-hidden .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  overscroll-behavior-y: auto !important;

  touch-action: auto !important;

  scrollbar-gutter: auto !important;

}



.dm-corp-text-overflow-visible .corporate-strip > .corporate-text,

.dm-corp-text-overflow-visible .dm-home-section--corporate .corporate-strip > .corporate-text {

  overflow-y: visible !important;

}



.dm-corp-text-overflow-visible .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-overflow-visible .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  overflow-y: visible !important;

  height: auto !important;

  max-height: none !important;

}



/* La protezione testi non deve bloccare la propagazione dello scroll pagina. */

.dm-corp-text-safe-yes:not(.dm-corp-text-overflow-auto) .corporate-strip > .corporate-text,

.dm-corp-text-safe-yes:not(.dm-corp-text-overflow-auto) .dm-home-section--corporate .corporate-strip > .corporate-text,

.dm-corp-text-safe-yes:not(.dm-corp-text-overflow-auto) .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea,

.dm-corp-text-safe-yes:not(.dm-corp-text-overflow-auto) .dm-home-section--corporate .corporate-strip > .corporate-text > .dm-corporate-text-scrollarea {

  overscroll-behavior-y: auto !important;

}



/* ===================================================

   DOMUS MURANO · Hero image decorative frame toggle v1.6.3

   Consente di nascondere il riquadro/bordo decorativo sotto l'immagine Hero.

   =================================================== */

.hero-block.dm-hero-no-image-frame .hero-visual::after,
.hero.dm-hero-no-image-frame .hero-visual::after,
.dm-home-section--hero.dm-hero-no-image-frame .hero-visual::after {
  content: none !important;
  display: none !important;
}

/* ===================================================
   DOMUS MURANO · Corporate fixed-height image fill v1.6.8
   Come nella Hero, l'altezza fissa non deve restringere l'immagine né
   lasciare fasce vuote: il pannello visuale si estende e l'immagine usa cover.
   =================================================== */
.dm-corporate-height-mode-fixed .corporate-strip {
  align-items: stretch;
}

.dm-corporate-height-mode-fixed .corporate-strip > .corporate-text,
.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual {
  min-width: 0;
  min-height: 0 !important;
  max-height: none;
}

.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual {
  width: 100% !important;
  align-self: stretch;
  justify-self: stretch;
  overflow: hidden;
}

.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image-wrap,
.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image,
.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .wf-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image {
  object-fit: cover !important;
}

.dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual .wf-placeholder {
  background-size: cover !important;
}

@media (max-width: 900px) {
  .dm-corporate-height-mode-fixed .corporate-strip {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .dm-corporate-height-mode-fixed .corporate-strip > .corporate-text {
    height: auto !important;
  }

  .dm-corporate-height-mode-fixed .corporate-strip > .corporate-visual {
    height: 100% !important;
  }
}

/* ===================================================
   DOMUS MURANO · Corporate independent image height v1.6.9
   L'area immagine può avere un'altezza responsive indipendente.
   Il badge non cambia flusso: resta ancorato al pannello visuale.
   =================================================== */
.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual {
  position: relative;
  height: var(--dm-corporate-image-area-height, 520px) !important;
  min-height: var(--dm-corporate-image-area-height, 520px) !important;
  max-height: var(--dm-corporate-image-area-height, 520px) !important;
  align-self: start !important;
  overflow: hidden;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image-wrap,
.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image,
.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .wf-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .dm-corporate-image-wrap {
  flex: 1 1 100%;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .corporate-badge:not(.corporate-badge--static) {
  position: absolute !important;
  width: auto !important;
  max-width: calc(100% - (var(--dm-badge-x, 32px) * 2)) !important;
  margin: 0 !important;
  transform: none !important;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .corporate-badge--bottom-left {
  inset: auto auto var(--dm-badge-y, 32px) var(--dm-badge-x, 32px) !important;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .corporate-badge--bottom-right {
  inset: auto var(--dm-badge-x, 32px) var(--dm-badge-y, 32px) auto !important;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .corporate-badge--top-left {
  inset: var(--dm-badge-y, 32px) auto auto var(--dm-badge-x, 32px) !important;
}

.dm-corporate-image-height-mode-fixed .corporate-strip > .corporate-visual .corporate-badge--top-right {
  inset: var(--dm-badge-y, 32px) var(--dm-badge-x, 32px) auto auto !important;
}


/* ===================================================
   DOMUS MURANO · Catalog filters hover/active + subcategories v1.6.4
   =================================================== */
.dm-catalog-widget .filter-bar,

.dm-page-catalogo .filter-bar,

.dm-catalog-filter-bar {

  align-items: flex-start;

}



.dm-catalog-widget .filter-bar-left,

.dm-page-catalogo .filter-bar-left,

.dm-catalog-filter-bar .filter-bar-left {

  row-gap: 12px;

}



.dm-catalog-widget .filter-bar button,

.dm-page-catalogo .filter-bar button,

.dm-catalog-filter-bar button {

  color: var(--dm-filter-text-color, var(--muted)) !important;

  background: transparent !important;

  border: 0 !important;

  border-radius: var(--dm-filter-radius, 0) !important;

  box-shadow: none !important;

  outline: 0;

  position: relative;

  padding: 8px 0;

}



.dm-catalog-widget .filter-bar button::after,

.dm-page-catalogo .filter-bar button::after,

.dm-catalog-filter-bar button::after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 2px;

  height: 1px;

  background: var(--dm-filter-active-line, var(--rose));

  opacity: 0;

  transform: scaleX(0);

  transform-origin: left center;

  transition: opacity .25s ease, transform .25s ease;

}



.dm-catalog-widget .filter-bar button:hover,

.dm-page-catalogo .filter-bar button:hover,

.dm-catalog-filter-bar button:hover {

  color: var(--dm-filter-hover-text-color, var(--ink)) !important;

  background: var(--dm-filter-hover-bg, transparent) !important;

}



.dm-catalog-widget .filter-bar button.active,

.dm-catalog-widget .filter-bar button.is-parent-active,

.dm-page-catalogo .filter-bar button.active,

.dm-page-catalogo .filter-bar button.is-parent-active,

.dm-catalog-filter-bar button.active,

.dm-catalog-filter-bar button.is-parent-active {

  color: var(--dm-filter-active-text-color, var(--ink)) !important;

  background: var(--dm-filter-active-bg, transparent) !important;

}



.dm-catalog-widget .filter-bar button.active::after,

.dm-catalog-widget .filter-bar button.is-parent-active::after,

.dm-page-catalogo .filter-bar button.active::after,

.dm-page-catalogo .filter-bar button.is-parent-active::after,

.dm-catalog-filter-bar button.active::after,

.dm-catalog-filter-bar button.is-parent-active::after {

  opacity: 1;

  transform: scaleX(1);

}



.dm-catalog-widget .filter-subbar,

.dm-page-catalogo .filter-subbar,

.dm-catalog-filter-bar .filter-subbar {

  display: flex;

  flex-wrap: wrap;

  gap: var(--dm-filter-subcategory-gap, 18px);

  width: 100%;

  padding-top: 12px;

  margin-top: 2px;

  border-top: 1px solid rgba(67, 67, 66, .12);

}



.dm-catalog-widget .filter-subbar[hidden],

.dm-page-catalogo .filter-subbar[hidden],

.dm-catalog-filter-bar .filter-subbar[hidden] {

  display: none !important;

}



.dm-catalog-widget .filter-subbar button,

.dm-page-catalogo .filter-subbar button,

.dm-catalog-filter-bar .filter-subbar button {

  font-size: 10px;

  letter-spacing: .22em;

  opacity: .88;

}



@media (max-width: 640px) {

  .dm-catalog-widget .filter-bar,

  .dm-page-catalogo .filter-bar,

  .dm-catalog-filter-bar {

    flex-direction: column;

    align-items: stretch;

  }

  .dm-catalog-widget .filter-subbar,

  .dm-page-catalogo .filter-subbar,

  .dm-catalog-filter-bar .filter-subbar {

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .dm-catalog-widget .filter-subbar::-webkit-scrollbar,

  .dm-page-catalogo .filter-subbar::-webkit-scrollbar,

  .dm-catalog-filter-bar .filter-subbar::-webkit-scrollbar {

    display: none;

  }

}





/* =========================================================

   DOMUS MURANO · Catalog filters dropdown + active subfilters v1.6.5

   ========================================================= */

.dm-catalog-filter-zone {

  width: 100%;

  position: relative;

  margin-bottom: 56px;

}



.dm-catalog-filter-zone .filter-bar {

  margin-bottom: 0 !important;

}



.dm-catalog-filter-zone .filter-bar-left,

.dm-catalog-filter-zone .dm-filter-main-row {

  display: flex;

  align-items: center;

  gap: 28px;

  flex-wrap: wrap;

}



.dm-catalog-filter-zone .dm-filter-main-item {

  position: relative;

  display: inline-flex;

  align-items: center;

}



.dm-catalog-filter-zone button[data-filter] {

  appearance: none;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  color: var(--dm-filter-text-color, var(--muted)) !important;

  font-family: var(--dm-body-font, 'Manrope', sans-serif);

  font-size: 11px;

  letter-spacing: 0.25em;

  line-height: 1.2;

  text-transform: uppercase;

  padding: 7px 0 !important;

  position: relative;

  cursor: pointer;

  white-space: nowrap;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.dm-catalog-filter-zone button[data-filter]::after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 1px;

  background: var(--dm-filter-active-line, var(--rose));

  transform: scaleX(0);

  transform-origin: left center;

  transition: transform 0.24s ease;

}



.dm-catalog-filter-zone button[data-filter]:hover,

.dm-catalog-filter-zone button[data-filter].active,

.dm-catalog-filter-zone button[data-filter].is-parent-active {

  color: var(--dm-filter-active-text-color, var(--ink)) !important;

  background: transparent !important;

}



.dm-catalog-filter-zone button[data-filter]:hover::after,

.dm-catalog-filter-zone button[data-filter].active::after,

.dm-catalog-filter-zone button[data-filter].is-parent-active::after {

  transform: scaleX(1);

}



.dm-catalog-filter-zone .dm-filter-caret {

  display: inline-flex;

  transform: translateY(-1px);

  font-size: 13px;

  letter-spacing: 0;

  opacity: 0.75;

}



.dm-catalog-filter-zone .dm-filter-dropdown {

  position: absolute;

  top: calc(100% + 12px);

  left: 50%;

  min-width: 190px;

  transform: translate(-50%, 8px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  background: var(--white, #fff);

  border: 1px solid var(--line, #D4C9C4);

  box-shadow: 0 18px 48px -28px rgba(29, 29, 27, 0.45);

  padding: 14px 18px;

  z-index: 50;

  display: flex;

  flex-direction: column;

  gap: 8px;

  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;

}



.dm-catalog-filter-zone .dm-filter-main-item.has-children:hover .dm-filter-dropdown,

.dm-catalog-filter-zone .dm-filter-main-item.has-children.is-open .dm-filter-dropdown {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translate(-50%, 0);

}



.dm-catalog-filter-zone .dm-filter-dropdown::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: -13px;

  height: 13px;

}



.dm-catalog-filter-zone .dm-filter-dropdown button[data-filter] {

  width: 100%;

  justify-content: flex-start;

  text-align: left;

  padding: 8px 0 !important;

  font-size: 10px;

  letter-spacing: 0.22em;

}



.dm-filter-selected-subbars {

  width: 100%;

  margin-top: 20px;

  margin-bottom: 0;

}



.dm-filter-selected-subbars .filter-subbar,

.dm-filter-selected-subbars .dm-filter-sub-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--dm-filter-subcategory-gap, 18px);

  padding: 18px 0 0;

  border-top: 1px solid var(--line, #D4C9C4);

}



.dm-filter-selected-subbars .filter-subbar[hidden] {

  display: none !important;

}



.dm-filter-selected-subbars button[data-filter] {
  font-size: 10px !important;

  letter-spacing: 0.24em !important;

}

/* Testi SEO associati ai filtri del catalogo. Tutti i contenuti restano nel
   markup; viene mostrato soltanto quello relativo al filtro attivo. */
.dm-filter-seo-contents {
  width: 100%;
}

.dm-filter-seo-content {
  width: 100%;
  margin: 24px 0 42px;
}

.dm-filter-seo-content[hidden] {
  display: none !important;
}

.dm-filter-seo-content > :first-child {
  margin-top: 0;
}

.dm-filter-seo-content > :last-child {
  margin-bottom: 0;
}


@media (max-width: 900px) {

  .dm-catalog-filter-zone .filter-bar-left,

  .dm-catalog-filter-zone .dm-filter-main-row {

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    gap: 22px;

    padding-right: 20px;

  }

  .dm-catalog-filter-zone .filter-bar-left::-webkit-scrollbar,

  .dm-catalog-filter-zone .dm-filter-main-row::-webkit-scrollbar { display: none; }

  .dm-catalog-filter-zone .dm-filter-dropdown {

    left: 0;

    transform: translate(0, 8px);

    min-width: 210px;

  }

  .dm-catalog-filter-zone .dm-filter-main-item.has-children:hover .dm-filter-dropdown,

  .dm-catalog-filter-zone .dm-filter-main-item.has-children.is-open .dm-filter-dropdown {

    transform: translate(0, 0);

  }

  .dm-filter-selected-subbars .filter-subbar,

  .dm-filter-selected-subbars .dm-filter-sub-row {

    overflow-x: auto;

    flex-wrap: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding-bottom: 2px;

  }

  .dm-filter-selected-subbars .filter-subbar::-webkit-scrollbar,
  .dm-filter-selected-subbars .dm-filter-sub-row::-webkit-scrollbar { display: none; }
}

/* ==========================================================
   DOMUS MURANO · About completa · layout alternati v1.6.12
   ========================================================== */
.dm-page-about .dm-about-hero-list {
  display: flex;
  flex-direction: column;
  row-gap: 100px;
  margin-bottom: 100px;
}

.dm-page-about .dm-about-hero-list .about-hero {
  margin-bottom: 0;
}

.dm-about-hero-height-mode-min .dm-about-hero-list .about-hero,
.dm-about-hero-height-mode-fixed .dm-about-hero-list .about-hero {
  align-items: stretch;
}

.dm-about-hero-height-mode-min .dm-about-hero-list .about-hero > .wf-box,
.dm-about-hero-height-mode-fixed .dm-about-hero-list .about-hero > .wf-box {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.dm-about-hero-height-mode-min .dm-about-hero-list .about-hero > .wf-box .wf-img,
.dm-about-hero-height-mode-fixed .dm-about-hero-list .about-hero > .wf-box .wf-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.dm-about-hero-height-mode-fixed .dm-about-hero-list .about-intro-text {
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .dm-about-hero-height-mode-min .dm-about-hero-list .about-hero,
  .dm-about-hero-height-mode-fixed .dm-about-hero-list .about-hero {
    height: auto;
    max-height: none;
  }

  .dm-about-hero-height-mode-min .dm-about-hero-list .about-hero > .wf-box,
  .dm-about-hero-height-mode-fixed .dm-about-hero-list .about-hero > .wf-box {
    height: auto;
    min-height: var(--dm-about-mobile-image-height, 420px);
  }
}

.dm-page-about .about-hero > .wf-box,
.dm-page-about .about-hero > .about-intro-text {
  min-width: 0;
}

.dm-page-about .about-hero--image-text > .wf-box {
  order: 1;
}

.dm-page-about .about-hero--image-text > .about-intro-text {
  order: 2;
}

.dm-page-about .about-hero--text-image > .about-intro-text {
  order: 1;
}

.dm-page-about .about-hero--text-image > .wf-box {
  order: 2;
}

.dm-page-about .dm-about-hero-paragraph,
.dm-page-about .dm-about-hero-paragraph p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.9;
}

.dm-page-about .dm-about-hero-paragraph {
  margin-bottom: 20px;
}

.dm-page-about .dm-about-hero-paragraph > :first-child {
  margin-top: 0;
}

.dm-page-about .dm-about-hero-paragraph > :last-child {
  margin-bottom: 0;
}

.dm-page-about .dm-about-alternating {
  display: flex;
  flex-direction: column;
  row-gap: 80px;
  padding: 80px 0;
  border-top: 1px solid var(--line);
}

.dm-page-about .dm-about-alternating__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
  min-width: 0;
}

.dm-page-about .dm-about-alternating__media,
.dm-page-about .dm-about-alternating__content {
  min-width: 0;
}

.dm-page-about .dm-about-alternating__media .wf-box {
  width: 100%;
  height: 520px;
  min-height: 0;
  aspect-ratio: auto;
  background-position: center;
  background-size: cover;
}

.dm-page-about .dm-about-alternating__item--image-text .dm-about-alternating__media {
  grid-column: 1;
  grid-row: 1;
}

.dm-page-about .dm-about-alternating__item--image-text .dm-about-alternating__content {
  grid-column: 2;
  grid-row: 1;
}

.dm-page-about .dm-about-alternating__item--text-image .dm-about-alternating__content {
  grid-column: 1;
  grid-row: 1;
}

.dm-page-about .dm-about-alternating__item--text-image .dm-about-alternating__media {
  grid-column: 2;
  grid-row: 1;
}

.dm-page-about .dm-about-alternating__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dm-page-about .dm-about-alternating__content .year {
  margin-bottom: 20px;
}

.dm-page-about .dm-about-alternating__content h4 {
  margin-bottom: 18px;
}

.dm-page-about .dm-about-alternating__description,
.dm-page-about .dm-about-alternating__description p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

.dm-page-about .dm-about-alternating__description > :first-child {
  margin-top: 0;
}

.dm-page-about .dm-about-alternating__description > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .dm-page-about .dm-about-hero-list--mobile-image-first .about-hero > .wf-box {
    order: 1;
  }

  .dm-page-about .dm-about-hero-list--mobile-image-first .about-hero > .about-intro-text {
    order: 2;
  }

  .dm-page-about .dm-about-hero-list--mobile-text-first .about-hero > .about-intro-text {
    order: 1;
  }

  .dm-page-about .dm-about-hero-list--mobile-text-first .about-hero > .wf-box {
    order: 2;
  }

  .dm-page-about .dm-about-alternating__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }

  .dm-page-about .dm-about-alternating--mobile-image-first .dm-about-alternating__media {
    grid-column: 1;
    grid-row: 1;
  }

  .dm-page-about .dm-about-alternating--mobile-image-first .dm-about-alternating__content {
    grid-column: 1;
    grid-row: 2;
  }

  .dm-page-about .dm-about-alternating--mobile-text-first .dm-about-alternating__content {
    grid-column: 1;
    grid-row: 1;
  }

  .dm-page-about .dm-about-alternating--mobile-text-first .dm-about-alternating__media {
    grid-column: 1;
    grid-row: 2;
  }

  .dm-page-about .dm-about-alternating--mobile-follow-desktop .dm-about-alternating__item--image-text .dm-about-alternating__media,
  .dm-page-about .dm-about-alternating--mobile-follow-desktop .dm-about-alternating__item--text-image .dm-about-alternating__content {
    grid-column: 1;
    grid-row: 1;
  }

  .dm-page-about .dm-about-alternating--mobile-follow-desktop .dm-about-alternating__item--image-text .dm-about-alternating__content,
  .dm-page-about .dm-about-alternating--mobile-follow-desktop .dm-about-alternating__item--text-image .dm-about-alternating__media {
    grid-column: 1;
    grid-row: 2;
  }
}