/* ═══════════════════════════════════════════════════════════
   Aegusa Film Services — tufo & inchiostro
   Bodoni Moda (display) · Newsreader (testo) · IBM Plex Mono (dati)
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:   #efe9de;
  --paper-2: #e6ded0;
  --paper-3: #dbd0bd;
  --ink:     #16181b;
  --ink-80:  rgba(22,24,27,.80);
  --ink-62:  rgba(22,24,27,.62);
  --ink-40:  rgba(22,24,27,.40);
  --ink-18:  rgba(22,24,27,.18);
  --ink-10:  rgba(22,24,27,.10);
  --sea:     #0f4c5c;
  --sea-2:   #2a7f95;
  --salt:    #bd5029;

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --text:    "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1400px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .25vw,1.125rem);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100% }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.015em }
p{ margin:0 0 1em }
a{ color:inherit }

::selection{ background:var(--sea); color:var(--paper) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:0 }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--sea); outline-offset:3px; border-radius:2px;
}

/* ── grana di stampa ─────────────────────────────────────── */
.grain::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ── etichette monospazio ────────────────────────────────── */
.tag,.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-62);
  margin:0 0 1.4rem;
}
.tag em{ font-style:normal; color:var(--salt); margin-right:.9em }
.eyebrow{ display:flex; align-items:center; gap:1rem }
.eyebrow .rule{ width:clamp(28px,6vw,84px); height:1px; background:var(--ink-40) }

.ph{ color:var(--ink-40); font-style:italic }

/* ═══════════════ HEADER ═══════════════ */
.site-head{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.15rem var(--gut);
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom-color:var(--ink-18);
  padding-block:.8rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none }
.brand__mark{ width:40px; color:var(--sea); flex:none; display:block }
.brand__mark svg{ display:block }
.brand__text{ display:flex; flex-direction:column; line-height:1 }
.brand__text b{
  font-family:var(--display); font-weight:600; font-size:1.28rem;
  letter-spacing:.02em;
}
.brand__text i{
  font-family:var(--mono); font-style:normal; font-size:.6rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-62);
  margin-top:.28rem;
}

.site-nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.4rem) }
.site-nav a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-80);
  position:relative; padding-block:.3rem;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--sea); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.site-nav a:hover{ color:var(--sea) }
.site-nav a:hover::after{ transform:scaleX(1) }
.site-nav .is-cta{
  border:1px solid var(--ink-18); padding:.5rem .95rem; color:var(--ink);
}
.site-nav .is-cta::after{ display:none }
.site-nav .is-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; padding:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.burger span{ display:block; width:26px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease), opacity .2s }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gut);
  animation:fade .3s var(--ease);
}
.drawer[hidden]{ display:none }
.drawer nav{ display:flex; flex-direction:column; gap:.2rem }
.drawer nav a{
  font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem);
  text-decoration:none; display:flex; align-items:baseline; gap:1rem;
  padding-block:.35rem; border-bottom:1px solid var(--ink-10);
}
.drawer nav a em{
  font-family:var(--mono); font-style:normal; font-size:.7rem;
  letter-spacing:.16em; color:var(--salt);
}
.drawer__foot{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-40); margin-top:3rem;
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(6.5rem,11vh,9rem) var(--gut) 0;
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(42,127,149,.13), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 78%, var(--paper-3) 100%);
  overflow:hidden;
}
.hero__map{
  position:absolute; inset:auto -10% -6% 24%; height:100%;
  pointer-events:none; opacity:.9;
}
.hero__map svg{ width:100%; height:100%; display:block }
.hero__map .ghost path{
  fill:none; stroke:var(--sea); stroke-width:1.1; opacity:.42;
  stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:draw 2.6s var(--ease) .3s forwards;
}
.hero__map .ghost path:nth-child(2){ animation-delay:.9s }
.hero__map .ghost path:nth-child(3){ animation-delay:1.15s }
.hero__map .ghost path:nth-child(4){ animation-delay:1.35s }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.hero__inner{
  position:relative; max-width:var(--maxw); width:100%; margin:0 auto; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding-bottom:clamp(1.25rem,3.5vh,3rem);
}

.hero__title{
  font-family:var(--display);
  /* limitata anche in altezza: a 900px di viewport l'hero deve restare intero */
  font-size:clamp(2.9rem, min(9.2vw, 12.5vh), 8.2rem);
  line-height:.9; letter-spacing:-.03em;
  margin:0 0 clamp(1.1rem,3vh,2.4rem);
}
.hero__title .line{ display:block }
.hero__title .line--alt{ color:var(--sea) }
.hero__title .line--alt em{ font-style:italic; font-weight:500 }
.hero__title .line--sm{
  font-size:clamp(1.5rem,4.2vw,3.4rem); letter-spacing:-.01em;
  color:var(--ink-62); margin-top:.35em;
}

.hero__body{ max-width:44ch }
.hero__body p{ font-size:clamp(1.02rem,1.05vw,1.19rem); color:var(--ink-80) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem }

.btn{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none;
  padding:1.05rem 1.7rem; background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:var(--sea); border-color:var(--sea); transform:translateY(-2px) }
