/* ATLAS ESTATE — SEZIONI DELLA HOME
   Regola della skill: nessuna sezione adiacente condivide lo scheletro di
   layout. Ognuna ha una struttura diversa dalla vicina. */

/* --------------------------------------------------------------------------
   03 · IL PROBLEMA
   Tre blocchi sfalsati in verticale, non una griglia allineata.
   Lo sfalsamento fa leggere i tre punti uno alla volta, che e il modo in cui
   si riconosce un problema: non tutti insieme.
   -------------------------------------------------------------------------- */
.s-problem{
  background: var(--canvas-alt);
  padding-block: var(--section-y-lg);
}

.s-problem__lede{
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-secondary);
  max-width: 48ch;
  margin-block-end: var(--sp-9);
}

.s-problem__list{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .s-problem__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  /* lo sfalsamento */
  .s-problem__item:nth-child(2){ margin-block-start: var(--sp-8); }
  .s-problem__item:nth-child(3){ margin-block-start: var(--sp-11); }
}

.s-problem__item{
  border-block-start: var(--bw) solid var(--border-gold);
  padding-block-start: var(--sp-5);
  position: relative;
}
.s-problem__item h3{
  font-size: var(--fs-h4);
  margin-block-end: var(--sp-3);
}
.s-problem__item p{ color: var(--text-secondary); font-size: var(--fs-small); max-width: 38ch; }

/* Un elemento vivo per sezione, a livello sussurro. */
.s-problem__item::after{
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 34%;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 900ms var(--ease-cine);
}
.s-problem__item.is-in::after{ opacity: 1; }

/* --------------------------------------------------------------------------
   04 · IL METODO
   Colonnato: sei pilastri raggruppati nei tre livelli del marchio, sotto un
   arco che si disegna sullo scroll. E il logo che diventa struttura del
   servizio, senza che nessuno debba spiegarlo. Vedi BRAND.md §4.
   -------------------------------------------------------------------------- */
.s-method{ padding-block: var(--section-y-lg); position: relative; }

.s-method__arch{
  display: block;
  width: 100%;
  height: auto;
  margin: var(--sp-5) auto var(--sp-6);
  color: var(--accent);
  opacity: .85;
}

/* I tre livelli sono SOLAI SOVRAPPOSTI, non tre colonne affiancate.
   Con 2, 4 e 1 pilastro, tre colonne producevano un vuoto di mezzo schermo
   sotto "Valore", e un elemento parallelo diseguale si legge come un buco.
   Impilati, invece, sono letteralmente i tre solai del marchio: il logo
   diventa la struttura del servizio senza che nessuno debba spiegarlo. */
.s-method__levels{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}

.s-method__level{
  --span: 2;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding-block-start: var(--sp-5);
  /* il solaio */
  border-block-start: var(--bw) solid var(--border-gold);
}
.s-method__level--wide{ --span: 1; }
.s-method__level--single{ --span: 2; }

@media (min-width: 900px){
  .s-method__level{ grid-template-columns: minmax(0, 12rem) 1fr; gap: var(--sp-7); }
}

.s-method__level > h3{
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.s-method__level-n{ color: var(--text-muted); font-variant-numeric: tabular-nums; }

.s-method__pillars{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 680px){
  .s-method__pillars{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  /* quattro corsie per tutti i livelli: i pilastri si allineano fra un solaio
     e l altro, e ogni livello riempie la propria riga con lo span che gli
     spetta invece di lasciare colonne vuote */
  .s-method__pillars{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-method__pillars > *{ grid-column: span var(--span); }
}

.s-method__pillar h4{
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-2);
}
.s-method__pillar p{ color: var(--text-secondary); font-size: var(--fs-small); max-width: 40ch; }

/* --------------------------------------------------------------------------
   06 · COME FUNZIONA
   Timeline orizzontale su desktop, verticale su mobile.
   La linea d'oro avanza da uno step al successivo.
   -------------------------------------------------------------------------- */
.s-process{ padding-block: var(--section-y-lg); }

.s-process__track{
  position: relative;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  padding-inline-start: var(--sp-6);
}
.s-process__track::before{
  content: "";
  position: absolute;
  inset-block: .4em 0;
  inset-inline-start: 3px;
  width: 1px;
  background: var(--border);
}
.s-process__track::after{
  content: "";
  position: absolute;
  inset-block-start: .4em;
  inset-inline-start: 3px;
  width: 1px;
  height: calc((100% - .4em) * var(--draw, 0));
  background: var(--accent);
  transition: height 900ms var(--ease-cine);
}

@media (min-width: 1024px){
  .s-process__track{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-5);
    padding-inline-start: 0;
    padding-block-start: var(--sp-7);
  }
  .s-process__track::before{
    inset: 0 0 auto 0;
    width: 100%;
    height: 1px;
  }
  .s-process__track::after{
    inset: 0 auto auto 0;
    height: 1px;
    width: calc(100% * var(--draw, 0));
    transition: width 1200ms var(--ease-cine);
  }
}

.s-process__step{ position: relative; }
.s-process__step::before{
  content: "";
  position: absolute;
  inset-block-start: .55em;
  inset-inline-start: calc(var(--sp-6) * -1);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--accent);
}
@media (min-width: 1024px){
  .s-process__step::before{
    inset-block-start: calc(var(--sp-7) * -1 - 3px);
    inset-inline-start: 0;
  }
}
.s-process__n{
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-2);
}
.s-process__step h3{
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-2);
}
.s-process__step p{ color: var(--text-secondary); font-size: var(--fs-small); max-width: 34ch; }

