/* ---------- font locali ---------- */
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;font-style:italic;font-weight:300 600;font-display:swap;
  src:url(fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:italic;font-weight:300 600;font-display:swap;
  src:url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Karla;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/karla-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Karla;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/karla-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- base ---------- */
:root{
  --ink:#1B1B1E; --ink-2:#3A3A3E; --paper:#FFFFFF; --sand:#EFE7DF; --sand-2:#F7F2EC;
  --line:#E4DDD6; --teal:#14707F; --teal-dark:#0F5A66; --teal-soft:#A6D6D9; --muted:#6B6560;
  --display:Fraunces,Georgia,"Times New Roman",serif;
  --body:Karla,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.over{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}

.btn{display:inline-block;text-decoration:none;font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;padding:15px 21px;border:1px solid var(--ink);background:transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn.solid{background:var(--ink);color:#fff}
.btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- testata ---------- */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);z-index:20}
.bar{max-width:1180px;margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.mark{display:flex;align-items:center;gap:13px;text-decoration:none}
.bollo{position:relative;width:58px;height:58px;flex:none;display:grid;place-items:center}
.bollo::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--teal-soft),rgba(166,214,217,.22) 70%,transparent 72%)}
.bollo img{position:relative;width:58px;height:58px;border-radius:50%;object-fit:cover}
.mark b{font-family:var(--display);font-weight:500;font-size:21px;display:block;line-height:1.1;letter-spacing:.01em}
.mark span{font-size:12.5px;color:var(--muted)}
.nav{display:flex;gap:24px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--teal);color:var(--teal)}
.tel-top{font-size:13.5px;letter-spacing:.06em;text-decoration:none;border:1px solid var(--ink);padding:11px 16px}
.tel-top:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.burger{display:none;background:none;border:1px solid var(--ink);padding:11px 14px;font:inherit;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;
  max-width:1180px;margin:0 auto;padding:36px var(--gut) 88px}
.hero figure{margin:0}
.hero figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(38px,5vw,64px);line-height:1.02;
  letter-spacing:-.02em;margin:16px 0 20px}
.hero h1 em{font-style:italic;font-weight:400}
.hero .lead{font-size:18.5px;color:var(--ink-2);max-width:40ch;margin:0 0 30px}
.hero .where{margin:34px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
.hero .where strong{color:var(--ink);font-weight:600}

/* ---------- promo ---------- */
.promo{background:var(--sand);padding:72px 0}
.promo .in{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.promo h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;margin:12px 0 14px}
.promo p{margin:0;color:#4A443F;max-width:36ch}
.tris{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tris img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ---------- cosa trovi ---------- */
.trovi{padding:88px 0 20px}
.trovi h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.6vw,46px);
  line-height:1.08;margin:12px 0 16px;max-width:22ch}
.trovi .intro{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:end;margin-bottom:44px}
.trovi .intro p{margin:0;color:var(--ink-2);max-width:44ch}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;padding:0;margin:0}
.cats li figure{margin:0;position:relative;overflow:hidden}
.cats li img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.cats li:hover img{transform:scale(1.03)}
.cats li figcaption{padding:14px 0 0;font-size:15.5px;font-weight:600;letter-spacing:.01em}
.cats li small{display:block;font-weight:400;color:var(--muted);font-size:14.5px;margin-top:2px}

/* ---------- monica ---------- */
.monica{padding:92px 0}
.monica .in{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.monica img{width:100%;aspect-ratio:1/1;object-fit:cover}
.monica h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.6vw,46px);
  line-height:1.08;margin:12px 0 18px}
.monica p{color:var(--ink-2);margin:0 0 8px;max-width:46ch}
.monica ul{list-style:none;margin:24px 0 0;padding:0}
.monica li{padding:13px 0 13px 24px;border-top:1px solid var(--line);position:relative;color:var(--ink-2)}
.monica li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;
  background:var(--teal-soft)}

/* ---------- galleria ---------- */
.gall{background:var(--sand-2);padding:88px 0}
.gall .head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.gall h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,40px);line-height:1.1;margin:10px 0 0}
.gall .ig{display:inline-block;text-decoration:none;font-size:14px;letter-spacing:.06em;
  border-bottom:1px solid var(--line);padding:8px 0 6px}
.gall .ig:hover{border-bottom-color:var(--teal);color:var(--teal)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ---------- avvisi ---------- */
.avvisi{padding:88px 0}
.avvisi .in{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:60px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.avvisi h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;margin:12px 0 16px;max-width:24ch}
.avvisi p{margin:0 0 26px;color:var(--ink-2);max-width:52ch}
.avvisi .cta{justify-content:center}

/* ---------- dove ---------- */
.dove{background:var(--ink);color:#F3F0EC;padding:88px 0}
.dove .in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.dove h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin:12px 0 18px}
.dove .over{color:var(--teal-soft)}
.dove p{color:#CFC9C2;margin:0 0 12px}
.dove .rows{margin:26px 0 0;display:grid;gap:0}
.dove dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-soft);
  padding-top:16px;border-top:1px solid rgba(243,240,236,.18)}
.dove dd{margin:5px 0 16px;color:#EDE9E4}
.dove dd a{display:inline-block;padding:7px 0;text-decoration:none;border-bottom:1px solid rgba(243,240,236,.4)}
.dove dd a:hover{border-bottom-color:var(--teal-soft);color:var(--teal-soft)}
.dove .btn{border-color:#F3F0EC;color:#F3F0EC}
.dove .btn.solid{background:#F3F0EC;color:var(--ink)}
.dove .btn:hover{background:var(--teal-soft);border-color:var(--teal-soft);color:var(--ink)}
.dove img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- piede ---------- */
.piede{padding:44px 0 60px;font-size:14.5px;color:var(--muted)}
.piede .in{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:space-between;align-items:baseline}
.piede a{display:inline-block;padding:7px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.piede a:hover{border-bottom-color:var(--teal);color:var(--teal)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hero,.promo .in,.trovi .intro,.monica .in,.avvisi .in,.dove .in{grid-template-columns:1fr;gap:30px}
  .hero{padding:24px var(--gut) 56px}
  .promo,.gall,.dove{padding:60px 0}
  .trovi{padding:60px 0 8px}
  .monica,.avvisi{padding:60px 0}
  .avvisi .in{padding:42px 0}
  .cats{grid-template-columns:repeat(2,1fr);gap:16px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid img:last-child{grid-column:span 2;aspect-ratio:16/10}
  .nav{display:none}
  .tel-top{display:none}
  .burger{display:block}
  .top.open .nav{display:flex;flex-direction:column;gap:0;width:100%;
    border-top:1px solid var(--line);padding:8px var(--gut) 16px;font-size:15px}
  .top.open .nav a{padding:15px 0;border-bottom:1px solid var(--line)}
  .top.open .nav a:last-child{border-bottom:none}
  .top.open .tel-top{display:block;margin:4px var(--gut) 18px;text-align:center;padding:15px 16px}
  .bar{flex-wrap:wrap}
}
@media (max-width:360px){
  .cats{grid-template-columns:1fr}
  .tris{gap:10px}
}