:root{
    --bg:#fbf7f2;
    --bg-soft:#f3ece2;
    --acqua:#c2e2de;
    --acqua-deep:#a9d2cd;
    --teal:#0097b2;
    --teal-deep:#007a91;
    --ocra:#efac4d;
    --pesca:#fec676;
    --grigio-verde:#61706e;
    --antracite:#404040;
    --linea:rgba(64,64,64,0.14);
    --linea-soft:rgba(64,64,64,0.08);

    --serif:"Cormorant Garamond", "Times New Roman", serif;
    --sans:"Inter", system-ui, -apple-system, sans-serif;
    --mono:"Outfit", "Inter", system-ui, sans-serif;

    --maxw:1280px;
    --pad-x:clamp(20px, 5vw, 80px);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--antracite);
    font-weight:400;
    line-height:1.6;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--acqua); color:var(--antracite);}

  /* ---------- Helpers ---------- */
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);}
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--grigio-verde);
    display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:""; width:24px; height:1px; background:var(--grigio-verde);
  }
  .h1, .h2, .h3{
    font-family:var(--serif);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-0.01em;
    color:var(--antracite);
    text-wrap:balance;
  }
  .h1{font-size:clamp(44px, 6.6vw, 92px);}
  .h2{font-size:clamp(34px, 4.6vw, 64px); line-height:1.08;}
  .h3{font-size:clamp(24px, 2.4vw, 32px); line-height:1.18;}
  .lead{
    font-size:clamp(18px, 1.5vw, 21px);
    color:var(--grigio-verde);
    line-height:1.55;
    text-wrap:pretty;
    max-width:60ch;
  }
  em.italic{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--teal-deep); line-height: 1 !important;}

  .btn{
    display:inline-flex; align-items:center; gap:14px;
    font-family:var(--sans);
    font-size:15px; font-weight:500;
    padding:18px 28px;
    border-radius:999px;
    border:1px solid transparent;
    transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    cursor:pointer;
  }
  .btn-primary{background:var(--teal); color:#fff;}
  .btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px);}
  .btn-ghost{background:transparent; color:var(--antracite); border-color:var(--linea);}
  .btn-ghost:hover{border-color:var(--antracite);}
  .btn .arrow{
    display:inline-block; width:18px; height:1px; background:currentColor; position:relative;
    transition:width .25s ease;
  }
  .btn .arrow::after{
    content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
    border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
  }
  .btn:hover .arrow{width:26px;}

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:70;
    background:rgba(251,247,242,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--linea-soft);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    /* keep horizontal padding from .wrap; only set vertical here */
    padding-top:20px; padding-bottom:20px;
  }
  .logo{
    display:flex; align-items:center; gap:14px;
  }
  .logo-svg{
    height:56px; width:auto; display:block;
  }
  .logo small{
    font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--grigio-verde);
    padding-left:14px; border-left:1px solid var(--linea);
  }
  .nav-links{
    display:flex; gap:36px; align-items:center;
    font-size:14px;
  }
  .nav-links a{color:var(--grigio-verde); transition:color .2s;}
  .nav-links a:hover{color:var(--antracite);}

  /* ---------- NAV submenu (Servizi) ---------- */
  .nav-item-has-sub{position:relative; display:inline-flex; align-items:center;}
  .nav-item-has-sub::after{
    content:""; position:absolute;
    left:0; right:0; top:100%; height:18px;
    pointer-events:auto;
  }
  .nav-sub-trigger{display:inline-flex; align-items:center; gap:6px;}
  .nav-caret{
    width:0; height:0;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:4px solid currentColor;
    opacity:.55;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-item-has-sub:hover .nav-caret,
  .nav-item-has-sub:focus-within .nav-caret{transform:rotate(180deg); opacity:1;}
  .nav-submenu{
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:340px;
    background:var(--bg);
    border:1px solid var(--linea);
    border-radius:6px;
    margin-top:14px;
    padding:10px;
    box-shadow:0 12px 40px rgba(64,64,64,0.10);
    display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index:60;
  }
  .nav-submenu::before{
    content:""; position:absolute; top:-7px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:12px; height:12px;
    background:var(--bg);
    border-top:1px solid var(--linea);
    border-left:1px solid var(--linea);
  }
  .nav-item-has-sub:hover .nav-submenu,
  .nav-item-has-sub:focus-within .nav-submenu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .nav-submenu a{
    display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
    padding:14px 16px;
    border-radius:4px;
    color:var(--antracite) !important;
    transition:background .2s ease, color .2s ease;
  }
  .nav-submenu a:hover{background:var(--bg-soft);}
  .nav-submenu .nsm-num{
    font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
    color:var(--ocra); padding-top:5px;
  }
  .nav-submenu .nsm-body{display:flex; flex-direction:column; gap:3px; line-height:1.3;}
  .nav-submenu .nsm-body strong{
    font-family:var(--serif); font-weight:400; font-size:18px;
    color:var(--antracite);
  }
  .nav-submenu .nsm-body span{
    font-size:12.5px; color:var(--grigio-verde);
  }
  .nav-cta{
    font-size:13px; padding:12px 20px;
  }

  /* ---------- BURGER + DRAWER ---------- */
  .nav-burger{
    display:none;
    flex-direction:column; justify-content:center; align-items:center;
    gap:5px;
    width:44px; height:44px;
    background:transparent; border:1px solid var(--teal);
    border-radius:999px;
    cursor:pointer;
    transition:border-color .2s, background .2s;
  }
  .nav-burger:hover{border-color:var(--teal-deep); background:rgba(0,151,178,0.06);}
  .nav-burger span{
    display:block; width:18px; height:1.5px;
    background:var(--teal);
    transition:transform .25s ease, opacity .2s ease, background .2s ease;
    transform-origin:center;
  }
  .nav-burger:hover span{background:var(--teal-deep);}
  .nav-burger[aria-expanded="true"] span{background:var(--teal-deep);}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  @media (max-width:860px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .nav-burger{display:flex;}
    .nav-inner{padding-top:14px; padding-bottom:14px;}
    .logo-svg{height:44px !important;}
  }
  .nav-drawer{
    position:absolute; top:0; right:0;
    width:min(92vw, 400px); height:100%;
    background:var(--bg);
    box-shadow:-20px 0 60px rgba(64,64,64,0.18);
    transform:translateX(100%);
    transition:transform .42s cubic-bezier(.2,.7,.2,1);
    z-index:60;
    padding:0;
    display:flex; flex-direction:column;
    visibility:hidden;
    overflow:hidden;
    pointer-events:auto;
  }
  .nav-drawer::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 100% 0%, rgba(194,226,222,0.55), transparent 45%),
      radial-gradient(circle at 0% 100%, rgba(254,198,118,0.18), transparent 50%);
    pointer-events:none;
  }
  .nav-drawer.open{transform:translateX(0); visibility:visible;}
  .nav-drawer-head{
    position:relative;
    padding:24px 28px 22px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--linea-soft);
  }
  .nav-drawer-head .eyebrow{
    font-size:11px; letter-spacing:0.18em;
  }
  .nav-drawer-close{
    width:40px; height:40px; border-radius:999px;
    border:1px solid var(--teal); background:transparent;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--teal);
    transition:background .2s, color .2s, border-color .2s, transform .2s;
  }
  .nav-drawer-close:hover{background:var(--teal); color:#fff; border-color:var(--teal);}
  .nav-drawer-close:active{transform:scale(0.94);}
  .nav-drawer-close svg{width:14px; height:14px;}
  .nav-drawer-body{
    position:relative;
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:18px 28px 28px;
    display:flex; flex-direction:column;
  }
  .nav-drawer-links{
    display:flex; flex-direction:column;
    font-family:var(--serif); font-size:18px; line-height:1.2;
    color:var(--antracite);
  }
  .nav-drawer-links > a,
  .nav-drawer-links > .nav-drawer-group > .nav-drawer-grouphead{
    padding:18px 0;
    border-bottom:1px solid var(--linea-soft);
    color:var(--antracite); font-style:italic; font-weight:400;
    display:flex; align-items:center; justify-content:space-between;
    gap:14px;
    transition:color .25s ease, padding-left .25s ease;
    cursor:pointer;
    background:transparent; border-left:none; border-right:none; border-top:none;
    width:100%; text-align:left;
    font-family:inherit; font-size:inherit; line-height:inherit;
  }
  .nav-drawer-links > a:hover,
  .nav-drawer-links > .nav-drawer-group > .nav-drawer-grouphead:hover{
    color:var(--teal-deep); padding-left:8px;
  }
  .nav-drawer-links > a .arrow-mini,
  .nav-drawer-links > .nav-drawer-group > .nav-drawer-grouphead .caret-mini{
    color:var(--grigio-verde);
    transition:transform .3s ease, color .25s ease;
    flex-shrink:0;
  }
  .nav-drawer-links > a:hover .arrow-mini,
  .nav-drawer-links > .nav-drawer-group > .nav-drawer-grouphead:hover .caret-mini{
    color:var(--teal-deep);
  }
  .nav-drawer-links > a .arrow-mini{
    width:18px; height:1px; background:currentColor; position:relative;
  }
  .nav-drawer-links > a .arrow-mini::after{
    content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
    border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
  }
  .nav-drawer-links > a:hover .arrow-mini{width:26px;}
  .nav-drawer-group[aria-expanded="true"] > .nav-drawer-grouphead .caret-mini{
    transform:rotate(180deg); color:var(--teal-deep);
  }
  .nav-drawer-sub{
    overflow:hidden;
    max-height:0;
    transition:max-height .42s cubic-bezier(.2,.7,.2,1);
  }
  .nav-drawer-group[aria-expanded="true"] > .nav-drawer-sub{
    max-height:600px;
  }
  .nav-drawer-sub-inner{
    padding:6px 0 18px 6px;
    display:flex; flex-direction:column; gap:2px;
    border-bottom:1px solid var(--linea-soft);
  }
  .nav-drawer-sub a{
    display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
    padding:14px 12px;
    border-radius:8px;
    font-family:var(--sans); font-style:normal;
    transition:background .2s ease;
  }
  .nav-drawer-sub a:hover{background:rgba(194,226,222,0.35); padding-left:12px;}
  .nav-drawer-sub .nsm-num{
    font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
    color:var(--ocra); padding-top:5px;
  }
  .nav-drawer-sub .nsm-body{display:flex; flex-direction:column; gap:3px; line-height:1.3;}
  .nav-drawer-sub .nsm-body strong{
    font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px;
    color:var(--antracite);
  }
  .nav-drawer-sub .nsm-body span{
    font-size:12.5px; color:var(--grigio-verde); font-style:normal;
  }
  .nav-drawer-cta{
    margin-top:32px; align-self:flex-start;
    font-family:var(--sans); font-size:14px; font-style:normal;
    border-bottom:none !important; padding:18px 26px !important;
  }
  .nav-drawer-cta:hover{padding-left:26px !important;}
  .nav-drawer-foot{
    position:relative;
    padding:24px 28px 28px;
    border-top:1px solid var(--linea-soft);
    background:rgba(243,236,226,0.5);
    display:flex; flex-direction:column; gap:12px;
  }
  .nav-drawer-foot-row{
    display:flex; align-items:center; gap:12px;
    font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
    color:var(--grigio-verde);
  }
  .nav-drawer-foot-row .ic{
    width:30px; height:30px; border-radius:999px;
    background:var(--bg); border:1px solid var(--linea);
    display:flex; align-items:center; justify-content:center;
    color:var(--teal-deep); flex-shrink:0;
  }
  .nav-drawer-foot-row .ic svg{width:13px; height:13px;}
  .nav-drawer-foot-row a{color:var(--antracite); font-family:var(--sans); font-size:13px; letter-spacing:0;}
  .nav-drawer-foot-row a:hover{color:var(--teal-deep);}
  .nav-drawer-socials{
    display:flex; gap:8px; padding-top:8px;
  }
  .nav-drawer-socials a{
    width:36px; height:36px; border-radius:999px;
    background:var(--bg); border:1px solid var(--linea);
    display:flex; align-items:center; justify-content:center;
    color:var(--grigio-verde);
    transition:color .2s, border-color .2s, background .2s;
  }
  .nav-drawer-socials a:hover{color:var(--teal-deep); border-color:var(--teal); background:rgba(194,226,222,0.3);}
  .nav-drawer-socials svg{width:14px; height:14px;}

  /* Host that contains the off-screen drawer + scrim. position:fixed gives it
     viewport coords; overflow:hidden prevents the translated-off drawer from
     extending the document scrollWidth. */
  .nav-overlay-host{
    position:fixed; inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:60;
  }
  .nav-overlay-host > *{pointer-events:auto;}

  .nav-scrim{
    position:absolute; inset:0; background:rgba(64,64,64,0.32);
    z-index:65; opacity:0; transition:opacity .25s;
    pointer-events:auto;
  }
  .nav-scrim.show{opacity:1;}
  body.nav-open{overflow:hidden;}

  /* ---------- HERO (unified across all pages) ---------- */
  .hero{
    padding:48px 0 clamp(72px, 9vw, 120px);
    position:relative;
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr;
    gap:clamp(40px, 6vw, 96px); align-items:end;
  }
  .hero-headline{
    margin:32px 0 28px;
    font-size:clamp(40px, 5.4vw, 84px);
    line-height:1.04;
  }
  .hero-headline em{
    font-style:italic; color:var(--teal-deep); font-weight:300;
  }
  .hero-lead{
    max-width:50ch;
    font-size:clamp(17px, 1.4vw, 19px);
    color:var(--grigio-verde); line-height:1.65;
    margin-bottom:36px;
  }
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-meta{
    margin-top:48px; padding-top:24px;
    border-top:1px solid var(--linea-soft);
    display:flex; flex-wrap:wrap; gap:36px;
    font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
    color:var(--grigio-verde);
  }
  .hero-meta > div{display:flex; flex-direction:column;}
  .hero-meta strong{
    display:block; font-family:var(--serif);
    color:var(--antracite); font-weight:400;
    letter-spacing:-0.01em; text-transform:none;
    font-size:24px; margin-bottom:4px;
  }

  /* Striped + tinted placeholder used inside hero-photo and other sections */
  .ph{
    position:relative;
    background:
      repeating-linear-gradient(135deg,
        rgba(64,64,64,0.05) 0 1px,
        transparent 1px 14px),
      var(--ph-bg, linear-gradient(160deg, var(--acqua) 0%, var(--pesca) 100%));
    color:var(--antracite);
    overflow:hidden;
  }
  .ph .ph-label{
    position:absolute; left:16px; bottom:16px;
    font-family:var(--mono); font-size:11px;
    letter-spacing:0.16em; text-transform:uppercase;
    color:var(--antracite);
    background:rgba(251,247,242,0.85);
    padding:6px 10px; border-radius:2px;
    backdrop-filter:blur(4px);
  }

  .hero-photo{position:relative;}
  .hero-photo .ph{
    aspect-ratio:4/5;
    border-radius:6px;
    overflow:hidden;
  }
  .hero-photo .badge{
    position:absolute; top:24px; left:24px;
    background:var(--bg);
    padding:14px 18px; border-radius:999px;
    font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--antracite);
    display:flex; align-items:center; gap:10px;
    box-shadow:0 1px 0 var(--linea);
  }
  .hero-photo .badge .pulse{
    width:8px; height:8px; border-radius:50%; background:var(--ocra);
    box-shadow:0 0 0 0 rgba(239,172,77,0.6);
    animation:pulse 2.4s ease-out infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(239,172,77,0.6);}
    70%{box-shadow:0 0 0 14px rgba(239,172,77,0);}
    100%{box-shadow:0 0 0 0 rgba(239,172,77,0);}
  }
  .hero-floatquote{
    position:absolute;
    right:clamp(20px, 4vw, 40px); bottom:clamp(20px, 4vw, 40px);
    background:var(--bg);
    padding:20px 24px;
    max-width:280px;
    border-left:2px solid var(--ocra);
    font-family:var(--serif); font-style:italic;
    font-size:17px; line-height:1.4;
    color:var(--antracite);
    box-shadow:0 1px 0 var(--linea);
  }
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero-floatquote{display:none;}
  }

  /* ---------- EMPATHY ---------- */
  .empathy{
    background:var(--bg-soft);
    padding:clamp(80px, 10vw, 140px) 0;
    position:relative;
  }
  .empathy-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 100px);
    align-items:start;
  }
  .empathy h2{margin:18px 0 0;}
  .empathy-text{
    font-family:var(--serif); font-size:clamp(22px, 2.1vw, 30px);
    line-height:1.4; font-weight:300; color:var(--antracite);
    max-width:54ch;
  }
  .empathy-text p + p{margin-top:18px;}
  .empathy-text .key{
    display:inline-block; padding:1px 10px; border-radius:3px;
    background:transparent; color:var(--antracite); font-style:normal;
    transition:background-color .5s ease;
    animation:highlightPulse 4.5s ease-in-out infinite;
  }
  .empathy-text .key-1{--key-color:var(--acqua); animation-delay:0s;}
  .empathy-text .key-2{--key-color:var(--pesca); animation-delay:1.5s;}
  .empathy-text .key-3{--key-color:var(--acqua-deep); animation-delay:3s;}
  @keyframes highlightPulse{
    0%, 22%   {background-color:transparent;}
    33%, 55%  {background-color:var(--key-color);}
    66%, 100% {background-color:transparent;}
  }
  @media (prefers-reduced-motion:reduce){
    .empathy-text .key{animation:none; background:var(--key-color, var(--acqua));}
  }
  .empathy-cluster{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-top:36px;
  }
  .chip{
    font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
    text-transform:uppercase;
    padding:8px 14px; border:1px solid var(--linea); border-radius:999px;
    color:var(--grigio-verde);
  }
  @media (max-width:880px){.empathy-grid{grid-template-columns:1fr;}}

  /* ---------- PROBLEM ---------- */
  .problem{padding:clamp(80px, 10vw, 140px) 0;}
  .problem-head{
    display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px, 6vw, 100px);
    align-items:end; margin-bottom:80px;
  }
  .problem-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
    border-top:1px solid var(--linea);
  }
  .problem-cell{
    padding:48px 36px 48px 0;
    border-right:1px solid var(--linea);
    position:relative;
  }
  .problem-cell:last-child{border-right:none; padding-right:0;}
  .problem-cell:not(:first-child){padding-left:36px;}
  .problem-num{
    font-family:var(--serif); font-size:48px; color:var(--ocra);
    font-weight:300; line-height:1; display:block; margin-bottom:24px;
  }
  .problem-cell h3{
    font-family:var(--serif); font-size:24px; font-weight:400;
    margin-bottom:14px;
  }
  .problem-cell p{color:var(--grigio-verde); font-size:15.5px;}
  @media (max-width:860px){
    .problem-head{grid-template-columns:1fr;}
    .problem-grid{grid-template-columns:1fr;}
    .problem-cell{border-right:none; border-bottom:1px solid var(--linea); padding:36px 0;}
    .problem-cell:not(:first-child){padding-left:0;}
    .problem-cell:last-child{border-bottom:none;}
  }

  .pull-quote{
    margin:clamp(60px, 8vw, 100px) auto 0;
    max-width:900px; text-align:center;
    font-family:var(--serif); font-style:italic;
    font-size:clamp(28px, 3.6vw, 44px); line-height:1.25;
    color:var(--antracite); text-wrap:balance;
  }
  .pull-quote .mark{
    display:block; font-size:80px; color:var(--ocra); line-height:0.6; margin-bottom:24px;
  }

  /* ---------- SOLUTION ---------- */
  .solution{
    background:var(--acqua);
    padding:clamp(80px, 10vw, 140px) 0;
  }
  .solution-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px, 6vw, 90px);
    align-items:center;
  }
  .solution-photo{
    aspect-ratio:3/4;
    --ph-bg:#a9d2cd;
    border-radius:4px;
  }
  .solution h2{margin:18px 0 28px;}
  .solution-body p{
    font-size:18px; color:var(--antracite); margin-bottom:18px; max-width:52ch;
  }
  .solution-pillars{
    margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;
    border-top:1px solid rgba(64,64,64,0.18); padding-top:32px;
  }
  .pillar{
    display:flex; align-items:flex-start; gap:14px;
    font-size:14.5px; color:var(--antracite);
  }
  .pillar .num{
    font-family:var(--mono); font-size:12px; color:var(--teal-deep);
    letter-spacing:0.1em; padding-top:3px;
  }
  @media (max-width:880px){
    .solution-grid{grid-template-columns:1fr;}
    .solution-pillars{grid-template-columns:1fr;}
  }

  /* ---------- METHOD ---------- */
  .method{padding:clamp(80px, 10vw, 140px) 0;}
  .method-head{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end;
    margin-bottom:72px;
  }
  .method-head p{max-width:46ch;}
  .method-list{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:0;
    border-top:1px solid var(--linea);
  }
  .method-step{
    padding:36px 24px 0 0;
    border-right:1px solid var(--linea);
    position:relative;
    min-height:280px;
    display:flex; flex-direction:column;
  }
  .method-step:last-child{border-right:none;}
  .method-step:not(:first-child){padding-left:24px;}
  .method-step .step-num{
    font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
    color:var(--ocra); margin-bottom:36px;
  }
  .method-step h3{
    font-family:var(--serif); font-size:22px; font-weight:400;
    line-height:1.15; margin-bottom:14px;
  }
  .method-step p{font-size:14.5px; color:var(--grigio-verde); line-height:1.55;}
  .method-callout{
    margin-top:64px;
    padding:32px 40px;
    background:var(--bg-soft);
    border-left:3px solid var(--ocra);
    display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
  }
  .method-callout .lab{
    font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ocra);
  }
  .method-callout p{
    font-family:var(--serif); font-size:clamp(20px, 2vw, 26px); font-style:italic;
    color:var(--antracite); line-height:1.35;
  }
  @media (max-width:980px){
    .method-list{grid-template-columns:1fr 1fr;}
    .method-step{border-right:none; border-bottom:1px solid var(--linea); padding:28px 0; min-height:auto;}
    .method-step:not(:first-child){padding-left:0;}
  }
  @media (max-width:560px){
    .method-list{grid-template-columns:1fr;}
    .method-callout{grid-template-columns:1fr; gap:14px;}
  }
  @media (max-width:880px){.method-head{grid-template-columns:1fr;}}

  /* ---------- SERVICES ---------- */
  .services{
    background:var(--bg-soft);
    padding:clamp(80px, 10vw, 140px) 0;
  }
  .services-head{margin-bottom:72px; max-width:780px;}
  .services-head h2{margin:18px 0 24px;}
  .services-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  }
  .svc{
    background:var(--bg);
    border-radius:4px;
    overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform .3s ease;
  }
  .svc:hover{transform:translateY(-4px);}
  .svc-photo{aspect-ratio:4/3;}
  .svc-1{--ph-bg:#fec676;}
  .svc-2{--ph-bg:#c2e2de;}
  .svc-3{--ph-bg:#efac4d;}
  .svc-body{padding:32px 28px 36px; display:flex; flex-direction:column; flex:1;}
  .svc-body .tag{
    font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--grigio-verde); margin-bottom:14px;
  }
  .svc-body h3{
    font-family:var(--serif); font-size:28px; font-weight:400; margin-bottom:14px;
    line-height:1.15;
  }
  .svc-body p{color:var(--grigio-verde); font-size:15px; margin-bottom:24px; flex:1;}
  .svc-link{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14px; color:var(--teal-deep); font-weight:500;
    padding-top:18px; border-top:1px solid var(--linea-soft);
  }
  .svc-link .arrow{display:inline-block; width:16px; height:1px; background:currentColor; position:relative; transition:width .2s;}
  .svc-link .arrow::after{content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);}
  .svc-link:hover .arrow{width:24px;}
  @media (max-width:980px){.services-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:680px){.services-grid{grid-template-columns:1fr;}}

  /* Secondary mention: collaborators */
  .collab{
    margin-top:64px;
    padding:24px 28px;
    border:1px dashed var(--linea);
    border-radius:6px;
    display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
    background:transparent;
  }
  .collab .lab{font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--grigio-verde);}
  .collab .txt{font-size:15px; color:var(--antracite);}
  .collab .txt em{font-family:var(--serif); font-style:italic;}
  .collab a{color:var(--teal-deep); border-bottom:1px solid var(--teal); padding-bottom:1px;}
  @media (max-width:680px){.collab{grid-template-columns:1fr;}}

  /* ---------- OBJECTIONS / FAQ ---------- */
  .faq{padding:clamp(80px, 10vw, 140px) 0;}
  .faq-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:80px;}
  .faq-grid h2{margin:18px 0 24px;}
  .faq-grid .lead{margin-bottom:32px;}
  .faq-list{border-top:1px solid var(--linea);}
  details.qa{
    border-bottom:1px solid var(--linea);
    padding:28px 0;
    cursor:pointer;
  }
  details.qa summary{
    list-style:none;
    display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:start;
    cursor:pointer;
  }
  details.qa summary::-webkit-details-marker{display:none;}
  details.qa .qnum{
    font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
    color:var(--ocra); padding-top:8px;
  }
  details.qa .qtext{
    font-family:var(--serif); font-size:clamp(22px, 2vw, 28px); font-weight:400; line-height:1.2;
    color:var(--antracite);
  }
  details.qa .qtoggle{
    width:22px; height:22px; border-radius:50%;
    border:1px solid var(--linea); position:relative; flex-shrink:0; margin-top:8px;
    transition:background .2s, border-color .2s;
  }
  details.qa .qtoggle::before, details.qa .qtoggle::after{
    content:""; position:absolute; left:50%; top:50%;
    width:9px; height:1px; background:var(--antracite);
    transform:translate(-50%,-50%);
    transition:transform .25s;
  }
  details.qa .qtoggle::after{transform:translate(-50%,-50%) rotate(90deg);}
  details.qa[open] .qtoggle{background:var(--ocra); border-color:var(--ocra);}
  details.qa[open] .qtoggle::before{background:#fff;}
  details.qa[open] .qtoggle::after{transform:translate(-50%,-50%) rotate(0deg); background:#fff;}
  details.qa .qa-body{
    padding:18px 0 4px 0;
    margin-left:0;
    color:var(--grigio-verde);
    font-size:16px; max-width:60ch;
    overflow:hidden;
  }
  details.qa[open] .qa-body{
    animation: qaOpen .42s cubic-bezier(.2,.7,.2,1);
  }
  details.qa summary .qtext{ transition: color .25s ease; }
  details.qa[open] summary .qtext{ color:var(--teal-deep); }
  @keyframes qaOpen{
    0%   { opacity:0; transform:translateY(-6px); max-height:0; padding-top:0; padding-bottom:0; }
    60%  { opacity:1; }
    100% { opacity:1; transform:translateY(0); max-height:600px; }
  }
  @media (prefers-reduced-motion:reduce){
    details.qa[open] .qa-body{animation:none;}
  }
  @media (max-width:880px){.faq-grid{grid-template-columns:1fr; gap:32px;}}

  /* ---------- EXPERIENCE ---------- */
  .experience{
    padding:clamp(100px, 12vw, 180px) 0;
    background:#404040;
    color:#f3ece2;
    position:relative;
    overflow:hidden;
  }
  .experience::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 80% 20%, rgba(254,198,118,0.08), transparent 50%),
      radial-gradient(circle at 10% 80%, rgba(194,226,222,0.08), transparent 50%);
    pointer-events:none;
  }
  .experience .wrap{position:relative;}
  .experience .eyebrow{color:rgba(243,236,226,0.6);}
  .experience .eyebrow::before{background:rgba(243,236,226,0.6);}
  .experience h2{
    color:#f3ece2; margin:18px 0 0;
    font-size:clamp(36px, 5vw, 68px);
    max-width:18ch;
  }
  .experience h2 em{font-style:italic; color:var(--pesca); font-weight:300;}
  .experience-body{
    margin-top:60px;
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
    align-items:start;
  }
  .experience-body p{
    font-size:18px; color:rgba(243,236,226,0.85); line-height:1.65;
    max-width:46ch;
  }
  .experience-body p + p{margin-top:18px;}
  .exp-quote{
    border-left:1px solid rgba(243,236,226,0.25);
    padding:8px 0 8px 32px;
    font-family:var(--serif); font-style:italic; font-size:clamp(22px, 2.4vw, 30px);
    line-height:1.35; color:#f3ece2;
  }
  .exp-quote .who{
    display:block; margin-top:18px;
    font-family:var(--mono); font-size:12px; font-style:normal; letter-spacing:0.16em; text-transform:uppercase;
    color:rgba(243,236,226,0.55);
  }
  @media (max-width:880px){.experience-body{grid-template-columns:1fr;}}

  /* ---------- ABOUT CATIA ---------- */
  .about{padding:clamp(80px, 10vw, 140px) 0;}
  .about-grid{
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px, 6vw, 100px);
    align-items:center;
  }
  .about-photo{
    aspect-ratio:4/5;
    --ph-bg:#fec676;
    border-radius:4px;
    position:relative;
  }
  .about-photo .stamp{
    position:absolute; left:24px; top:24px;
    font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--antracite); background:rgba(251,247,242,0.85);
    padding:6px 10px; border-radius:2px;
  }
  .about h2{margin:18px 0 28px;}
  .about-body p{font-size:18px; color:var(--antracite); margin-bottom:18px; max-width:52ch;}
  .about-signature{
    margin-top:36px; display:flex; align-items:baseline; gap:16px;
    border-top:1px solid var(--linea); padding-top:24px;
  }
  .about-signature .name{
    font-family:var(--serif); font-style:italic; font-size:32px;
  }
  .about-signature .role{
    font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--grigio-verde);
  }
  .about-cta{margin-top:32px;}
  @media (max-width:880px){.about-grid{grid-template-columns:1fr;}}

  /* ---------- FINAL CTA ---------- */
  .final{
    background:var(--bg-soft);
    padding:clamp(100px, 12vw, 180px) 0;
    text-align:center;
    border-top:1px solid var(--linea-soft);
  }
  .final h2{
    font-size:clamp(38px, 5.4vw, 80px);
    max-width:20ch; margin:24px auto 32px;
  }
  .final h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
  .final p{max-width:48ch; margin:0 auto 44px; color:var(--grigio-verde); font-size:18px;}
  .final-cta{display:inline-flex; gap:16px; flex-wrap:wrap; justify-content:center;}
  .final-meta{
    margin-top:64px;
    display:inline-flex; align-items:center; gap:32px;
    font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--grigio-verde);
  }
  .final-meta span{display:flex; align-items:center; gap:10px;}
  .final-meta .dot{width:6px; height:6px; border-radius:50%; background:var(--ocra);}

  /* ---------- FOOTER ---------- */
  .foot{
    background:#404040; color:#c2e2de;
    padding:80px 0 32px;
  }
  .foot-grid{
    display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:48px;
    margin-bottom:64px;
  }
  .foot h4{
    font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
    color:rgba(194,226,222,0.55); margin-bottom:20px; font-weight:500;
  }
  .foot ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
  .foot li a{color:#f3ece2; font-size:14px;}
  .foot li a:hover{color:var(--pesca);}
  .foot .brand-block .logo-svg{height:80px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1) opacity(0.92);}
  .foot .brand-block p{font-size:14px; color:rgba(243,236,226,0.7); max-width:32ch;}
  .foot-bottom{
    padding-top:32px; border-top:1px solid rgba(243,236,226,0.12);
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
    color:rgba(243,236,226,0.5);
  }
  @media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:540px){.foot-grid{grid-template-columns:1fr;}}

  /* Subtle scroll-in effect */
  .reveal{opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease;}
  .reveal.in{opacity:1; transform:none;}