/* --------------------------------------------------------------------------
   07 · TEAM
   Griglia irregolare. I ritratti reali arriveranno dopo: il layout e gia
   quello definitivo e li accoglie senza essere ridisegnato.
   Nessun volto generato, nessun avatar, nessuna persona stock. D-07.
   -------------------------------------------------------------------------- */
.s-team{
  background: var(--canvas-alt);
  padding-block: var(--section-y-lg);
}

.s-team__grid{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px){
  .s-team__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
  /* irregolarita: due ritratti scendono di un gradino */
  .s-team__member:nth-child(2),
  .s-team__member:nth-child(4){ margin-block-start: var(--sp-7); }
}

.s-team__portrait{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: var(--bw) solid var(--border);
  margin-block-end: var(--sp-4);
}
.s-team__portrait img{ width: 100%; height: 100%; object-fit: cover; }

/* Segnaposto del ritratto: dichiara che manca, non finge che ci sia.
   Nessuna silhouette generica, nessuna icona di persona: la geometria del
   marchio, in filigrana. */
.s-team__portrait--empty::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      var(--accent) 0 1px, transparent 1px 22px);
  opacity: .07;
}
.s-team__portrait--empty::before{
  content: attr(data-placeholder);
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline: var(--sp-4);
  z-index: 1;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.s-team__name{
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.s-team__role{
  margin-block-start: var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   09 · OBIEZIONI E FAQ
   Inversione cromatica su avorio. E l'unico punto della home in cui il fondo
   si schiarisce: segnala che qui si legge, non si guarda.
   -------------------------------------------------------------------------- */
.s-faq{
  background: var(--canvas);   /* risolto da .t-light */
  color: var(--text-primary);
  padding-block: var(--section-y-lg);
}

.s-faq__layout{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px){
  .s-faq__layout{ grid-template-columns: minmax(0, 24rem) 1fr; gap: var(--sp-9); }
  .s-faq__aside{ position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-6)); }
}

.s-faq__aside p{ color: var(--text-secondary); margin-block: var(--sp-4) var(--sp-5); }

/* --------------------------------------------------------------------------
   10 · CTA FINALE
   Il frame di chiusura del video torna come immagine di sfondo: un asset di
   design gratuito, e chiude il cerchio narrativo aperto dall'hero.
   -------------------------------------------------------------------------- */
.s-cta{
  position: relative;
  padding-block: var(--section-y-lg);
  overflow: hidden;
  isolation: isolate;
  /* Isola scura: scrim blu notte fisso, quindi testo sempre chiaro anche su
     pagina .t-light. Serve ri-assegnare ANCHE color, non la sola variabile,
     perche gli heading ereditano il colore gia risolto dal body. Vedi D-28. */
  --text-primary:   #F4F0E8;
  --text-secondary: #A9B4C2;
  --accent-text:    #C5A15A;
  color: var(--text-primary);
}
.s-cta__bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.s-cta__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(6,21,39,.95) 0%, rgba(6,21,39,.86) 46%, rgba(6,21,39,.58) 100%);
}
.s-cta__inner{ max-width: 44rem; }
.s-cta h2{
  font-size: var(--fs-h1);
  max-width: 15ch;
  text-shadow: var(--tshadow);
}
.s-cta p{
  margin-block: var(--sp-5) var(--sp-7);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-primary);
  max-width: 42ch;
  text-shadow: var(--tshadow);
}

/* L'arco d'oro che si chiude attorno alla CTA: il leitmotiv che finisce. */
.s-cta__arc{
  position: absolute;
  inset-block-end: -12%;
  inset-inline-end: -6%;
  z-index: -1;
  width: min(46rem, 62vw);
  color: var(--accent);
  opacity: .34;
  pointer-events: none;
}
@media (max-width: 900px){ .s-cta__arc{ display: none; } }

/* --------------------------------------------------------------------------
   CTA STICKY MOBILE
   Solo su schermi piccoli, solo dopo l'hero, e chiudibile.
   Non copre mai il contenuto: il body riceve il padding corrispondente.
   -------------------------------------------------------------------------- */
.ae-sticky-cta{
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter)
           calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(6,21,39,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-start: var(--bw) solid var(--border);
  transform: translateY(110%);
  transition: transform var(--dur-ui) var(--ease-out);
}
@media (max-width: 720px){
  .ae-sticky-cta{ display: flex; }
  .ae-sticky-cta[data-visible]{ transform: translateY(0); }
  body.has-sticky-cta{ padding-block-end: 76px; }
}
.ae-sticky-cta .ae-btn{ flex: 1; }
.ae-sticky-cta__close{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}