/* =============================================================
   GOLD REAL ESTATE — styles.css
   Palette: deep black · warm white · gold (usato con parsimonia)
   Type: Cormorant Garamond (display) + Manrope (sans)
   No framework, no build. Single sectioned file.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0b0b0d;        /* nero profondo cinematografico */
  --bg-2:      #101013;
  --panel:     #16151a;
  --panel-2:   #1c1b20;
  --cream:     #f4efe3;        /* bianco caldo */
  --cream-mute:#c9c4b8;
  --ink-mute:  #8f8a80;
  --gold:      #c8a24e;        /* oro estratto dal logo */
  --gold-soft: #d8bd7e;
  --gold-deep: #9c7e35;
  --line:      rgba(200,162,78,0.22);
  --line-soft: rgba(244,239,227,0.10);
  --shadow:    0 30px 80px -30px rgba(0,0,0,0.75);

  --sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1240px;
  --nav-h: 76px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem;
  background: var(--cream); color: var(--bg); z-index: 9999; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .8; }
/* ponytail: hero eyebrow sits over the bright sunset band; brighten + shadow so it reads */
.hero .eyebrow { color: #f4d99b; text-shadow: 0 1px 6px rgba(11,11,13,.85); }
.hero .eyebrow::before { background: #f4d99b; opacity: 1; box-shadow: 0 1px 4px rgba(11,11,13,.85); }

.gold-rule { height: 1px; background: var(--line); border: 0; }

/* =============================================================
   4. Typography
   ============================================================= */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.display { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.0; }
.display em, h1 em, h2 em { font-style: italic; color: var(--gold-soft); }
.h-section { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--cream-mute); max-width: 60ch; }
.muted { color: var(--ink-mute); }
.serif { font-family: var(--serif); }

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .h-section { margin-top: 1rem; }

/* =============================================================
   5. Components
   ============================================================= */
/* Buttons */
.btn {
  --pad-y: .95rem; --pad-x: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: var(--pad-y) var(--pad-x); border-radius: 2px;
  font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .5s var(--ease-out), background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
  will-change: transform;
}
.btn-gold { background: var(--gold); color: #17130a; }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--line); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-2px); }
.btn-line { padding: 0; border-radius: 0; font-size: .8rem; color: var(--cream); position: relative; }
.btn-line::after { content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); }
.btn-line:hover::after { transform: scaleX(1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Logo ufficiale */
.wordmark { display: inline-flex; align-items: center; line-height: 1; }
.wordmark img { height: 46px; width: auto; display: block; }
.site-footer .wordmark img { height: 58px; }

/* Image placeholders (finché non ci sono foto reali / generate) */
.ph {
  position: relative; overflow: hidden; background:
    radial-gradient(120% 90% at 30% 15%, rgba(200,162,78,.10), transparent 60%),
    linear-gradient(155deg, #16151a 0%, #0e0e11 60%, #1a1820 100%);
  border: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-label); position: absolute; inset: auto 0 14px 0; text-align: center;
  font-family: var(--sans); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute);
}
.ph-mark { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display:grid; place-items:center; color: var(--gold); opacity:.7; }
.ph-mark svg { width: 18px; height: 18px; }
.ph.ratio-43 { aspect-ratio: 4/3; }
.ph.ratio-45 { aspect-ratio: 4/5; }
.ph.ratio-11 { aspect-ratio: 1/1; }
.ph.ratio-169 { aspect-ratio: 16/9; }

/* Chips / tags */
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .7rem; border:1px solid var(--line); border-radius:2px; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); background: rgba(200,162,78,.05); }
.chip.demo { color: var(--ink-mute); border-color: var(--line-soft); background: transparent; }
.badge-state { position:absolute; top:1rem; left:1rem; z-index:2; }