/* ============================================================
   PAGE-SPECIFIC STYLES (merged from per-page sheets)
   ============================================================ */

/* ============================================================
   Chi è Catia — page-specific styles (extends styles.css)
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex; gap:10px; align-items:center;
  padding:24px 0 0;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--grigio-verde);
}
.breadcrumb a{color:var(--grigio-verde); transition:color .2s;}
.breadcrumb a:hover{color:var(--teal-deep);}
.breadcrumb [aria-current="page"]{color:var(--antracite);}

/* ---------- TL;DR ---------- */
.catia-tldr{
  padding:72px 0;
  background:var(--bg-soft);
}
.tldr-grid{
  margin-top:36px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:48px;
}
.tldr-item{
  border-top:1px solid var(--linea);
  padding-top:28px;
}
.tldr-num{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
  color:var(--ocra); margin-bottom:18px;
}
.tldr-h{
  font-size:clamp(24px, 2.4vw, 32px);
  line-height:1.18; margin-bottom:14px;
  color:var(--antracite);
}
.tldr-item p{font-size:15.5px; color:var(--grigio-verde); line-height:1.6;}
@media (max-width:880px){.tldr-grid{grid-template-columns:1fr; gap:32px;}}

/* ---------- Story head ---------- */
.catia-story{padding:96px 0 24px;}
.catia-story-head{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:56px; align-items:end; margin-bottom:64px;
}
.catia-story-head .lead{max-width:46ch; color:var(--grigio-verde);}
@media (max-width:880px){.catia-story-head{grid-template-columns:1fr; gap:24px;}}