.btn--ghost{ background:none; color:var(--ink); border-color:var(--ink-18) }
.btn--ghost:hover{ background:none; color:var(--sea); border-color:var(--sea) }

.ticker{
  position:relative; border-top:1px solid var(--ink-18);
  border-bottom:1px solid var(--ink-18);
  overflow:hidden; padding:.85rem 0;
  margin-inline:calc(var(--gut) * -1);
}
.ticker__track{
  display:flex; width:max-content; gap:0;
  animation:slide 46s linear infinite;
}
.ticker span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-62); white-space:nowrap;
  padding-inline:2.2rem; position:relative;
}
.ticker span::after{
  content:""; position:absolute; right:0; top:50%; width:3px; height:3px;
  transform:translateY(-50%); border-radius:50%; background:var(--salt); opacity:.55;
}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ═══════════════ SEZIONI ═══════════════ */
.sec{ padding:clamp(5rem,11vw,9.5rem) var(--gut); position:relative }
.sec + .sec{ border-top:1px solid var(--ink-10) }
.sec__head{ max-width:var(--maxw); margin:0 auto clamp(3rem,6vw,5rem) }
.sec__title{
  font-family:var(--display); font-size:clamp(2.4rem,6.2vw,5.2rem);
  line-height:1; letter-spacing:-.028em; max-width:14ch;
}
.sec__lede{
  margin-top:1.4rem; max-width:52ch; font-size:clamp(1.02rem,1.05vw,1.19rem);
  color:var(--ink-62);
}

/* ── 01 servizi ───────────────────────────────────────────── */
.svc{ list-style:none; margin:0 auto; padding:0; max-width:var(--maxw); border-top:1px solid var(--ink-18) }
.svc__item{
  display:grid; grid-template-columns:minmax(80px,12%) 1fr;
  gap:clamp(1rem,4vw,3rem);
  padding:clamp(2rem,3.6vw,3.1rem) 0;
  border-bottom:1px solid var(--ink-10);
  transition:background .4s var(--ease);
}
.svc__item:hover{ background:linear-gradient(90deg, rgba(15,76,92,.05), transparent 65%) }
.svc__n{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  color:var(--salt); padding-top:.7rem;
}
.svc__main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1rem,3vw,3rem); align-items:start }
.svc__main h3{
  font-family:var(--display); font-size:clamp(1.7rem,3.1vw,2.7rem);
  line-height:1.06; letter-spacing:-.022em;
  transition:color .35s var(--ease);
}
.svc__item:hover h3{ color:var(--sea) }
.svc__main p{ color:var(--ink-80); margin:0 }
.svc__tags{
  grid-column:2;                       /* sotto la descrizione, non sotto il titolo */
  font-family:var(--mono)!important; font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-40)!important; margin-top:1.1rem!important;
}

/* ── 02 territorio ────────────────────────────────────────── */
.sec--map{ background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%) }
.mapwrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.map{ margin:0; position:sticky; top:7rem }
.map svg{ width:100%; height:auto; display:block; overflow:visible }
.map__land path{ fill:var(--paper-3); stroke:var(--sea); stroke-width:1.1; opacity:.9 }
.map__route{
  fill:none; stroke:var(--salt); stroke-width:1.2; stroke-dasharray:5 6; opacity:.5;
}
.map__pins circle{
  fill:var(--paper); stroke:var(--sea); stroke-width:1.8;
  transition:fill .3s var(--ease), r .3s var(--ease), stroke .3s var(--ease);
}
.map__pins text{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; fill:var(--ink-62); text-anchor:middle;
  transition:fill .3s var(--ease);
}
/* la proprietà CSS batte l'attributo di presentazione: le etichette a lato
   del pin devono restare allineate a sinistra, altrimenti coprono il cerchio */
.map__pins text[text-anchor="start"]{ text-anchor:start }
.pin.is-on circle{ fill:var(--salt); stroke:var(--salt); r:8 }
.pin.is-on text{ fill:var(--ink); font-weight:500 }
.map figcaption{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-40); margin-top:1.5rem;
}

