@font-face{
    font-family:'Space Grotesk';
    src:url('../fonts/space-grotesk-500.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Space Grotesk';
    src:url('../fonts/space-grotesk-600.woff2') format('woff2');
    font-weight:600; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Inter';
    src:url('../fonts/Inter-Variable.woff2') format('woff2');
    font-weight:100 900; font-style:normal; font-display:swap;
  }

    :root{
    --navy-950:#0A1522;
    --navy-900:#0F2033;
    --navy-800:#16293D;
    --platinum-300:#B9C2C9;
    --platinum-100:#DEE3E6;
    --ivory-100:#F4EFE4;
    --ivory-050:#FAF7F1;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --radius: 6px;
  }

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

  html{scroll-behavior:auto;}

  body{
    background:var(--navy-950);
    color:var(--ivory-100);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,.display{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.05;
  }

  .eyebrow{
    font-family:'Inter', sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--platinum-300);
  }

  a{color:inherit;}

  /* ---------- HERO LOGO (large, centered — this IS the coming-soon
     announcement, so the mark leads, not a small corner bug) ---------- */
  .hero-logo{
    width: clamp(200px, 26vw, 380px);
    height: auto;
    display: block;
    margin: 0 auto clamp(48px, 7vw, 96px);
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding: clamp(24px, 6vw, 96px);
    position:relative;
    border-bottom:1px solid rgba(222,227,230,0.08);
  }

  .hero-eyebrow{margin-bottom:20px;}

  .hero h1{
    font-size:clamp(2.2rem, 6vw, 4.6rem);
    max-width:16ch;
    color:var(--ivory-100);
  }

  .hero h1 .word{
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
  }
  .hero h1 .word span{
    display:inline-block;
    transform:translateY(110%);
  }

  .hero-sub{
    margin-top:28px;
    max-width:44ch;
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    color:var(--platinum-100);
    opacity:0;
  }

  .scroll-cue{
    position:absolute;
    bottom:clamp(24px,4vw,48px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--platinum-300);
    opacity:0;
  }
  .scroll-cue .line{
    width:28px; height:1px; background:var(--platinum-300);
  }

  /* ---------- SCROLL SEQUENCE ---------- */
  /* 8 stages: Blueprint -> Construction -> Neighborhood -> City ->
     Region -> State -> Horizon -> Nation. ~115vh of scroll per stage
     gives the continuous Ken Burns motion room to breathe. */
  .scroll-sequence{
    position:relative;
    height:920vh;
    min-height:920vh;
    flex-shrink:0;
    flex-basis:auto;
    width:100%;
  }

  .camera{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--navy-950);
  filter:saturate(1) hue-rotate(0deg) brightness(1);
}

  .stage-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    transform-origin:center center;
    will-change:transform,opacity,filter;
  }

  /* photoreal layer: every stage is a photograph now, treated in a
     navy/ivory duotone so the 8 different source images read as one
     continuous world instead of a collage. If a file is missing, the
     layer just hides itself — nothing breaks before assets exist. */
  .photo-layer{
    position:absolute;
    inset: clamp(18px, 4vw, 64px);
    overflow:hidden;
    pointer-events:none;
    border-radius:3px;
    box-shadow: 0 40px 90px rgba(0,0,0,0.4), 0 0 0 1px rgba(222,227,230,0.08);
  }
  .photo-layer img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:none;
  }
  .photo-layer::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--navy-950);
    opacity:0.12;
    z-index:1;
  }
  .stage-svg svg{
    width:100%;
    height:100%;
    display:block;
    position:relative;
    z-index:2;
  }

  .pulse-dot{
    fill:var(--ivory-100);
  }
  .pulse-ring{
    fill:none;
    stroke:var(--ivory-100);
    stroke-width:1.2;
    opacity:0;
    transform-origin:center;
  }
  .pulse-ring.active{
    animation: pulse-out 2.4s var(--ease-out) infinite;
  }
  @keyframes pulse-out{
    0%{ transform:scale(0.4); opacity:0.9; }
    100%{ transform:scale(2.6); opacity:0; }
  }

  /* progress dots */
  .progress{
    position:absolute;
    right:clamp(20px, 4vw, 56px);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:3;
  }
  .progress .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--platinum-300);
    opacity:0.4;
    transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .progress .dot.active{
    opacity:1;
    background:var(--ivory-100);
    transform:scale(1.35);
  }

  @media (max-width: 720px){
    .progress{ display:none; }
  }

  /* ---------- CTA ---------- */
  .cta{
    min-height:70vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding: clamp(24px, 6vw, 96px);
    border-top:1px solid rgba(222,227,230,0.08);
  }
  .cta h2{
    font-size:clamp(1.8rem, 4vw, 3rem);
    max-width:16ch;
    margin-top:16px;
  }
  .cta-sub{
    margin-top:18px;
    max-width:48ch;
    color:var(--platinum-100);
    font-size:clamp(0.95rem, 1.4vw, 1.05rem);
  }
  .cta-form{
    margin-top:36px;
    display:flex;
    gap:12px;
    width:100%;
    max-width:480px;
    flex-wrap:wrap;
  }
  .cta-form input[type=email]{
    flex:1 1 220px;
    min-width:0;
    background:transparent;
    border:1px solid rgba(222,227,230,0.35);
    border-radius:var(--radius);
    padding:14px 16px;
    color:var(--ivory-100);
    font-family:'Inter', sans-serif;
    font-size:0.95rem;
    outline:none;
    transition:border-color .25s var(--ease-out);
  }
  .cta-form input[type=email]:focus{
    border-color:var(--ivory-100);
  }
  .cta-form button{
    background:var(--ivory-100);
    color:var(--navy-950);
    border:none;
    border-radius:var(--radius);
    padding:14px 26px;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    transition:transform .25s var(--ease-out), background .25s var(--ease-out);
  }
  .cta-form button:hover{
    transform:translateY(-1px);
    background:var(--platinum-100);
  }
  .cta-note{
    margin-top:14px;
    font-size:0.78rem;
    color:var(--platinum-300);
    max-width:48ch;
  }
  .cta-form{ position:relative; }
  .cta-form .hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .cta-form input[type=email][disabled]{ opacity:0.5; }
  .cta-form button[disabled]{ opacity:0.6; cursor:default; transform:none !important; }
  .cta-feedback{
    margin-top:14px;
    font-size:0.9rem;
    display:none;
  }
  .cta-feedback.show{ display:block; }
  .cta-feedback.ok{ color:#9fd8b0; }
  .cta-feedback.error{ color:#e0a0a0; }

  footer{
    padding: clamp(20px, 4vw, 40px) clamp(24px, 6vw, 96px);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:24px;
    font-size:0.78rem;
    color:var(--platinum-300);
    border-top:1px solid rgba(222,227,230,0.08);
  }
  footer > div{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .footer-compliance{
    text-align:right;
    max-width:38ch;
  }
  @media (max-width:640px){
    footer{ flex-direction:column; }
    .footer-compliance{ text-align:left; }
  }

  /* =====================================================================
     OVERRIDE CONTRO theme.json
     Il tema applica ai suoi elementi (h1/h2, button, link, input) colori
     pensati per fondi chiari: navy su navy = testo invisibile.
     Questi selettori sono piu specifici e riportano i colori corretti
     SOLO dentro la landing, senza toccare il resto del sito.
     ===================================================================== */

  body .hero h1,
  body .hero h1 .word span,
  body .cta h2{
    color:var(--ivory-100) !important;
    font-family:'Space Grotesk', sans-serif !important;
    font-weight:600 !important;
    letter-spacing:-0.01em !important;
  }

  body .hero .hero-sub,
  body .cta .cta-sub{
    color:var(--platinum-100) !important;
  }

  body .cta .eyebrow{
    color:var(--platinum-300) !important;
  }

  body .cta-form input[type=email]{
    background:transparent !important;
    border:1px solid rgba(222,227,230,0.35) !important;
    color:var(--ivory-100) !important;
    -webkit-text-fill-color:var(--ivory-100);
    border-radius:var(--radius) !important;
    padding:14px 16px !important;
    font-family:'Inter', sans-serif !important;
    text-transform:none !important;
    letter-spacing:0 !important;
  }
  body .cta-form input[type=email]::placeholder{
    color:var(--platinum-300) !important;
    opacity:0.8;
  }
  body .cta-form input[type=email]:focus{
    border-color:var(--ivory-100) !important;
    outline:none !important;
  }

  body .cta-form button{
    background:var(--ivory-100) !important;
    color:var(--navy-950) !important;
    border:none !important;
    border-radius:var(--radius) !important;
    padding:14px 26px !important;
    font-family:'Inter', sans-serif !important;
    font-weight:600 !important;
    font-size:0.95rem !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    cursor:pointer;
  }
  body .cta-form button:hover{
    background:var(--platinum-100) !important;
    color:var(--navy-950) !important;
  }

  body footer,
  body footer span{
    color:var(--platinum-300) !important;
  }

  /* Il wrapper del contenuto di WordPress impone margini e larghezza
     massima: la landing deve poter uscire a tutta pagina, altrimenti
     l'hero non e mai alto quanto il viewport e il pin non ha spazio. */
  .wp-site-blocks,
  .wp-block-post-content,
  .entry-content{
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Nessun antenato della camera puo avere overflow diverso da visible,
     altrimenti position:sticky smette di funzionare e la sequenza
     resta bloccata sulla prima immagine. */
  html, body,
  .wp-site-blocks,
  .wp-block-post-content,
  .entry-content,
  .wp-block-group{
    overflow:visible !important;
  }

  /* I block theme mettono il contenuto dentro un contenitore flex in
     colonna: un figlio con height viene compresso da flex-shrink e la
     sezione da 920vh collassa a un'altezza schermo, uccidendo lo
     scroll pinnato. Queste righe impediscono la compressione. */
  body .hero,
  body .scroll-sequence,
  body .cta,
  body footer{
    flex-shrink:0 !important;
    flex-basis:auto !important;
    width:100% !important;
    max-width:none !important;
  }

  body .scroll-sequence{
    height:920vh !important;
    min-height:920vh !important;
  }

  body .hero{
    min-height:100vh !important;
  }

  body .camera{
    height:100vh !important;
}