/* =========================================================
   LOVEMORE — styles.css (clean full file)
   ========================================================= */

/* -------------------------
   CSS Variables
------------------------- */
:root{
    /* BrandKit palette */
    --sand: #FF914D;
    --off: #FBF9F6;
    --petrol: #2C8784;
  
    --ink: #122525;
    --muted: rgba(18,37,37,.72);
    --line: rgba(18,37,37,.14);
  
    --card: rgba(255,255,255,.72);
    --shadow: 0 18px 50px rgba(0,0,0,.10);
  
    --r-sm: 14px;
    --r: 18px;
    --r-lg: 26px;
  
    --max: 1180px;
    --pad: clamp(18px, 3vw, 34px);
    --sec: clamp(56px, 8vw, 112px);
  
    --h1: clamp(40px, 6vw, 84px);
    --h2: clamp(28px, 3.2vw, 44px);
    --h3: clamp(18px, 2vw, 22px);
    --p:  clamp(16px, 1.35vw, 18px);
  
    /* aliases (avoid undefined vars across components) */
    --orange: var(--sand);
    --teal: var(--petrol);
    --cream: var(--off);
    --font-display: "League Spartan", system-ui, sans-serif;
    --font-body: "Jost", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  /* -------------------------
     Base / Reset
  ------------------------- */
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: var(--font-body);
    background: var(--off);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.45;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; }
  :focus-visible{ outline: 3px solid color-mix(in srgb, var(--sand) 45%, #fff); outline-offset: 3px; }
  
  .container{
    max-width: var(--max);
    margin:0 auto;
    padding:0 var(--pad);
  }
  
  /* Skip link */
  .skip{
    position:absolute;
    left:-999px;
    top:auto;
    width:1px;height:1px;
    overflow:hidden;
  }
  .skip:focus{
    left: var(--pad);
    top: 14px;
    width:auto;height:auto;
    background:#fff;
    padding:10px 12px;
    border-radius: 12px;
    border:1px solid var(--line);
    z-index:9999;
  }
  
  /* -------------------------
     Header
  ------------------------- */
  .site-header{
    position: sticky;
    top:0;
    z-index: 80;
    background: var(--petrol);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    padding: 14px 0;
  }
  
  /* Brand */
  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
  }
  .brand-mark{
    display:inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: .85;
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--sand);
    color:#fff;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
  }
  
  /* Nav */
  .nav{
    display:flex;
    gap: 18px;
    align-items:center;
  }
  .nav a{
    color: var(--off);
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
  }
  .nav a:hover{
    background: rgba(229, 229, 229, 0.425);
    color: var(--ink);
  }
  
  /* Header actions */
  .header-actions{
    display:flex;
    align-items:center;
    gap: 10px;
    position: relative;
  }
  
  /* Language */
  .lang{
    border: 1px solid rgba(18,37,37,.16);
    background: rgba(255,255,255,.55);
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 800;
    color: rgba(18,37,37,.75);
    cursor: pointer;
  }
  .lang-menu{
    position:absolute;
    top: 48px;
    right: 150px;
    min-width: 120px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .lang-menu button{
    width:100%;
    text-align:left;
    border:0;
    background: transparent;
    padding: 12px 12px;
    font-weight: 800;
    cursor:pointer;
  }
  .lang-menu button:hover{
    background: rgba(44,135,132,.10);
  }
  
  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 900;
    letter-spacing: .01em;
    cursor:pointer;
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
    user-select:none;
  }
  .btn:active{ transform: translateY(1px); }
  
  .btn-donate {
      background: var(--dc-orange );
      color: white;
      border-color: rgba(255, 255, 255, .6);
      box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
  }
  .btn-donate:hover{ box-shadow: 0 18px 36px rgba(0,0,0,.14); }
  
  .btn-primary{
    background: var(--sand);
    color:#fff;
    box-shadow: 0 14px 28px rgba(255,145,77,.28);
  }
  .btn-primary:hover{ box-shadow: 0 18px 40px rgba(255,145,77,.36); }
  
  .btn-secondary{
    background: transparent;
    border-color: rgba(44,135,132,.52);
    color: var(--petrol);
  }
  .btn-secondary:hover{
    background: rgba(44,135,132,.08);
    border-color: rgba(44,135,132,.70);
  }
  
  .btn-ghost{
    background: rgba(255,255,255,.6);
    border-color: rgba(18,37,37,.14);
    color: rgba(18,37,37,.82);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,.85); }
  
  /* Burger */
  .burger{
    display:none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(18,37,37,.16);
    background: rgba(255,255,255,.55);
    cursor:pointer;
  }
  .burger span{
    display:block;
    width: 18px;
    height: 2px;
    background: rgba(18,37,37,.72);
    margin: 0;
    border-radius: 99px;
  }
  
  /* Mobile panel */
  .mobile-panel{
    border-top: 1px solid var(--line);
    padding: 12px var(--pad) 16px;
    display:grid;
    gap: 10px;
    background: color-mix(in srgb, var(--off) 92%, transparent);
  }
  .mobile-panel a{
    padding: 10px 8px;
    border-radius: 12px;
    color: rgba(18,37,37,.78);
    font-weight: 900;
  }
  .mobile-panel a:hover{ background: rgba(44,135,132,.08); }
  .mobile-donate{ justify-self: start; }
  
  /* Desktop: panel sempre nascosto */
  @media (min-width: 981px){
    .mobile-panel{ display:none !important; }
  }
  
  /* -------------------------
     HERO — DONATION (TEXT LEFT / FORM RIGHT)
  ------------------------- */
  .hero{
    position: relative;
    overflow:hidden;
  }
  
  /* Fullscreen hero */
  .hero--donation{
    min-height: 100vh;
    display:flex;
    align-items:center;
    padding-top: 88px; /* header sticky */
  }
  
  /* background image */
  .hero--donation .hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .hero--donation .hero-bg img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  
  /* overlay: leggibilità (cinematic) */
  .hero--donation .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(900px 520px at 18% 38%, rgba(0,0,0,.62), transparent 62%),
      radial-gradient(900px 520px at 75% 55%, rgba(0,0,0,.45), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.68));
  }
  
  /* content grid */
  .hero--donation .hero-grid{
    position: relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 420px; /* text left / form right */
    gap: clamp(24px, 4vw, 70px);
    align-items:center;
    padding: clamp(28px, 4vw, 70px) 0;
  }
  
  /* Left copy */
  .hero--donation .hero-copy{
    color:#fff;
    max-width: 820px;
  }
  
  .kicker{
    margin:0 0 12px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(255,255,255,.90);
  }
  
  .kdot{
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--sand);
    box-shadow: 0 0 0 8px rgba(255,145,77,.18);
  }
  
  .hero-title{
    margin:0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(52px, 6.5vw, 96px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color:#fff;
    text-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  
  /* underline “really” — affidabile */
  .brush{
    display:inline;
    padding: 0 .08em;
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--sand) 85%, transparent) 62%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-radius: 10px;
  }

  .hero--donation .hero-ctaRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 1.5rem;
  }

  .hero--donation .btn-fivex1000 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--sand) 80%, #fff 20%);
    background: var(--sand);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(255, 145, 77, 0.35);
    transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  .hero--donation .btn-fivex1000:hover {
    filter: brightness(1.04);
    box-shadow: 0 18px 40px rgba(255, 145, 77, 0.42);
  }

  .hero--donation .btn-fivex1000:active {
    transform: translateY(1px);
  }
  
  /* Donation box (right) */
  .hero--donation .donation-box{
    background:#fff;
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    border: 1px solid rgba(0,0,0,.08);
  }
  
  .hero--donation .donation-toggle{
    display:flex;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    overflow:hidden;
    margin-bottom: 18px;
  }
  
  .hero--donation .donation-toggle button{
    flex:1;
    padding: 12px 10px;
    font-weight: 900;
    border: 0;
    cursor: pointer;
    background: #f3f3f0;
    color: rgba(18,37,37,.82);
    transition: background .2s ease, color .2s ease;
  }
  .hero--donation .donation-toggle button.active{
    background: var(--sand);
    color:#fff;
  }
  
  .hero--donation .donation-box h3{
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 900;
    color: rgba(18,37,37,.92);
  }
  
  .hero--donation .donation-amounts{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }
  
  .hero--donation .donation-amounts button{
    padding: 16px 0;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.12);
    background: #f7f7f4;
    font-weight: 900;
    cursor:pointer;
    transition: transform .08s ease, background .2s ease, border-color .2s ease, filter .2s ease;
  }
  .hero--donation .donation-amounts button:hover{
    filter: brightness(0.98);
  }
  .hero--donation .donation-amounts button:active{
    transform: translateY(1px);
  }
  .hero--donation .donation-amounts button.active{
    background:  var(--petrol);
    border-color:var(--petrol);
      color:#fff;
  }
  
  .hero--donation .donation-amounts .donation-other{
    grid-column: span 3;
  }
  .hero--donation .donation-amounts .donation-other[hidden]{
    display:none;
  }
  .hero--donation .donation-amounts .donation-other input{
    width: 100%;
    padding: 16px 0;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.12);
    background: #f7f7f4;
    font-weight: 900;
    text-align:center;
    outline: none;
    transition: transform .08s ease, background .2s ease, border-color .2s ease, filter .2s ease;
  }
  .hero--donation .donation-amounts .donation-other input:focus{
    border-color: var(--petrol);
    background:#fff;
  }
  .hero--donation .donation-amounts .donation-other input:active{
    transform: translateY(1px);
  }
  
  .hero--donation .donate-main{
    width:100%;
    padding: 18px;
    border: 0;
    border-radius: 16px;
    background: var(--petrol);
    color:white;
    font-weight: 950;
    font-size: 18px;
    cursor:pointer;
    transition: transform .08s ease, filter .2s ease;
  }
  .hero--donation .donate-main:hover{ filter: brightness(0.98); }
  .hero--donation .donate-main:active{ transform: translateY(1px); }
  
  .hero--donation .donation-note{
    margin: 14px 0 0;
    font-size: 13px;
    color: rgba(18,37,37,.68);
    text-align:center;
    font-weight: 800;
    line-height: 1.45;
  }
  
  /* Hero responsive */
  @media (max-width: 900px){
    .hero--donation{
      padding-top: 80px;
      align-items: flex-end;
    }
    .hero--donation .hero-grid{
      grid-template-columns: 1fr;
      padding-bottom: 34px;
    }
    .hero--donation .donation-box{ order: 2; }
    .hero--donation .hero-copy{ order: 1; }
  }
  
  /* -------------------------
     Sections
  ------------------------- */
  .section{
    padding: var(--sec) 0;
    border-top: 1px solid rgba(18,37,37,.10);
  }
  .section.section--compact{
    padding: calc(var(--sec) * 0.75) 0;
  }
  .section-accent{
    background: var(--sand);
    color: #fff;
    border-top: none;
  }
  .section-accent .section-head p{ color: rgba(255,255,255,.86); }
  
  .section-soft{
    background: rgba(44,135,132,.06);
  }
  
  .section-head{
    max-width: 920px;
  }
  .section-head--project{
    margin: 0 0 26px;
    text-align: left;
  }
  .section-head.center{
    text-align:center;
    margin: 0 auto;
  }
  .section-head h2{
    margin:0 0 12px;
    font-family: var(--font-display);
    font-size: var(--h2);
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  .section-head p{
    margin:0;
    font-size: var(--p);
    color: var(--muted);
  }
  
  .section-prose{
    max-width: 72ch;
    margin-top: 0;
    margin-bottom: 2.5rem;
  }
  .section-prose p{
    margin: 0 0 1em;
    font-size: var(--p);
    line-height: 1.7;
    color: var(--muted);
  }
  .section-prose p:last-child{ margin-bottom: 0; }
  
  .policies-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 40rem;
  }
  .policies-list a{
    display: inline-block;
    padding: 10px 0;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(18,37,37,.12);
    transition: color .2s ease, border-color .2s ease;
  }
  .policies-list a:hover{
    color: var(--accent);
    border-color: rgba(255,145,77,.4);
  }
  
  .big{
    font-size: var(--p);
    color: var(--muted);
    margin: 0;
  }
  
  /* -------------------------
     Media row
  ------------------------- */
  .media-row{
    margin-top: 22px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .media-card{
    border-radius: var(--r-lg);
    overflow:hidden;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.25);
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .media-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
  .media-thumb{
    aspect-ratio: 16/10;
    position: relative;
    background: rgba(0,0,0,.10);
  }
  .media-thumb img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .thumb-fallback{
    position:absolute;
    inset:0;
    background:
      radial-gradient(700px 300px at 30% 20%, rgba(255,255,255,.22), transparent 60%),
      linear-gradient(135deg, rgba(44,135,132,.22), rgba(0,0,0,.12));
  }
  .media-meta{
    padding: 12px 14px 14px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
  }
  .media-tag{
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px;
    opacity: .9;
  }
  .media-title{
    font-weight: 900;
    font-size: 14px;
  }
  
  /* -------------------------
     People grid
  ------------------------- */
  .people-grid{
    margin-top: 22px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .person-card{
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(18,37,37,.12);
    border-radius: var(--r-lg);
    padding: 18px 16px 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    position: relative;
    overflow:hidden;
  }
  .person-card::before {
      content: "";
      position: absolute;
      inset: -33% -40% auto auto;
      width: 240px;
      height: 240px;
      border-radius: 999px;
      background: rgba(255, 145, 77, .16);
      z-index: 99;
  }
  .avatar{
    width: 100%;
    border-radius: 18px;
    overflow:hidden;
    aspect-ratio: 4/3;
    border: 1px solid rgba(18,37,37,.10);
    background: linear-gradient(135deg, rgba(44,135,132,.18), rgba(255,145,77,.14));
  }
  .avatar img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .avatar-fallback{
    width:100%;
    height:100%;
    background:
      radial-gradient(700px 300px at 30% 20%, rgba(255,255,255,.60), transparent 60%),
      linear-gradient(135deg, rgba(44,135,132,.16), rgba(255,145,77,.12));
  }
  .person-card h3{
    margin: 12px 0 2px;
    font-family: var(--font-display);
    font-size: var(--h3);
    letter-spacing: -0.01em;
  }
  .role{
    margin: 0;
    color: rgba(18,37,37,.60);
    font-weight: 900;
  }
  .bio{
    margin: 10px 0 0;
    color: rgba(18,37,37,.72);
  }
  .person-links{
    margin-top: 12px;
    display:flex;
    gap: 10px;
  }
  .iconlink{
    width: 38px;
    height: 38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.70);
    font-weight: 900;
  }
  
  /* -------------------------
     Split editorial
  ------------------------- */
  .split{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(18px, 4vw, 52px);
    align-items:start;
  }
  .split-left h2{
    margin:0 0 10px;
    font-family: var(--font-display);
    font-size: var(--h2);
  }
  .value-badges{
    margin-top: 14px;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .vbadge{
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(18,37,37,.12);
    font-weight: 900;
    color: rgba(18,37,37,.70);
    font-size: 13px;
  }
  
  .mini-cards{ display:grid; gap: 12px; }
  .mini-card{
    border-radius: var(--r-lg);
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    padding: 16px 16px 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
  }
  .mini-card h3{
    margin:0 0 8px;
    font-family: var(--font-display);
    font-size: 18px;
  }
  .mini-card p{ margin:0; color: rgba(18,37,37,.72); }
  
  /* Values 3 */
  .values-3{
    margin-top: 28px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .value{
    border-radius: var(--r-lg);
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    padding: 18px 16px 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
  }
  .value h3{
    margin:0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 36px);
    color: var(--petrol);
  }
  .value p{ margin:0; color: rgba(18,37,37,.74); }
  
  /* -------------------------
     Project
  ------------------------- */
  .project-hero{
    display:grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(18px, 4vw, 52px);
    align-items:start;
  }
  .project-photo{
    border-radius: var(--r-lg);
    overflow:hidden;
    border: 1px solid rgba(18,37,37,.12);
    background: linear-gradient(135deg, rgba(44,135,132,.18), rgba(255,145,77,.14));
    min-height: 520px;
    position: relative;
    box-shadow: var(--shadow);
  }
  .project-photo img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .photo-fallback{
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 400px at 30% 20%, rgba(255,255,255,.60), transparent 60%),
      linear-gradient(135deg, rgba(44,135,132,.16), rgba(255,145,77,.12));
  }
  .project-copy h2{
    margin:0 0 10px;
    font-family: var(--font-display);
    font-size: var(--h2);
  }
  .project-columns{
    margin-top: 18px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .pcard{
    border-radius: 18px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    padding: 14px 14px 12px;
  }
  .pcard h3{
    margin:0 0 8px;
    font-family: var(--font-display);
    font-size: 18px;
  }
  .pcard p{ margin:0; color: rgba(18,37,37,.72); }
  .project-cta{
    margin-top: 16px;
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
  }
  
  .quote-band{
    margin-top: 26px;
    border-radius: var(--r-lg);
    background: var(--sand);
    color:#fff;
    padding: 18px 16px;
    text-align:center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 2.6vw, 32px);
  }
  
  .blueprint{ margin-top: 28px; }
  .blueprint-head{
    text-align:center;
    margin: 0 auto 14px;
    max-width: 780px;
  }
  .blueprint-head h2{
    margin:0 0 8px;
    font-family: var(--font-display);
    font-size: var(--h2);
  }
  .blueprint-head p{
    margin:0;
    color: rgba(18,37,37,.70);
    font-weight: 900;
  }
  .blueprint-card{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-radius: var(--r-lg);
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    padding: 18px 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
  }
  .blueprint-card h3{
    margin:0 0 8px;
    font-family: var(--font-display);
  }
  .blueprint-card p{
    margin:0;
    color: rgba(18,37,37,.72);
    max-width: 70ch;
  }
  
  /* -------------------------
     Transparency
  ------------------------- */
  .transparency-grid{
    margin-top: 18px;
    display:grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 14px;
    align-items: stretch;
  }
  .trans-card{
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.16);
    padding: 18px 16px;
  }
  .trans-card h3{
    margin:0 0 10px;
    font-family: var(--font-display);
    font-size: 20px;
  }
  .trans-card p{
    margin:0 0 14px;
    color: rgba(255,255,255,.86);
  }
  .trans-frame{
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    overflow:hidden;
    position: relative;
    min-height: 320px;
  }
  .frame-fallback{
    position:absolute;
    inset:0;
    padding: 18px 16px;
    color: rgba(255,255,255,.86);
  }
  .frame-fallback p{ margin:0 0 10px; }
  
  /* -------------------------
     Crew
  ------------------------- */
  .crew{
    margin-top: 22px;
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* In Dreamchasers: crew sotto le orbs occupa tutta la larghezza così le card stanno in fila */
  .dcA__layout .crew{
    grid-column: 1 / -1;
  }
  /* Stesso blocco: su desktop card un po' più piccole rispetto ai founder,
     ma su mobile mantengono la larghezza piena rettangolare come le altre */
  .dcA__layout .crew .crew-card{
    padding: 14px 12px;
  }
  @media (min-width: 981px){
    .dcA__layout .crew .crew-card{
      width: min(220px, 100%);
    }
  }
  .dcA__layout .crew .crew-avatar{
    width: 120px;
    height: 120px;
    margin: 0 auto 10px;
  }
  .dcA__layout .crew .crew-card h3{
    font-size: 17px;
    margin-bottom: 3px;
  }
  .dcA__layout .crew .crew-card .role{
    font-size: 11px;
    letter-spacing: .06em;
  }
  /* Mobile: card sotto più compatte, full‑width e con ruolo sotto al nome */
  @media (max-width: 980px){
    .dcA__layout .crew{
      flex-direction: column;
      align-items: stretch;
    }
    .dcA__layout .crew .crew-card{
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "avatar name"
        "avatar role";
      align-items: center;
      text-align: left;
      column-gap: 12px;
      row-gap: 4px;
      padding: 10px 14px;
      width: 100%;
      max-width: 100%;
    }
    .dcA__layout .crew .crew-avatar{
      grid-area: avatar;
      width: 56px;
      height: 56px;
      margin: 0;
      flex-shrink: 0;
      align-self: center;
    }
    .dcA__layout .crew .crew-card h3{
      grid-area: name;
      margin: 0;
    }
    .dcA__layout .crew .crew-card .role{
      grid-area: role;
      margin: 0;
    }
  }
  .crew-card{
    width: min(320px, 100%);
    flex-shrink: 0;
    border-radius: var(--r-lg);
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    padding: 18px 16px;
    text-align:center;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .crew-card.is-active{
    transform: translateY(-2px);
    border-color: rgba(255,214,140,.55);
    background: linear-gradient(135deg, rgba(255,145,77,.22), rgba(44,135,132,.12));
    box-shadow:
      0 18px 40px rgba(0,0,0,.14),
      0 0 0 4px rgba(255,214,140,.18);
  }
  .crew-card--ben{
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .crew-card--ben:hover,
  .crew-card--ben.is-open{
    transform: translateY(-2px);
    border-color: rgba(44,135,132,.35);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }
  .crew-avatar{
    width: 220px;
    height: 220px;
    border-radius: 999px;
    margin: 0 auto 12px;
    overflow:hidden;
    border: 1px solid rgba(18,37,37,.12);
    background: linear-gradient(135deg, rgba(44,135,132,.18), rgba(255,145,77,.14));
  }
  .crew-avatar img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .crew-card h3{
    margin:0 0 6px;
    font-family: var(--font-display);
  }
  .crew-card .role{ margin:0; color: rgba(18,37,37,.68); }
  
  .crew-card .crew-tagline{
    margin: 10px 0 0;
    font-size: 13px;
    color: rgba(18,37,37,.55);
  }
  .crew-bio{
    margin-top: 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(18,37,37,.78);
  }
  .crew-bio p{
    margin: 0 0 .9em;
  }
  .crew-bio p:last-child{
    margin-bottom: 0;
  }
  
  .crew-card--ben .crew-bio[hidden]{
    display: none;
  }
  .crew-card--ben.is-open .crew-bio{
    display: block;
    color: rgba(18,37,37,.85);
  }
  
  /* -------------------------
     Newsletter (inline)
  ------------------------- */
  .newsletter{
    border-radius: var(--r-lg);
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    padding: 22px 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    display:grid;
    gap: 14px;
    align-items:center;
    justify-items: start;
  }
  .newsletter h2{
    margin:0 0 8px;
    font-family: var(--font-display);
    font-size: var(--h2);
  }
  .newsletter p{ margin:0; color: rgba(18,37,37,.72); }
  
  .nl-form{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }
  .nl-form input{
    flex: 1 1 260px;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.9);
    outline: none;
  }
  .nl-form input:focus{
    border-color: rgba(44,135,132,.55);
    box-shadow: 0 0 0 5px rgba(44,135,132,.14);
  }
  .nl-msg{
    margin: 0;
    color: rgba(18,37,37,.70);
    font-weight: 900;
  }
  
  /* -------------------------
     Contact
  ------------------------- */
  .contact-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(18px, 4vw, 52px);
    align-items:start;
  }
  .contact-links{
    margin-top: 14px;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .link-chip{
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.72);
    font-weight: 900;
    color: rgba(18,37,37,.74);
  }
  .link-chip:hover{ background: rgba(44,135,132,.08); }
  
  .donate-box{
    margin-top: 18px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(44,135,132,.06);
    padding: 18px 16px;
  }
  
  /* -------------------------
     Modal (donate)
  ------------------------- */
  .modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.45);
    z-index: 1000;
  }
  .modal.is-open{ display:flex; }
  
  .modal__panel{
    width: min(620px, 100%);
    border-radius: 22px;
    background: var(--cream);
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 26px 70px rgba(0,0,0,.22);
    overflow: hidden;
  }
  .modal__head{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 0;
  }
  .modal__title{
    margin:0;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-size: clamp(20px, 2.3vw, 28px);
  }
  .modal__desc{
    margin: 10px 0 0;
    color: var(--muted);
    max-width: 70ch;
    line-height: 1.6;
  }
  .modal__close{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .08s ease, background .2s ease;
  }
  .modal__close:hover{ background: rgba(255,145,77,.14); }
  .modal__close:active{ transform: translateY(1px); }
  
  .modal__body{
    padding: 14px 18px 18px;
    display: grid;
    gap: 12px;
  }
  .modal__actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  /* -------------------------
     Footer
  ------------------------- */
  .site-footer{
    margin-top: 44px;
    background: var(--orange);
    color: rgba(255,255,255,.92);
    padding: 42px 0 34px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 28px;
    align-items:start;
  }
  .footer-block h4{
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #fff;
    font-size: 22px;
  }
  .footer-block p{
    margin: 0 0 8px;
    color: rgba(255,255,255,.88);
    line-height: 1.6;
  }
  .footer-block .small{ font-size: 14px; color: rgba(255,255,255,.85); }
  
  .footer-right{
    display:grid;
    gap: 12px;
    justify-items: end;
    text-align: right;
  }
  .footer-right .everywhere{
    font-weight: 900;
    letter-spacing: .02em;
    color: rgba(255,255,255,.95);
  }
  .footer-social{
    display:flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .footer-social a{
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.45);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.10);
    transition: transform .08s ease, background .2s ease;
  }
  .footer-social a:hover{ background: rgba(255,255,255,.18); }
  .footer-social a:active{ transform: translateY(1px); }
  
  .footer-links{
    display:grid;
    gap: 8px;
    justify-items: end;
  }
  .footer-links a{
    color: rgba(255,255,255,.90);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
  }
  
  .footer-bottom{
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.22);
    display:flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.88);
    font-size: 13px;
  }
  
  /* -------------------------
     Utilities
  ------------------------- */
  .hidden{ display:none !important; }
  
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }
  
  /* Reveal */
  [data-reveal]{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease;
  }
  [data-reveal].in{
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ scroll-behavior: auto !important; }
    [data-reveal]{ transition: none !important; }
    .btn, .modal__close, .footer-social a{ transition: none !important; }
  }
  
  /* -------------------------
     Responsive (layout grids)
  ------------------------- */
  @media (max-width: 980px){
    .footer-grid{ grid-template-columns: 1fr; }
    .footer-right{ justify-items: start; text-align:left; }
    .footer-links{ justify-items: start; }
    .footer-social{ justify-content: flex-start; }
    .footer-bottom{ justify-content: flex-start; }
  
    .split{ grid-template-columns: 1fr; }
    .project-hero{ grid-template-columns: 1fr; }
    .transparency-grid{ grid-template-columns: 1fr; }
    .contact-grid{ grid-template-columns: 1fr; }
    .people-grid{ grid-template-columns: 1fr; }
    .values-3{ grid-template-columns: 1fr; }
    .media-row{ grid-template-columns: 1fr; }
    .project-columns{ grid-template-columns: 1fr; }
  }
  
  /* Mobile header nav -> burger */
  @media (max-width: 980px){
    .nav{ display:none; }
    .burger{ display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap: 4px; }
  }
  
  
  /* =========================================
     ABOUT (PRO) — text + video + IG micro-cta
     ========================================= */
  
  .section-accent{
    position: relative;
    border-top: none;
    background: linear-gradient(180deg, #FF914D 0%, #FF8A40 55%, #FF914D 100%);
    color: #fff;
  }
  
  /* Variant: petrol/green accent for specific sections */
  .section-accent--petrol{
    background: linear-gradient(180deg, #115452 0%, #1a6a68 55%, #115452 100%);
  }
  .section-accent--petrol::before{
    background-image: none;
  }
  
  .section-accent--petrol,
  .section-accent--petrol p,
  .section-accent--petrol h1,
  .section-accent--petrol h2,
  .section-accent--petrol h3{
    color: rgba(255,255,255,0.92);
  }
  .section-accent--petrol .storyNow__kicker{
    color: rgba(255,255,255,0.80);
  }
  
  /* Project list card: horizontal, compact, readable on petrol */
  .project-list{
    margin-top: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .project-card{
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: min(640px, 100%);
    padding: 16px 20px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.95);
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
    text-align: left;
  }
  .project-card__thumb{
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(18,37,37,.12);
    background: linear-gradient(135deg, rgba(44,135,132,.18), rgba(255,145,77,.14));
  }
  .project-card__thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .project-card__body{
    min-width: 0;
  }
  .project-card h3{
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
  }
  .project-card__role{
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(18,37,37,.6);
  }
  .project-card__desc{
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(18,37,37,.78);
  }
  .project-card .lmPost__btn{
    display: inline-block;
    margin-top: 0;
  }
  .section-accent--petrol .project-card .lmPost__btn{
    background: #FF914D;
    border-color: rgba(255,145,77,.9);
    color: rgba(18,37,37,.95);
  }
  .section-accent--petrol .project-card .lmPost__btn:hover{
    background: #ff9f5e;
    border-color: rgba(255,145,77,1);
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
  }
  .section-accent--petrol .project-card,
  .section-accent--petrol .project-card h3,
  .section-accent--petrol .project-card p,
  .section-accent--petrol .project-card a{
    color: inherit;
  }
  .section-accent--petrol .project-card h3{ color: var(--ink); }
  .section-accent--petrol .project-card .project-card__role{ color: rgba(18,37,37,.6); }
  .section-accent--petrol .project-card .project-card__desc{ color: rgba(18,37,37,.78); }
  
  /* Project Nechishala hero with full-bleed background */
  .projectHero{
    position: relative;
    padding: clamp(90px, 18vh, 150px) 0;
    color: #fff;
    background: url("./sfondo-progetto.jpeg") center bottom / cover no-repeat fixed;
  }
  .projectHero::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(120deg, rgba(5, 24, 24, 0.486), rgba(5, 24, 24, 0.179));
  }
  .projectHero .storyHero__grid,
  .projectHero .container{
    position: relative;
    z-index: 1;
  }
  .projectHero .storyHero__lead{
    color: rgba(255,255,255,0.90);
  }
  .projectHero .storyHero__meta .storyHero__media{
    border-radius: 20px;
    overflow:hidden;
    background: rgba(0,0,0,0.35);
  }
  .projectHero .storyHero__meta iframe{
    display:block;
    width:100%;
    min-height:260px;
  }
  
  /* Large blueprint image on blueprint page */
  .blueprintImage{
    margin: 32px auto 40px;
    max-width: 1200px;
    border-radius: 18px;
    overflow: hidden;
  }
  .blueprintImage img{
    display:block;
    width:100%;
    height:auto;
  }
  
  /* una texture super leggera per togliere l'effetto "piatto" */
  .section-accent::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.10;
    background-image:
      radial-gradient(900px 500px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(900px 500px at 80% 65%, rgba(0,0,0,.18), transparent 60%);
  }
  
  .doc-pro{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: clamp(22px, 4vw, 56px);
    align-items: center;
  }
  
  .doc-pro__copy{
    max-width: 64ch;
  }
  
  .doc-pro__title{
    margin: 0 0 14px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    font-size: clamp(36px, 3.6vw, 54px);
  }
  
  .doc-pro__text{
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255,255,255,.92);
  }
  
  /* IG: micro-cta elegante */
  .doc-pro__ig{
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.95);
    font-weight: 800;
    letter-spacing: .01em;
    transition: transform .12s ease, background .2s ease, border-color .2s ease;
  }
  
  .doc-pro__ig:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.48);
  }
  
  .doc-pro__igicon{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.12);
    border: 1px solid rgba(255,255,255,.22);
  }
  
  .doc-pro__igarrow{
    opacity: .9;
    font-size: 16px;
  }
  
  /* media card */
  .doc-pro__media{
    display: grid;
    gap: 10px;
    justify-items: stretch;
  }
  
  .doc-pro__frame{
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(0,0,0,.18);
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
  }
  
  /* 16:9 pulito */
  .doc-pro__frame::before{
    content:"";
    display:block;
    padding-top: 56.25%;
  }
  
  .doc-pro__frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }
  
  .doc-pro__caption{
    font-size: 13px;
    color: rgba(255,255,255,.86);
    letter-spacing: .02em;
  }
  
  /* responsive */
  @media (max-width: 1100px){
    .doc-pro{
      grid-template-columns: 1fr 460px;
    }
  }
  
  @media (max-width: 980px){
    .doc-pro{
      grid-template-columns: 1fr;
      align-items: start;
    }
  
    .doc-pro__media{
      margin-top: 14px;
    }
  }
  
  /* ===== Dreamchasers (more professional) ===== */
  
  .people-grid{
    margin-top: 22px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .person-card{
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(18,37,37,.12);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(0,0,0,.06);
    overflow: hidden;
    display: grid;
    gap: 12px;
  }
  
  .avatar{
    border-radius: 18px;
    overflow:hidden;
    aspect-ratio: 16/11;
    border: 1px solid rgba(18,37,37,.10);
    background: rgba(0,0,0,.06);
  }
  
  .avatar img{
    width:100%;
    height:100%;
    object-fit: cover;
    filter: grayscale(1);
    transform: scale(1.01);
  }
  
  .person-head h3{
    margin: 2px 0 2px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  
  .role{
    margin: 0;
    color: rgba(18,37,37,.62);
    font-weight: 800;
    font-size: 14px;
  }
  
  /* Collapsible bio */
  .bio{
    position: relative;
    color: rgba(18,37,37,.78);
    line-height: 1.7;
    font-size: 15px;
    max-height: 6.9em; /* ~4 righe */
    overflow: hidden;
    transition: max-height .35s ease;
  }
  
  .bio p{ margin:0; }
  
  .bio::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 2.6em;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events:none;
  }
  
  .bio[aria-expanded="true"]{
    max-height: 1000px;
  }
  
  .bio[aria-expanded="true"]::after{
    display:none;
  }
  
  /* Toggle */
  .bio-toggle{
    margin-top: -2px;
    width: fit-content;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.9);
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 900;
    font-size: 13px;
    color: rgba(18,37,37,.78);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
  }
  
  .bio-toggle:hover{
    background: rgba(44,135,132,.06);
    border-color: rgba(44,135,132,.22);
  }
  
  .bio-toggle:active{ transform: translateY(1px); }
  
  .bio-toggle__less{ display:none; }
  
  .person-card.is-open .bio-toggle__more{ display:none; }
  .person-card.is-open .bio-toggle__less{ display:inline; }
  
  .bio-toggle__icon{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,145,77,.14);
    color: rgba(18,37,37,.80);
    font-weight: 900;
    transition: transform .25s ease;
  }
  
  .person-card.is-open .bio-toggle__icon{
    transform: rotate(45deg);
  }
  
  /* links */
  .person-links{
    display:flex;
    gap: 10px;
    margin-top: 2px;
  }
  
  .iconlink{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.9);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
  }
  
  .iconlink:hover{
    background: rgba(255,145,77,.10);
    border-color: rgba(255,145,77,.22);
  }
  
  @media (max-width: 980px){
    .people-grid{ grid-template-columns: 1fr; }
  }
  
  /* =========================
     NEWSLETTER STRIP (100vh + WAVE CLEAN)
     ========================= */
  /* =========================
     NEWSLETTER STRIP (NO CARD + RIGHT WAVE)
     ========================= */
  
  .nl-strip{
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 92px) 0;
  }
  
  /* ondina a destra */
  .nl-strip::after{
    content:"";
    position:absolute;
    top: 50%;
    right: clamp(-220px, -12vw, -120px);
    width: clamp(520px, 58vw, 820px);
    height: clamp(420px, 52vw, 640px);
    transform: translateY(-50%);
    border-radius: 999px;
    background:
      radial-gradient(closest-side,
        rgba(44,135,132,.14),
        rgba(44,135,132,.06) 55%,
        transparent 70%);
    pointer-events:none;
  }
  
  /* layout */
  .nl-wrap{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(18px, 4vw, 44px);
    align-items: center;
  }
  
  /* copy */
  .nl-kicker{
    margin: 0 0 12px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.70);
  }
  
  .nl-dot{
    width: 10px;
    height: 10px;
    border-radius: 99px;
    background: var(--sand);
    box-shadow: 0 0 0 8px rgba(255,145,77,.14);
  }
  
  .nl-title{
    margin: 0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: .92;
    font-size: clamp(38px, 4.2vw, 64px);
    color: var(--ink);
  }
  
  .nl-sub{
    margin: 12px 0 0;
    color: rgba(18,37,37,.68);
    font-size: 16px;
    line-height: 1.7;
    max-width: 62ch;
  }
  
  /* form area (no box) */
  .nl-form{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items:center;
  }
  
  .nl-form input{
    height: 50px;
    border-radius: 999px;
    border: 1px solid rgba(18,37,37,.16);
    background: rgba(255,255,255,.85);
    padding: 0 16px;
    outline: none;
    font-size: 15px;
  }
  
  .nl-form input:focus{
    border-color: rgba(44,135,132,.48);
    box-shadow: 0 0 0 5px rgba(44,135,132,.12);
  }
  
  .nl-btn{
    height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--sand);
    color: #fff;
    font-weight: 900;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(255,145,77,.22);
    transition: transform .08s ease, box-shadow .2s ease;
  }
  
  .nl-btn:hover{
    box-shadow: 0 18px 40px rgba(255,145,77,.30);
  }
  
  .nl-btn:active{
    transform: translateY(1px);
  }
  
  .nl-legal{
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(18,37,37,.58);
    max-width: 70ch;
  }
  
  .nl-msg{
    margin: 10px 0 0;
    font-weight: 800;
    color: rgba(18,37,37,.70);
  }
  
  /* responsive */
  @media (max-width: 900px){
    .nl-wrap{
      grid-template-columns: 1fr;
    }
    .nl-form{
      grid-template-columns: 1fr;
    }
    .nl-btn{
      width: 100%;
    }
    .nl-strip::after{
      right: -260px;
      opacity: .8;
    }
  }
  .nl-strip{
    position: relative;
    overflow: hidden;
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding: clamp(54px, 7vw, 92px) 0;
  }
  
  /* ondina più evidente e “pulita” (no effetto sporco) */
  .nl-strip::after{
    content:"";
    position:absolute;
    top: 50%;
    right: clamp(-260px, -14vw, -140px);
    width: clamp(560px, 62vw, 920px);
    height: clamp(440px, 52vw, 700px);
    transform: translateY(-50%);
    border-radius: 999px;
  
    /* più netta: un “blob” definito */
    background: rgba(44,135,132,.16);
  
    /* bordo leggero per staccarla dallo sfondo */
    outline: 1px solid rgba(44,135,132,.12);
  
    /* shadow soft ma pulita, senza gradient sporchi */
    box-shadow:
      0 30px 90px rgba(44,135,132,.12),
      0 0 0 1px rgba(255,255,255,.55) inset;
  
    pointer-events:none;
  }
  
  /* seconda ondina più piccola per dare profondità, sempre pulita */
  .nl-strip::before{
    content:"";
    position:absolute;
    top: 54%;
    right: clamp(-210px, -12vw, -110px);
    width: clamp(420px, 44vw, 680px);
    height: clamp(320px, 36vw, 520px);
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(44,135,132,.10);
    outline: 1px solid rgba(44,135,132,.10);
    pointer-events:none;
  }
  
  /* layout */
  .nl-wrap{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(18px, 4vw, 44px);
    align-items: center;
  }
  
  /* responsive */
  @media (max-width: 900px){
    .nl-strip{
      min-height: auto; /* su mobile spesso meglio non forzare 100vh */
      padding: 64px 0;
    }
    .nl-wrap{
      grid-template-columns: 1fr;
    }
    .nl-form{
      grid-template-columns: 1fr;
    }
    .nl-btn{ width:100%; }
  
    .nl-strip::after{ right: -320px; }
    .nl-strip::before{ right: -280px; }
  }
  
  /* =========================
     FOOT / CONTACT (PETROL)
     ========================= */
  
  .foot{
    background: var(--petrol);
    color: rgba(255,255,255,.92);
    padding: clamp(64px, 7vw, 96px) 0 22px;
    border-top: none;
    position: relative;
    overflow: hidden;
  }
  
  /* accento “pulito” sullo sfondo */
  .foot::after{
    content:"";
    position:absolute;
    top: 50%;
    right: clamp(-280px, -18vw, -160px);
    width: clamp(560px, 60vw, 920px);
    height: clamp(440px, 48vw, 720px);
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    outline: 1px solid rgba(255,255,255,.10);
    pointer-events:none;
  }
  
  .foot-grid{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(22px, 4vw, 54px);
    align-items:start;
  }
  
  .foot-kicker{
    margin: 0 0 12px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(255,255,255,.82);
  }
  .foot-dot{
    width: 9px; height: 9px;
    border-radius: 99px;
    background: var(--sand);
    box-shadow: 0 0 0 8px rgba(255,145,77,.18);
  }
  
  .foot-title{
    margin: 0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.01em;
  }
  
  .foot-sub{
    margin: 0 0 18px;
    color: rgba(255,255,255,.82);
    max-width: 62ch;
  }
  
  .foot-chips{
    display:grid;
    gap: 12px;
    margin-bottom: 18px;
  }
  
  .foot-chip{
    display:flex;
    align-items:baseline;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.10);
    color: rgba(255,255,255,.92);
    transition: transform .12s ease, background .2s ease, border-color .2s ease;
  }
  .foot-chip:hover{
    background: rgba(0,0,0,.16);
    border-color: rgba(255,255,255,.26);
    transform: translateY(-1px);
  }
  .chip-label{
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(255,255,255,.70);
  }
  .chip-value{
    font-weight: 800;
  }
  
  .foot-donate{
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.10);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
  }
  .donate-head h3{
    margin:0 0 6px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-size: 20px;
    letter-spacing: -0.01em;
  }
  .donate-head p{
    margin:0 0 14px;
    color: rgba(255,255,255,.78);
  }
  .foot-donate .btn-primary{
    width: fit-content;
  }
  .foot-donate .donate-note{
    margin: 12px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    font-weight: 700;
  }
  
  /* right column */
  .foot-right{
    display:grid;
    gap: 14px;
  }
  
  .foot-card{
    border-radius: 22px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.10);
  }
  .foot-card h3{
    margin: 0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    letter-spacing: -0.01em;
    font-size: 18px;
  }
  .foot-card p{
    margin: 0 0 8px;
    color: rgba(255,255,255,.82);
  }
  .foot-card .mono{
    margin: 0;
    color: rgba(255,255,255,.78);
    font-weight: 700;
    letter-spacing: .02em;
  }
  
  .foot-links{
    border-radius: 22px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.10);
  }
  .foot-links h3{
    margin: 0 0 12px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-size: 18px;
  }
  
  .foot-social{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  
  .sbtn{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: transform .12s ease, background .2s ease, border-color .2s ease;
  }
  .sbtn:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.32);
    transform: translateY(-1px);
  }
  .sbtn svg{
    width: 18px;
    height: 18px;
    fill: rgba(255,255,255,.88);
  }
  
  .foot-legal{
    display:flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .foot-legal a{
    color: rgba(255,255,255,.82);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
    font-size: 13px;
  }
  .foot-legal a:hover{
    color: #fff;
  }
  
  /* bottom bar */
  .foot-bottom{
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.16);
    display:flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .foot-bottom p{
    margin:0;
  }
  .foot-bottom .muted{
    color: rgba(255,255,255,.72);
    font-weight: 700;
  }
  
  /* responsive */
  @media (max-width: 980px){
    .foot-grid{ grid-template-columns: 1fr; }
  }
  
  /* =========================
     VALUES (new, more emotional)
     ========================= */
  
  .values{
    background: rgba(44,135,132,.06);
  }
  
  .values-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(22px, 4vw, 54px);
    align-items:start;
  }
  
  .values-left{
    max-width: 62ch;
  }
  
  .values-kicker{
    margin: 0 0 12px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.70);
  }
  
  .values-title{
    margin: 0 0 12px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: .95;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  
  .values-title .u{
    position: relative;
    display:inline-block;
    padding: 0 .06em;
    background: linear-gradient(transparent 62%, rgba(255,145,77,.30) 62%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  
  .values-lead{
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(18,37,37,.72);
  }
  
  .values-pillrow{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
  }
  
  .vpill{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.70);
    font-weight: 900;
    color: rgba(18,37,37,.72);
    font-size: 13px;
  }
  
  .vpill-accent{
    background: rgba(255,145,77,.18);
    border-color: rgba(255,145,77,.35);
    color: rgba(18,37,37,.82);
  }
  
  .values-points{
    display:grid;
    gap: 12px;
    margin-top: 8px;
  }
  
  .vpoint{
    display:grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items:start;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(18,37,37,.10);
    background: rgba(255,255,255,.78);
    box-shadow: 0 12px 28px rgba(0,0,0,.05);
  }
  
  .vicon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(44,135,132,.10);
    color: rgba(18,37,37,.85);
    font-weight: 900;
  }
  
  .vpoint strong{
    display:block;
    font-weight: 900;
    color: rgba(18,37,37,.90);
    margin-bottom: 2px;
  }
  
  .vpoint span{
    color: rgba(18,37,37,.70);
    font-weight: 600;
  }
  
  /* RIGHT cards */
  .values-right{
    display:grid;
    gap: 12px;
  }
  
  .pcard{
    border-radius: 22px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.82);
    padding: 18px 18px 16px;
    box-shadow: 0 14px 34px rgba(0,0,0,.06);
    position: relative;
    overflow:hidden;
  }
  
  .pcard::before{
    content:"";
    position:absolute;
    inset: -60% -35% auto auto;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    opacity: .55;
    pointer-events:none;
  }
  
  .pcard-1::before{ background: rgba(255,145,77,.22); }
  .pcard-2::before{ background: rgba(44,135,132,.18); }
  .pcard-3::before{ background: rgba(18,37,37,.12); }
  
  .phead{
    display:flex;
    align-items:baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  
  .pnum{
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(18,37,37,.55);
  }
  
  .pcard h3{
    margin:0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: rgba(18,37,37,.92);
  }
  
  .pcard p{
    margin:0;
    color: rgba(18,37,37,.72);
    line-height: 1.7;
    font-weight: 600;
  }
  
  /* VALUES band */
  .values-band{
    margin-top: clamp(22px, 3.5vw, 34px);
    border-radius: 26px;
    border: 1px solid rgba(18,37,37,.10);
    background: rgba(255,255,255,.70);
    box-shadow: 0 16px 46px rgba(0,0,0,.06);
    padding: clamp(18px, 3vw, 24px);
    position: relative;
    overflow:hidden;
  }
  
  .values-band::after{
    content:"";
    position:absolute;
    top: 50%;
    right: -220px;
    width: 520px;
    height: 520px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(44,135,132,.10);
    pointer-events:none;
  }
  
  .band-head{
    position: relative;
    z-index: 1;
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  
  .band-head h3{
    margin:0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: rgba(18,37,37,.92);
  }
  
  .band-head p{
    margin:0;
    color: rgba(18,37,37,.68);
    font-weight: 700;
  }
  
  .band-grid{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .vcard{
    border-radius: 22px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.86);
    padding: 18px 18px 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.05);
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  }
  
  .vcard:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
    background: rgba(255,255,255,.92);
  }
  
  .vcard::before{
    content:"";
    position:absolute;
    inset: -55% -35% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    opacity: .55;
    pointer-events:none;
  }
  
  .vcard-1::before{ background: rgba(255,145,77,.18); }
  .vcard-2::before{ background: rgba(44,135,132,.14); }
  .vcard-3::before{ background: rgba(18,37,37,.10); }
  
  .vcard h4{
    margin:0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -0.01em;
    color: rgba(18,37,37,.92);
  }
  
  .vcard p{
    margin:0;
    color: rgba(18,37,37,.72);
    line-height: 1.7;
    font-weight: 600;
  }
  
  /* mini accent line sotto il titolo (molto subtle) */
  .vcard h4::after{
    content:"";
    display:block;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    margin-top: 10px;
    background: rgba(255,145,77,.35);
  }
  
  /* =========================
     RESPONSIVE – VALUES
     ========================= */
  
  @media (max-width: 980px){
    .values-grid{
      grid-template-columns: 1fr;
    }
  
    .values-left{
      max-width: 70ch;
    }
  
    .values-right{
      order: 2;
    }
  
    .values-band{
      margin-top: 18px;
    }
  
    .band-grid{
      grid-template-columns: 1fr;
    }
  
    .vpoint{
      grid-template-columns: 36px 1fr;
    }
  
    .vicon{
      width: 36px;
      height: 36px;
      border-radius: 12px;
    }
  }
  
  @media (max-width: 520px){
    .values-title{
      font-size: clamp(30px, 8vw, 44px);
    }
  
    .values-lead{
      font-size: 17px;
    }
  
    .pcard{
      padding: 16px 16px 14px;
      border-radius: 20px;
    }
  
    .vcard{
      padding: 16px 16px 14px;
      border-radius: 20px;
    }
  
    .values-band{
      border-radius: 22px;
    }
  }
  
  /* =========================
     HOW WE WORK (2-col + tabs)
     ========================= */
  
  .howwork{
    background: rgba(44,135,132,.06);
  }
  
  .howwork-head{
    max-width: 74ch;
    margin-bottom: clamp(16px, 2.4vw, 22px);
  }
  
  .howwork-kicker{
    margin: 0 0 10px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.70);
  }
  
  .howwork-title{
    margin: 0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  
  .howwork-lead{
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(18,37,37,.72);
    font-weight: 600;
  }
  
  .howwork-grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr; /* left text bigger, right tabs tighter */
    gap: clamp(18px, 3.2vw, 34px);
    align-items: start;
  }
  
  @media (max-width: 980px){
    .howwork-grid{ grid-template-columns: 1fr; }
  }
  
  /* LEFT */
  .howwork-left{
    max-width: 70ch;
  }
  
  .howwork-left__title{
    margin: 0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing: -0.01em;
    color: rgba(18,37,37,.92);
  }
  
  .howwork-left__copy{
    color: rgba(18,37,37,.76);
    font-weight: 600;
    line-height: 1.85;
    font-size: 16px;
  }
  
  .howwork-left__copy p{
    margin: 0 0 14px;
  }
  
  .howwork-left__copy p:last-child{
    margin-bottom: 0;
  }
  
  .howwork-left__pillrow{
    margin-top: 14px;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .howpill{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.72);
    font-weight: 900;
    color: rgba(18,37,37,.72);
    font-size: 13px;
  }
  
  .howpill--accent{
    background: rgba(255,145,77,.18);
    border-color: rgba(255,145,77,.35);
    color: rgba(18,37,37,.82);
  }
  
  /* RIGHT: tabs */
  .howwork-right{
    display:grid;
    gap: 12px;
  }
  
  /* Tab card */
  .howtab{
    border-radius: 22px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 34px rgba(0,0,0,.06);
    overflow: hidden;
    position: relative;
  }
  
  .howtab::before{
    content:"";
    position:absolute;
    inset: -55% -35% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    opacity: .55;
    pointer-events:none;
    background: rgba(255,145,77,.18);
  }
  
  .howtab:nth-child(2)::before{ background: rgba(44,135,132,.16); }
  .howtab:nth-child(3)::before{ background: rgba(18,37,37,.10); }
  
  .howtab-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px;
  }
  
  .howtab-meta{
    display:flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }
  
  .howtab-num{
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .10em;
    color: rgba(18,37,37,.55);
  }
  
  .howtab-title{
    margin:0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: rgba(18,37,37,.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Button */
  .howtab-btn{
    flex: 0 0 auto;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.75);
    color: rgba(18,37,37,.82);
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
  }
  
  .howtab-btn:hover{
    background: rgba(255,145,77,.12);
    border-color: rgba(255,145,77,.30);
  }
  
  .howtab-btn:active{
    transform: translateY(1px);
  }
  
  /* Collapsible body */
  .howtab-body{
    position: relative;
    padding: 0 16px 16px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease;
  }
  
  .howtab-text{
    color: rgba(18,37,37,.74);
    font-weight: 600;
    line-height: 1.8;
    font-size: 15.5px;
    padding-top: 2px;
  }
  
  .howtab-text p{
    margin: 0 0 12px;
  }
  
  .howtab-text p:last-child{
    margin-bottom: 0;
  }
  
  .howtab-cta{
    margin-top: 12px;
  }
  
  /* Open state */
  .howtab.is-open .howtab-body{
    max-height: 1200px;
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .howtab-body{ transition: none !important; }
    .howtab-btn{ transition: none !important; }
  }
  
  /* =========================
     ABOUT / OUR STORY PAGE
     ========================= */
  
  .storyHero{
    background: var(--off);
  }
  
  .storyHero__grid{
    display:grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
    gap: clamp(22px, 4vw, 40px);
    align-items:flex-start;
  }
  
  .storyHero__kicker{
    margin: 0 0 10px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.70);
  }
  
  .storyHero__title{
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 5vw, 68px);
    line-height: .95;
    letter-spacing: -0.02em;
    color: var(--off);
  }
  .storyHero__title.off{
    color: var(--ink);
  }
  .storyHero__lead{
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(18,37,37,.78);
    font-weight: 600;
    max-width: 48ch;
  }
  
  .storyHero__meta{
    border-radius: 22px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
    padding: 18px 18px 20px;
  }
  
  .storyHero__tag{
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(18,37,37,.7);
  }
  
  .storyHero__note{
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(18,37,37,.8);
  }
  
  .storyHero__pull{
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(18,37,37,.75);
  }
  
  .storyHero__pullEm{
    display:inline-block;
    margin-top: 2px;
    font-weight: 800;
    color: var(--petrol);
  }
  
  @media (max-width: 900px){
    .storyHero__grid{
      grid-template-columns: 1fr;
    }
  }
  
  /* Timeline block */
  .storyTimeline{
    background: var(--off);
  }
  
  .storyTimeline__head{
    max-width: 70ch;
    margin-bottom: clamp(20px, 3vw, 30px);
  }
  
  .storyTimeline__kicker{
    margin: 0 0 10px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.70);
  }
  
  .storyTimeline__title{
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
  }
  
  .storyTimeline__grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(16px, 2.6vw, 26px);
  }
  
  /* Un po' di spazio sotto le schede della timeline su about */
  .storyTimeline{
    padding-bottom: clamp(40px, 7vw, 72px);
  }
  
  @media (max-width: 960px){
    .storyTimeline__grid{
      grid-template-columns: 1fr;
    }
  }
  
  .storyCard{
    border-radius: 20px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 42px rgba(0,0,0,.06);
    padding: 18px 18px 20px;
    display:flex;
    flex-direction:column;
    gap: 8px;
  }
  
  .storyCard.is-hover{
    border-color: rgba(255,145,77,.45);
    box-shadow: 0 18px 52px rgba(255,145,77,.16);
    background: linear-gradient(150deg, rgba(255,145,77,.08), rgba(44,135,132,.04));
  }
  
  .storyCard__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  
  .storyCard__step{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(18,37,37,.65);
  }
  
  .storyCard__year{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(18,37,37,.55);
  }
  
  .storyCard__title{
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--ink);
  }
  
  .storyCard__body{
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(18,37,37,.78);
  }

  .storyCard__body p{
    margin: 0 0 12px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  .storyCard__body p:last-child{
    margin-bottom: 0;
  }
  
  /* Today block */
  .storyNow{
    background: rgba(44,135,132,.06);
  }
  
  .storyNow__grid{
    display:grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0,1.1fr);
    gap: clamp(18px, 3vw, 32px);
    align-items:start;
  }
  
  @media (max-width: 900px){
    .storyNow__grid{
      grid-template-columns: 1fr;
    }
  }
  
  .storyNow__kicker{
    margin: 0 0 10px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.70);
  }
  
  .storyNow__title{
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  
  .storyNow__lead{
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(18,37,37,.78);
    font-weight: 600;
  }
  
  .storyNow__pillrow{
    display:grid;
    gap: 12px;
  }
  
  .storyPill{
    border-radius: 18px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.92);
    padding: 14px 16px 16px;
  }
  
  .storyPill--accent{
    border-color: rgba(44,135,132,.45);
    background: linear-gradient(145deg, rgba(44,135,132,.08), rgba(255,255,255,.96));
  }
  
  .storyPill h3{
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  
  .storyPill p{
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(18,37,37,.80);
  }
  
  /* Collapsible body — FIXED */
  .howtab-body{
    display: none;
    padding: 0 16px 18px;
  }
  
  .howtab.is-open .howtab-body{
    display: block;
    animation: howtabFade .25s ease;
  }
  
  @keyframes howtabFade{
    from{
      opacity: 0;
      transform: translateY(-4px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* =========================
     FLOATING DONATE PILL
     ========================= */
  
  .donate-pill{
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(18px);
    z-index: 999;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  
    padding: 12px 18px;
    border-radius: 999px;
  
    background: var(--petrol);
    color: #fff;
    font-weight: 900;
    letter-spacing: .01em;
  
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 18px 46px rgba(0,0,0,.18);
  
    opacity: 0;
    pointer-events: none;
  
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  
  .donate-pill:hover{
    filter: brightness(1.05);
    box-shadow: 0 22px 56px rgba(0,0,0,.22);
  }
  
  .donate-pill:active{
    transform: translateX(-50%) translateY(20px);
  }
  
  /* Visible state */
  .donate-pill.is-visible{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  
  /* Optional: un piccolo “dot” a sinistra */
  .donate-pill::before{
    content:"";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 0 6px rgba(255,255,255,.16);
  }
  
  /* Mobile spacing */
  @media (max-width: 520px){
    .donate-pill{
      bottom: 12px;
      padding: 12px 16px;
    }
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .donate-pill{ transition: none !important; }
  }
  
  /* ====== GSAP helpers ====== */
  .hero--donation .hero-copy,
  .hero--donation .donation-box{
    will-change: transform, opacity, filter;
  }
  
  .hero--donation .hero-title{
    will-change: transform, opacity;
  }
  
  /* underline "really" controllabile via GSAP */
  .hero--donation .brush{
    position: relative;
    display: inline-block;
    z-index: 0;
  }
  
  .hero--donation .brush::after{
    content:"";
    position:absolute;
    left:-2%;
    right:-2%;
    bottom:.12em;
    height:.44em;
    z-index:-1;
    background: color-mix(in srgb, var(--sand) 78%, transparent);
    border-radius: 999px;
  
    /* trucco: linea che si “disegna” */
    transform-origin: left center;
    transform: scaleX(0) rotate(-1deg);
  }
  
  /* leggero glow quando la donate box è "active" */
  .donation-box.is-active{
    box-shadow: 0 34px 90px rgba(0,0,0,.30);
  }
  
  /* Optional: bottone Donate now più “pressabile” */
  .hero--donation .donate-main{
    will-change: transform;
  }
  
  .brush{
    position: relative;
    display: inline-block;
    z-index: 0;
    padding: 0 .06em;
  }
  
  .brush-line{
    position:absolute;
    left:-2%;
    right:-2%;
    bottom:.12em;
    height:.44em;
    z-index:-1;
    background: color-mix(in srgb, var(--sand) 78%, transparent);
    border-radius: 999px;
    transform-origin: left center;
    transform: scaleX(0) rotate(-1deg);
  }
  
  /* =========================
     ROADMAP (petrol section)
     ========================= */
  
  .roadmap{
    background: var(--petrol);
    color: #fff;
    padding: clamp(70px, 9vw, 120px) 0;
    position: relative;
    overflow: hidden;
  }
  
  .roadmap::before{
    content:"";
    position:absolute;
    right:-220px;
    top: 50%;
    transform: translateY(-50%);
    width: 560px;
    height: 560px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    filter: blur(0px);
    pointer-events:none;
  }
  
  .roadmap::after{
    content:"";
    position:absolute;
    left:-220px;
    bottom:-260px;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    background: rgba(0,0,0,.14);
    pointer-events:none;
  }
  
  .roadmap-inner{
    position: relative;
    z-index: 1;
  }
  
  .roadmap-head{
    max-width: 72ch;
    margin-bottom: clamp(26px, 4vw, 44px);
  }
  
  .roadmap-kicker{
    margin: 0 0 12px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(255,255,255,.86);
  }
  
  .roadmap-title{
    margin:0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(34px, 4.8vw, 60px);
    line-height: .95;
  }
  
  .roadmap-sub{
    margin:0;
    color: rgba(255,255,255,.86);
    font-weight: 600;
    line-height: 1.7;
    max-width: 62ch;
  }
  
  .roadmap-grid{
    display:grid;
    grid-template-columns: 340px 1fr;
    gap: clamp(22px, 4vw, 56px);
    align-items:start;
  }
  
  .roadmap-aside{
    display:grid;
    gap: 12px;
  }
  
  .roadmap-stat{
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.12);
    padding: 16px 16px 14px;
  }
  
  .roadmap-stat__num{
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.02em;
  }
  
  .roadmap-stat__txt{
    margin-top: 2px;
    color: rgba(255,255,255,.86);
    font-weight: 700;
  }
  
  .roadmap-note{
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.10);
    padding: 16px;
    color: rgba(255,255,255,.88);
    font-weight: 700;
    line-height: 1.6;
  }
  
  /* Timeline */
  .timeline{
    position: relative;
    display:grid;
    gap: 14px;
    padding-left: 26px;
  }
  
  .timeline-line{
    position:absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(255,255,255,.22);
    transform-origin: top;
    transform: scaleY(0);
  }
  
  .milestone{
    position: relative;
    display:grid;
    grid-template-columns: 18px 1fr;
    gap: 16px;
    align-items:start;
  }
  
  .milestone::before{
    content: attr(data-step);
    position:absolute;
    left: -62px;
    top: 18px;
    font-weight: 900;
    letter-spacing: .12em;
    font-size: 12px;
    color: rgba(255,255,255,.70);
  }
  
  .milestone-dot{
    width: 16px;
    height: 16px;
    border-radius: 99px;
    background: rgba(255,255,255,.28);
    border: 2px solid rgba(255,255,255,.28);
    box-shadow: 0 0 0 0 rgba(255,255,255,.18);
    transform: scale(.85);
  }
  
  .milestone-card{
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    padding: 18px 18px 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
  }
  
  .milestone-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  
  .milestone-date{
    color: rgba(255,255,255,.80);
    font-weight: 800;
    font-size: 13px;
  }
  
  .milestone-title{
    margin:0 0 8px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 22px;
  }
  
  .milestone-text{
    margin:0;
    color: rgba(255,255,255,.86);
    font-weight: 600;
    line-height: 1.7;
  }
  
  .milestone-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(0,0,0,.16);
  }
  
  .milestone-badge.done{
    background: rgba(255,145,77,.22);
    border-color: rgba(255,145,77,.34);
  }
  .milestone-badge.progress{
    background: rgba(255,210,63,.20);
    border-color: rgba(255,210,63,.32);
  }
  .milestone-badge.next{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
  }
  
  /* CTA pill */
  .roadmap-cta{
    margin-top: clamp(22px, 4vw, 38px);
    display:flex;
    align-items:center;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  .roadmap-pill{
    display:inline-flex;
    align-items:center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.95);
    font-weight: 900;
    letter-spacing: .02em;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
  }
  
  .roadmap-pill:hover{
    background: rgba(0,0,0,.26);
    border-color: rgba(255,255,255,.30);
  }
  
  .roadmap-pill:active{
    transform: translateY(1px);
  }
  
  .roadmap-pill__arrow{
    opacity:.9;
  }
  
  .roadmap-cta__hint{
    color: rgba(255,255,255,.78);
    font-weight: 700;
  }
  
  /* Mobile */
  @media (max-width: 980px){
    .roadmap-grid{
      grid-template-columns: 1fr;
    }
    .timeline{
      padding-left: 22px;
    }
    .milestone::before{
      display:none;
    }
  }
  
  
  /* =========================
     CANC
     ========================= */
  
     /* =========================
     DREAMCHASERS: EUROPE MAP + INTERACTION
     ========================= */
  
  .dreamchasers .dream-head{
    max-width: 72ch;
  }
  
  .dreamchasers .dream-sub{
    margin: 10px 0 0;
    color: rgba(18,37,37,.72);
    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
  }
  
  .dream-layout{
    margin-top: clamp(18px, 3vw, 28px);
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(18px, 3.6vw, 44px);
    align-items: start;
  }
  
  @media (max-width: 980px){
    .dream-layout{
      grid-template-columns: 1fr;
    }
  }
  
  /* Map container */
  .europe-wrap{
    position: relative;
    border-radius: 26px;
    border: 1px solid rgba(18,37,37,.10);
    background: rgba(255,255,255,.60);
    box-shadow: 0 18px 54px rgba(0,0,0,.06);
    overflow: hidden;
  }
  
  .europe-svg{
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* land */
  .eu-land{
    fill: url(#euFill);
    stroke: rgba(18,37,37,.12);
    stroke-width: 2;
  }
  
  .eu-stroke{
    fill: transparent;
    stroke: rgba(18,37,37,.14);
    stroke-width: 2;
  }
  
  /* pins */
  .pin{
    cursor: pointer;
    transform-origin: center;
  }
  
  .pin-glow{
    fill: rgba(255,145,77,.24);
  }
  
  .pin-mark{
    fill: var(--sand);
    stroke: rgba(255,255,255,.92);
    stroke-width: 2;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  }
  
  .pin-label{
    font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    fill: rgba(255,255,255,.92);
    letter-spacing: .02em;
    opacity: .90;
    text-shadow: 0 10px 28px rgba(0,0,0,.55);
  }
  
  .pin:hover .pin-mark{
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.28));
  }
  
  .pin:focus{
    outline: none;
  }
  
  .pin:focus .pin-mark{
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.28));
  }
  
  .map-hint{
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.28);
    color: rgba(255,255,255,.90);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }
  
  /* Cards layout (more pro) */
  .people-grid--dream{
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .person-card--compact{
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(18,37,37,.10);
    box-shadow: 0 16px 44px rgba(0,0,0,.06);
    padding: 16px;
    border-radius: 22px;
  }
  
  .person-card--compact .avatar{
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(18,37,37,.10);
    background: rgba(44,135,132,.08);
  }
  
  .person-card--compact .pmeta{
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: center;
  }
  
  .person-card--compact h3{
    margin: 0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  
  .person-card--compact .role{
    margin: 4px 0 0;
    grid-column: 1 / -1;
    color: rgba(18,37,37,.62);
    font-weight: 800;
  }
  
  .bio-toggle{
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.85);
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
  }
  
  .bio-toggle:hover{
    background: rgba(44,135,132,.08);
    border-color: rgba(44,135,132,.25);
  }
  
  .bio-toggle:active{
    transform: translateY(1px);
  }
  
  /* collapsible bio */
  .bio-collapsible{
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  
  .bio-collapsible .bio{
    margin: 12px 0 0;
    color: rgba(18,37,37,.74);
    line-height: 1.7;
    font-weight: 600;
  }
  
  /* Active selection (from map) */
  .person-card.is-active{
    border-color: rgba(255,145,77,.38);
    box-shadow: 0 24px 70px rgba(255,145,77,.14);
  }
  
  .person-card.is-active h3{
    color: rgba(18,37,37,.95);
  }
  
  .pin.is-active .pin-mark{
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.32));
    transform: translateY(-3px) scale(1.05);
  }
  
  .pin.is-active .pin-glow{
    fill: rgba(255,145,77,.38);
  }
  
  .eu-land2{
    fill: url(#land2);
    stroke: rgba(18,37,37,.14);
    stroke-width: 2;
  }
  
  .eu-stroke2{
    fill: transparent;
    stroke: rgba(18,37,37,.12);
    stroke-width: 2;
  }
  
  .eu-isle{
    fill: rgba(255,255,255,.88);
    stroke: rgba(18,37,37,.14);
    stroke-width: 2;
  }
  
  /* piccoli highlight “geografici” che rendono subito Europa leggibile */
  .eu-accent{
    fill: rgba(255,145,77,.10);
    stroke: rgba(255,145,77,.22);
    stroke-width: 2;
  }
  
  /* =========================================================
     Dreamchasers v2 — CSS (dc2)
     ========================================================= */
  
  .dc2{
    --dc2-ink: #122525;
    --dc2-sand: #ff914d;
    --dc2-teal: #2c8784;
  
    --dc2-ink-2: rgba(18,37,37,.72);
    --dc2-ink-3: rgba(18,37,37,.56);
  
    --dc2-bg: rgba(255,255,255,.78);
    --dc2-bg-2: rgba(255,255,255,.88);
    --dc2-border: rgba(18,37,37,.12);
  
    --dc2-r: 24px;
    --dc2-r-lg: 32px;
  
    --dc2-shadow: 0 16px 44px rgba(0,0,0,.06);
    --dc2-shadow-2: 0 22px 58px rgba(0,0,0,.08);
    --dc2-glow: 0 26px 74px rgba(255,145,77,.14);
  
    position: relative;
    overflow: hidden;
  }
  
  .dc2::before{
    content:"";
    position:absolute;
    inset:-24%;
    pointer-events:none;
    opacity:.55;
    background:
      radial-gradient(900px 520px at 18% 28%, rgba(255,145,77,.16), transparent 62%),
      radial-gradient(900px 520px at 84% 72%, rgba(44,135,132,.12), transparent 64%);
  }
  
  .dc2__container{
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) 20px;
  }
  
  .dc2__head{
    max-width: 80ch;
  }
  
  .dc2__title{
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.02em;
    color: var(--dc2-ink);
  }
  
  .dc2__lead{
    margin: 12px 0 0;
    color: var(--dc2-ink-2);
    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
  }
  
  /* layout */
  .dc2__grid{
    margin-top: clamp(18px, 3vw, 28px);
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(18px, 3.6vw, 44px);
    align-items: start;
  }
  
  @media (max-width: 980px){
    .dc2__grid{ grid-template-columns: 1fr; }
  }
  
  /* map panel */
  .dc2__mapPanel{
    position: relative;
    border-radius: var(--dc2-r-lg);
    border: 1px solid var(--dc2-border);
    background: var(--dc2-bg);
    box-shadow: var(--dc2-shadow);
    overflow: hidden;
  }
  
  .dc2__mapPanel::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16) 56%, rgba(255,255,255,.32));
  }
  
  .dc2__svg{
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display:block;
  }
  
  /* land styling */
  .dc2__land{
    fill: rgba(255,255,255,.92);
    stroke: rgba(18,37,37,.16);
    stroke-width: 3;
  }
  
  .dc2__isle{
    fill: rgba(255,255,255,.92);
    stroke: rgba(18,37,37,.16);
    stroke-width: 3;
  }
  
  .dc2__coast{
    fill: none;
    stroke: rgba(18,37,37,.12);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .9;
  }
  
  .dc2__accent{
    fill:none;
    stroke: rgba(255,145,77,.28);
    stroke-width: 10;
    stroke-linecap: round;
    opacity:.55;
  }
  
  /* map hint */
  .dc2__mapHint{
    position:absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.30);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }
  
  .dc2__mapHintDot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dc2-sand);
    box-shadow: 0 0 0 6px rgba(255,145,77,.22);
  }
  
  /* pins */
  .dc2__pin{ cursor: pointer; outline: none; }
  .dc2__pinHalo{
    fill: rgba(255,145,77,.24);
    opacity: 0;
    transform: scale(.78);
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease;
  }
  .dc2__pinBody{
    fill: var(--dc2-sand);
    stroke: rgba(255,255,255,.92);
    stroke-width: 2;
    filter: url(#dc2Inner);
    transition: transform .18s ease, filter .18s ease;
  }
  .dc2__pinDot{
    fill: rgba(255,255,255,.92);
    opacity: .95;
    transition: transform .18s ease;
  }
  .dc2__pinLabel{
    font-family: inherit;
    font-weight: 900;
    font-size: 16px;
    fill: rgba(255,255,255,.94);
    opacity: .92;
    paint-order: stroke;
    stroke: rgba(0,0,0,.28);
    stroke-width: 4px;
    letter-spacing: .02em;
  }
  
  .dc2__pin:hover .dc2__pinHalo,
  .dc2__pin:focus-visible .dc2__pinHalo{
    opacity: 1;
    transform: scale(1);
    filter: url(#dc2Glow);
  }
  
  .dc2__pin:hover .dc2__pinBody,
  .dc2__pin:focus-visible .dc2__pinBody{
    transform: translateY(-2px) scale(1.05);
    filter: url(#dc2Glow);
  }
  
  .dc2__pin:hover .dc2__pinDot,
  .dc2__pin:focus-visible .dc2__pinDot{
    transform: translateY(-1px);
  }
  
  /* active pin state (set by JS) */
  .dc2__pin.is-active .dc2__pinHalo{
    opacity: 1;
    transform: scale(1.08);
    filter: url(#dc2Glow);
  }
  .dc2__pin.is-active .dc2__pinBody{
    transform: translateY(-3px) scale(1.08);
    filter: url(#dc2Glow);
  }
  
  /* cards */
  .dc2__cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .dc2__card{
    position: relative;
    border-radius: var(--dc2-r-lg);
    border: 1px solid var(--dc2-border);
    background: var(--dc2-bg);
    box-shadow: var(--dc2-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  }
  
  .dc2__card::before{
    content:"";
    position:absolute;
    inset: -58% -38% auto auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(255,145,77,.16);
    pointer-events:none;
  }
  
  .dc2__card::after{
    content:"";
    position:absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 999px;
    background: rgba(44,135,132,.22);
    opacity: .9;
    pointer-events:none;
  }
  
  .dc2__card:hover{
    transform: translateY(-2px);
    box-shadow: var(--dc2-shadow-2);
    background: var(--dc2-bg-2);
  }
  
  .dc2__cardImg{
    border-bottom: 1px solid var(--dc2-border);
    background: rgba(44,135,132,.10);
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  
  .dc2__cardImg img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
    transition: transform .35s ease;
  }
  
  .dc2__card:hover .dc2__cardImg img{
    transform: scale(1.06);
  }
  
  .dc2__cardMeta{ padding: 16px; }
  
  .dc2__cardTop{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  
  .dc2__cardName{
    margin: 0;
    color: var(--dc2-ink);
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  
  .dc2__cardTag{
    display:inline-flex;
    align-items:center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--dc2-border);
    background: rgba(255,255,255,.72);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(18,37,37,.74);
  }
  
  .dc2__cardRole{
    margin: 8px 0 0;
    color: var(--dc2-ink-3);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .10em;
    text-transform: uppercase;
  }
  
  .dc2__cardMicro{
    margin: 12px 0 0;
    color: var(--dc2-ink-2);
    line-height: 1.65;
    font-weight: 600;
    font-size: 15.5px;
  }
  
  .dc2__cardBtn{
    margin-top: 12px;
    width: fit-content;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(255,255,255,.86);
    color: rgba(18,37,37,.82);
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  
  .dc2__cardBtn:hover{
    background: rgba(44,135,132,.10);
    border-color: rgba(44,135,132,.26);
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
  }
  
  .dc2__cardBtn:active{ transform: translateY(1px); }
  
  /* highlighted (set by JS when hovering corresponding pin/card) */
  .dc2__card.is-highlight{
    border-color: rgba(255,145,77,.36);
    box-shadow: var(--dc2-glow);
  }
  .dc2__card.is-highlight::after{
    background: rgba(255,145,77,.56);
  }
  
  /* Drawer */
  .dc2__drawer{
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  
  .dc2__drawer.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  
  .dc2__backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.46);
    backdrop-filter: blur(10px);
  }
  
  .dc2__panel{
    position:absolute;
    right:0;
    top:0;
    height: 100%;
    width: min(580px, 92vw);
    background: rgba(255,255,255,.92);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: -24px 0 74px rgba(0,0,0,.22);
    transform: translateX(18px);
    transition: transform .22s ease;
    overflow: hidden;
    display:flex;
    flex-direction: column;
  }
  
  .dc2__drawer.is-open .dc2__panel{ transform: translateX(0); }
  
  .dc2__close{
    position:absolute;
    right: 14px;
    top: 14px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.28);
    color: rgba(255,255,255,.92);
    cursor:pointer;
    font-weight: 900;
    transition: transform .08s ease, background .2s ease;
  }
  
  .dc2__close:hover{ background: rgba(0,0,0,.36); }
  .dc2__close:active{ transform: translateY(1px); }
  
  .dc2__hero{
    position: relative;
    height: 260px;
    background: rgba(44,135,132,.12);
    overflow: hidden;
  }
  
  .dc2__hero img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
  }
  
  .dc2__heroFade{
    position:absolute;
    inset:auto 0 0 0;
    height: 120px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.92));
  }
  
  .dc2__content{
    padding: 18px 18px 22px;
    overflow: auto;
  }
  
  .dc2__panelHead h3{
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--dc2-ink);
  }
  
  .dc2__panelHead p{
    margin: 8px 0 0;
    color: var(--dc2-ink-3);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .10em;
    text-transform: uppercase;
  }
  
  .dc2__pill{
    margin-top: 12px;
    display:inline-flex;
    align-items:center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--dc2-border);
    background: rgba(255,255,255,.74);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(18,37,37,.74);
  }
  
  .dc2__bio{
    margin-top: 14px;
    color: var(--dc2-ink-2);
    line-height: 1.75;
    font-weight: 600;
    font-size: 15.5px;
  }
  
  .dc2__social{
    margin-top: 18px;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .dc2__socialBtn{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid var(--dc2-border);
    background: rgba(255,255,255,.86);
    color: rgba(18,37,37,.86);
    text-decoration:none;
    font-weight: 900;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  
  .dc2__ic{
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,145,77,.12);
    border: 1px solid rgba(255,145,77,.20);
  }
  
  .dc2__socialBtn:hover{
    transform: translateY(-1px);
    background: rgba(44,135,132,.10);
    border-color: rgba(44,135,132,.26);
    box-shadow: 0 14px 26px rgba(0,0,0,.06);
  }
  
  @media (prefers-reduced-motion: reduce){
    .dc2 *{ transition: none !important; }
  }
  
  
  
  /* =========================
     DREAMCHASERS (dcA) — V2
     Map left, Cards right
     ========================= */
  
  .dcA{
    position: relative;
    padding: clamp(40px, 6vw, 70px) 0;
    background: radial-gradient(900px 520px at 15% 15%, rgba(255,145,77,.10), transparent 60%),
                radial-gradient(900px 520px at 85% 10%, rgba(44,135,132,.10), transparent 60%),
                var(--paper, #fbfaf7);
  }
  
  /* container */
  .dcA__wrap{
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
  }
  
  /* header */
  .dcA__head{
    max-width: 78ch;
    margin-bottom: clamp(18px, 3.2vw, 28px);
  }
  
  .dcA__title{
    margin: 0 0 10px;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: .95;
    color: var(--ink, #112525);
  }
  
  .dcA__lead{
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(18,37,37,.72);
    font-weight: 600;
  }
  
  /* =========================
     LAYOUT 2 columns
     ========================= */
  .dcA__layout{
    display: grid;
    grid-template-columns: minmax(340px, 1.05fr) minmax(300px, .95fr);
    gap: clamp(18px, 3vw, 28px);
    align-items: stretch;
    margin-top: clamp(16px, 3vw, 26px);
  }
  
  /* Colonna destra: le 3 card founder si distribuiscono in altezza per coprire la mappa */
  .dcA__layout > .dcA__people{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0;
    min-height: 0;
  }
  
  @media (max-width: 980px){
    .dcA__layout{
      grid-template-columns: 1fr;
    }
    .dcA__layout > .dcA__people{
      justify-content: flex-start;
      gap: 16px;
    }
  }
  
  /* =========================
     MAP PANEL
     ========================= */
  .dcA__mapPanel{
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(18,37,37,.10);
    background:
      radial-gradient(700px 420px at 70% 30%, rgba(44,135,132,.18), transparent 60%),
      radial-gradient(700px 420px at 10% 80%, rgba(255,145,77,.14), transparent 60%),
      rgba(255,255,255,.62);
    box-shadow: 0 18px 55px rgba(0,0,0,.08);
    overflow: hidden;
    min-height: 420px;
  }
  
  /* se vuoi un rapporto più “banner” su desktop */
  @media (min-width: 981px){
    .dcA__mapPanel{
      min-height: 520px;
    }
  }
  
  /* wrapper per l’svg (tu lo incolli dentro dcA__mapPanel) */
  .dcA__mapPanel svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  
    /* evita tagli brutti se l'svg esce un filo */
    transform: scale(1.02);
  }
  
  /* “pulizia” mappa: niente nero */
  .dcA__mapPanel svg #ne_110m_land path{
    fill: rgba(255,255,255,.92);
    stroke: rgba(18,37,37,.18);
    stroke-width: 1.2;
  }
  
  /* se hai anche altri gruppi/shape */
  .dcA__mapPanel svg path{
    vector-effect: non-scaling-stroke;
  }
  
  /* hint pill */
  .dcA__hint{
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgba(18,37,37,.55);
    color: rgba(255,255,255,.90);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
  }
  
  .dcA__hintDot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--sand, #ff914d);
    box-shadow: 0 0 0 4px rgba(255,145,77,.18);
  }
  
  /* =========================
     PINS (tu li hai dentro l'SVG con classi dcPin/dcHalo/dcBody/dcDot/dcLabel)
     ========================= */
  .dcA .dcPins .dcPin{
    cursor: pointer;
    outline: none;
  }
  
  .dcA .dcPins .dcHalo{
    fill: rgba(255,145,77,.14);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    transform-origin: center;
  }
  
  .dcA .dcPins .dcBody{
    fill: var(--sand, #ff914d);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
    transition: transform .22s ease, filter .22s ease;
    transform-origin: center;
  }
  
  /* DOT interno */
  .dcA .dcPins .dcDot{
    fill: rgba(255,255,255,.92);
    opacity: .95;
  }
  
  /* Label */
  .dcA .dcPins .dcLabel{
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    fill: rgba(18,37,37,.62);
    paint-order: stroke;
    stroke: rgba(255,255,255,.75);
    stroke-width: 5px;
  }
  
  /* hover pin: glow sand yellow */
  .dcA .dcPins .dcPin:hover .dcHalo,
  .dcA .dcPins .dcPin:focus-visible .dcHalo{
    opacity: 1;
    transform: scale(1.25);
  }
  
  .dcA .dcPins .dcPin:hover .dcBody,
  .dcA .dcPins .dcPin:focus-visible .dcBody{
    transform: translateY(-2px) scale(1.03);
    filter:
      drop-shadow(0 0 18px rgba(255,216,145,.55))  /* sand-yellow glow */
      drop-shadow(0 12px 22px rgba(0,0,0,.16));
  }
  
  /* =========================
     PEOPLE / CARDS (right column)
     ========================= */
  .dcA__people{
    display: grid;
    gap: 16px;
    align-content: start;
  }
  
  /* card base */
  .dcA__orb{
    appearance: none;
    border: 1px solid rgba(18,37,37,.10);
    background: rgba(255,255,255,.70);
    border-radius: 26px;
    padding: 14px 14px;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
    box-shadow: 0 16px 46px rgba(0,0,0,.06);
    cursor: pointer;
  
    /* IMPORTANT: non farle sparire mai */
    opacity: 1;
    transform: none;
  
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease;
    position: relative;
    overflow: hidden;
  }
  
  .dcA__orb::before{
    content:"";
    position:absolute;
    inset: -55% -30% auto auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(44,135,132,.12);
    opacity: .55;
    pointer-events:none;
  }
  
  /* thumbnail */
  .dcA__orbImg{
    width: 74px;
    height: 74px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(18,37,37,.14);
    background: rgba(18,37,37,.06);
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
  }
  
  .dcA__orbImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    filter: grayscale(100%);
    transition: filter .22s ease, transform .22s ease;
  }
  
  /* meta */
  .dcA__orbMeta{
    display: grid;
    gap: 4px;
  }
  
  .dcA__orbName{
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    color: var(--ink, #112525);
    letter-spacing: -0.02em;
  
    /* stile “innovativo” leggero */
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
  }
  
  .dcA__orbRole{
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.56);
  }
  
  /* hover card */
  .dcA__orb:hover{
    transform: translateY(-2px);
    border-color: rgba(255,145,77,.28);
    box-shadow: 0 22px 60px rgba(0,0,0,.10);
  }
  
  .dcA__orb:hover .dcA__orbImg img{
    filter: grayscale(0%);
    transform: scale(1.03);
  }
  
  /* =========================
     ACTIVE / HIGHLIGHT (da pin hover)
     Aggiungi la classe .is-active sul bottone giusto
     ========================= */
  .dcA__orb.is-active{
    background: linear-gradient(135deg, rgba(255,145,77,.22), rgba(44,135,132,.12));
    border-color: rgba(255,216,145,.55);
    box-shadow:
      0 24px 70px rgba(0,0,0,.12),
      0 0 0 6px rgba(255,216,145,.18);
    transform: translateY(-2px);
  }
  
  .dcA__orb.is-active::before{
    background: rgba(255,145,77,.18);
    opacity: .7;
  }
  
  .dcA__orb.is-active .dcA__orbImg img{
    filter: grayscale(0%);
  }
  
  /* =========================
     DRAWER (profile)
     ========================= */
  .dcA__drawer{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
  }
  
  .dcA__drawer.is-open{
    display: block;
  }
  
  .dcA__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(8,18,18,.55);
    backdrop-filter: blur(10px);
  }
  
  .dcA__panel{
    position: absolute;
    right: clamp(14px, 2vw, 22px);
    top: clamp(14px, 2vw, 22px);
    bottom: clamp(14px, 2vw, 22px);
    width: min(520px, calc(100% - 28px));
    border-radius: 28px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 30px 90px rgba(0,0,0,.22);
    overflow: hidden;
  }
  
  .dcA__close{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.88);
    cursor: pointer;
    font-weight: 900;
    color: rgba(18,37,37,.75);
    z-index: 2;
  }
  
  .dcA__hero{
    position: relative;
    height: 240px;
    background: rgba(18,37,37,.06);
  }
  
  .dcA__hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }
  
  
  .dcA__content{
    padding: 18px 18px 20px;
  }
  
  /* Mobile: immagine del drawer un filo più bassa e più spazio prima del nome */
  @media (max-width: 640px){
    .dcA__hero{
      height: 200px;
    }
    .dcA__content{
      padding-top: 22px;
    }
  }
  
  .dcA__panelHead{
    display:flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  
  #dcAName{
    margin:0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    color: rgba(18,37,37,.95);
  }
  
  #dcARole{
    margin: 6px 0 0;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.58);
  }
  
  .dcA__panelPill{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(44,135,132,.10);
    color: rgba(18,37,37,.78);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px;
    white-space: nowrap;
  }
  
  .dcA__bio{
    color: rgba(18,37,37,.72);
    line-height: 1.7;
    font-weight: 650;
    margin: 12px 0 16px;
  }
  
  .dcA__social{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .dcA__socialBtn{
    display:inline-flex;
    align-items:center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.84);
    text-decoration: none;
    color: rgba(18,37,37,.84);
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  .dcA__socialBtn:hover{
    transform: translateY(-1px);
    border-color: rgba(255,145,77,.28);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
  }
  
  .dcA__ic{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,145,77,.14);
    border: 1px solid rgba(255,145,77,.24);
  }
  
  /* reduce motion */
  @media (prefers-reduced-motion: reduce){
    .dcA *{
      transition: none !important;
      animation: none !important;
    }
  }
  
  /* ===== DREAMCHASERS PINS: shrink the pin shape without moving its anchor ===== */
  
  /* Pin group stays put (no scaling here) */
  .dcPin{
    cursor: pointer;
  }
  
  /* shrink the teardrop keeping the tip more stable */
  .dcPin .dcBody{
    transform-box: fill-box;
    transform-origin: 50% 92%;   /* verso la punta */
    transform: scale(.72);
  }
  
  /* shrink the inner dot (centered) */
  .dcPin .dcDot{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transform: scale(.78);
  }
  
  /* shrink the halo a bit (so it doesn't invade too much) */
  .dcPin .dcHalo{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transform: scale(.70);
    opacity: .35;
  }
  
  /* label: un filo più lontana e leggibile */
  .dcPin .dcLabel{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    fill: rgba(18,37,37,.65);
  }
  
  /* hover/focus: micro pop + glow sand yellow */
  .dcPin:is(:hover,:focus-visible) .dcBody{
    transform: scale(.78);
    filter: drop-shadow(0 0 10px rgba(255, 214, 140, .75))
            drop-shadow(0 0 22px rgba(255, 214, 140, .45));
  }
  
  .dcPin:is(:hover,:focus-visible) .dcHalo{
    transform: scale(.80);
    opacity: .55;
    filter: drop-shadow(0 0 14px rgba(255, 214, 140, .55));
  }
  
  /* ===== Dreamchasers circle markers ===== */
  
  :root{
    --dc-orange: #F39A5B;            /* colore marker */
    --dc-sand: rgba(255, 214, 140, .9); /* glow sand yellow */
    --dc-ink: rgba(18,37,37,.85);
  }
  
  /* click area + focus */
  .dcPin{
    cursor: pointer;
    outline: none;
  }
  .dcPin:focus-visible .dcRing{
    stroke: rgba(18,37,37,.35);
    stroke-width: 2.5;
  }
  
  /* halo morbido */
  .dcHalo{
    fill: rgba(243, 154, 91, .20);
    opacity: .45;
  }
  
  /* ring esterno */
  .dcRing{
    fill: rgba(243, 154, 91, .14);
    stroke: rgba(243, 154, 91, .85);
    stroke-width: 2;
  }
  
  /* core pieno */
  .dcCore{
    fill: rgba(243, 154, 91, .95);
    stroke: rgba(255,255,255,.9);
    stroke-width: 1.5;
  }
  
  /* label */
  .dcLabel{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    fill: rgba(18,37,37,.60);
  }
  
  /* hover/focus: glow + “pulse” */
  .dcPin:is(:hover,:focus-visible) .dcHalo{
    opacity: .75;
    filter: drop-shadow(0 0 10px var(--dc-sand))
            drop-shadow(0 0 26px rgba(255, 214, 140, .55));
  }
  
  .dcPin:is(:hover,:focus-visible) .dcRing{
    stroke: rgba(243, 154, 91, 1);
    filter: drop-shadow(0 0 10px var(--dc-sand));
  }
  
  .dcPin:is(:hover,:focus-visible) .dcCore{
    filter: drop-shadow(0 0 12px var(--dc-sand));
  }
  
  /* animazione “breathing” dell’halo (solo quando evidenziato via JS) */
  .dcPin.is-active .dcHalo{
    animation: dcPulse 1.35s ease-in-out infinite;
    opacity: .85;
    filter: drop-shadow(0 0 12px var(--dc-sand))
            drop-shadow(0 0 28px rgba(255, 214, 140, .55));
  }
  
  @keyframes dcPulse{
    0%, 100% { transform: scale(1); transform-origin: center; opacity: .75; }
    50%      { transform: scale(1.18); transform-origin: center; opacity: .95; }
  }
  
  /* =========================
     DREAMCHASERS – CARDS (right side)
     ========================= */
  
  :root{
    --dc-ink: #122525;
    --dc-mute: rgba(18,37,37,.62);
    --dc-line: rgba(18,37,37,.12);
  
    --dc-petrol: #2C8784;
    --dc-petrol-2: rgba(44,135,132,.14);
  
    --dc-orange: #F39A5B;
    --dc-sand: rgba(255,214,140,.95);
    --dc-sand-2: rgba(255,214,140,.45);
  
    --dc-card: rgba(255,255,255,.86);
  }
  
  .dcA__people{
    display: grid;
    gap: 16px;
  }
  
  /* card base */
  .dcA__orb{
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 18px;
    align-items: center;
  
    width: 100%;
    padding: 18px 18px;
    border-radius: 28px;
    border: 1px solid var(--dc-line);
    background: var(--dc-card);
    box-shadow: 0 18px 52px rgba(0,0,0,.06);
  
    cursor: pointer;
    text-align: left;
    overflow: hidden;
  
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  
  /* “cerchi puliti” come texture (no macchie) */
  .dcA__orb::before,
  .dcA__orb::after{
    content:"";
    position:absolute;
    border-radius: 999px;
    pointer-events:none;
    opacity: .85;
  }
  
  .dcA__orb::before{
    width: 260px;
    height: 260px;
    right: -140px;
    top: -160px;
    background:
      radial-gradient(circle at 35% 35%, rgba(44,135,132,.16), transparent 60%),
      radial-gradient(circle at 60% 65%, rgba(255,214,140,.22), transparent 62%);
    filter: blur(.2px);
  }
  
  .dcA__orb::after{
    width: 220px;
    height: 220px;
    left: -150px;
    bottom: -170px;
    background:
      radial-gradient(circle at 40% 40%, rgba(243,154,91,.18), transparent 62%),
      radial-gradient(circle at 65% 55%, rgba(44,135,132,.10), transparent 65%);
  }
  
  /* hover */
  .dcA__orb:hover{
    transform: translateY(-2px);
    border-color: rgba(44,135,132,.22);
    box-shadow: 0 24px 70px rgba(0,0,0,.08);
  }
  
  /* active from pin */
  .dcA__orb.is-active{
    border-color: rgba(255,214,140,.55);
    box-shadow:
      0 26px 80px rgba(0,0,0,.09),
      0 0 0 2px rgba(255,214,140,.28) inset;
  }
  
  .dcA__orb.is-active::before{
    background:
      radial-gradient(circle at 40% 35%, rgba(255,214,140,.32), transparent 62%),
      radial-gradient(circle at 60% 70%, rgba(44,135,132,.18), transparent 68%);
  }
  
  /* avatar wrapper */
  .dcA__orbImg{
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    overflow: hidden;
  
    border: 2px solid rgba(255,255,255,.9);
    box-shadow:
      0 12px 28px rgba(0,0,0,.12),
      0 0 0 1px rgba(18,37,37,.10);
  }
  
  /* ring + glow (sand) */
  .dcA__orbImg::after{
    content:"";
    position:absolute;
    inset: -6px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,214,140,.0) 55%, rgba(255,214,140,.55) 75%, rgba(255,214,140,.0) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events:none;
  }
  
  .dcA__orb:hover .dcA__orbImg::after,
  .dcA__orb.is-active .dcA__orbImg::after{
    opacity: 1;
  }
  
  /* image treatment */
  .dcA__orbImg img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  
    /* “si vede meglio” */
    filter: grayscale(100%) contrast(1.18) brightness(1.03);
    transform: scale(1.06);
  
    transition: filter .25s ease, transform .25s ease;
  }
  
  .dcA__orb:hover .dcA__orbImg img,
  .dcA__orb.is-active .dcA__orbImg img{
    filter: grayscale(45%) contrast(1.25) brightness(1.05);
    transform: scale(1.12);
  }
  
  /* subtle highlight overlay on avatar */
  .dcA__orbImg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 55%),
      linear-gradient(180deg, rgba(255,214,140,.10), transparent 55%);
    mix-blend-mode: screen;
    opacity: .55;
    pointer-events:none;
  }
  
  /* meta */
  .dcA__orbMeta{
    position: relative;
    z-index: 1;
    display:flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .dcA__orbName{
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 900;
    font-size: 34px;
    letter-spacing: -0.02em;
    color: var(--dc-ink);
    line-height: 1;
    display: inline-block;
    width: fit-content;
  }
  
  /* innovative underline accent */
  .dcA__orbName::after{
    content:"";
    display:block;
    height: 9px;
    margin-top: 6px;
    border-radius: 999px;
    width: 58%;
    background: rgba(44,135,132,.20);
    transform-origin: left center;
    transform: scaleX(.65);
    transition: transform .25s ease, background .25s ease;
  }
  
  .dcA__orb:hover .dcA__orbName::after{
    transform: scaleX(1);
    background: rgba(44,135,132,.26);
  }
  
  .dcA__orb.is-active .dcA__orbName::after{
    transform: scaleX(1);
    background: rgba(255,214,140,.55);
  }
  
  .dcA__orbRole{
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 13px;
    color: rgba(18,37,37,.52);
  }
  
  /* tiny right accent slice (pulito) */
  .dcA__orb .dcA__slice{
    position:absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 120px;
    background: rgba(44,135,132,.10);
    clip-path: ellipse(88% 68% at 100% 50%);
    opacity: .9;
    transition: background .25s ease;
    pointer-events:none;
  }
  
  .dcA__orb.is-active .dcA__slice{
    background: rgba(255,214,140,.28);
  }
  
  /* responsive */
  @media (max-width: 860px){
    .dcA__orb{
      grid-template-columns: 78px 1fr;
      padding: 16px;
      border-radius: 24px;
    }
    .dcA__orbImg{ width: 72px; height: 72px; }
    .dcA__orbName{ font-size: 28px; }
  }
  
  /* =========================
     DREAMCHASERS – DRAWER / PROFILE (premium)
     ========================= */
  
  :root{
    --dc-ink: #122525;
    --dc-mute: rgba(18,37,37,.66);
    --dc-line: rgba(18,37,37,.12);
    --dc-card: rgba(255,255,255,.92);
  
    --dc-petrol: #2C8784;
    --dc-sand: rgba(255,214,140,.95);
    --dc-sand-2: rgba(255,214,140,.40);
  }
  
  .dcA__drawer{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
  }
  
  .dcA__drawer[aria-hidden="false"]{
    display: block;
  }
  
  .dcA__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(10,14,14,.55);
    backdrop-filter: blur(6px);
  }
  
  .dcA__panel{
    position: absolute;
    right: clamp(12px, 2vw, 22px);
    top: clamp(12px, 2vw, 22px);
    bottom: clamp(12px, 2vw, 22px);
  
    width: min(720px, calc(100vw - 24px));
    border-radius: 28px;
    overflow: hidden;
  
    background: var(--dc-card);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 28px 100px rgba(0,0,0,.35);
  
    display: grid;
    grid-template-rows: 260px 1fr;
  }
  
  /* hero: meno “lavato”, più editoriale */
  .dcA__hero{
    position: relative;
    overflow: hidden;
    background: #f2f3f3;
  }
  
  .dcA__hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* sposta leggermente l'inquadratura verso l'alto per evitare di tagliare i volti */
    object-position: 50% 20%;
  
    filter: grayscale(100%) contrast(1.12) brightness(1.02);
    /* zoom più leggero per ridurre il taglio */
    transform: scale(1.01);
  }
  
  /* fade più pulito (niente bianco sparato) */
  
  
  /* close button */
  .dcA__close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.72);
    color: rgba(18,37,37,.88);
    font-weight: 900;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .2s ease, background .2s ease;
    z-index: 2;
  }
  
  .dcA__close:hover{
    transform: scale(1.05);
    background: rgba(255,255,255,.88);
  }
  
  /* content area */
  .dcA__content{
    padding: clamp(18px, 2.6vw, 28px);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 16px;
    overflow: auto;
  }
  
  .dcA__panelHead{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  
  .dcA__who h3{
    margin: 0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(34px, 4vw, 46px);
    letter-spacing: -0.02em;
    color: var(--dc-ink);
    line-height: 1;
  }
  
  /* meta row (role • city) */
  .dcA__meta{
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.55);
  }
  
  .dcA__meta .dcA__sep{
    opacity: .7;
  }
  
  .dcA__meta .dcA__city{
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(44,135,132,.18);
    background: rgba(44,135,132,.10);
    color: rgba(18,37,37,.68);
    letter-spacing: .18em;
  }
  
  /* bio: leggibile, non “boldone” */
  .dcA__bio{
    color: rgba(18,37,37,.74);
    font-weight: 600;
    line-height: 1.75;
    font-size: 16px;
    max-width: 62ch;
  }
  
  /* section divider feel */
  .dcA__content::before{
    content:"";
    height: 1px;
    background: rgba(18,37,37,.08);
    grid-row: 2 / 3;
    align-self: end;
    margin-top: -8px;
  }
  
  /* social: 2 colonne, bottoni più piccoli e “premium” */
  .dcA__social{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
  }
  
  @media (max-width: 520px){
    .dcA__panel{
      grid-template-rows: 220px 1fr;
    }
    .dcA__social{
      grid-template-columns: 1fr;
    }
  }
  
  /* Bio card (Dani-style, static) – e.g. project.html Ben Campbell */
  .bio-card{
    max-width: min(720px, 100%);
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: var(--dc-card, rgba(255,255,255,.95));
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 28px 100px rgba(0,0,0,.12);
    display: grid;
    grid-template-rows: 260px 1fr;
  }
  .bio-card__hero{
    position: relative;
    overflow: hidden;
    background: #f2f3f3;
  }
  .bio-card__hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%) contrast(1.12) brightness(1.02);
    transform: scale(1.03);
  }
  .bio-card__hero .avatar-fallback{
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(44,135,132,.15), rgba(18,37,37,.08));
  }
  .bio-card__hero .avatar-fallback.is-visible{
    display: block;
  }
  .bio-card__content{
    padding: clamp(18px, 2.6vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bio-card__head{
    margin-bottom: 4px;
  }
  .bio-card__name{
    margin: 0;
    font-family: "League Spartan", system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(34px, 4vw, 46px);
    letter-spacing: -0.02em;
    color: var(--dc-ink, rgba(18,37,37,.95));
    line-height: 1;
  }
  .bio-card__role{
    margin: 8px 0 0;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(18,37,37,.55);
  }
  .bio-card__bio{
    color: rgba(18,37,37,.74);
    font-weight: 600;
    line-height: 1.75;
    font-size: 16px;
    max-width: 62ch;
  }
  .bio-card__bio p{
    margin: 0 0 1em;
  }
  .bio-card__bio p:last-child{
    margin-bottom: 0;
  }
  @media (max-width: 520px){
    .bio-card{
      grid-template-rows: 220px 1fr;
    }
  }
  
  /* social button */
  .dcA__socialBtn{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
  
    border-radius: 16px;
    border: 1px solid rgba(18,37,37,.12);
    background: rgba(255,255,255,.75);
  
    color: rgba(18,37,37,.86);
    text-decoration: none;
    font-weight: 800;
  
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  
  .dcA__socialBtn:hover{
    transform: translateY(-1px);
    border-color: rgba(255,214,140,.45);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
  }
  
  /* icon bubble */
  .dcA__ic{
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
  
    background: rgba(255,214,140,.22);
    border: 1px solid rgba(255,214,140,.45);
    color: rgba(18,37,37,.85);
    font-weight: 900;
  }
  
  /* optional: hide LinkedIn button if empty via JS adding .is-hidden */
  .dcA__socialBtn.is-hidden{
    display: none;
  }
  
  :root{
      --lm-sand: #FF914D;
      --lm-off:  #FBF9F6;
      --lm-petrol:#2C8784;
      --lm-ink:  #102726;
      --lm-muted: rgba(16,39,38,.72);
      --lm-line: rgba(16,39,38,.14);
      --lm-card: rgba(255,255,255,.78);
    }
  
    .lmDonate{
      position: relative;
      width: 100%;
      background: radial-gradient(1100px 520px at 20% 10%, rgba(255,145,77,.14), transparent 55%),
                  radial-gradient(900px 520px at 85% 20%, rgba(44,135,132,.12), transparent 55%),
                  var(--lm-off);
      padding: clamp(44px, 6vw, 78px) 0;
      overflow: hidden;
    }
    .lmDonate.petrol{
      background: radial-gradient(1100px 520px at 20% 10%, rgba(44,135,132,.18), transparent 55%),
                  radial-gradient(900px 520px at 85% 20%, rgba(255,145,77,.10), transparent 55%),
                  var(--lm-petrol);
    }
  
    .lmDonate::before{
      content:"";
      position:absolute;
      inset: -2px;
      pointer-events:none;
      background:
        radial-gradient(600px 340px at 70% 120%, rgba(44,135,132,.14), transparent 55%),
        radial-gradient(540px 340px at 10% 120%, rgba(255,145,77,.10), transparent 55%);
      opacity: .9;
    }
  
    .lmDonate__wrap{
      position: relative;
      z-index: 1;
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }
  
    .lmDonate__head{
      max-width: 60ch;
      margin-bottom: clamp(22px, 3vw, 28px);
    }
  
    .lmDonate__kicker{
      margin: 0 0 10px;
      display:flex;
      align-items:center;
      gap: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 12px;
      color: rgba(16,39,38,.70);
      font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }
  
    .lmDonate__dot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: var(--lm-sand);
      box-shadow: 0 0 0 6px rgba(255,145,77,.18);
    }
  
    .lmDonate__title{
      margin: 0 0 12px;
      font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: .92;
      font-size: clamp(40px, 5vw, 64px);
      color: var(--lm-ink);
    }
    .lmDonate.petrol .lmDonate__title{
      color: #FDF3EB;
      text-shadow: 0 2px 6px rgba(16,39,38,.22);
    }
  
    .lmDonate__lead{
      margin: 0;
      font-size: 18px;
      line-height: 1.6;
      color: var(--lm-muted);
      font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 500;
    }
  
    .lmDonate__grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(16px, 3vw, 26px);
      align-items: start;
    }
  
    /* GOAL */
    .lmGoal{
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(16,39,38,.12);
      border-radius: 26px;
      padding: clamp(18px, 3vw, 22px);
      box-shadow: 0 18px 46px rgba(0,0,0,.08);
      position: relative;
      overflow:hidden;
    }
  
    .lmGoal::after{
      content:"";
      position:absolute;
      width: 520px;
      height: 520px;
      right: -340px;
      top: -260px;
      border-radius: 999px;
      background: rgba(44,135,132,.10);
      pointer-events:none;
    }
  
    .lmGoal__top{
      display:flex;
      align-items:flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }
  
    .lmGoal__labelTitle{
      display:block;
      font-family: "League Spartan", system-ui, sans-serif;
      font-weight: 800;
      font-size: 22px;
      color: var(--lm-ink);
      letter-spacing: -0.01em;
      line-height: 1;
    }
  
    .lmGoal__labelSub{
      display:block;
      margin-top: 6px;
      font-family: "Jost", system-ui, sans-serif;
      color: rgba(16,39,38,.70);
      font-weight: 600;
      font-size: 14px;
    }
  
    .lmGoal__numbers{
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 800;
      color: rgba(16,39,38,.84);
      white-space: nowrap;
      display:flex;
      align-items: baseline;
      gap: 8px;
    }
    .lmGoal__current{ font-size: 18px; }
    .lmGoal__target{ font-size: 14px; color: rgba(16,39,38,.58); }
    .lmGoal__sep{ color: rgba(16,39,38,.45); }
  
    .lmGoal__numbers--compact .lmGoal__current{
      font-size: 16px;
    }
  
    .lmGoal__bar{
      position: relative;
      height: 16px;
      border-radius: 999px;
      border: 1px solid rgba(16,39,38,.14);
      background: rgba(16,39,38,.06);
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
      margin-bottom: 10px;
    }
  
    .lmGoal__fill{
      position:absolute;
      inset: 0 auto 0 0;
      width: 50%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(44,135,132,.95), rgba(44,135,132,.70));
      box-shadow: 0 10px 30px rgba(44,135,132,.22);
      transform-origin: left center;
      transform: scaleX(0);
      will-change: transform;
    }
  
    .lmGoal__shine{
      position:absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 40%, transparent 65%);
      transform: translateX(-70%);
      opacity: .55;
      pointer-events:none;
    }
  
    .lmGoal__meta{
      display:flex;
      justify-content: space-between;
      align-items:center;
      font-family: "Jost", system-ui, sans-serif;
      color: rgba(16,39,38,.70);
      font-weight: 700;
      font-size: 13px;
      position: relative;
      z-index: 1;
      margin-bottom: 14px;
    }
  
    .lmGoal__metaLeft{
      display:inline-flex;
      align-items:center;
      gap: 8px;
    }
  
    .lmGoal__bullets{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap: 10px;
      position: relative;
      z-index: 1;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 650;
      color: rgba(16,39,38,.72);
    }
  
    .lmGoal__bDot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: rgba(255,145,77,.35);
      box-shadow: 0 0 0 6px rgba(255,145,77,.12);
      display:inline-block;
      margin-right: 10px;
      transform: translateY(1px);
    }
  
    .lmGoal__sponsor{
      margin-top: 14px;
      display:flex;
      align-items:center;
      gap: 10px;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: rgba(16,39,38,.72);
      position: relative;
      z-index: 1;
    }
  
    .lmGoal__sponsorLogo{
      height: 26px;
      width: auto;
      display:block;
    }
  
    .lmGoal--next{
      margin-top: 16px;
      padding-top: 16px;
      border-radius: 22px;
    }
  
    .lmGoal--next::after{
      display:none;
    }
  
    .lmGoal__nextText{
      margin: 4px 0 0;
      font-family: "Jost", system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.7;
      color: rgba(16,39,38,.78);
      position: relative;
      z-index: 1;
    }
  
    /* FORM */
    .lmForm__card{
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(16,39,38,.12);
      border-radius: 26px;
      padding: clamp(18px, 3vw, 22px);
      box-shadow: 0 18px 46px rgba(0,0,0,.08);
      position: relative;
      overflow:hidden;
    }
  
    .lmForm__card::before{
      content:"";
      position:absolute;
      width: 520px;
      height: 520px;
      left: -360px;
      top: -320px;
      border-radius: 999px;
      background: rgba(255,145,77,.10);
      pointer-events:none;
    }
  
    .lmForm__toggle{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid rgba(16,39,38,.12);
      background: rgba(16,39,38,.04);
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }
  
    .lmTog{
      border: 0;
      background: transparent;
      border-radius: 12px;
      padding: 12px 12px;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      color: rgba(16,39,38,.74);
      cursor: pointer;
      transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
  
    .lmTog.is-active{
      background: rgba(255,255,255,.85);
      color: rgba(16,39,38,.90);
      box-shadow: 0 10px 24px rgba(0,0,0,.08);
    }
  
    .lmForm__label{
      margin: 0 0 10px;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      color: rgba(16,39,38,.86);
    }
  
    .lmAmounts{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }
  
    .lmAmt{
      border-radius: 16px;
      border: 1px solid rgba(16,39,38,.14);
      background: rgba(255,255,255,.86);
      padding: 14px 12px;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      cursor: pointer;
      color: rgba(16,39,38,.85);
      transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
  
    .lmAmt:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.10); }
    .lmAmt.is-selected{
      border-color: rgba(44,135,132,.55);
      background: rgba(44,135,132,.10);
      box-shadow: 0 16px 34px rgba(44,135,132,.18);
    }
    .lmAmt.is-accent{
      border-color: rgba(255,145,77,.55);
      background: rgba(255,145,77,.12);
    }
  
    .lmOther{
      border-top: 1px solid rgba(16,39,38,.10);
      padding-top: 12px;
      position: relative;
      z-index: 1;
    }
  
    .lmOther__label{
      display:block;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      color: rgba(16,39,38,.86);
      margin-bottom: 8px;
    }
  
    .lmOther__field{
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(16,39,38,.14);
      background: rgba(255,255,255,.86);
    }
  
    .lmOther__cur{
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      color: rgba(16,39,38,.60);
    }
  
    .lmOther__field input{
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      font-size: 16px;
      color: rgba(16,39,38,.88);
    }
  
    .lmOther__hint{
      margin: 8px 0 0;
      font-family: "Jost", system-ui, sans-serif;
      color: rgba(16,39,38,.56);
      font-weight: 650;
      font-size: 12px;
    }
  
    .lmSubmit{
      margin-top: 14px;
      width: 100%;
      border: 0;
      border-radius: 18px;
      padding: 14px 14px;
      background: var(--lm-petrol);
      color: white;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      font-size: 16px;
      cursor: pointer;
      box-shadow: 0 20px 44px rgba(44,135,132,.25);
      transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
      position: relative;
      z-index: 1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
    }
  
    .lmSubmit:hover{
      transform: translateY(-1px);
      filter: brightness(1.02);
      box-shadow: 0 24px 56px rgba(44,135,132,.30);
    }
  
    .lmSubmit__ic{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.9);
      box-shadow: 0 0 0 7px rgba(255,255,255,.18);
    }
  
    .lmFineprint{
      margin: 12px 0 0;
      text-align:center;
      font-family: "Jost", system-ui, sans-serif;
      color: rgba(16,39,38,.62);
      font-weight: 650;
      font-size: 13px;
      position: relative;
      z-index: 1;
    }
  
    .lmToast{
      margin-top: 12px;
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 750;
      color: rgba(16,39,38,.80);
      min-height: 18px;
    }
  
    /* Responsive */
    @media (max-width: 900px){
      .lmDonate__grid{ grid-template-columns: 1fr; }
      .lmAmounts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
  
    :root{
      --lm-sand: #FF914D;
      --lm-off:  #FBF9F6;
      --lm-ink:  #102726;
      --lm-muted: rgba(16,39,38,.72);
      --lm-line: rgba(16,39,38,.14);
      --lm-petrol:#2C8784;
    }
  
    .lmBlog{
      display: none;
      position: relative;
      width: 100%;
      padding: clamp(48px, 6vw, 84px) 0;
      background:var(--sand);
      overflow:hidden;
    }
  
    .lmBlog::before{
      content:"";
      position:absolute;
      inset:-2px;
      pointer-events:none;
      background:
        radial-gradient(520px 520px at 90% 120%, rgba(16,39,38,.10), transparent 60%),
        radial-gradient(520px 520px at 10% 120%, rgba(255,255,255,.22), transparent 60%);
      opacity:.9;
    }
  
    .lmBlog__wrap{
      position: relative;
      z-index: 1;
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }
  
    .lmBlog__head{
      max-width: 65ch;
      margin-bottom: clamp(18px, 3vw, 26px);
    }
  
    .lmBlog__kicker{
      margin: 0 0 10px;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 12px;
      color: rgba(16,39,38,.78);
      font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }
  
    .lmBlog__dot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.85);
      box-shadow: 0 0 0 6px rgba(255,255,255,.20);
    }
  
    .lmBlog__title{
      margin: 0 0 10px;
      font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: .95;
  
      font-size: clamp(36px, 4.6vw, 56px);
      color: #fff;
      text-shadow: 0 1px 0 rgba(255,255,255,.15);
    }
  
    .lmBlog__lead{
      margin: 0;
      font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 650;
      color: rgba(16,39,38,.74);
      font-size: 18px;
      line-height: 1.6;
    }
  
    .lmBlog__grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 18px);
      align-items: stretch;
    }
  
    .lmPost{
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.86);
      box-shadow: 0 18px 46px rgba(0,0,0,.12);
      overflow:hidden;
      position: relative;
      transform: translateZ(0);
      transition: transform .18s ease, box-shadow .22s ease;
    }
  
    .lmPost::after{
      content:"";
      position:absolute;
      inset: 0;
      pointer-events:none;
      background: radial-gradient(500px 240px at 110% -10%, rgba(44,135,132,.14), transparent 60%);
      opacity: .9;
    }
  
    .lmPost:hover{
      transform: translateY(-4px);
      box-shadow: 0 26px 70px rgba(0,0,0,.18);
    }
  
    .lmPost__media{
      display:block;
      aspect-ratio: 16/10;
      background: rgba(16,39,38,.06);
      overflow:hidden;
      position: relative;
    }
  
    .lmPost__media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
      filter: grayscale(1);
      transform: scale(1.02);
      transition: transform .28s ease, filter .28s ease;
    }
  
    .lmPost:hover .lmPost__media img{
      filter: grayscale(.15);
      transform: scale(1.06);
    }
  
    .lmPost__body{
      position: relative;
      z-index: 1;
      padding: 16px 16px 18px;
    }
  
    .lmPost__title{
      margin: 0 0 12px;
      font-family: "League Spartan", system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.05;
      font-size: 22px;
      color: rgba(16,39,38,.95);
    }
  
    .lmPost__title a{
      color: inherit;
      text-decoration: none;
    }
  
    .lmPost__actions{
      display:flex;
      justify-content:flex-start;
    }
  
    .lmPost__btn{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(16,39,38,.14);
      background: rgba(255,255,255,.82);
      color: rgba(16,39,38,.82);
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      text-decoration:none;
      transition: transform .15s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
    }
  
    .lmPost__btn:hover{
      transform: translateY(-1px);
      border-color: rgba(44,135,132,.42);
      background: rgba(44,135,132,.10);
      box-shadow: 0 16px 34px rgba(44,135,132,.18);
    }
  
    .lmBlog__footer{
      margin-top: clamp(16px, 3vw, 22px);
      display:flex;
      justify-content:center;
    }
  
    .lmBlog__more{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.45);
      background: rgba(16,39,38,.10);
      color: rgba(255,255,255,.92);
      font-family: "Jost", system-ui, sans-serif;
      font-weight: 900;
      text-decoration:none;
      box-shadow: 0 18px 46px rgba(0,0,0,.12);
      transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
    }
  
    .lmBlog__more:hover{
      transform: translateY(-1px);
      background: rgba(16,39,38,.16);
      box-shadow: 0 24px 60px rgba(0,0,0,.18);
    }
  
    @media (max-width: 980px){
      .lmBlog__grid{ grid-template-columns: 1fr; }
      .lmPost__media{ aspect-ratio: 16/9; }
    }
  
  
  
    /* =========================
  TEST
     ========================= */
     /* =========================
     SCROLL WALKER OVERLAY
     ========================= */
  
  .walkA{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    opacity: 0; /* viene mostrato via GSAP dalla 2a sezione */
  }
  
  /* NASCONDI SU MOBILE */
  @media (max-width: 980px){
    .walkA{ display:none; }
  }
  
  /* =========================
     SIDES
     ========================= */
  
  .walkA__side{
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(120px, 12vw);
    display: grid;
    justify-items: center;
    padding: 18px 10px;
  }
  
  .walkA__side--left{ left: 0; }
  .walkA__side--right{ right: 0; }
  
  /* =========================
     ROAD (DASHED)
     ========================= */
  
  .walkA__road{
    position: relative;
    width: 18px;
    height: calc(100vh - 36px);
    border-radius: 999px;
  }
  
  /* base */
  .walkA__roadLine{
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(18,37,37,.06);
    border: 1px solid rgba(18,37,37,.12);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
  }
  
  /* tratteggio statico */
  .walkA__roadLine::before{
    content:"";
    position:absolute;
    inset: 10px 50% 10px auto;
    width: 10px;
    transform: translateX(50%);
    border-radius: 999px;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(44,135,132,.45) 0px,
        rgba(44,135,132,.45) 10px,
        transparent 10px,
        transparent 22px
      );
    opacity: .4;
  }
  
  /* riempimento progressivo */
  .walkA__roadFill{
    position:absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 12px;
    height: 0%;
    border-radius: 999px;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(44,135,132,.95) 0px,
        rgba(44,135,132,.95) 10px,
        transparent 10px,
        transparent 22px
      );
    filter: drop-shadow(0 0 10px rgba(44,135,132,.25));
  }
  
  /* micro movimento dei trattini */
  @media (prefers-reduced-motion: no-preference){
    .walkA__roadLine::before{
      animation: walkDash 3s linear infinite;
    }
    @keyframes walkDash{
      from{ background-position: 0 0; }
      to{ background-position: 0 34px; }
    }
  }
  
  /* =========================
     FEET (KID STYLE)
     ========================= */
  
  .walkA__feet{
    position: absolute;
    top: 120px; /* viene animato via GSAP */
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
  }
  
  .walkA__foot{
    position: absolute;
    width: 24px;
    height: 40px;
    border-radius: 18px 18px 24px 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(18,37,37,.16);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
  }
  
  /* suola */
  .walkA__foot::after{
    content:"";
    position:absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 70%;
    height: 6px;
    border-radius: 999px;
    background: rgba(18,37,37,.12);
  }
  
  .walkA__foot--back{
    left: 2px;
    top: 14px;
    transform: rotate(-12deg);
    opacity: .9;
  }
  
  .walkA__foot--front{
    right: 2px;
    top: 2px;
    transform: rotate(12deg);
  }
  
  /* glow sand (quando attivo in sezione) */
  .walkA__feet.is-glow .walkA__foot{
    box-shadow:
      0 14px 34px rgba(0,0,0,.18),
      0 0 0 10px rgba(255,145,77,.18),
      0 0 26px rgba(255,145,77,.35);
    border-color: rgba(255,145,77,.4);
  }
  
  .walkA__footSvg{
    position: absolute;
    width: 52px;
    height: auto;
    fill: rgba(255,255,255,.92);
    stroke: rgba(18,37,37,.25);
    stroke-width: 1;
    filter:
      drop-shadow(0 10px 24px rgba(0,0,0,.25));
  }
  
  /* posizione e vibe bambino */
  .walkA__foot--back{
    left: 2px;
    top: 16px;
    transform: rotate(-12deg);
    opacity: .9;
  }
  
  .walkA__foot--front{
    right: 2px;
    top: 2px;
    transform: rotate(12deg);
  }
  
  /* glow sand */
  .walkA__feet.is-glow .walkA__footSvg{
    filter:
      drop-shadow(0 0 12px rgba(255,145,77,.45))
      drop-shadow(0 0 26px rgba(255,145,77,.25));
    stroke: rgba(255,145,77,.45);
  }
  
  /* =========================
     WALK ROAD – MINIMAL
     ========================= */
  
  .walkA__road{
    position: relative;
    width: 6px;                 /* MOLTO più sottile */
    height: calc(100vh - 36px);
    margin: 0 auto;
  }
  
  /* linea tratteggiata */
  .walkA__roadLine{
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(44,135,132,.85) 0px,
        rgba(44,135,132,.85) 8px,
        transparent 8px,
        transparent 20px
      );
    opacity: .55;
  }
  
  /* micro movimento dei trattini */
  @media (prefers-reduced-motion: no-preference){
    .walkA__roadLine{
      animation: walkDash 2.6s linear infinite;
    }
  
    @keyframes walkDash{
      from{ background-position: 0 0; }
      to{ background-position: 0 28px; }
    }
  }
  .walkA__roadLine{
    opacity: .75;
  }
  
  /* =========================
     WEDDING LANDING (Chiara & Andrea × Lovemore)
     Solo layout + classi che usano variabili sito
     ========================= */
  /* Hero a tutta larghezza: foto a lato (dentro .hero.hero--donation) */
  .hero--donation .wed-hero__aside{
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.15);
  }
  .hero--donation .wed-hero__aside img{
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: cover;
    display: block;
  }
  @media (max-width: 900px){
    .hero--donation .wed-hero__aside{ order: 2; }
    .hero--donation .hero-copy{ order: 1; }
  }
  .hero-sub.wed-hero__lead{
    margin-bottom: 1.25rem;
    opacity: .95;
  }
  .wed-hero{
    padding: var(--sec) 0;
    background: var(--off);
    border-top: 1px solid var(--line);
  }
  .wed-hero__grid{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 40px);
    align-items: center;
  }
  @media (max-width: 900px){
    .wed-hero__grid{ grid-template-columns: 1fr; }
  }
  .wed-hero__media{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .wed-hero__media img{
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .wed-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
  }
  .wed-ctaRow{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  .wed-ctaNote{
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
  }
  
  /* ----- Wed story (Perché Lovemore) – rifatta senza card ----- */
  .wed-story{
    position: relative;
    padding: clamp(48px, 8vw, 80px) 0;
    background: var(--off);
    border-top: 1px solid var(--line);
    overflow: hidden;
  }
  .wed-story__bg{
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .wed-story__shape{
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
  }
  .wed-story__shape--1{
    width: 280px;
    height: 280px;
    background: var(--sand);
    top: -80px;
    right: -60px;
  }
  .wed-story__shape--2{
    width: 160px;
    height: 160px;
    background: var(--petrol);
    bottom: 20%;
    left: -40px;
  }
  .wed-story__line{
    position: absolute;
    left: 0;
    top: 28%;
    width: 1px;
    height: 120px;
    background: linear-gradient(180deg, transparent, var(--sand), transparent);
    opacity: 0.35;
  }
  .wed-story__inner{
    position: relative;
    z-index: 1;
  }
  .wed-story__head{
    margin-bottom: clamp(28px, 4vw, 44px);
  }
  .wed-story__kicker{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .wed-story__dot{
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--sand);
    box-shadow: 0 0 0 6px rgba(255,145,77,.12);
  }
  .wed-story__title{
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 18ch;
  }
  .wed-story__title-line{
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 16px;
    background: var(--sand);
    border-radius: 2px;
  }
  .wed-story__body{
    position: relative;
    max-width: 42rem;
    padding-left: 24px;
  }
  .wed-story__accent{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--sand) 0%, color-mix(in srgb, var(--sand) 50%, var(--petrol)) 100%);
    border-radius: 2px;
  }
  .wed-story__prose{
    font-size: 16px;
    line-height: 1.85;
    color: var(--muted);
  }
  .wed-story__prose p{
    margin: 0 0 1.25em;
  }
  .wed-story__prose p:last-child{
    margin-bottom: 0;
  }
  .wed-story__lead{
    font-size: 17px;
    color: rgba(18,37,37,.82);
    font-weight: 500;
  }
  .wed-story__close{
    font-weight: 600;
    color: var(--ink);
  }
  
  .wed-card{
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 18px 18px 20px 18px;
    color: var(--ink);
    overflow: hidden;
  }
  .wed-card__accent{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--sand) 0%, color-mix(in srgb, var(--sand) 70%, var(--petrol)) 100%);
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
  .wed-card__title{
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    font-weight: 800;
  }
  .wed-card__well{
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    position: relative;
    padding-bottom: 10px;
  }
  .wed-card__well::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: var(--sand);
    border-radius: 2px;
  }
  .wed-card__tagrow{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
  }
  .wed-card__text{
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
  }
  .wed-card__list{
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
  }
  .wed-card__list li + li{ margin-top: 4px; }
  .wed-section{
    padding: var(--sec) 0;
    border-top: 1px solid var(--line);
    background: var(--off);
  }
  .wed-section__grid{
    max-width: 60rem;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
  }
  .wed-section__grid p{ margin: 0; }
  .wed-donate{
    padding: var(--sec) 0;
    border-top: 1px solid var(--line);
    background: var(--off);
  }
  .wed-donate__wrap{ max-width: 52rem; margin: 0 auto; }
  .wed-donate__title{
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 3.2vw, 32px);
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .wed-donate__lead{
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
  }
  .wed-donate__box{
    border-radius: 22px;
    border: 1px dashed var(--line);
    background: rgba(255,255,255,.9);
    padding: 16px 18px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
  }
  .wed-donate__box strong{ color: var(--ink); font-weight: 700; }
  .wed-donate__field{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
  }
  .wed-donate__label{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 800;
  }
  .wed-donate__value{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--off);
    border: 1px solid var(--line);
    word-break: break-all;
    color: var(--ink);
  }
  .wed-donate__note{
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
  }


.lm-fivex1000-cta{
  margin: 14px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #FF914D 74%, #c96b32 26%);
  background: linear-gradient(180deg, #ffa365, #FF914D);
  color: #fff;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(255,145,77,.28);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.lm-fivex1000-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 30px rgba(255,145,77,.34);
}
.lm-fivex1000-cta:focus-visible{
  outline: 3px solid color-mix(in srgb, #FF914D 70%, #fff 30%);
  outline-offset: 2px;
}