.locs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-18) }
.loc{
  padding:1.15rem 1rem 1.15rem 0; border-bottom:1px solid var(--ink-10);
  cursor:default; transition:padding-left .35s var(--ease), background .35s var(--ease);
  position:relative;
}
.loc::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--salt); transform:translateY(-50%); transition:width .35s var(--ease);
}
.loc.is-on{ padding-left:2.2rem }
.loc.is-on::before{ width:1.4rem }
.loc h3{
  font-family:var(--display); font-size:1.32rem; letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.loc.is-on h3{ color:var(--sea) }
.loc p{ margin:.3rem 0 0; font-size:.94rem; color:var(--ink-62); line-height:1.5 }

/* ── 03 distanze ──────────────────────────────────────────── */
.times{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:0 clamp(2rem,6vw,6rem);
}
.times ul{ list-style:none; margin:0; padding:0 }
.times li{
  display:flex; align-items:baseline; gap:.6rem;
  padding:1.05rem 0; border-bottom:1px solid var(--ink-10);
}
.times__k{ font-family:var(--display); font-size:1.24rem; letter-spacing:-.01em; flex:none }
.times li::after{
  content:""; flex:1; order:1;        /* il filetto sta FRA voce e valore */
  border-bottom:1px dotted var(--ink-18); transform:translateY(-.28em);
}
.times__v{
  font-family:var(--mono); font-size:.86rem; letter-spacing:.06em;
  color:var(--sea); flex:none; font-weight:500; order:2;
}
.times__v em{
  font-style:normal; color:var(--ink-40); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; margin-left:.5em;
}

/* ── 04 metodo (scuro) ────────────────────────────────────── */
.sec--dark{
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(42,127,149,.2), transparent 62%),
    var(--ink);
  color:var(--paper);
  border-top-color:var(--ink);
}
.sec--dark .tag{ color:rgba(239,233,222,.5) }
.sec--dark .tag em{ color:var(--salt) }
.sec--dark .sec__lede{ color:rgba(239,233,222,.6) }
/* 6 passi: 3×2 / 2×3 / 1×6 — mai celle vuote, che si vedrebbero
   come blocchi grigi (il fondo della griglia fa da colore del gap) */
.steps{
  list-style:none; margin:0 auto; padding:0; max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:rgba(239,233,222,.16);
  border:1px solid rgba(239,233,222,.16);
}
.steps li{
  background:var(--ink); padding:clamp(1.75rem,2.6vw,2.5rem);
  transition:background .4s var(--ease);
}
.steps li:hover{ background:#1e2226 }
.steps b{
  font-family:var(--mono); font-weight:500; font-size:.72rem;
  letter-spacing:.2em; color:var(--salt); display:block; margin-bottom:1.6rem;
}
.steps h3{ font-family:var(--display); font-size:1.75rem; letter-spacing:-.018em; margin-bottom:.7rem }
.steps p{ margin:0; font-size:.97rem; color:rgba(239,233,222,.66); line-height:1.58 }

/* ── 05 contatti ──────────────────────────────────────────── */
.sec--contact{ background:linear-gradient(180deg, var(--paper-2), var(--paper)) }
.contact{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.contact__title{
  font-family:var(--display); font-size:clamp(2.5rem,6.4vw,5.4rem);
  line-height:1.02; letter-spacing:-.03em;
}
.contact__title em{ font-style:italic; color:var(--sea) }
.contact__lede{ margin-top:1.5rem; max-width:42ch; color:var(--ink-62) }
.contact__mail{
  display:inline-block; margin-top:1.6rem; text-decoration:none;
  font-family:var(--display); font-size:clamp(1.4rem,3.2vw,2.5rem);
  color:var(--sea); letter-spacing:-.02em;
  border-bottom:1px solid var(--ink-18); padding-bottom:.14em;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.contact__mail:hover{ color:var(--salt); border-bottom-color:var(--salt) }

.contact__r{ margin:0; border-top:1px solid var(--ink-18) }
.contact__r > div{ padding:1.2rem 0; border-bottom:1px solid var(--ink-10) }
.contact__r dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-40); margin-bottom:.5rem;
}
.contact__r dd{ margin:0; font-size:1rem; line-height:1.5 }

/* ═══════════════ FOOTER ═══════════════ */
.site-foot{
  padding:2.6rem var(--gut) 3rem; border-top:1px solid var(--ink-18);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--ink-62);
}
.site-foot__row{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
}
.site-foot__row--end{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--ink-10) }
.site-foot p{ margin:0 }
.site-foot b{ font-weight:500; color:var(--ink) }
.site-foot a{ color:var(--sea); text-decoration:none }
.site-foot a:hover{ text-decoration:underline }

/* ═══════════════ REVEAL ═══════════════ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ease) var(--d,0ms), transform .85s var(--ease) var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none }
.d1{ --d: 90ms } .d2{ --d:180ms } .d3{ --d:270ms }
.d4{ --d:360ms } .d5{ --d:480ms }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1080px){
  .svc__main{ grid-template-columns:1fr; gap:.9rem }
  .svc__tags{ grid-column:1 }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mapwrap{ grid-template-columns:1fr }
  .map{ position:static }
  .contact{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .steps{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:820px){
  .site-nav{ display:none }
  .burger{ display:flex }
  .hero{ padding-top:7rem; min-height:92svh }
  .hero__map{ inset:auto -30% 4% 8%; opacity:.24 }
  .hero__title{ font-size:clamp(2.9rem,13vw,5rem) }
  .svc__item{ grid-template-columns:1fr; gap:.5rem }
  .svc__n{ padding-top:0 }
  .sec__title{ max-width:none }
  .map__pins text{ font-size:17px }
}
@media (max-width:520px){
  .hero__cta{ flex-direction:column; align-items:stretch }
  .btn{ text-align:center }
  .times__k{ font-size:1.1rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{ opacity:1; transform:none }
  .hero__map .ghost path{ stroke-dashoffset:0 }
}

@media print{
  .site-head,.ticker,.hero__map,.drawer,.grain::after{ display:none!important }
  body{ background:#fff; color:#000 }
  .sec{ padding:1.5rem 0; break-inside:avoid }
}