/* ============================================================
   ASGAM — styles.css
   Boutique caldo · Fraunces + DM Sans · sabbia / oliva / terracotta
   Nessun gradiente, nessun glow. Tipografia + colore + composizione.
   ============================================================ */

:root{
  /* Palette blu (dai colori del logo). Nomi storici mantenuti come alias. */
  --bg:        #EEF3F8;   /* sfondo principale */
  --bg-2:      #E3ECF4;   /* sezioni alternate */
  --surface:   #FBFDFF;   /* superfici chiare / testo su blu */
  --blue:      #1B82C6;   /* brand primario */
  --blue-deep: #12557F;
  --blue-tint: #D8E9F6;   /* fondo azzurro chiaro */
  --blue-tint2:#BFDBEF;
  --accent:    #EE7A47;   /* accento caldo (richiamo colori originali) */
  --accent-soft:#FBE7DA;

  --sand:      var(--bg);
  --sand-2:    var(--bg-2);
  --cream:     var(--surface);
  --ink:       #122436;   /* testo (navy freddo) */
  --ink-soft:  #566A7D;
  --olive:     var(--blue);
  --olive-deep:var(--blue-deep);
  --sage:      var(--blue-tint);
  --sage-deep: var(--blue-tint2);
  --clay:      var(--accent);
  --clay-soft: var(--accent-soft);
  --line:      rgba(18,36,54,.14);
  --line-soft: rgba(18,36,54,.08);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --wrap: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--sand);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.015em;margin:0}
h1 em,h2 em,h3 em,.about__quote em,.manifesto__q em{font-style:italic;color:var(--clay)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- small shared bits ---------- */
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 26px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--clay);display:inline-block}
.kicker{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin-bottom:18px}
.kicker::before{content:"— "}

.link-arrow{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink);border-bottom:2px solid var(--clay);padding-bottom:3px;transition:color .25s,border-color .25s,gap .25s;display:inline-flex;align-items:center;gap:8px}
.link-arrow::after{content:"→";transition:transform .25s var(--ease);display:inline-block}
.link-arrow:hover{color:var(--clay)}
.link-arrow:hover::after{transform:translateX(5px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:.98rem;padding:.85em 1.7em;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.btn--lg{padding:1.05em 2.2em;font-size:1.05rem}
.btn--solid{background:var(--olive);color:var(--cream)}
.btn--solid:hover{background:var(--olive-deep);transform:translateY(-2px)}
.btn--cream{background:var(--cream);color:var(--ink)}
.btn--cream:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.nav.scrolled{background:rgba(238,243,248,.9);backdrop-filter:blur(10px);padding:13px 0;box-shadow:0 1px 0 var(--line-soft)}
.nav__inner{display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px}
.brand__text{font-family:var(--sans);font-weight:700;font-size:1.4rem;letter-spacing:.005em;color:var(--ink);text-transform:lowercase}
.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{font-size:.98rem;font-weight:500;color:var(--ink);position:relative;padding:3px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1.5px;background:var(--clay);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--clay)}
.nav__links a:hover::after{width:100%}
.nav__cta{padding:.6em 1.35em;font-size:.9rem}
.nav__toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav__toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-8px) rotate(-45deg)}
.nav__mobile{display:none;flex-direction:column;background:var(--cream);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.nav__mobile.open{max-height:320px}
.nav__mobile a{padding:16px 28px;border-top:1px solid var(--line-soft);font-weight:500;font-size:1.05rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:180px 0 90px}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero__title{font-size:clamp(3rem,7vw,5.4rem);font-weight:400;margin:0 0 30px;letter-spacing:-.03em}
.hero__sub{font-size:1.16rem;color:var(--ink-soft);max-width:520px;margin:0 0 38px}
.hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* concentric arches composition (no photos) */
.hero__art{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1/1.12}
.arch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:1000px 1000px 0 0}
.arch--1{width:100%;height:88%;background:var(--sage)}
.arch--2{width:70%;height:64%;background:var(--clay)}
.arch--3{width:42%;height:40%;background:var(--olive)}
.arch-mark{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);color:var(--cream);font-size:2rem;line-height:1;z-index:2}
.sun{position:absolute;top:4%;right:8%;width:74px;height:74px;border-radius:50%;border:2px solid var(--olive);z-index:3}
.pebble{position:absolute;left:2%;bottom:16%;width:52px;height:52px;border-radius:46% 54% 62% 38%/48% 42% 58% 52%;background:var(--clay-soft);z-index:3}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding:40px 0 100px}
.manifesto__q{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.28;letter-spacing:-.01em;max-width:900px;margin:0}

/* ============================================================
   SECTION HEADS
   ============================================================ */
section{position:relative}
.sec-head{max-width:760px;margin:0 0 60px;padding-top:96px}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
#servizi .sec-head{padding-top:0}

/* ============================================================
   SERVIZI
   ============================================================ */
.svc{border-top:1px solid var(--line)}
.svc--sage{background:var(--sage);border-top:0}
.svc--clay{background:var(--clay-soft)}
.svc__inner{display:grid;grid-template-columns:210px 1fr;gap:50px;padding:76px 0;align-items:start}
.svc__aside{position:relative}
.svc__num{font-family:var(--serif);font-size:3.4rem;font-weight:400;color:var(--olive);display:block;line-height:1}
.svc__arch{display:block;width:120px;height:96px;border-radius:1000px 1000px 0 0;background:var(--olive);margin-top:26px}
.svc__arch--clay{background:var(--clay)}
.svc__arch--olive{background:var(--olive-deep)}
.svc__body h3{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0 0 18px}
.svc__lead{font-size:1.14rem;color:var(--ink-soft);max-width:640px;margin:0 0 30px}
.dashlist{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:0}
.dashlist li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--line-soft);font-weight:500;color:var(--ink)}
.dashlist li:last-child{border-bottom:1px solid var(--line-soft)}
.dashlist li::before{content:"—";position:absolute;left:0;color:var(--clay);font-weight:600}