/* ---------- Timeline ---------- */
.timeline{
  list-style:none;
  position:relative;
  padding-left:0;
  max-width:880px;
  margin:0 auto;
}
.timeline::before{
  content:""; position:absolute;
  left:23px; top:8px; bottom:8px;
  width:1px; background:var(--linea);
}
.tl-step{
  position:relative;
  display:grid; grid-template-columns:64px 1fr;
  gap:32px;
  padding:32px 0;
}
.tl-step + .tl-step{border-top:1px solid var(--linea-soft);}
.tl-marker{
  width:48px; height:48px; border-radius:999px;
  background:var(--bg);
  border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; letter-spacing:0.08em;
  color:var(--teal-deep);
  position:relative; z-index:1;
}
.tl-step:nth-child(1) .tl-marker{background:var(--acqua); border-color:var(--acqua-deep);}
.tl-step:nth-child(2) .tl-marker{background:var(--pesca); border-color:var(--ocra); color:var(--antracite);}
.tl-step:nth-child(3) .tl-marker{background:var(--acqua-deep); border-color:var(--teal); color:var(--antracite);}
.tl-step:nth-child(4) .tl-marker{background:var(--bg-soft); border-color:var(--linea);}
.tl-step:nth-child(5) .tl-marker{background:var(--antracite); border-color:var(--antracite); color:var(--bg);}
.tl-eye{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde); margin-bottom:10px;
}
.tl-h{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.22; margin-bottom:14px;
  color:var(--antracite);
}
.tl-h em, .tl-body em{font-style:italic; color:var(--teal-deep);}
.tl-body p{
  color:var(--grigio-verde); font-size:16px; line-height:1.7;
  max-width:62ch;
}
.tl-body p + p{margin-top:14px;}
.tl-body strong{color:var(--antracite); font-weight:500;}
@media (max-width:640px){
  .tl-step{grid-template-columns:40px 1fr; gap:20px;}
  .tl-marker{width:40px; height:40px; font-size:11px;}
  .timeline::before{left:19px;}
}