/* Forms */
.field { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.15rem; }
.field label { font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-mute); }
.field input, .field select, .field textarea {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 2px;
  padding: .85rem 1rem; color: var(--cream); transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: var(--panel-2); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.grid-2 { display:grid; gap:1rem 1.2rem; grid-template-columns:1fr; }
.check { display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--cream-mute); line-height:1.5; }
.check input { margin-top:.25rem; accent-color: var(--gold); width:16px; height:16px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note { font-size:.78rem; color:var(--ink-mute); }
.form-status { margin-top:1rem; font-size:.9rem; color:var(--gold-soft); min-height:1.2em; }

/* Cards / property */
.card {
  position: relative; background: var(--panel); border: 1px solid var(--line-soft);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow); }
.card .card-media { position: relative; overflow: hidden; }
.card .card-media .ph { transition: transform 1.2s var(--ease-out); }
.card:hover .card-media .ph { transform: scale(1.05); }
.card-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.card:hover .card-photo { transform: scale(1.06); }
.card-body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card-loc { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.card-title { font-family: var(--serif); font-size: 1.5rem; line-height:1.1; }
.card-price { font-family: var(--serif); font-size: 1.35rem; color: var(--cream); margin-top:.2rem; }
.price-old { font-family: var(--sans); font-size: .85rem; color: var(--ink-mute); text-decoration: line-through; margin-left:.4rem; }
.card-meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.8rem; color:var(--ink-mute); margin-top:.4rem; }
.card-meta span { display:inline-flex; align-items:center; gap:.35rem; }
.card-cta { margin-top:.9rem; }
.card a.stretched::after { content:""; position:absolute; inset:0; z-index:1; }

/* =============================================================
   6. Sections — Header
   ============================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out), backdrop-filter .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: rgba(11,11,13,.9); border-bottom-color: var(--line-soft); backdrop-filter: blur(10px); }
.nav { display:flex; align-items:center; justify-content:space-between; width:100%; gap:1.5rem; }
.nav-links { display:none; align-items:center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav-links a { font-size:.82rem; font-weight:500; color:var(--cream-mute); position:relative; transition:color .3s var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform:scaleX(1); }
.nav-right { display:flex; align-items:center; gap:1rem; }
.lang { display:flex; gap:.4rem; font-size:.74rem; font-weight:600; letter-spacing:.08em; color:var(--ink-mute); }
.lang a[aria-current="true"] { color: var(--gold); }
.lang span { opacity:.4; }
.nav-cta { display:none; }
.nav-call { display:inline-flex; color: var(--gold); }
.burger { display:inline-flex; flex-direction:column; gap:5px; padding:.4rem; }
.burger span { width:26px; height:2px; background:var(--cream); transition: transform .4s var(--ease-out), opacity .3s; }
.nav-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile fullscreen menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
}
.nav-open .mobile-menu { opacity:1; visibility:visible; transform:none; }
.mobile-menu a.m-link { font-family: var(--serif); font-size: clamp(1.8rem, 8vw, 2.6rem); padding:.35rem 0; color:var(--cream-mute); transition:color .3s; }
.mobile-menu a.m-link:hover { color: var(--gold-soft); }
.mobile-menu .m-foot { margin-top: 2.5rem; display:flex; flex-direction:column; gap:.6rem; color:var(--ink-mute); font-size:.9rem; }
.mobile-menu .m-foot a { color: var(--gold); }

/* =============================================================
   6b. Hero
   ============================================================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 8vh, 6rem); overflow: hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg .ph { width:100%; height:100%; }
.hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.25) 40%, rgba(11,11,13,.92) 100%); }
.hero-bg video, .hero-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-inner { position: relative; z-index: 2; width:100%; }
.hero h1 { margin: 1.4rem 0 1.2rem; max-width: 16ch; }
.hero .lead { max-width: 44ch; }
.hero .btn-row { margin-top: 2rem; }
.hero-scroll { position:absolute; left:var(--gutter); bottom:1.4rem; z-index:2; display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.hero-scroll i { width:1px; height:38px; background:var(--line); position:relative; overflow:hidden; }
.hero-scroll i::after { content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--gold); animation: scrollLine 2.4s var(--ease-soft) infinite; }
@keyframes scrollLine { 0%{ transform:translateY(0);} 100%{ transform:translateY(340%);} }
.hero-pause { position:absolute; right:var(--gutter); bottom:1.4rem; z-index:3; display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-mute); border:1px solid var(--line-soft); padding:.5rem .8rem; border-radius:2px; }
.hero-pause:hover { border-color: var(--gold); color: var(--gold-soft); }

/* =============================================================
   6c. Search bar
   ============================================================= */