/* E inoltre */
.also{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:70px 0 96px;border-top:1px solid var(--line)}
.also__label{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ink);margin-right:10px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0}
.chips li{border:1.5px solid var(--line);border-radius:100px;padding:.55em 1.15em;font-size:.94rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.chips li:hover{background:var(--olive);color:var(--cream);border-color:var(--olive)}

/* ============================================================
   VALORI
   ============================================================ */
.valori{background:var(--sand-2)}
.valori .sec-head{padding-bottom:0}
.values{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);margin-top:20px;padding-bottom:96px}
.value{padding:44px 44px 44px 0;border-bottom:1px solid var(--line-soft)}
.value:nth-child(odd){padding-left:0}
.value:nth-child(even){padding-left:44px;border-left:1px solid var(--line-soft)}
.value__i{font-family:var(--serif);font-size:1.05rem;color:var(--clay)}
.value h4{font-family:var(--serif);font-size:1.6rem;margin:10px 0 12px}
.value p{color:var(--ink-soft);margin:0;font-size:1.03rem}

/* ============================================================
   CHI SIAMO
   ============================================================ */
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:96px 0}
.about__quote{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:-.02em;margin:0}
.about__text p{font-size:1.1rem;color:var(--ink-soft);margin:0 0 20px}
.facts{margin:36px 0 0;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:0}
.facts div{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.facts dt{font-family:var(--serif);font-style:italic;color:var(--clay);min-width:80px}
.facts dd{margin:0;font-weight:500}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--olive);color:var(--cream)}
.cta__inner{text-align:center;padding:104px 0;max-width:720px;margin:0 auto}
.cta h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 16px}
.cta h2 em{color:var(--accent)}
.cta p{font-size:1.16rem;color:rgba(236,242,248,.82);margin:0 0 34px}

/* ============================================================
   CONTATTI
   ============================================================ */
.contact__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;padding:96px 0;align-items:center}
.contact__intro h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:0 0 20px}
.contact__intro p{color:var(--ink-soft);font-size:1.1rem;margin:0;max-width:340px}
.contact__list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.contact__list a{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:20px;padding:26px 4px;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease),color .3s}
.contact__list a:hover{padding-left:16px;color:var(--clay)}
.contact__k{font-family:var(--serif);font-style:italic;color:var(--olive);font-size:1.1rem}
.contact__v{font-size:1.16rem;font-weight:500}
.contact__arrow{font-size:1.3rem;color:var(--clay)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:rgba(236,242,248,.72)}
.footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.6fr;gap:40px;padding:76px 0 54px}
.footer .brand__text{color:var(--cream)}
.footer__brand p{margin:20px 0 0;font-size:.96rem;color:rgba(236,242,248,.55);max-width:280px}
.footer__col{display:flex;flex-direction:column;gap:13px}
.footer__col h5,.footer__legal h5{font-family:var(--sans);color:var(--cream);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;font-weight:600}
.footer__col a{color:rgba(236,242,248,.68);font-size:.98rem;transition:color .2s}
.footer__col a:hover{color:var(--clay)}
.footer__legal p{margin:0;font-size:.94rem;line-height:1.7;color:rgba(236,242,248,.55)}
.footer__bar{border-top:1px solid rgba(236,242,248,.12);padding:22px 0}
.footer__bar-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:rgba(236,242,248,.45)}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .nav__mobile{display:flex}
  .hero__inner,.about__inner,.contact__inner{grid-template-columns:1fr;gap:48px}
  .hero__art{order:-1;max-width:300px}
  .values{grid-template-columns:1fr}
  .value,.value:nth-child(even){padding:34px 0;border-left:0}
  .svc__inner{grid-template-columns:1fr;gap:26px;padding:60px 0}
  .svc__aside{display:flex;align-items:center;gap:24px}
  .svc__arch{margin-top:0}
  .sec-head{padding-top:80px;margin-bottom:44px}
  .about__inner,.contact__inner{padding:80px 0}
  .cta__inner{padding:88px 0}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hero__inner>*,.about__inner>*,.contact__inner>*,.svc__inner>*{min-width:0}
  .hero__sub,.manifesto__q,.about__quote,.contact__intro p{max-width:100%}
  .hero{padding:126px 0 60px}
  .hero__title{font-size:clamp(2.3rem,10.5vw,3.1rem);margin-bottom:24px}
  .hero__sub{font-size:1.06rem}
  .hero__cta{gap:18px}
  .hero__cta .btn{width:100%}
  .hero__art{max-width:250px}
  .label{margin-bottom:20px}
  .manifesto{padding:20px 0 62px}
  .sec-head{padding-top:60px;margin-bottom:36px}
  .svc__inner{padding:46px 0}
  .svc__num{font-size:2.7rem}
  .svc__arch{width:88px;height:70px}
  .svc__lead{font-size:1.06rem}
  .also{padding:46px 0 62px}
  .about__inner{padding:62px 0}
  .cta__inner{padding:70px 0}
  .contact__inner{padding:62px 0}
  .contact__list a{grid-template-columns:1fr auto;gap:2px 14px;padding:22px 2px}
  .contact__k{grid-column:1/-1}
  .contact__v{font-size:1.04rem;overflow-wrap:anywhere}
  .footer__inner{grid-template-columns:1fr;gap:32px;padding:58px 0 44px}
  .footer__bar-inner{flex-direction:column;gap:6px}
}