/* ---------- Pull quote ---------- */
.catia-quote-section{
  padding:96px 0;
  background:var(--bg);
}
.catia-pull{
  max-width:920px; margin:0 auto;
  position:relative; padding:24px 0 24px 56px;
  border-left:1px solid var(--ocra);
}
.catia-pull .qmark{
  position:absolute; left:0; top:-24px;
  font-family:var(--serif); font-size:96px; line-height:1;
  color:var(--ocra);
}
.catia-pull p{
  font-family:var(--serif);
  font-size:clamp(24px, 2.6vw, 36px);
  line-height:1.35; font-weight:300;
  color:var(--antracite);
  text-wrap:balance;
}
.catia-pull p em{font-style:italic; color:var(--grigio-verde); font-weight:300;}
.catia-pull footer{
  margin-top:24px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde);
  display:flex; align-items:center; gap:10px;
}
.catia-pull footer .dot{
  width:6px; height:6px; border-radius:999px; background:var(--ocra); display:inline-block;
}
@media (max-width:640px){.catia-pull{padding-left:32px;}}

/* ---------- Values + Formation ---------- */
.catia-values{padding:96px 0;}
.catia-values-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px;
}
.cv-h{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px, 2.6vw, 36px);
  line-height:1.22; margin:18px 0 24px;
  color:var(--antracite);
  max-width:24ch;
}
.cv-block > p{
  color:var(--grigio-verde); font-size:16px; line-height:1.7;
  max-width:48ch; margin-bottom:32px;
}
.cv-list{
  list-style:none; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.cv-list li{
  display:grid; grid-template-columns:96px 1fr;
  gap:24px;
  padding:20px 0;
  border-top:1px solid var(--linea-soft);
}
.cv-list li:last-child{border-bottom:1px solid var(--linea-soft);}
.cv-year{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ocra);
  padding-top:3px;
}
.cv-list strong{
  display:block; font-family:var(--serif); font-size:22px; font-weight:400;
  color:var(--antracite); margin-bottom:4px;
}
.cv-list span{font-size:14.5px; color:var(--grigio-verde);}

.value-stack{display:flex; flex-direction:column; gap:0;}
.value{
  padding:24px 0;
  border-top:1px solid var(--linea-soft);
}
.value:last-child{border-bottom:1px solid var(--linea-soft);}
.v-num{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  color:var(--teal-deep); margin-bottom:10px;
}
.v-h{
  font-family:var(--serif); font-size:24px; font-weight:400;
  color:var(--antracite); margin-bottom:8px;
}
.value p{color:var(--grigio-verde); font-size:15.5px; line-height:1.65; max-width:54ch;}

@media (max-width:920px){.catia-values-grid{grid-template-columns:1fr; gap:56px;}}

/* ---------- Today ---------- */
.catia-today{
  padding:96px 0;
  background:var(--antracite);
  color:var(--bg-soft);
}
.catia-today .eyebrow{color:rgba(243,236,226,0.6);}
.catia-today .eyebrow::before{background:rgba(243,236,226,0.6);}
.catia-today h2{color:var(--bg-soft);}
.catia-today h2 em{color:var(--pesca);}
.catia-today-grid{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:80px; align-items:start;
}
.catia-today-text p{
  font-size:17px; line-height:1.7;
  color:rgba(243,236,226,0.85);
  max-width:54ch; margin-bottom:18px;
}
.catia-today-text p strong{color:var(--bg-soft); font-weight:500;}
.catia-today-text p em{color:var(--acqua); font-style:italic;}
.today-stats{
  margin-top:48px; padding-top:32px;
  border-top:1px solid rgba(243,236,226,0.14);
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.stat-n{
  font-family:var(--serif);
  font-size:clamp(40px, 4.6vw, 64px);
  line-height:1; color:var(--pesca); margin-bottom:12px;
}
.stat-l{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(243,236,226,0.6); line-height:1.5;
}
@media (max-width:880px){
  .catia-today-grid{grid-template-columns:1fr; gap:32px;}
  .today-stats{grid-template-columns:1fr 1fr; gap:24px;}
}

/* ---------- FAQ ---------- */
.catia-faq{padding:96px 0;}
.catia-faq h2{margin:18px 0 48px; max-width:24ch;}
.catia-qa{max-width:880px;}
.catia-qa details.qa{
  border-top:1px solid var(--linea-soft);
  padding:24px 0;
}
.catia-qa details.qa:last-of-type{border-bottom:1px solid var(--linea-soft);}
.catia-qa summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:64px 1fr 24px;
  gap:24px; align-items:start;
}
.catia-qa summary::-webkit-details-marker{display:none;}
.catia-qa summary::after{
  content:""; width:14px; height:14px;
  border-right:1.5px solid var(--antracite);
  border-bottom:1.5px solid var(--antracite);
  transform:rotate(45deg); margin-top:8px;
  transition:transform .25s;
}
.catia-qa details[open] summary::after{transform:rotate(-135deg); margin-top:14px;}
.catia-qa .qnum{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  color:var(--ocra); padding-top:8px;
}
.catia-qa .q{
  font-family:var(--serif); font-size:clamp(22px, 2vw, 28px); font-weight:400;
  color:var(--antracite); line-height:1.3;
}
.catia-qa .a{
  margin:18px 0 0 88px;
  color:var(--grigio-verde); font-size:16px; line-height:1.7;
  max-width:62ch;
}
.catia-qa .a strong{color:var(--antracite); font-weight:500;}
@media (max-width:640px){
  .catia-qa summary{grid-template-columns:40px 1fr 18px; gap:16px;}
  .catia-qa .a{margin-left:56px;}
}