.search { position: relative; z-index: 5; margin-top: -3.2rem; }
.search-panel {
  background: rgba(22,21,26,.92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 1.3rem; display:grid; gap:1rem; grid-template-columns:1fr; align-items:end;
}
.search-panel .field { margin: 0; }
.search-panel .btn { width:100%; }
.search-toggle { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.seg { display:inline-flex; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; }
.seg button { padding:.5rem 1rem; font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.seg button[aria-pressed="true"] { background: var(--gold); color:#17130a; }

/* =============================================================
   6d. Grids
   ============================================================= */
.props-grid { display:grid; gap:1.4rem; grid-template-columns:1fr; }
.split { display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center; }
.value-list { display:grid; gap:0; margin-top:1.5rem; border-top:1px solid var(--line-soft); }
.value-list li { display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:baseline; padding:1.1rem 0; border-bottom:1px solid var(--line-soft); }
.value-list .n { font-family:var(--serif); font-size:1.1rem; color:var(--gold); }
.value-list h3 { font-family: var(--sans); font-size:1rem; font-weight:600; letter-spacing:.02em; }
.value-list p { color: var(--ink-mute); font-size:.92rem; margin-top:.2rem; }

/* Owners CTA band */
.band { background: linear-gradient(160deg, #131217, #0c0c0f); border-block: 1px solid var(--line-soft); }
.band .split { align-items:center; }

/* Territory */
.zones { display:grid; gap:1rem; grid-template-columns:1fr; }
.zone { position:relative; overflow:hidden; min-height:240px; display:flex; align-items:flex-end; padding:1.3rem; border:1px solid var(--line-soft); }
.zone .ph, .zone-photo { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease-out); }
.zone:hover .ph, .zone:hover .zone-photo { transform: scale(1.06); }
.zone::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%, rgba(11,11,13,.9)); z-index:1; }
.zone-body { position:relative; z-index:2; }
.zone-body h3 { font-size:1.6rem; }
.zone-body p { font-size:.85rem; color:var(--cream-mute); max-width:34ch; margin-top:.2rem; }

/* Testimonials */
.quotes { display:grid; gap:1.2rem; grid-template-columns:1fr; }
.quote { padding:1.6rem; border:1px solid var(--line-soft); background:var(--panel); }
.quote p { font-family: var(--serif); font-size:1.15rem; font-style:italic; color:var(--cream); }
.quote footer { margin-top:1rem; font-size:.8rem; color:var(--ink-mute); letter-spacing:.04em; }

/* Contact final */
.contact-final { background: linear-gradient(180deg,#0c0c0f,#111014); }
.contact-card { border:1px solid var(--line); padding: clamp(1.8rem,5vw,3.2rem); background: var(--panel); }
.contact-lines { display:grid; gap:.5rem; margin:1.4rem 0 2rem; }
.contact-lines a, .contact-lines span { color:var(--cream-mute); }
.contact-lines a:hover { color: var(--gold-soft); }
.contact-lines .lab { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.1rem; }

/* Andrea */
.andrea-grid { display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1fr; align-items:start; }
.andrea-photo { position:relative; margin:0; border:1px solid var(--line); border-radius:2px; padding:.5rem; background:linear-gradient(160deg,#15141a,#0c0c0f); box-shadow:var(--shadow); overflow:hidden; }
.andrea-photo img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; border-radius:1px; }
.andrea-photo::after { content:""; position:absolute; inset:.5rem; border-radius:1px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(200,162,78,.28); background:linear-gradient(180deg,rgba(11,11,13,0) 62%,rgba(11,11,13,.32) 100%); }
.andrea-sticky { position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.fact-row { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 0; padding:0; }
.fact-row li { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); border:1px solid var(--line); border-radius:2px; padding:.4rem .7rem; background:rgba(200,162,78,.05); }
.bio-prose { max-width:68ch; }
.bio-prose h2 { font-family:var(--serif); font-size:clamp(1.5rem,3vw,1.9rem); color:var(--cream); margin:2.4rem 0 .7rem; }
.bio-prose h2:first-child { margin-top:0; }
.bio-prose h2 em { color:var(--gold-soft); font-style:italic; }
.bio-prose p { color:var(--cream-mute); margin:.6rem 0; line-height:1.75; }
.bio-prose p.pull { color:var(--gold-soft); font-family:var(--serif); font-size:1.25rem; font-style:italic; line-height:1.5; border-left:2px solid var(--gold); padding-left:1.1rem; margin:1.2rem 0; }
.editable { border-left:2px solid var(--gold); padding:.6rem 0 .6rem 1.1rem; color:var(--cream-mute); background:rgba(200,162,78,.04); }
.pending { display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); border:1px dashed var(--line); padding:.15rem .5rem; border-radius:2px; }

/* =============================================================
   6e. Property detail
   ============================================================= */
.detail-gallery { display:grid; gap:.6rem; grid-template-columns:1fr; }
.detail-gallery .ph { width:100%; }
.detail-gallery img.lead-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border:1px solid var(--line-soft); border-radius:2px; }
.gallery-lead { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.photo-45 { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line-soft); }
/* real gallery (photos + video) */
.gal-stage { width:100%; aspect-ratio:16/9; background:#111; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; }
.gal-media { width:100%; height:100%; object-fit:cover; display:block; }
.gal-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem; margin-top:.6rem; }
.gal-thumb { position:relative; padding:0; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; aspect-ratio:4/3; cursor:pointer; background:#111; transition:border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.gal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-thumb:hover { transform:translateY(-2px); }
.gal-thumb.is-active { border-color:var(--gold); }
.gal-play { position:absolute; inset:0; display:grid; place-items:center; color:var(--gold); font-size:1.3rem; background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(0,0,0,.3)); }
.detail-main { display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1fr; margin-top:2rem; }
.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin:1.5rem 0; }
.spec-grid div { background:var(--bg); padding:1rem 1.1rem; }
.spec-grid dt { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.spec-grid dd { font-family:var(--serif); font-size:1.2rem; color:var(--cream); margin-top:.2rem; }
.detail-aside { position: sticky; top: calc(var(--nav-h) + 1rem); align-self:start; }
.detail-aside .contact-card { background: var(--panel-2); }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem; margin-top:1rem; }
.feature-list li { display:flex; gap:.5rem; align-items:center; font-size:.9rem; color:var(--cream-mute); }
.feature-list li::before { content:""; width:5px; height:5px; background:var(--gold); border-radius:50%; flex:none; }

/* Mobile sticky contact bar (property detail) */
.mobile-bar { position: fixed; inset: auto 0 0 0; z-index:80; display:flex; gap:1px; background:var(--line-soft); border-top:1px solid var(--line); }
.mobile-bar a { flex:1; text-align:center; padding:1rem; background:var(--bg-2); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.mobile-bar a.primary { background: var(--gold); color:#17130a; }

/* =============================================================
   6f. Multi-step form (valutazione)
   ============================================================= */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:2rem; }
.steps .step { padding-top:.8rem; border-top:2px solid var(--line-soft); font-size:.74rem; letter-spacing:.06em; color:var(--ink-mute); transition:border-color .4s, color .4s; }
.steps .step[data-active="true"] { border-top-color: var(--gold); color: var(--cream); }
.steps .step b { display:block; font-family:var(--serif); font-size:1.1rem; color:inherit; }
.fs-panel { display:none; }
.fs-panel[data-active="true"] { display:block; animation: fadeUp .5s var(--ease-out); }
.fs-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* =============================================================
   6g. Filters (immobili page)
   ============================================================= */
.filters { display:grid; gap:1rem; grid-template-columns:1fr; background:var(--panel); border:1px solid var(--line-soft); padding:1.3rem; margin-bottom:2rem; }
.filters .field { margin:0; }
.filters-actions { display:flex; gap:1rem; align-items:end; }
.result-count { font-size:.85rem; color:var(--ink-mute); margin-bottom:1rem; }
.empty { text-align:center; color:var(--ink-mute); padding:3rem 1rem; border:1px dashed var(--line-soft); }

/* =============================================================
   6h. Footer
   ============================================================= */
.site-footer { background:#08080a; border-top:1px solid var(--line-soft); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid { display:grid; gap:2.2rem; grid-template-columns:1fr; }
.footer-brand p { color:var(--ink-mute); font-size:.9rem; margin-top:1rem; max-width:32ch; }
.footer-col h4 { font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-col ul { list-style:none; display:grid; gap:.55rem; }
.footer-col a, .footer-col li { color:var(--cream-mute); font-size:.9rem; }
.footer-col a:hover { color:var(--gold-soft); }
.footer-bottom { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.78rem; color:var(--ink-mute); }
.footer-bottom a { color: var(--ink-mute); }
.footer-bottom a:hover { color: var(--cream-mute); }

/* =============================================================
   6i. Cookie banner
   ============================================================= */
.cookie {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 200; max-width: 460px; margin-left:auto;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem; transform: translateY(140%); transition: transform .6s var(--ease-out);
}
.cookie.is-in { transform: none; }
.cookie h4 { font-family:var(--sans); font-size:.9rem; font-weight:700; letter-spacing:.04em; }
.cookie p { font-size:.82rem; color:var(--cream-mute); margin:.5rem 0 1rem; }
.cookie .btn-row { gap:.6rem; }
.cookie .btn { --pad-y:.6rem; --pad-x:1rem; font-size:.72rem; }

/* =============================================================
   7. Effects — reveals, gold line
   ============================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; } /* gotcha A.4.5 guard */
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }

.gold-line { position:relative; }
.gold-line::before { content:""; position:absolute; left:0; top:0; width:56px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-out) .1s; }
.gold-line.is-in::before { transform: scaleX(1); }

.pageband { position:relative; height:220px; overflow:hidden; display:flex; align-items:center; }
.pageband .ph, .pageband img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pageband::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,13,.6), rgba(11,11,13,.85)); }
.pageband .container { position:relative; z-index:2; }
.breadcrumb { font-size:.78rem; color:var(--ink-mute); margin-top:.6rem; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb span { opacity:.5; margin-inline:.4rem; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns:1fr 1fr; }
  .props-grid { grid-template-columns:1fr 1fr; }
  .zones { grid-template-columns:1fr 1fr; }
  .quotes { grid-template-columns:repeat(3,1fr); }
  .search-panel { grid-template-columns: repeat(3, 1fr); }
  .detail-gallery { grid-template-columns:2fr 1fr; }
  .detail-gallery .lead-img { grid-row: span 2; }
  .detail-gallery .gallery-lead { height:100%; aspect-ratio:auto; }
  .filters { grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 960px) {
  .nav-links { display:flex; }
  .nav-cta { display:inline-flex; }
  .burger { display:none; }
  .props-grid { grid-template-columns:repeat(3,1fr); }
  .split { grid-template-columns:1fr 1fr; }
  .band .split { grid-template-columns: 1.2fr 1fr; }
  .zones { grid-template-columns:repeat(3,1fr); }
  .zone.wide { grid-column: span 2; }
  .andrea-grid { grid-template-columns: 1fr 1.1fr; }
  .detail-main { grid-template-columns: 1.7fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .search-panel { grid-template-columns: repeat(6, 1fr); }
  .search-panel .field.wide { grid-column: span 2; }
  .filters { grid-template-columns: repeat(6,1fr); }
  .filters .field.wide { grid-column: span 2; }
  .mobile-bar { display:none; }
}
@media (min-width: 1280px) {
  .props-grid { grid-template-columns:repeat(3,1fr); }
}

/* =============================================================
   9. Reduced-motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll i::after { animation: none; }
  .hero-bg video { display:none; }
}