:root { --black:#3b2230; --white:#fffaf8; --ink:#241c20; --pink:#ed0d75; --rose:#f3d7e0; --gold:#d0a981; --soft:#dededa; --line:rgba(66,34,44,.18); --kanit:"Kanit",Arial,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--black); }
body { background:var(--black); color:var(--white); font-family:var(--kanit); font-weight:300; }
a { color:inherit; text-decoration:none; }
main { overflow-x:clip; }
.site-header { align-items:center; background:rgba(59,34,48,.9); border-bottom:1px solid rgba(255,250,248,.25); display:flex; height:82px; justify-content:space-between; padding:0 clamp(22px,5vw,76px); position:fixed; top:0; width:100%; z-index:10; backdrop-filter:blur(12px); }
.brand img { display:block; height:auto; object-fit:contain; width:144px; }
.site-header nav { display:flex; gap:clamp(24px,5vw,78px); margin-left:auto; margin-right:clamp(22px,6vw,95px); }
.site-header nav a,.header-contact { font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; transition:opacity .2s ease; }
.site-header nav a:hover,.header-contact:hover { opacity:.65; }
.header-contact { align-items:center; display:flex; gap:12px; }
.arrow { height:17px; width:17px; }
.hero-dark { align-items:center; background:#7b5367; display:flex; justify-content:center; min-height:100svh; overflow:hidden; padding:140px clamp(22px,8vw,125px) 72px; position:relative; }
.hero-backdrop { background-image:linear-gradient(90deg,rgba(59,34,48,.78),rgba(59,34,48,.38) 50%,rgba(59,34,48,.58)),url("/laylab-hero-spa.png"); background-position:center; background-size:cover; inset:0; position:absolute; }
.hero-grid { background-image:linear-gradient(rgba(255,250,248,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,250,248,.09) 1px,transparent 1px); background-size:80px 80px; inset:0; opacity:.55; position:absolute; transform:perspective(500px) rotateX(58deg) scale(1.4) translateY(19%); transform-origin:center bottom; }
.hero-grid:after { background:linear-gradient(180deg,rgba(59,34,48,0) 0%,rgba(59,34,48,.82) 80%); content:""; inset:0; position:absolute; }
.hero-content { align-items:center; display:flex; flex-direction:column; max-width:1180px; position:relative; text-align:center; width:100%; z-index:2; }
.eyebrow-light,.kicker { align-items:center; color:var(--pink); display:flex; font-size:11px; font-weight:600; gap:10px; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow-light span { background:var(--pink); border-radius:50%; display:inline-block; height:7px; width:7px; }
.hero-content .eyebrow-light { justify-content:center; }
.hero-heading { background:linear-gradient(180deg,#fffaf8 0%,#f2c8da 100%); background-clip:text; -webkit-background-clip:text; color:transparent; font-size:clamp(72px,12vw,180px); font-weight:500; letter-spacing:-.075em; line-height:.82; margin:30px 0 34px; text-transform:uppercase; }
.hero-heading em { color:var(--pink); font-style:normal; }
.hero-subline { align-items:end; display:flex; gap:70px; justify-content:center; max-width:700px; }
.hero-subline p { color:#f4dfe8; font-size:16px; line-height:1.55; max-width:390px; text-align:left; }
.hero-index { align-items:center; color:#f1dce5; display:flex; font-size:12px; gap:10px; letter-spacing:.12em; }
.hero-index i { background:var(--pink); display:block; height:1px; width:38px; }
.hero-wordmark { align-items:center; display:flex; flex-direction:column; gap:18px; margin-top:65px; width:max-content; }
.hero-wordmark img { image-rendering:auto; max-width:min(560px,72vw); width:100%; }
.hero-wordmark span { align-items:center; color:#fff0f5; display:flex; font-size:11px; gap:10px; letter-spacing:.17em; text-transform:uppercase; }
.hero-corner { color:#f0d8e3; font-size:9px; letter-spacing:.18em; line-height:1.7; position:absolute; text-transform:uppercase; z-index:2; }
.hero-corner-left { bottom:45px; left:clamp(22px,8vw,125px); }
.hero-corner-right { bottom:45px; right:clamp(22px,8vw,125px); text-align:right; }
.hero-corner-right span { color:var(--pink); display:block; font-size:22px; line-height:1; margin-top:6px; }
.hero-orbit { border:1px solid rgba(243,215,224,.3); border-radius:50%; position:absolute; z-index:1; }
.orbit-a { animation:spin 22s linear infinite; height:430px; right:10%; top:22%; width:430px; }
.orbit-a:before,.orbit-a:after { border:1px solid rgba(237,13,117,.4); border-radius:50%; content:""; inset:10%; position:absolute; }
.orbit-a:after { border-color:rgba(243,215,224,.2); inset:25%; }
.orbit-a span { color:var(--pink); font-size:10px; letter-spacing:.2em; position:absolute; right:1%; top:15%; transform:rotate(90deg); }
.orbit-b { animation:float 6s ease-in-out infinite; height:180px; right:22%; top:35%; transform:translate3d(calc(var(--pointer-x, 0) * -14px),calc(var(--pointer-y, 0) * -14px),0) rotate(32deg); transition:transform .25s ease-out; width:180px; }
.orbit-c { animation:float 7s ease-in-out -2s infinite; border-color:rgba(237,13,117,.35); height:90px; right:16%; top:68%; transform:translate3d(calc(var(--pointer-x, 0) * 22px),calc(var(--pointer-y, 0) * 22px),0) rotate(-20deg); transition:transform .25s ease-out; width:90px; }
.hero-glow { background:radial-gradient(circle,rgba(237,13,117,.25),rgba(243,215,224,.05) 35%,rgba(12,12,12,0) 67%); height:480px; position:absolute; right:8%; top:23%; transform:translate3d(calc(var(--pointer-x, 0) * 18px),calc(var(--pointer-y, 0) * 18px),0); transition:transform .3s ease-out; width:480px; }
.marquee-section { background:var(--rose); border-bottom:1px solid rgba(66,34,44,.22); border-top:1px solid rgba(66,34,44,.22); overflow:hidden; padding:21px 0; }
.marquee-track { animation:marquee 32s linear infinite; display:flex; width:max-content; }
.marquee-track.reverse { animation-direction:reverse; animation-duration:38s; }
.marquee-track span { align-items:center; color:#4d2639; display:flex; font-size:clamp(16px,2vw,24px); font-weight:500; gap:38px; letter-spacing:.17em; padding-right:38px; white-space:nowrap; }
.marquee-track b { color:var(--pink); font-size:17px; }
.about-light,.services-light { background:var(--white); color:var(--ink); min-height:100svh; padding:120px clamp(22px,8vw,125px) 75px; position:relative; }
.section-number { color:#818486; font-size:10px; letter-spacing:.18em; position:absolute; right:clamp(22px,8vw,125px); top:125px; }
.about-layout { display:grid; gap:9%; grid-template-columns:.72fr 1.28fr; margin:118px auto 0; max-width:1180px; }
.about-label { color:#8d8f90; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.about-copy { max-width:800px; }
.about-copy h2,.services-head h2 { font-size:clamp(52px,8vw,108px); font-weight:500; letter-spacing:-.08em; line-height:.84; text-transform:uppercase; }
.about-copy h2 em,.services-head h2 em { color:var(--pink); font-style:normal; }
.about-lead { font-size:clamp(20px,2.5vw,30px); line-height:1.25; margin:48px 0 25px; max-width:660px; }
.about-copy>p:not(.about-lead) { color:#666b6d; font-size:15px; line-height:1.7; max-width:475px; }
.light-link { align-items:center; border-bottom:1px solid var(--ink); display:inline-flex; font-size:11px; gap:12px; letter-spacing:.15em; margin-top:35px; padding-bottom:8px; text-transform:uppercase; }
.about-foot { bottom:75px; color:#777b7d; display:flex; font-size:10px; justify-content:space-between; left:clamp(22px,8vw,125px); letter-spacing:.16em; position:absolute; right:clamp(22px,8vw,125px); text-transform:uppercase; }
.services-light { background:#f6e9ed; min-height:auto; }
.services-head { align-items:end; display:flex; justify-content:space-between; margin:118px auto 78px; max-width:1180px; }
.services-head .kicker { color:var(--pink); margin-bottom:36px; }
.services-head>p { color:#666b6d; font-size:15px; line-height:1.6; max-width:220px; }
.service-list { border-top:1px solid var(--line); margin:0 auto; max-width:1180px; }
.service-list article { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:25px; grid-template-columns:55px 1fr 1.15fr 25px; min-height:105px; transition:background .25s ease,padding .25s ease; }
.service-list article:hover { background:rgba(237,13,117,.05); padding:0 15px; }
.service-list article>span { color:#8a8d8e; font-size:12px; letter-spacing:.12em; }
.service-list h3 { font-size:clamp(21px,3vw,32px); font-weight:400; letter-spacing:-.03em; text-transform:uppercase; }
.service-list p { color:#6d7273; font-size:13px; line-height:1.5; }
.service-list article>b { color:var(--pink); }
.reviews-dark,.contact-dark { background:var(--white); min-height:100svh; overflow:hidden; padding:125px clamp(22px,8vw,125px) 95px; position:relative; }
.reviews-dark { color:var(--ink); }
.reviews-dark .hero-heading { background:linear-gradient(180deg,#7d315d 0%,#ed0d75 100%); background-clip:text; -webkit-background-clip:text; }
.light-number { color:#818486; top:125px; }
.reviews-head { align-items:end; display:flex; justify-content:space-between; margin:105px auto 70px; max-width:1180px; }
.reviews-head h2 { margin-top:34px; }
.google-rating { align-items:end; display:flex; gap:12px; }
.google-rating strong { color:var(--ink); font-size:67px; font-weight:400; letter-spacing:-.09em; line-height:.8; }
.google-rating span { color:var(--pink); letter-spacing:.18em; }
.google-rating small { color:#666b6d; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.review-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:1180px; }
.review-grid figure { border:1px solid var(--line); min-height:245px; padding:27px; }
.review-grid figure>span { color:var(--pink); letter-spacing:.17em; }
.review-grid blockquote { color:var(--ink); font-family:var(--kanit); font-size:20px; line-height:1.25; margin-top:27px; }
.review-grid figcaption { color:#5f454f; font-size:11px; letter-spacing:.1em; margin-top:31px; text-transform:uppercase; }
.review-grid figcaption small { color:#8b747d; display:block; font-size:9px; margin-top:4px; }
.contact-dark { background:#7a3459; color:var(--white); min-height:650px; }
.contact-inner { position:relative; z-index:2; }
.contact-inner h2 { margin:44px 0 30px; }
.contact-inner>p:not(.eyebrow-light) { color:#f6e4ec; font-size:16px; line-height:1.6; max-width:330px; }
.contact-links { align-items:center; display:flex; flex-wrap:wrap; gap:25px; margin-top:45px; }
.contact-links a { border-bottom:1px solid rgba(244,244,240,.55); font-size:12px; letter-spacing:.14em; padding-bottom:8px; text-transform:uppercase; }
.contact-links .contact-button { align-items:center; background:var(--pink); border:none; color:#fff; display:flex; gap:12px; padding:17px 22px; }
.contact-ring { border:1px solid rgba(255,250,248,.5); border-radius:50%; height:580px; position:absolute; right:5%; top:50%; transform:translateY(-50%); width:580px; }
.contact-ring:before,.contact-ring:after { border:1px solid rgba(244,215,224,.44); border-radius:50%; content:""; inset:10%; position:absolute; }
.contact-ring:after { inset:25%; }
.hours-dark { background:rgba(255,250,248,.12); border:1px solid rgba(255,250,248,.35); bottom:95px; padding:25px; position:absolute; right:clamp(22px,8vw,125px); width:min(340px,36vw); z-index:2; }
.hours-dark h3 { color:#e7eaeb; font-size:24px; font-weight:400; margin-bottom:15px; }
.hours-dark p { border-top:1px solid rgba(255,250,248,.25); color:#f4dfe8; display:flex; font-size:11px; justify-content:space-between; padding:14px 0; }
.hours-dark b { color:#fffaf8; font-weight:400; }
.site-footer { align-items:center; background:#4a2638; border-top:1px solid rgba(255,250,248,.25); color:#f1dce5; display:grid; font-size:10px; gap:30px; grid-template-columns:1.3fr 1fr 1fr auto; letter-spacing:.1em; padding:34px clamp(22px,8vw,125px); text-transform:uppercase; }
.site-footer img { max-width:150px; width:100%; }
.site-footer div { display:flex; gap:22px; }
.site-footer a:hover { color:var(--pink); }
.site-footer small { color:#d7aebe; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100% { margin-top:0; } 50% { margin-top:-18px; } }
[data-reveal] { opacity:0; transform:translate3d(0,36px,0); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; }
[data-reveal="left"] { transform:translate3d(-42px,0,0); }
[data-reveal="right"] { transform:translate3d(42px,0,0); }
[data-reveal="fade"] { transform:none; }
[data-reveal="scale"] { transform:scale(.94); }
[data-reveal].is-visible { opacity:1; transform:none; }
.service-list article[data-reveal] { transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1),background .25s ease,padding .25s ease; }
.service-list article { overflow:hidden; position:relative; }
.service-list article::before { background:linear-gradient(90deg,var(--pink),#c36a98); bottom:0; content:""; height:2px; left:0; position:absolute; transform:scaleX(0); transform-origin:left; transition:transform .4s ease; width:100%; }
.service-list article:hover { transform:translateX(9px); }
.service-list article:hover::before { transform:scaleX(1); }
.review-grid figure { background:rgba(243,215,224,.18); transition:border-color .3s ease,box-shadow .3s ease,transform .4s cubic-bezier(.22,.61,.36,1),background .3s ease; }
.review-grid figure:hover { background:rgba(243,215,224,.48); border-color:rgba(237,13,117,.38); box-shadow:0 18px 35px rgba(66,34,44,.1); transform:translateY(-10px); }
.light-link,.contact-links a { transition:color .25s ease,transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.light-link:hover { color:var(--pink); }
.contact-links a:hover { border-color:var(--white); color:var(--white); transform:translateY(-3px); }
.contact-links .contact-button:hover { box-shadow:0 12px 28px rgba(36,28,32,.22); }
@media (max-width:780px) {
  .site-header { height:70px; padding:0 18px; }
  .brand img { width:118px; }
  .site-header nav { display:none; }
  .header-contact { font-size:10px; }
  .hero-dark { min-height:100svh; padding:125px 22px 105px; }
  .hero-heading { font-size:clamp(60px,16vw,104px); margin:27px 0 28px; }
  .hero-subline { align-items:center; display:block; margin-left:0; }
  .hero-subline p { font-size:14px; max-width:280px; text-align:center; }
  .hero-index { margin-top:18px; }
  .hero-wordmark { align-items:center; flex-direction:column; gap:15px; margin-top:52px; }
  .hero-wordmark img { max-width:78vw; }
  .hero-wordmark span { padding-bottom:0; }
  .hero-corner-left { bottom:28px; left:22px; }
  .hero-corner-right { bottom:28px; right:22px; }
  .orbit-a { height:310px; right:-130px; top:49%; width:310px; }
  .orbit-b { height:105px; right:15%; top:58%; width:105px; }
  .orbit-c,.hero-glow { display:none; }
  .hero-grid { background-size:52px 52px; transform:perspective(350px) rotateX(58deg) scale(1.5) translateY(15%); }
  .marquee-section { padding:16px 0; }
  .marquee-track span { font-size:14px; gap:22px; padding-right:22px; }
  .about-light,.services-light { min-height:auto; padding:82px 22px 75px; }
  .section-number { right:22px; top:84px; }
  .about-layout { display:block; margin-top:88px; }
  .about-label { margin-bottom:45px; }
  .about-copy h2,.services-head h2,.reviews-head h2,.contact-inner h2 { font-size:clamp(49px,14vw,82px); }
  .about-lead { font-size:22px; margin-top:36px; }
  .about-copy>p:not(.about-lead) { font-size:14px; }
  .about-foot { bottom:auto; display:block; left:22px; position:relative; right:auto; margin-top:90px; }
  .about-foot span { display:block; margin-top:10px; }
  .services-head { align-items:start; display:block; margin:88px 0 50px; }
  .services-head>p { margin-top:30px; }
  .service-list article { gap:11px; grid-template-columns:28px 1fr 18px; min-height:105px; }
  .service-list article p { display:none; }
  .service-list h3 { font-size:22px; }
  .reviews-dark,.contact-dark { min-height:auto; padding:84px 22px 80px; }
  .reviews-head { align-items:start; display:block; margin:88px 0 48px; }
  .reviews-head h2 { margin-top:30px; }
  .google-rating { margin-top:35px; }
  .google-rating strong { font-size:52px; }
  .google-rating small { font-size:8px; }
  .review-grid { grid-template-columns:1fr; }
  .review-grid figure { min-height:0; }
  .contact-dark { min-height:700px; }
  .contact-inner h2 { margin:35px 0 25px; }
  .contact-inner>p:not(.eyebrow-light) { font-size:14px; }
  .contact-links { align-items:start; flex-direction:column; gap:24px; }
  .contact-ring { height:360px; right:-110px; top:48%; width:360px; }
  .hours-dark { bottom:80px; left:22px; right:22px; width:auto; }
  .site-footer { align-items:start; grid-template-columns:1fr 1fr; padding:30px 22px; }
  .site-footer img { max-width:125px; }
  .site-footer div { flex-direction:column; gap:6px; }
  .site-footer small { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } [data-reveal] { opacity:1; transform:none; } }
/* =========================================================
   LAYLAB - OTTIMIZZAZIONE MOBILE
   ========================================================= */

@media (max-width: 780px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* HEADER */
  .site-header {
    height: 68px;
    padding: 0 16px;
  }

  .brand img {
    width: 105px;
  }

  .header-contact {
    font-size: 9px;
    gap: 7px;
    white-space: nowrap;
  }

  /* HERO */
  .hero-dark {
    min-height: 100svh;
    padding: 110px 18px 90px;
  }

  .hero-heading {
    font-size: clamp(52px, 15vw, 82px);
    line-height: .88;
    letter-spacing: -.065em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-subline {
    width: 100%;
  }

  .hero-subline p {
    margin: 0 auto;
    max-width: 310px;
  }

  .hero-index {
    justify-content: center;
  }

  .hero-wordmark {
    margin-top: 42px;
    max-width: 100%;
  }

  .hero-wordmark img {
    max-width: 82vw;
  }

  /* SEZIONI GENERALI */
  .about-light,
  .services-light,
  .reviews-dark,
  .contact-dark {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-number {
    right: 18px;
  }

  /* CHI SIAMO */
  .about-layout {
    margin-top: 82px;
  }

  .about-label {
    margin-bottom: 32px;
  }

  .about-copy h2,
  .services-head h2,
  .reviews-head h2,
  .contact-inner h2 {
    font-size: clamp(45px, 13vw, 72px);
    line-height: .9;
  }

  .about-lead {
    font-size: 20px;
    line-height: 1.35;
  }

  .about-foot {
    left: 0;
    margin-top: 60px;
  }

  /* SERVIZI */
  .services-head {
    margin-top: 82px;
    margin-bottom: 40px;
  }

  .services-head > p {
    max-width: 100%;
  }

  .service-list {
    width: 100%;
  }

  .service-list article {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 88px;
    padding: 12px 0;
    width: 100%;
  }

  .service-list article:hover {
    padding-left: 0;
    padding-right: 0;
    transform: none;
  }

  .service-list h3 {
    font-size: clamp(19px, 6vw, 24px);
    line-height: 1.1;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .service-list article p {
    display: none;
  }

  /* RECENSIONI */
  .reviews-dark {
    overflow: visible;
    padding-bottom: 70px;
  }

  .reviews-head {
    margin-top: 82px;
    margin-bottom: 38px;
  }

  .google-rating {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
  }

  .google-rating strong {
    font-size: 48px;
  }

  .google-rating span {
    font-size: 12px;
  }

  .google-rating small {
    flex-basis: 100%;
    font-size: 8px;
  }

  .review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }

  .review-grid figure {
    min-height: auto;
    width: 100%;
    padding: 22px 20px;
    overflow: visible;
  }

  .review-grid figure:hover {
    transform: none;
  }

  .review-grid blockquote {
    font-size: 18px;
    line-height: 1.35;
    margin-top: 20px;
  }

  .review-grid figcaption {
    margin-top: 22px;
  }

  /* CONTATTI
     Questo è il fix principale:
     la scheda orari non è più assoluta su mobile.
  */
  .contact-dark {
    display: flex;
    flex-direction: column;
    min-height: auto;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 55px;
  }

  .contact-inner {
    width: 100%;
  }

  .contact-inner > p:not(.eyebrow-light) {
    max-width: 100%;
  }

  .contact-links {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    width: 100%;
  }

  .contact-links a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .contact-links .contact-button {
    justify-content: space-between;
    width: 100%;
    padding: 17px 18px;
  }

  .hours-dark {
    position: relative;
    inset: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 50px;
    padding: 22px 18px;
    width: 100%;
    z-index: 2;
  }

  .hours-dark h3 {
    font-size: 22px;
  }

  .hours-dark p {
    align-items: center;
    gap: 15px;
    font-size: 11px;
  }

  .hours-dark p span,
  .hours-dark p b {
    min-width: 0;
  }

  .contact-ring {
    height: 320px;
    right: -150px;
    top: 210px;
    transform: none;
    width: 320px;
    pointer-events: none;
  }

  /* FOOTER */
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 18px 32px;
    width: 100%;
  }

  .site-footer img {
    max-width: 120px;
  }

  .site-footer > span {
    line-height: 1.6;
  }

  .site-footer div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
  }

  .site-footer small {
    width: 100%;
  }
}


/* TELEFONI MOLTO PICCOLI */
@media (max-width: 390px) {

  .hero-heading {
    font-size: 50px;
  }

  .about-copy h2,
  .services-head h2,
  .reviews-head h2,
  .contact-inner h2 {
    font-size: 43px;
  }

  .service-list h3 {
    font-size: 19px;
  }

  .hours-dark p {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

}
/* =========================================================
   SERVIZI MOBILE
   ========================================================= */

@media (max-width: 780px) {

  .service-list article {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    grid-template-areas:
      "number title arrow"
      ". description description";

    gap: 8px 12px;
    min-height: auto;
    padding: 22px 0;

    cursor: pointer;
    overflow: hidden;

    transition:
      background .35s ease,
      padding .35s ease,
      transform .35s ease;
  }

  .service-list article > span {
    grid-area: number;
    align-self: center;
  }

  .service-list article h3 {
    grid-area: title;

    margin: 0;

    font-size: clamp(22px, 7vw, 30px);
    line-height: 1;
  }

  .service-list article > b {
    grid-area: arrow;

    align-self: center;
    justify-self: end;

    font-size: 18px;

    transition:
      transform .35s ease,
      color .35s ease;
  }

  /* RIPRISTINA LE DESCRIZIONI SU SMARTPHONE */
  .service-list article p {
    display: block;

    grid-area: description;

    max-height: 0;
    margin: 0;
    padding-right: 10px;

    overflow: hidden;

    opacity: 0;
    transform: translateY(-8px);

    font-size: 14px;
    line-height: 1.55;

    transition:
      max-height .45s ease,
      opacity .35s ease,
      transform .35s ease,
      margin-top .35s ease;
  }

  /* SCHEDA APERTA */
  .service-list article.is-open {
    background: rgba(237, 13, 117, .055);
    padding-left: 12px;
    padding-right: 12px;
  }

  .service-list article.is-open p {
    max-height: 130px;
    margin-top: 10px;

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

  .service-list article.is-open > b {
    color: var(--pink);
    transform: rotate(45deg);
  }

  .service-list article.is-open::before {
    transform: scaleX(1);
  }

  /* Disattiva il comportamento hover desktop */
  .service-list article:hover {
    transform: none;
  }
}