/* ---------- CTA ---------- */
.catia-cta{
  padding:96px 0 120px;
  background:var(--bg-soft);
}
.catia-cta-grid{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:80px; align-items:start;
}
.catia-cta h2{margin:18px 0 24px;}
.catia-cta .lead{color:var(--grigio-verde); max-width:48ch; margin-bottom:32px;}
.catia-cta-buttons{display:flex; gap:16px; flex-wrap:wrap;}
.catia-card{
  background:var(--bg);
  border:1px solid var(--linea);
  border-radius:6px;
  padding:36px;
}
.catia-card-eye{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde); margin-bottom:14px;
}
.catia-card-name{
  font-family:var(--serif); font-size:32px; font-weight:400;
  color:var(--antracite); margin-bottom:6px;
}
.catia-card-role{
  font-size:14px; color:var(--grigio-verde); line-height:1.5;
  font-style:italic;
}
.catia-card hr{
  border:none; border-top:1px solid var(--linea-soft);
  margin:24px 0;
}
.catia-card ul{
  list-style:none; display:flex; flex-direction:column; gap:10px;
}
.catia-card a{
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em;
  color:var(--antracite); transition:color .2s;
}
.catia-card a:hover{color:var(--teal-deep);}
@media (max-width:880px){.catia-cta-grid{grid-template-columns:1fr; gap:48px;}}


/* ============================================================
   Massaggio in gravidanza — page-specific styles
   (extends styles.css; reusa pattern di osteomassaggio.css/catia.css)
   ============================================================ */

/* ---------- Cos'è (definizione) ---------- */
.grav-def{padding:clamp(80px, 10vw, 120px) 0; background:var(--bg-soft);}
.grav-def-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.grav-def-grid h2{margin:18px 0 0;}
.grav-def-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.grav-def-body{
  font-family:var(--serif); font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.45; font-weight:300; color:var(--antracite);
  max-width:54ch;
}
.grav-def-body p + p{margin-top:18px;}
.grav-def-body em{font-style:italic; color:var(--teal-deep);}
.grav-def-body strong{font-weight:500; color:var(--antracite);}

.grav-techniques{
  margin-top:36px; padding-top:24px;
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px;
}
.grav-tech{
  display:grid; grid-template-columns:36px 1fr; gap:14px;
  align-items:start;
}
.grav-tech .num{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
  color:var(--ocra); padding-top:5px;
}
.grav-tech strong{
  display:block; font-family:var(--serif); font-size:19px;
  font-weight:400; color:var(--antracite); margin-bottom:4px;
}
.grav-tech span{font-size:14.5px; color:var(--grigio-verde); line-height:1.55;}
@media (max-width:880px){
  .grav-def-grid{grid-template-columns:1fr; gap:32px;}
  .grav-techniques{grid-template-columns:1fr;}
}

/* ---------- Benefici (6 cells) ---------- */
.grav-benefits{padding:clamp(80px, 10vw, 140px) 0;}
.grav-benefits-head{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(40px, 6vw, 100px); align-items:end; margin-bottom:64px;
}
.grav-benefits-head h2{margin-top:18px;}
.grav-benefits-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}

.grav-bgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linea);
  border-left:1px solid var(--linea);
}
.grav-b{
  padding:36px 32px;
  border-right:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  display:flex; flex-direction:column; gap:12px;
  min-height:220px;
}
.grav-b .b-num{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocra);
}
.grav-b h3{
  font-family:var(--serif); font-size:22px; font-weight:400;
  line-height:1.2; color:var(--antracite);
}
.grav-b p{font-size:14.5px; color:var(--grigio-verde); line-height:1.6;}
@media (max-width:980px){
  .grav-benefits-head{grid-template-columns:1fr;}
  .grav-bgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){.grav-bgrid{grid-template-columns:1fr;}}

/* ---------- Precauzioni / Sicurezza ---------- */
.grav-safety{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--acqua);
}
.grav-safety-head{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:end; margin-bottom:56px;
}
.grav-safety-head h2{margin-top:18px;}
.grav-safety-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.grav-safety-head .lead{color:var(--antracite); max-width:46ch;}

.grav-safety-list{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid rgba(64,64,64,0.18);
}
.grav-safety-item{
  padding:28px 32px 28px 0;
  border-bottom:1px solid rgba(64,64,64,0.12);
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  align-items:start;
}
.grav-safety-item:nth-child(odd){border-right:1px solid rgba(64,64,64,0.18); padding-right:32px;}
.grav-safety-item:nth-child(even){padding-left:32px;}
.grav-safety-item:nth-last-child(-n+2){border-bottom:none;}
.grav-safety-num{
  font-family:var(--serif); font-size:32px; font-weight:300;
  color:var(--ocra); line-height:1; padding-top:2px;
}
.grav-safety-item h3{
  font-family:var(--serif); font-size:21px; font-weight:400;
  color:var(--antracite); margin-bottom:8px; line-height:1.25;
}
.grav-safety-item p{
  font-size:15px; color:var(--antracite); line-height:1.6; max-width:52ch;
}
.grav-safety-item p strong{font-weight:500;}

.grav-safety-disclaimer{
  margin-top:40px;
  padding:20px 24px;
  background:var(--bg);
  border-left:3px solid var(--ocra);
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; line-height:1.65;
  color:var(--antracite);
  max-width:760px;
}
.grav-safety-disclaimer strong{
  letter-spacing:0.16em; text-transform:uppercase;
  display:block; margin-bottom:6px; color:var(--antracite);
}
@media (max-width:880px){
  .grav-safety-head{grid-template-columns:1fr; gap:24px;}
  .grav-safety-list{grid-template-columns:1fr;}
  .grav-safety-item{padding:24px 0 !important; border-right:none !important;}
  .grav-safety-item:last-child{border-bottom:none;}
}

/* ---------- Metodo ---------- */
.grav-method{padding:clamp(80px, 10vw, 140px) 0;}
.grav-method-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.grav-method-grid h2{margin:18px 0 28px;}
.grav-method-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.grav-method-body p{
  font-size:17px; color:var(--antracite); line-height:1.7;
  max-width:52ch; margin-bottom:18px;
}
.grav-method-body em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.grav-method-body strong{font-weight:500;}

.grav-keywords{
  margin-top:32px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.grav-keywords .kw{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  padding:8px 14px;
  background:var(--bg-soft);
  border-radius:999px;
  color:var(--antracite);
  border:1px solid var(--linea-soft);
}

.grav-method-side{
  background:var(--bg-soft);
  border-radius:6px;
  padding:36px;
  border:1px solid var(--linea-soft);
}
.grav-method-side .lab{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocra); margin-bottom:18px;
}
.grav-method-side h3{
  font-family:var(--serif); font-size:26px; font-weight:400;
  line-height:1.2; margin-bottom:18px; color:var(--antracite);
}
.grav-method-side p{
  font-size:15.5px; color:var(--grigio-verde); line-height:1.7;
  margin-bottom:14px;
}
.grav-method-side em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.grav-method-side ul{
  list-style:none; padding:0; margin-top:8px;
  display:flex; flex-direction:column; gap:10px;
}
.grav-method-side li{
  display:grid; grid-template-columns:14px 1fr; gap:12px;
  font-size:14.5px; color:var(--antracite);
}
.grav-method-side li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--teal); margin-top:8px;
}
@media (max-width:880px){.grav-method-grid{grid-template-columns:1fr;}}

/* ---------- Sessione (4 fasi orizzontali) ---------- */
.grav-session{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--bg-soft);
}
.grav-session-head{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end;
  margin-bottom:72px;
}
.grav-session-head h2{margin-top:18px;}
.grav-session-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.grav-session-head p{max-width:46ch;}
.grav-phases{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid var(--linea);
}
.grav-phase{
  padding:36px 28px 36px 0;
  border-right:1px solid var(--linea);
  position:relative;
  min-height:300px;
  display:flex; flex-direction:column;
}
.grav-phase:last-child{border-right:none;}
.grav-phase:not(:first-child){padding-left:28px;}
.grav-phase .p-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde);
}
.grav-phase .p-step{color:var(--ocra);}
.grav-phase h3{
  font-family:var(--serif); font-size:24px; font-weight:400;
  line-height:1.2; margin-bottom:14px; color:var(--antracite);
}
.grav-phase p{font-size:14.5px; color:var(--grigio-verde); line-height:1.6;}
@media (max-width:980px){
  .grav-phases{grid-template-columns:1fr 1fr;}
  .grav-phase{border-right:none; border-bottom:1px solid var(--linea); padding:28px 0; min-height:auto;}
  .grav-phase:nth-child(odd){padding-right:14px;}
  .grav-phase:nth-child(even){padding-left:14px; border-left:1px solid var(--linea);}
}
@media (max-width:640px){
  .grav-session-head{grid-template-columns:1fr;}
  .grav-phases{grid-template-columns:1fr;}
  .grav-phase{padding:28px 0 !important; border-left:none !important;}
  .grav-phase:last-child{border-bottom:none;}
}

