:root{
    --black: #0b0b0a;
    --black-2: #141210;
    --white: #faf7f1;
    --white-2: #f0ebe0;
    --ink: #171410;
    --ink-soft: #55503f;
    --gold: #cda434;
    --gold-light: #d6b24f;
    --gold-soft: #d2ab41;
    --gold-deep: #9c7a24;
    --line-dark: rgba(205,164,52,.22);
    --line-light: rgba(23,20,16,.14);
    --max: 1180px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background: var(--black);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1,h2,h3, .logo, .nav a, .btn, .eyebrow{ font-family: 'Montserrat', sans-serif; }
  a{ color:inherit; text-decoration:none; }
  img, svg{ display:block; max-width:100%; }
  .wrap{ max-width: var(--max); margin:0 auto; padding:0 40px; }

  h1{ font-weight:600; } h2{ font-weight:600; letter-spacing:.01em; } h3{ font-weight:500; }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 1px solid var(--gold-light); outline-offset: 4px;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  /* THEME VARIANTS ---------------------------------------------------- */
  .on-dark{ background: var(--black); color: var(--white); }
  .on-dark-2{ background: var(--black-2); color: var(--white); }
  .on-light{ background: var(--white); color: var(--ink); }
  .on-light-2{ background: var(--white-2); color: var(--ink); }

  .on-dark .eyebrow, .on-dark-2 .eyebrow{ color: var(--gold-light); }
  .on-light .eyebrow, .on-light-2 .eyebrow{ color: var(--gold-deep); }

  .eyebrow{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; font-weight:500; display:inline-block; margin-bottom:18px; }

  .on-dark p, .on-dark-2 p{ color:#a79c86; }
  .on-light p, .on-light-2 p{ color: var(--ink-soft); }

  /* HEADER -------------------------------------------------------------*/
  header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:26px 0; transition: background .4s ease, padding .4s ease, color .4s ease, border-color .4s ease; border-bottom:1px solid transparent; color: var(--white); }
  header.solid{ background: rgba(11,11,10,.92); backdrop-filter: blur(10px); padding:16px 0; border-bottom:1px solid var(--line-dark); }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ font-size:22px; letter-spacing:.12em; font-weight:600; }
  .logo span{ color: var(--gold-light); }
  .logo small{ display:block; font-family:'Montserrat',sans-serif; font-weight:300; font-size:9px; letter-spacing:.35em; color:#a79c86; text-transform:uppercase; margin-top:2px; }
  nav.nav{ display:flex; gap:36px; align-items:center; }
  .nav a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; position:relative; padding-bottom:4px; }
  .nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold-light); transition: width .35s ease; }
  .nav a:hover::after{ width:100%; }
  .nav-toggle{ display:none; background:none; border:1px solid var(--line-dark); color: var(--white); width:42px; height:42px; }

  /* BUTTONS --------------------------------------------------------------*/
  .btn{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:16px 30px; border:1px solid var(--gold); transition: background .35s ease, color .35s ease, border-color .35s ease; }
  .btn-solid{ background: var(--gold); color: var(--black); }
  .btn-solid:hover{ background: var(--gold-light); border-color: var(--gold-light); }
  .btn-ghost-dark{ color: var(--white); border-color: var(--line-dark); }
  .btn-ghost-dark:hover{ border-color: var(--gold-light); color: var(--gold-light); }
  .btn-ghost-light{ color: var(--ink); border-color: var(--line-light); }
  .btn-ghost-light:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }

  /* HERO -----------------------------------------------------------------*/
  .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color: var(--white); }
  .hero-media{ position:absolute; inset:0; z-index:0; }
  .hero-media img{ width:100%; height:100%; object-fit:cover; }
  .hero-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,11,10,.35) 0%, rgba(11,11,10,.55) 55%, rgba(11,11,10,.92) 100%); }
  .hero-media .tag{ position:absolute; top:100px; right:40px; z-index:2; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: rgba(250,247,241,.55); border:1px solid rgba(250,247,241,.25); padding:6px 10px; }
  .hero-inner{ position:relative; z-index:3; width:100%; padding-bottom:100px; }
  .hero h1{ font-size: clamp(34px,5.4vw,62px); line-height:1.12; margin-bottom:22px; max-width: 820px; }
  .hero h1 .a{ display:block; }
  .hero h1 .b{ display:block; color: var(--gold-light); }
  .hero p.lead{ font-size:16px; color:#c9c2b2; max-width:460px; margin-bottom:36px; }
  .hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; }
  .hero-coords{ position:absolute; left:40px; bottom:40px; z-index:3; font-size:11px; letter-spacing:.18em; color: rgba(250,247,241,.5); text-transform:uppercase; }
  .hero-scroll{ position:absolute; right:40px; bottom:40px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color: rgba(250,247,241,.5); }
  .hero-scroll .line{ width:1px; height:46px; background: linear-gradient(var(--gold-light), transparent); animation: scrollDrift 2.2s ease-in-out infinite; }
  @keyframes scrollDrift{ 0%,100%{ transform:scaleY(1); opacity:1;} 50%{ transform:scaleY(.6); opacity:.5;} }

  /* SECTION FRAME ----------------------------------------------------------*/
  section{ position:relative; padding: 120px 0; }
  .divider{ width:100%; height:44px; opacity:.55; }

  /* SPLIT TEASER MODULES (mirror the two "discover" blocks) ---------------*/
  .split{ display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:0; }
  .split-media{ position:relative; aspect-ratio: 4/5; overflow:hidden; }
  .split-media img{ width:100%; height:100%; object-fit:cover; }
  .split-text{ padding: 70px 70px; }
  .split-text .eyebrow{ margin-bottom:16px; }
  .split-text h2{ font-size: clamp(24px,2.8vw,34px); line-height:1.28; margin-bottom:20px; }
  .split-text p{ font-size:15px; max-width:420px; margin-bottom:30px; }
  .split.reverse{ direction: rtl; }
  .split.reverse > *{ direction: ltr; }

  /* BANNER (mirror the "boutique hotel" full-width teaser) ----------------*/
  .banner{ position:relative; min-height: 60vh; display:flex; align-items:center; overflow:hidden; }
  .banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .banner::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,11,10,.85) 0%, rgba(11,11,10,.35) 60%, rgba(11,11,10,.1) 100%); z-index:1; }
  .banner-content{ position:relative; z-index:2; max-width: 520px; padding: 0 70px; color: var(--white); }
  .banner-content .eyebrow{ color: var(--gold-light); }
  .banner-content h2{ font-size: clamp(24px,3vw,36px); line-height:1.3; margin-bottom:20px; }
  .banner-content p{ color:#c9c2b2; font-size:15px; margin-bottom:28px; }

  /* ABOUT / NAME MEANING ----------------------------------------------------*/
  .intro{ display:grid; grid-template-columns: .85fr 1.15fr; gap:80px; align-items:start; }
  .intro h2{ font-size: clamp(26px,3.2vw,38px); line-height:1.25; }
  .intro .body p + p{ margin-top:18px; }
  .stat-row{ display:flex; gap:50px; margin-top:46px; flex-wrap:wrap; }
  .stat .num{ font-family:'Montserrat',sans-serif; font-size:32px; color: var(--gold-light); font-weight:600; }
  .on-light .stat .num, .on-light-2 .stat .num{ color: var(--gold-deep); }
  .stat .label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; }

  /* SERVICES ------------------------------------------------------------*/
  .services-head{ max-width:620px; margin:0 auto 64px; text-align:center; }
  .services-head h2{ font-size: clamp(26px,3.2vw,38px); }
  .services-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line-light); border:1px solid var(--line-light); }
  .service-card{ background: var(--white); padding:44px 32px; transition: background .4s ease; }
  .service-card:hover{ background: var(--white-2); }
  .service-icon{ width:38px; height:38px; margin-bottom:26px; }
  .service-card h3{ font-size:17px; margin-bottom:12px; }
  .service-card p{ font-size:14px; }

  /* FEATURED SPOTLIGHT (mirror the "selected investment opportunity") ---*/
  .spotlight{ display:grid; grid-template-columns: 1fr 1fr; border:1px solid var(--line-dark); }
  .spotlight-media{ position:relative; aspect-ratio: 1/1; overflow:hidden; }
  .spotlight-media img{ width:100%; height:100%; object-fit:cover; }
  .spotlight-media .property-tag{ position:absolute; top:18px; left:18px; background: rgba(11,11,10,.75); border:1px solid var(--line-dark); color: var(--gold-light); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; }
  .spotlight-text{ padding: 60px; display:flex; flex-direction:column; justify-content:center; }
  .spotlight-text .loc{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-2, #6f6858); margin-bottom:14px; }
  .spotlight-text h3{ font-size:26px; margin-bottom:18px; }
  .spotlight-text p{ font-size:15px; margin-bottom:26px; max-width: 420px; }
  .spotlight-meta{ display:flex; gap:20px; font-size:12px; color:#a79c86; border-top:1px solid var(--line-dark); padding-top:18px; margin-bottom:30px; }

  /* LISTINGS -------------------------------------------------------------*/
  .listings-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:30px; flex-wrap:wrap; }
  .listings-head h2{ font-size: clamp(26px,3.2vw,38px); max-width:520px; }
  .listings-head p{ max-width:360px; font-size:14px; }
  .listings-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:2px; background: var(--line-light); border:1px solid var(--line-light); }
  .property{ background: var(--white); overflow:hidden; }
  .property-img{ aspect-ratio: 4/3; position:relative; overflow:hidden; }
  .property-img img{ width:100%; height:100%; object-fit:cover; }
  .property-tag{ position:absolute; top:16px; left:16px; background: rgba(11,11,10,.72); border:1px solid var(--line-dark); color: var(--gold-light); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; }
  .property-body{ padding:24px; }
  .property-body .loc{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:10px; }
  .property-body h3{ font-size:18px; margin-bottom:12px; }
  .property-meta{ display:flex; gap:16px; font-size:12px; border-top:1px solid var(--line-light); padding-top:14px; }
  .listings-cta{ text-align:center; margin-top:56px; }

  /* GEO STRIP --------------------------------------------------------------*/
  .geo-head{ max-width:640px; margin-bottom:66px; }
  .geo-head h2{ font-size: clamp(26px,3.2vw,38px); }
  .geo-track{ display:grid; grid-template-columns: repeat(4,1fr); position:relative; }
  .geo-track::before{ content:''; position:absolute; top:11px; left:0; right:0; height:1px; background: var(--line-dark); }
  .geo-point{ position:relative; padding-top:38px; padding-right:28px; }
  .geo-point::before{ content:''; position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; background: var(--black); border:1px solid var(--gold-light); }
  .geo-point .num{ font-family:'Montserrat',sans-serif; color: var(--gold-light); font-size:14px; margin-bottom:10px; display:block; }
  .geo-point h3{ font-size:16px; margin-bottom:8px; }
  .geo-point p{ font-size:13.5px; }

  /* CONTACT ----------------------------------------------------------------*/
  .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:90px; }
  .contact-info h2{ font-size: clamp(26px,3.2vw,38px); margin-bottom:24px; max-width:420px; }
  .contact-info p.body{ max-width:400px; margin-bottom:40px; font-size:15px; }
  .contact-detail{ margin-bottom:24px; }
  .contact-detail .label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:6px; }
  .contact-detail .value{ font-size:16px; }
  form{ display:flex; flex-direction:column; gap:22px; }
  .field label{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:8px; }
  .field input, .field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-light); color: var(--ink); font-family:'Montserrat',sans-serif; font-size:15px; padding:10px 2px; transition: border-color .3s ease; }
  .field input:focus, .field textarea:focus{ border-bottom-color: var(--gold-deep); outline:none; }
  .field textarea{ resize:vertical; min-height:100px; }
  form .btn{ align-self:flex-start; margin-top:10px; border:1px solid var(--gold-deep); background:transparent; color: var(--gold-deep); cursor:pointer; }
  form .btn:hover{ background: var(--gold-deep); color: var(--white); }

  /* FOOTER -------------------------------------------------------------------*/
  footer{ border-top:1px solid var(--line-dark); padding:60px 0 40px; background: var(--black); color: var(--white); }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; margin-bottom:50px; }
  .footer-nav{ display:flex; gap:34px; flex-wrap:wrap; }
  .footer-nav a{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#a79c86; }
  .footer-nav a:hover{ color: var(--gold-light); }
  .footer-bottom{ display:flex; justify-content:space-between; color:#6f6858; font-size:11.5px; flex-wrap:wrap; gap:10px; }

  /* REVEAL --------------------------------------------------------------------*/
  .reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* RESPONSIVE ------------------------------------------------------------------*/
  @media (max-width: 980px){
    .intro{ grid-template-columns:1fr; gap:40px; }
    .services-grid{ grid-template-columns: repeat(2,1fr); }
    .listings-grid{ grid-template-columns:1fr; }
    .geo-track{ grid-template-columns:1fr 1fr; row-gap:34px; }
    .geo-track::before{ display:none; }
    .contact-grid{ grid-template-columns:1fr; gap:50px; }
    .split{ grid-template-columns:1fr; }
    .split-media{ aspect-ratio: 16/9; }
    .split-text{ padding: 50px 34px; }
    .spotlight{ grid-template-columns:1fr; }
    .spotlight-text{ padding: 40px 34px; }
    .banner-content{ padding: 60px 34px; max-width:100%; }
  }
  @media (max-width: 720px){
    .wrap{ padding:0 22px; }
    nav.nav{ position:fixed; top:0; right:-100%; height:100svh; width:78%; max-width:320px; background: var(--black-2); flex-direction:column; justify-content:center; gap:34px; transition: right .4s ease; border-left:1px solid var(--line-dark); }
    nav.nav.open{ right:0; }
    .nav-toggle{ display:block; }
    .services-grid{ grid-template-columns:1fr; }
    .hero-coords{ display:none; }
    .footer-top{ flex-direction:column; }
  }

  /* ---------------- PAGE HEADER (pagine interne: chi-siamo, blog) ---------------- */
  .page-header{ position:relative; padding: 190px 0 90px; overflow:hidden; }
  .page-header .eyebrow{ color: var(--gold-light); }
  .page-header h1{ font-size: clamp(32px,5vw,54px); line-height:1.15; max-width: 760px; }
  .page-header p.lead{ color:#a79c86; max-width:520px; margin-top:20px; font-size:15px; }
  .page-header .contour{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }

  /* ---------------- TIMELINE (chi-siamo estesa) ---------------- */
  .timeline{ position:relative; max-width: 780px; margin: 0 auto; }
  .timeline::before{ content:''; position:absolute; top:0; bottom:0; left:9px; width:1px; background: var(--line-dark); }
  .timeline-item{ position:relative; padding-left:50px; padding-bottom:56px; }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-item::before{ content:''; position:absolute; top:4px; left:0; width:19px; height:19px; border-radius:50%; background: var(--black); border:1px solid var(--gold-light); }
  .timeline-item .year{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light); margin-bottom:8px; display:block; }
  .timeline-item h3{ font-size:19px; margin-bottom:10px; }
  .timeline-item p{ font-size:14.5px; max-width: 520px; }

  /* ---------------- VALORI (chi-siamo estesa) ---------------- */
  .values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-light); border:1px solid var(--line-light); }
  .value-card{ background: var(--white); padding: 40px 32px; }
  .value-card .num{ font-size:13px; color: var(--gold-deep); letter-spacing:.14em; margin-bottom:18px; display:block; }
  .value-card h3{ font-size:17px; margin-bottom:12px; }
  .value-card p{ font-size:14px; }

  /* ---------------- TEAM (chi-siamo estesa) ---------------- */
  .team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
  .team-card{ text-align:left; }
  .team-photo{ aspect-ratio: 3/4; overflow:hidden; margin-bottom:20px; border:1px solid var(--line-dark); }
  .team-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(15%); }
  .team-card h3{ font-size:17px; margin-bottom:4px; }
  .team-card .role{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-light); margin-bottom:12px; display:block; }
  .team-card p{ font-size:13.5px; }

  /* ---------------- BLOG GRID ---------------- */
  .blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:2px; background: var(--line-light); border:1px solid var(--line-light); }
  .post-card{ background: var(--white); overflow:hidden; display:flex; flex-direction:column; }
  .post-img{ aspect-ratio: 4/3; position:relative; overflow:hidden; }
  .post-img img{ width:100%; height:100%; object-fit:cover; }
  .post-cat{ position:absolute; top:16px; left:16px; background: rgba(11,11,10,.72); border:1px solid var(--line-dark); color: var(--gold-light); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; }
  .post-body{ padding:26px; display:flex; flex-direction:column; flex:1; }
  .post-body .date{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:12px; }
  .post-body h3{ font-size:18px; margin-bottom:12px; line-height:1.35; }
  .post-body p{ font-size:14px; margin-bottom:18px; flex:1; }
  .post-link{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-deep); border-top:1px solid var(--line-light); padding-top:16px; }

  /* ---------------- BLOG POST (articolo singolo) ---------------- */
  .post-hero{ position:relative; height:52vh; min-height:340px; overflow:hidden; }
  .post-hero img{ width:100%; height:100%; object-fit:cover; }
  .post-hero::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,11,10,.25) 0%, rgba(11,11,10,.85) 100%); }
  .post-hero-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 0 0 50px; }
  .post-hero-content .wrap{ max-width: 780px; }
  .post-hero-content .date{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light); margin-bottom:16px; display:block; }
  .post-hero-content h1{ font-size: clamp(28px,4.4vw,46px); line-height:1.2; }
  .post-article{ max-width: 720px; margin: 0 auto; }
  .post-article p{ font-size:16px; color: var(--ink-soft); margin-bottom:22px; }
  .post-article h2{ font-size:24px; color: var(--ink); margin: 40px 0 18px; }
  .post-article blockquote{ border-left:2px solid var(--gold-deep); padding-left:24px; margin: 30px 0; font-size:18px; color: var(--ink); font-style:normal; }

  @media (max-width: 980px){
    .values-grid{ grid-template-columns:1fr; }
    .team-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; }
    .blog-grid{ grid-template-columns:1fr; }
  }