/* ---------- Perché Studio Dalia ---------- */
.grav-why{
  padding:clamp(80px, 10vw, 140px) 0;
}
.grav-why-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(40px, 6vw, 90px); align-items:center;
}
.grav-why-photo{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg,
      rgba(64,64,64,0.05) 0 1px,
      transparent 1px 14px),
    linear-gradient(160deg, var(--pesca) 0%, var(--ocra) 60%, var(--acqua-deep) 100%);
  border-radius:4px;
  position:relative; overflow:hidden;
}
.grav-why-photo .ph-label{
  position:absolute; left:16px; bottom:16px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--antracite);
  background:rgba(251,247,242,0.85);
  padding:6px 10px; border-radius:2px;
}
.grav-why-grid h2{margin:18px 0 28px;}
.grav-why-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.grav-why-body p{
  font-size:17px; color:var(--antracite); line-height:1.7;
  max-width:54ch; margin-bottom:18px;
}
.grav-why-body em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.grav-why-list{
  margin-top:32px; padding-top:24px;
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
.grav-why-list .item{
  display:flex; gap:14px; align-items:flex-start;
  font-size:14.5px; color:var(--antracite);
}
.grav-why-list .num{
  font-family:var(--mono); font-size:12px; color:var(--teal-deep);
  letter-spacing:0.1em; padding-top:3px;
}
.grav-why-list strong{font-weight:500;}
@media (max-width:880px){
  .grav-why-grid{grid-template-columns:1fr;}
  .grav-why-list{grid-template-columns:1fr;}
}

/* ---------- Cross-sell (related) ---------- */
.grav-related{
  padding:clamp(60px, 8vw, 100px) 0;
  background:var(--bg-soft);
  border-top:1px solid var(--linea-soft);
}
.grav-related-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:36px;
}
.grav-rel{
  background:var(--bg);
  border-radius:4px;
  padding:28px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s ease;
  text-decoration:none;
}
.grav-rel:hover{transform:translateY(-3px);}
.grav-rel .tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde);
}
.grav-rel h3{
  font-family:var(--serif); font-size:24px; font-weight:400;
  line-height:1.2; color:var(--antracite);
}
.grav-rel p{font-size:14.5px; color:var(--grigio-verde); line-height:1.6;}
.grav-rel .arrow-ln{
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--linea-soft);
  font-size:13px; color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:8px;
}
@media (max-width:860px){.grav-related-grid{grid-template-columns:1fr;}}

/* ---------- FAQ riusa .catia-qa style ---------- */
.grav-faq{padding:clamp(80px, 10vw, 140px) 0;}
.grav-faq h2{margin:18px 0 48px; max-width:24ch;}
.grav-faq h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}


/* ============================================================
   Corso Massaggio di Coppia — page-specific styles
   ============================================================ */

/* ---------- Problema (empatia) ---------- */
.cop-problem{padding:clamp(80px, 10vw, 120px) 0; background:var(--bg-soft);}
.cop-problem-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 100px); align-items:start;
}
.cop-problem h2{margin:18px 0 0;}
.cop-problem h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-problem-text{
  font-family:var(--serif); font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.45; font-weight:300; color:var(--antracite);
  max-width:54ch;
}
.cop-problem-text p + p{margin-top:18px;}
.cop-problem-text em{font-style:italic; color:var(--teal-deep);}
.cop-problem-text strong{font-weight:500;}
.cop-cluster{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:36px;
}
.cop-cluster .chip{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--linea); border-radius:999px;
  color:var(--grigio-verde);
}
@media (max-width:880px){.cop-problem-grid{grid-template-columns:1fr; gap:32px;}}

/* ---------- Cos'è il corso ---------- */
.cop-what{padding:clamp(80px, 10vw, 140px) 0;}
.cop-what-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.cop-what-grid h2{margin:18px 0 0;}
.cop-what-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-what-body{
  font-size:17px; color:var(--antracite); line-height:1.7; max-width:54ch;
}
.cop-what-body p + p{margin-top:18px;}
.cop-what-body em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.cop-what-body strong{font-weight:500;}
.cop-pillars{
  margin-top:36px; padding-top:24px;
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1fr 1fr; gap:18px 28px;
}
.cop-pillars .item{
  display:flex; align-items:flex-start; gap:14px;
  font-size:14.5px; color:var(--antracite);
}
.cop-pillars .num{
  font-family:var(--mono); font-size:12px; color:var(--teal-deep);
  letter-spacing:0.1em; padding-top:3px;
}
.cop-pillars strong{font-weight:500;}
@media (max-width:880px){
  .cop-what-grid{grid-template-columns:1fr; gap:32px;}
  .cop-pillars{grid-template-columns:1fr;}
}

/* ---------- Cosa imparate ---------- */
.cop-learn{padding:clamp(80px, 10vw, 140px) 0; background:var(--acqua);}
.cop-learn-head{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(40px, 6vw, 100px); align-items:end; margin-bottom:64px;
}
.cop-learn-head h2{margin-top:18px;}
.cop-learn-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-learn-head .lead{color:var(--antracite); max-width:46ch;}

.cop-learn-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid rgba(64,64,64,0.18);
}
.cop-learn-cell{
  padding:36px 28px 36px 0;
  border-right:1px solid rgba(64,64,64,0.18);
  min-height:240px;
  display:flex; flex-direction:column; gap:14px;
}
.cop-learn-cell:last-child{border-right:none;}
.cop-learn-cell:not(:first-child){padding-left:28px;}
.cop-learn-cell .b-num{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocra);
}
.cop-learn-cell h3{
  font-family:var(--serif); font-size:22px; font-weight:400;
  line-height:1.2; color:var(--antracite);
}
.cop-learn-cell p{font-size:14.5px; color:var(--antracite); line-height:1.6;}
@media (max-width:980px){
  .cop-learn-head{grid-template-columns:1fr;}
  .cop-learn-grid{grid-template-columns:1fr 1fr;}
  .cop-learn-cell{border-right:none; border-bottom:1px solid rgba(64,64,64,0.18); padding:28px 0; min-height:auto;}
  .cop-learn-cell:nth-child(odd){padding-right:14px;}
  .cop-learn-cell:nth-child(even){padding-left:14px; border-left:1px solid rgba(64,64,64,0.18);}
}
@media (max-width:560px){
  .cop-learn-grid{grid-template-columns:1fr;}
  .cop-learn-cell{padding:24px 0 !important; border-left:none !important;}
  .cop-learn-cell:last-child{border-bottom:none;}
}

/* ---------- Benefici (due colonne: coppia + corpo) ---------- */
.cop-benefits{padding:clamp(80px, 10vw, 140px) 0;}
.cop-benefits-head{margin-bottom:64px; max-width:780px;}
.cop-benefits-head h2{margin:18px 0 0;}
.cop-benefits-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-benefits-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
.cop-bcol{
  padding:36px;
  border-radius:6px;
  background:var(--bg-soft);
  border:1px solid var(--linea-soft);
}
.cop-bcol:nth-child(2){background:var(--bg); border-color:var(--linea);}
.cop-bcol .b-eye{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocra); margin-bottom:14px;
}
.cop-bcol h3{
  font-family:var(--serif); font-size:28px; font-weight:400;
  line-height:1.2; margin-bottom:24px; color:var(--antracite);
}
.cop-bcol h3 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-bcol ul{
  list-style:none; padding:0; display:flex; flex-direction:column;
}
.cop-bcol li{
  padding:18px 0;
  border-top:1px solid var(--linea-soft);
  display:grid; grid-template-columns:48px 1fr; gap:16px;
  align-items:start;
}
.cop-bcol li:last-child{border-bottom:1px solid var(--linea-soft);}
.cop-bcol .li-num{
  font-family:var(--serif); font-size:24px; font-weight:300;
  color:var(--ocra); line-height:1; padding-top:2px;
}
.cop-bcol li strong{
  display:block; font-family:var(--serif); font-size:19px;
  font-weight:400; color:var(--antracite); margin-bottom:4px;
}
.cop-bcol li span{font-size:14.5px; color:var(--grigio-verde); line-height:1.55;}
@media (max-width:880px){.cop-benefits-grid{grid-template-columns:1fr; gap:24px;}}

/* ---------- Versione gravidanza ---------- */
.cop-pregnancy{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--antracite);
  color:var(--bg-soft);
}
.cop-pregnancy .eyebrow{color:rgba(243,236,226,0.6);}
.cop-pregnancy .eyebrow::before{background:rgba(243,236,226,0.6);}
.cop-preg-grid{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.cop-preg-grid h2{
  color:var(--bg-soft); margin:18px 0 0;
  font-size:clamp(34px, 4.4vw, 60px);
}
.cop-preg-grid h2 em{color:var(--pesca); font-style:italic; font-weight:300;}
.cop-preg-text p{
  font-size:17px; line-height:1.7;
  color:rgba(243,236,226,0.85);
  max-width:54ch; margin-bottom:18px;
}
.cop-preg-text strong{color:var(--bg-soft); font-weight:500;}
.cop-preg-text em{color:var(--acqua); font-style:italic;}
.cop-preg-points{
  margin-top:32px; padding-top:24px;
  border-top:1px solid rgba(243,236,226,0.14);
  display:grid; gap:18px;
}
.cop-preg-point{
  display:grid; grid-template-columns:48px 1fr; gap:16px;
  align-items:start;
}
.cop-preg-point .pn{
  font-family:var(--serif); font-size:24px; color:var(--pesca);
  font-weight:300; line-height:1;
}
.cop-preg-point strong{
  display:block; font-family:var(--serif); font-size:19px;
  font-weight:400; color:var(--bg-soft); margin-bottom:4px;
}
.cop-preg-point span{font-size:14.5px; color:rgba(243,236,226,0.7); line-height:1.55;}
@media (max-width:880px){.cop-preg-grid{grid-template-columns:1fr; gap:32px;}}

/* ---------- Come si svolge ---------- */
.cop-flow{padding:clamp(80px, 10vw, 140px) 0; background:var(--bg-soft);}
.cop-flow-head{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end;
  margin-bottom:72px;
}
.cop-flow-head h2{margin-top:18px;}
.cop-flow-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-flow-head p{max-width:46ch;}
.cop-flow-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid var(--linea);
}
.cop-flow-step{
  padding:36px 28px 36px 0;
  border-right:1px solid var(--linea);
  min-height:280px;
  display:flex; flex-direction:column;
}
.cop-flow-step:last-child{border-right:none;}
.cop-flow-step:not(:first-child){padding-left:28px;}
.cop-flow-step .p-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde);
}
.cop-flow-step .p-step{color:var(--ocra);}
.cop-flow-step h3{
  font-family:var(--serif); font-size:24px; font-weight:400;
  line-height:1.2; margin-bottom:14px; color:var(--antracite);
}
.cop-flow-step p{font-size:14.5px; color:var(--grigio-verde); line-height:1.6;}
@media (max-width:980px){
  .cop-flow-grid{grid-template-columns:1fr 1fr;}
  .cop-flow-step{border-right:none; border-bottom:1px solid var(--linea); padding:28px 0; min-height:auto;}
  .cop-flow-step:nth-child(odd){padding-right:14px;}
  .cop-flow-step:nth-child(even){padding-left:14px; border-left:1px solid var(--linea);}
}
@media (max-width:640px){
  .cop-flow-head{grid-template-columns:1fr;}
  .cop-flow-grid{grid-template-columns:1fr;}
  .cop-flow-step{padding:28px 0 !important; border-left:none !important;}
  .cop-flow-step:last-child{border-bottom:none;}
}

/* ---------- Metodo Catia ---------- */
.cop-method{padding:clamp(80px, 10vw, 140px) 0;}
.cop-method-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 96px); align-items:center;
}
.cop-method-photo{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg,
      rgba(64,64,64,0.05) 0 1px,
      transparent 1px 14px),
    linear-gradient(160deg, var(--acqua-deep) 0%, var(--acqua) 60%, var(--bg-soft) 100%);
  border-radius:4px;
  position:relative; overflow:hidden;
}
.cop-method-photo .ph-label{
  position:absolute; left:16px; bottom:16px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--antracite);
  background:rgba(251,247,242,0.85);
  padding:6px 10px; border-radius:2px;
}
.cop-method-grid h2{margin:18px 0 28px;}
.cop-method-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cop-method-body p{
  font-size:17px; color:var(--antracite); line-height:1.7;
  max-width:54ch; margin-bottom:18px;
}
.cop-method-body em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.cop-method-values{
  margin-top:32px; padding-top:24px;
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
.cop-method-values .v{
  display:flex; gap:14px; align-items:flex-start;
  font-size:14.5px; color:var(--antracite);
}
.cop-method-values .num{
  font-family:var(--mono); font-size:12px; color:var(--teal-deep);
  letter-spacing:0.1em; padding-top:3px;
}
.cop-method-values strong{font-weight:500;}
@media (max-width:880px){
  .cop-method-grid{grid-template-columns:1fr;}
  .cop-method-values{grid-template-columns:1fr;}
}

/* ---------- FAQ ---------- */
.cop-faq{padding:clamp(80px, 10vw, 140px) 0; background:var(--bg-soft);}
.cop-faq h2{margin:18px 0 48px; max-width:24ch;}
.cop-faq h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}


/* ============================================================
   Osteomassaggio — page-specific styles (extends styles.css)
   ============================================================ */

/* ---------- Definition section (cos'è) ---------- */
.osteo-def{padding:clamp(80px, 10vw, 120px) 0; background:var(--bg-soft);}
.osteo-def-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.osteo-def-grid h2{margin:18px 0 0;}
.osteo-def-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.osteo-def-body{
  font-family:var(--serif); font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.45; font-weight:300; color:var(--antracite);
  max-width:54ch;
}
.osteo-def-body p + p{margin-top:18px;}
.osteo-def-body em{font-style:italic; color:var(--teal-deep);}
.osteo-def-body strong{font-weight:500; color:var(--antracite);}
.osteo-def-source{
  margin-top:32px;
  padding:18px 22px;
  border-left:2px solid var(--ocra);
  background:var(--bg);
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  color:var(--grigio-verde); line-height:1.6;
  max-width:48ch;
}
.osteo-def-source strong{color:var(--antracite); letter-spacing:0.16em; text-transform:uppercase; font-weight:500;}
@media (max-width:880px){.osteo-def-grid{grid-template-columns:1fr; gap:32px;}}

/* ---------- Benefits ---------- */
.osteo-benefits{padding:clamp(80px, 10vw, 140px) 0;}
.osteo-benefits-head{
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px, 6vw, 100px);
  align-items:end; margin-bottom:64px;
}
.osteo-benefits-head h2{margin-top:18px;}
.osteo-benefits-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.osteo-benefits-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.osteo-benefit{
  padding:40px 24px 40px 0;
  border-right:1px solid var(--linea);
  display:flex; flex-direction:column; gap:14px;
  min-height:220px;
}
.osteo-benefit:last-child{border-right:none; padding-right:0;}
.osteo-benefit:not(:first-child){padding-left:24px;}
.osteo-benefit .b-num{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocra);
}
.osteo-benefit h3{
  font-family:var(--serif); font-size:22px; font-weight:400;
  line-height:1.18; color:var(--antracite);
}
.osteo-benefit p{font-size:14.5px; color:var(--grigio-verde); line-height:1.6;}
@media (max-width:1100px){.osteo-benefits-grid{grid-template-columns:repeat(3, 1fr);}
  .osteo-benefit{border-bottom:1px solid var(--linea);}
  .osteo-benefit:nth-child(3){border-right:none;}
  .osteo-benefit:nth-child(4){padding-left:0; border-left:none;}
  .osteo-benefit:nth-child(n+4){border-bottom:none;}
}
@media (max-width:680px){
  .osteo-benefits-head{grid-template-columns:1fr;}
  .osteo-benefits-grid{grid-template-columns:1fr;}
  .osteo-benefit{border-right:none; border-bottom:1px solid var(--linea); padding:28px 0; min-height:auto;}
  .osteo-benefit:not(:first-child){padding-left:0;}
  .osteo-benefit:last-child{border-bottom:none;}
}
.osteo-benefits-foot{
  margin-top:48px;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px, 2vw, 26px); line-height:1.4;
  color:var(--antracite); max-width:64ch;
  text-wrap:balance;
}
.osteo-benefits-foot em{color:var(--teal-deep);}

/* ---------- Method (Catia + Elitropia) ---------- */
.osteo-method{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--acqua);
}
.osteo-method-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.osteo-method-grid h2{margin:18px 0 28px;}
.osteo-method-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.osteo-method-body p{
  font-size:17px; color:var(--antracite); line-height:1.7;
  max-width:52ch; margin-bottom:18px;
}
.osteo-method-body em{font-family:var(--serif); font-style:italic; color:var(--teal-deep); font-size:1.3em; line-height: 1 !important;}
.osteo-method-body strong{font-weight:500; color:var(--antracite);}

.osteo-keywords{
  margin-top:32px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.osteo-keywords .kw{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase;
  padding:8px 14px;
  background:var(--bg);
  border-radius:999px;
  color:var(--antracite);
  border:1px solid rgba(64,64,64,0.1);
}

.osteo-method-side{
  background:var(--bg);
  border-radius:6px;
  padding:36px;
  border:1px solid rgba(64,64,64,0.08);
}
.osteo-method-side .lab{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocra); margin-bottom:18px;
}
.osteo-method-side h3{
  font-family:var(--serif); font-size:28px; font-weight:400;
  line-height:1.2; margin-bottom:18px; color:var(--antracite);
}
.osteo-method-side p{
  font-size:15.5px; color:var(--grigio-verde); line-height:1.7;
  margin-bottom:14px;
}
.osteo-method-side em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.osteo-method-side .credit{
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--linea-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grigio-verde);
}
@media (max-width:880px){.osteo-method-grid{grid-template-columns:1fr;}}

/* ---------- Session phases (timeline orizzontale) ---------- */
.osteo-session{padding:clamp(80px, 10vw, 140px) 0;}
.osteo-session-head{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end;
  margin-bottom:72px;
}
.osteo-session-head h2{margin-top:18px;}
.osteo-session-head h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.osteo-session-head p{max-width:46ch;}
.osteo-phases{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid var(--linea);
}
.osteo-phase{
  padding:36px 28px 36px 0;
  border-right:1px solid var(--linea);
  position:relative;
  min-height:300px;
  display:flex; flex-direction:column;
}
.osteo-phase:last-child{border-right:none;}
.osteo-phase:not(:first-child){padding-left:28px;}
.osteo-phase .p-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grigio-verde);
}
.osteo-phase .p-step{color:var(--ocra);}
.osteo-phase .p-time{color:var(--grigio-verde);}
.osteo-phase h3{
  font-family:var(--serif); font-size:24px; font-weight:400;
  line-height:1.2; margin-bottom:14px; color:var(--antracite);
}
.osteo-phase p{font-size:14.5px; color:var(--grigio-verde); line-height:1.6;}
@media (max-width:980px){
  .osteo-phases{grid-template-columns:1fr 1fr;}
  .osteo-phase{border-right:none; border-bottom:1px solid var(--linea); padding:28px 0; min-height:auto;}
  .osteo-phase:nth-child(odd){padding-right:14px;}
  .osteo-phase:nth-child(even){padding-left:14px; border-left:1px solid var(--linea);}
}
@media (max-width:640px){
  .osteo-session-head{grid-template-columns:1fr;}
  .osteo-phases{grid-template-columns:1fr;}
  .osteo-phase{padding:28px 0 !important; border-left:none !important;}
  .osteo-phase:last-child{border-bottom:none;}
}

/* ---------- Why Catia ---------- */
.osteo-why{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--bg-soft);
}
.osteo-why-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(40px, 6vw, 90px); align-items:center;
}
.osteo-why-photo{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg,
      rgba(64,64,64,0.05) 0 1px,
      transparent 1px 14px),
    linear-gradient(160deg, var(--acqua) 0%, var(--acqua-deep) 70%, var(--bg-soft) 100%);
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.osteo-why-photo .ph-label{
  position:absolute; left:16px; bottom:16px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--antracite);
  background:rgba(251,247,242,0.85);
  padding:6px 10px; border-radius:2px;
}
.osteo-why-grid h2{margin:18px 0 28px;}
.osteo-why-grid h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.osteo-why-body p{
  font-size:17px; color:var(--antracite); line-height:1.7;
  max-width:54ch; margin-bottom:18px;
}
.osteo-why-body em{font-family:var(--serif); font-style:italic; color:var(--teal-deep);}
.osteo-why-list{
  margin-top:32px; padding-top:24px;
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
.osteo-why-list .item{
  display:flex; gap:14px; align-items:flex-start;
  font-size:14.5px; color:var(--antracite);
}
.osteo-why-list .num{
  font-family:var(--mono); font-size:12px; color:var(--teal-deep);
  letter-spacing:0.1em; padding-top:3px;
}
.osteo-why-list strong{font-weight:500;}
@media (max-width:880px){
  .osteo-why-grid{grid-template-columns:1fr;}
  .osteo-why-list{grid-template-columns:1fr;}
}

/* ---------- FAQ riusa .catia-qa style ma con eyebrow proprio ---------- */
.osteo-faq{padding:clamp(80px, 10vw, 140px) 0;}
.osteo-faq h2{margin:18px 0 48px; max-width:24ch;}
.osteo-faq h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}

/* ---------- Final CTA (uses .final from styles.css, lightly tweaked label) ---------- */

/* ---------- Reveal helper already in main.js ---------- */


/* ============================================================
   CONTACT FORM (homepage — #modulo-contatti)
   ============================================================ */
.cform{
  padding:clamp(80px, 10vw, 140px) 0 clamp(100px, 12vw, 160px);
  background:var(--bg);
  border-top:1px solid var(--linea-soft);
}
.cform-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(48px, 7vw, 110px);
  align-items:start;
}
.cform-intro h2{margin:18px 0 24px;}
.cform-intro h2 em{font-style:italic; color:var(--teal-deep); font-weight:300;}
.cform-intro .lead{margin-bottom:36px;}
.cform-info{
  list-style:none;
  margin:0 0 28px;
  padding:24px 0 0;
  border-top:1px solid var(--linea);
  display:flex; flex-direction:column; gap:14px;
}
.cform-info li{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:0.02em;
  color:var(--antracite);
}
.cform-info a{color:var(--antracite); transition:color .2s;}
.cform-info a:hover{color:var(--teal-deep);}
.cf-ic{
  width:32px; height:32px; border-radius:999px;
  background:var(--bg-soft); border:1px solid var(--linea);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--teal-deep); flex-shrink:0;
}
.cf-ic svg{width:14px; height:14px;}
.cform-note{
  font-family:var(--serif); font-style:italic;
  font-size:16px; line-height:1.5; color:var(--grigio-verde);
  padding:18px 0 0;
  border-top:1px solid var(--linea-soft);
  max-width:38ch;
}
.cform-note em{font-style:italic; color:var(--antracite); font-weight:500;}

/* ---- Form ---- */
.cform-form{
  background:var(--bg-soft);
  border:1px solid var(--linea-soft);
  border-radius:10px;
  padding:clamp(28px, 3.6vw, 48px);
  display:flex; flex-direction:column; gap:26px;
  position:relative;
}
.cf-row{display:flex; flex-direction:column; gap:8px;}
.cf-row.two{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.cf-row.two > div{display:flex; flex-direction:column; gap:8px;}
.cform-form label{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--grigio-verde);
  display:flex; align-items:baseline; gap:10px;
}
.cf-req{color:var(--ocra); font-weight:500;}
.cf-opt{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.14em; text-transform:lowercase;
  color:var(--grigio-verde); opacity:.7;
  font-style:italic;
}
.cform-form input[type="text"],
.cform-form input[type="email"],
.cform-form input[type="tel"],
.cform-form textarea,
.cform-form select{
  font-family:var(--sans);
  font-size:16px;
  color:var(--antracite);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--linea);
  padding:10px 0 12px;
  width:100%;
  border-radius:0;
  transition:border-color .25s ease, background .25s ease;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}
.cform-form input::placeholder,
.cform-form textarea::placeholder{
  color:var(--grigio-verde); opacity:.55;
  font-family:var(--sans);
}
.cform-form input:hover,
.cform-form textarea:hover,
.cform-form select:hover{border-bottom-color:var(--grigio-verde);}
.cform-form input:focus,
.cform-form textarea:focus,
.cform-form select:focus{
  border-bottom-color:var(--teal-deep);
}
.cform-form input:focus-visible,
.cform-form textarea:focus-visible,
.cform-form select:focus-visible{
  outline:2px solid rgba(0,122,145,0.2);
  outline-offset:4px;
  border-radius:2px;
}
.cform-form textarea{
  resize:vertical; min-height:120px; line-height:1.55;
  border:1px solid var(--linea);
  padding:14px 16px;
  border-radius:6px;
  background:rgba(251,247,242,0.5);
}
.cform-form textarea:hover{border-color:var(--grigio-verde);}
.cform-form textarea:focus{
  border-color:var(--teal-deep);
  background:var(--bg);
}

/* ---- Select wrapper + caret ---- */
.cf-select-wrap{
  position:relative;
  display:flex; align-items:center;
}
.cform-form select{
  padding-right:32px;
  cursor:pointer;
  color:var(--antracite);
  font-family:var(--sans);
}
.cform-form select:invalid,
.cform-form select option[value=""]{
  color:var(--grigio-verde);
}
.cform-form select option{
  color:var(--antracite);
  font-family:var(--sans);
  background:var(--bg);
}
.cf-select-caret{
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--teal-deep);
  display:flex;
  transition:transform .25s ease, color .25s ease;
}
.cf-select-wrap:focus-within .cf-select-caret{
  transform:translateY(-50%) rotate(180deg);
}

/* ---- Privacy checkbox ---- */
.cform-form label.cf-privacy{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  color:var(--grigio-verde);
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
  padding:8px 0 0;
  margin:0;
  user-select:none;
}
.cf-privacy input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0; height:0;
}
.cf-check{
  width:20px; height:20px;
  border:1px solid var(--linea);
  background:var(--bg);
  border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  flex-shrink:0;
  margin-top:2px;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.cf-check svg{
  width:13px; height:13px;
  opacity:0;
  transform:scale(.5);
  transition:opacity .2s ease, transform .2s ease;
}
.cf-privacy:hover .cf-check{border-color:var(--teal-deep);}
.cf-privacy input:checked + .cf-check{
  background:var(--teal-deep);
  border-color:var(--teal-deep);
}
.cf-privacy input:checked + .cf-check svg{
  opacity:1; transform:scale(1);
}
.cf-privacy input:focus-visible + .cf-check{
  outline:2px solid rgba(0,122,145,0.25);
  outline-offset:3px;
}
.cf-privacy-text a{
  color:var(--teal-deep);
  border-bottom:1px solid var(--teal);
  padding-bottom:1px;
  transition:color .2s;
}
.cf-privacy-text a:hover{color:var(--antracite); border-bottom-color:var(--antracite);}

/* ---- Actions ---- */
.cf-actions{
  margin-top:6px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.cf-actions .btn{align-self:flex-start;}
.cf-status{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--grigio-verde);
  min-height:1em;
}
.cf-status.ok{color:var(--teal-deep);}
.cf-status.err{color:#c54545;}

/* ---- Invalid states (after attempted submit) ---- */
.cform-form.attempted input:invalid,
.cform-form.attempted select:invalid,
.cform-form.attempted textarea:invalid{
  border-bottom-color:#c54545;
}
.cform-form.attempted textarea:invalid{
  border-color:#c54545;
}
.cform-form.attempted .cf-privacy input:invalid + .cf-check{
  border-color:#c54545;
}

@media (max-width:880px){
  .cform-grid{grid-template-columns:1fr; gap:48px;}
  .cf-row.two{grid-template-columns:1fr;}
}

/* ============================================================
   SCROLL-TO-TOP BUTTON
   ============================================================ */
.scroll-top{
  position:fixed;
  right:clamp(16px, 2.4vw, 28px);
  bottom:clamp(16px, 2.4vw, 28px);
  z-index:55;
  width:48px; height:48px;
  border-radius:999px;
  background:var(--antracite);
  color:var(--bg);
  border:1px solid var(--antracite);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  gap:0;
  padding:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(12px) scale(.92);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .25s ease, color .25s ease, width .3s ease, border-radius .3s ease;
  box-shadow:0 8px 24px rgba(64,64,64,0.18), 0 2px 6px rgba(64,64,64,0.08);
}
.scroll-top[hidden]{display:flex !important;} /* override [hidden] so transition can run */
.scroll-top.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.scroll-top svg{
  width:16px; height:16px;
  transition:transform .25s ease;
}
.scroll-top-label{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  transition:max-width .3s ease, opacity .25s ease, margin-left .3s ease;
  margin-left:0;
}
.scroll-top:hover{
  background:var(--teal-deep);
  border-color:var(--teal-deep);
  color:var(--bg);
  width:auto;
  padding:0 20px 0 16px;
  border-radius:999px;
}
.scroll-top:hover svg{transform:translateY(-2px);}
.scroll-top:hover .scroll-top-label{
  max-width:60px;
  opacity:1;
  margin-left:8px;
}
.scroll-top:active{transform:translateY(0) scale(.96);}
.scroll-top:focus-visible{
  outline:2px solid rgba(0,122,145,0.45);
  outline-offset:3px;
}
@media (max-width:560px){
  .scroll-top{width:44px; height:44px;}
  .scroll-top:hover{width:44px; padding:0;}
  .scroll-top:hover .scroll-top-label{max-width:0; margin-left:0; opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .scroll-top{transition:opacity .2s ease;}
  .scroll-top svg{transition:none;}
}