/* ==========================================================================
   Casa a Monteroduni: Via Strada Vecchia 19
   Palette drawn from the photos: limestone render, Matese olive, walnut
   stair rails and the oxblood terrace railing.
   ========================================================================== */
:root {
  --stone: #e9e6dd;
  --stone-2: #dedad0;
  --stone-3: #d2cdc0;
  --paper: #f6f4ef;
  --floor: #fcfbf8;
  --ink: #1e2419;
  --ink-2: #4a5142;
  --ink-3: #6c7262;
  --olive: #2b3424;
  --olive-2: #3a4531;
  --olive-deep: #1b2117;
  --sage: #bfc2ad;
  --oxblood: #7b2b24;
  --oxblood-2: #94362d;
  --line: rgba(30, 36, 25, .16);
  --line-strong: rgba(30, 36, 25, .32);
  --line-dark: rgba(233, 230, 221, .18);

  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4vw, 44px);
  --max: 1240px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-feature-settings: 'kern', 'liga';
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
svg { flex: none; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.sec--plan :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .contact-card :focus-visible, .lightbox :focus-visible { outline-color: var(--stone); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--stone); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 2px;
  font: 500 15px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--light { background: var(--stone); color: var(--olive); }
.btn--light:hover { background: #fff; }
.btn--line { border-color: rgba(233, 230, 221, .7); color: var(--stone); }
.btn--line:hover { background: rgba(233, 230, 221, .12); }
.btn--dark { background: var(--olive); color: var(--stone); }
.btn--dark:hover { background: var(--olive-2); }
.btn--accent { background: var(--oxblood); color: #fff; }
.btn--accent:hover { background: var(--oxblood-2); }
.btn--wa { background: var(--stone); color: var(--olive); width: 100%; }
.btn--wa:hover { background: #fff; }
.btn--wa .fill { fill: currentColor; stroke: none; }
.is-disabled { opacity: .45; pointer-events: none; cursor: default; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; cursor: pointer; padding: 0;
}
.icon-btn svg, .rp-close svg, .rp-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--stone);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.site-header.is-solid {
  background: rgba(233, 230, 221, .94); color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; margin-right: auto; }
.brand-street { font: 500 20px/1.1 var(--serif); letter-spacing: .005em; }
.brand-town { font: 500 12.5px/1.3 var(--sans); letter-spacing: .04em; opacity: .78; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { font-size: 15px; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: currentColor; }
.site-nav .nav-cta { border: 1px solid currentColor; padding: 8px 16px; border-radius: 2px; }
.site-nav .nav-cta:hover { background: currentColor; }
.site-nav .nav-cta:hover { color: var(--olive); background: var(--stone); }
.site-header.is-solid .site-nav .nav-cta:hover { color: var(--stone); background: var(--olive); border-color: var(--olive); }
.lang { display: flex; gap: 2px; }
.lang button {
  background: none; border: 0; cursor: pointer; padding: 8px 6px; min-width: 32px; min-height: 40px;
  font: 500 13px/1 var(--sans); letter-spacing: .06em; opacity: .62;
  border-bottom: 1px solid transparent;
}
.lang button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
.nav-toggle { display: none; }
/* six links: keep each on one line and tighten the spacing on narrow desktops */
.site-nav a { white-space: nowrap; }
@media (min-width: 881px) and (max-width: 1060px) { .header-inner { gap: 20px; } .site-nav { gap: 16px; } }

@media (max-width: 880px) {
  .header-inner { gap: 10px; }
  .brand-street { font-size: 18px; }
  .nav-toggle {
    display: inline-grid; place-items: center; align-content: center; gap: 6px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0;
    position: relative; z-index: 2;
  }
  .nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
  .nav-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 0; z-index: 1; background: var(--olive); color: var(--stone);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    padding: 96px var(--gutter) 40px;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transition: opacity .25s; }
  .site-nav a { font: 400 34px/1.25 var(--serif); border: 0; }
  .site-nav .nav-cta { border: 0; padding: 6px 0; }
  .nav-open .site-header { color: var(--stone); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-open { overflow: hidden; }
  .lang { position: relative; z-index: 2; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; max-height: 1100px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--stone); background: var(--olive); overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media picture { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 45%; transform: scale(1.045); transition: transform 2.4s var(--ease), opacity 1.2s; opacity: 0; }
.hero-media.is-loaded img { transform: none; opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(27, 33, 23, .55) 0, rgba(27, 33, 23, 0) 22%),
    linear-gradient(90deg, rgba(27, 33, 23, .55) 0, rgba(27, 33, 23, .25) 45%, rgba(27, 33, 23, 0) 70%),
    linear-gradient(0deg, rgba(27, 33, 23, .9) 0, rgba(27, 33, 23, .55) 34%, rgba(27, 33, 23, 0) 64%);
}
.hero-inner { padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(32px, 5vw, 56px); }
.hero-place { font: 500 15px/1.4 var(--sans); letter-spacing: .04em; opacity: .9; margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -.012em;
  /* Bodoni Moda picks its optical size from font-size; at hero sizes (opsz ~60-96) the hairline
     stems of U/A/V almost vanish on 1x screens and read as a gap after the capital ("U na").
     A lower optical size keeps the hairlines visible and the word shapes even. */
  font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-kerning: normal;
  max-width: 16ch; font-weight: 400;
  text-wrap: balance; text-shadow: 0 1px 28px rgba(27, 33, 23, .35);
}
.hero-title { display: block; }
.hero-sub {
  display: block; margin-top: .55em; max-width: 30em;
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.25; letter-spacing: 0; text-wrap: pretty;
}
.hero-mode { margin-top: 26px; }
.mode-tag {
  display: inline-block; font: 500 14px/1 var(--sans); letter-spacing: .02em;
  padding: 10px 14px; border: 1px solid rgba(233, 230, 221, .55); border-radius: 2px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-stats-bar { border-top: 1px solid var(--line-dark); background: rgba(27, 33, 23, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-stats { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stats li { padding: 22px 0 22px 24px; border-left: 1px solid var(--line-dark); display: flex; align-items: baseline; gap: 12px; }
.hero-stats li:first-child { border-left: 0; padding-left: 0; }
.hero-stats strong { font: 400 clamp(32px, 3.4vw, 46px)/1 var(--serif); }
.hero-stats span { font-size: 14px; line-height: 1.3; opacity: .88; }
.stat-sub { display: block; opacity: .75; }
/* single orchestrated load moment */
.hero-inner > * { opacity: 0; transform: translateY(14px); }
.is-ready .hero-inner > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.is-ready .hero-inner > :nth-child(2) { transition-delay: .08s; }
.is-ready .hero-inner > :nth-child(3) { transition-delay: .18s; }
.is-ready .hero-inner > :nth-child(4) { transition-delay: .26s; }
@media (scripting: none) { .hero-inner > *, .hero-media img { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .hero-media img { opacity: 1; transform: none !important; transition: none !important; }
}
@media (max-width: 720px) {
  .hero { min-height: 92svh; }
  .hero-shade { background: linear-gradient(0deg, rgba(27, 33, 23, .92) 0, rgba(27, 33, 23, .62) 48%, rgba(27, 33, 23, .3) 78%, rgba(27, 33, 23, .5) 100%); }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats li { padding: 14px 0 14px 16px; flex-direction: column; gap: 4px; }
  .hero-stats li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-stats li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .hero-stats span { font-size: 13px; }
  .hero-ctas .btn { flex: 1 1 auto; }
}

/* ---------- sections ---------- */
.sec { padding-block: clamp(72px, 10vw, 136px); }
.sec h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
.lead-sub { margin-top: 12px; font-size: 15px; }
.fine { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.sec-head { margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 48px; align-items: end; }
@media (max-width: 820px) { .sec-head--split { grid-template-columns: 1fr; } }

/* ---------- intro / facts ---------- */
/* two columns: the facade photo fills the full height of the text column */
.intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(36px, 5.5vw, 88px); align-items: stretch; }
.intro-media { position: relative; min-height: 520px; overflow: hidden; background: var(--stone-2); }
.intro-media picture, .intro-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-media img { object-fit: cover; object-position: 62% 50%; opacity: 0; transition: opacity .8s var(--ease); }
.intro-media.is-loaded img { opacity: 1; }
.intro-col { display: flex; flex-direction: column; gap: 36px; padding-block: 4px; }
.intro-body { margin-top: 22px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.facts { border-top: 1px solid var(--ink); padding-top: 14px; }
.facts-title { font: 600 14px/1.4 var(--sans); letter-spacing: .02em; margin-bottom: 4px; }
.facts dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.facts dl > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 13px; color: var(--ink-3); }
.facts dd { margin: 0; font-size: 15px; }
@media (max-width: 880px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; }
}
@media (max-width: 420px) { .facts dl { grid-template-columns: 1fr; } }

.highlights {
  list-style: none; margin: clamp(64px, 8vw, 112px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 28px;
}
.hl { grid-column: span 2; }
.hl--views { grid-column: span 4; }
.hl-media { background: var(--stone-2); aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 18px; }
.hl--views .hl-media { aspect-ratio: 16 / 10; }
.hl--terrace .hl-media { aspect-ratio: 4 / 5; }
.hl-media img, .hl-media picture { width: 100%; height: 100%; object-fit: cover; }
/* full-width band: large photo with the text beside it */
.hl--finish { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 28px; align-items: end; }
.hl--finish .hl-media { aspect-ratio: 16 / 9; margin-bottom: 0; }
.hl--finish .hl-body { padding-bottom: 4px; }
.hl h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; margin-bottom: 8px; }
.hl p { font-size: 15.5px; color: var(--ink-2); max-width: 42ch; }
@media (max-width: 880px) {
  .highlights { grid-template-columns: 1fr; gap: 36px; }
  .hl, .hl--views, .hl--finish { grid-column: auto; }
  .hl--finish { display: block; }
  .hl--finish .hl-media { aspect-ratio: 4 / 3; margin-bottom: 18px; }
  .hl--terrace .hl-media { aspect-ratio: 4 / 3; }
  .hl:not(.hl--views):not(.hl--terrace):not(.hl--finish) { display: grid; grid-template-columns: 38% 1fr; gap: 0 18px; align-items: start; }
  .hl:not(.hl--views):not(.hl--terrace):not(.hl--finish) .hl-media { grid-row: span 2; margin: 0; aspect-ratio: 1; }
  .hl:not(.hl--views):not(.hl--terrace):not(.hl--finish) h3 { font-size: 22px; }
  .hl:not(.hl--views):not(.hl--terrace):not(.hl--finish) p { font-size: 14.5px; }
}

/* ---------- floor plan ---------- */
.sec--plan { background: var(--olive); color: var(--stone); }
.sec--plan .lead { color: var(--sage); }
.sec--plan .lead-sub { color: var(--stone); }
.plan-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  border: 1px solid var(--line-dark); border-radius: 999px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.plan-tabs::-webkit-scrollbar { display: none; }
.plan-tabs button {
  flex: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
  padding: 10px 18px; min-height: 42px; border-radius: 999px;
  font: 500 15px/1 var(--sans); color: var(--sage); transition: background-color .2s, color .2s;
}
.plan-tabs button:hover { color: var(--stone); }
.plan-tabs button[aria-selected="true"] { background: var(--stone); color: var(--olive); }
.plan-tabs button:focus-visible { outline-offset: -2px; }

.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.plan-sheet { background: var(--paper); color: var(--ink); border-radius: 3px; padding: clamp(8px, 2vw, 24px); }
.plan-stage { position: relative; }
.plan-svg { display: flex; justify-content: center; }
.plan-svg svg { display: block; width: 100%; height: auto; max-height: 68vh; }
.plan-svg svg.is-rotated { max-height: 82vh; max-height: 82svh; }
.plan-svg.is-in svg { animation: planIn .45s var(--ease); }
@keyframes planIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .plan-svg.is-in svg { animation: none; } }
.plan-foot {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px;
  font-size: 13px; color: var(--ink-3);
}
.legend-pin { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.legend-pin svg { width: 30px; height: 18px; }
.legend-pin path { fill: rgba(123, 43, 36, .22); }
.legend-pin circle { fill: var(--oxblood); }

/* svg drawing */
.plan-svg .floor { fill: var(--floor); }
.plan-svg .wall { fill: none; stroke: var(--ink); stroke-linejoin: miter; }
.plan-svg .partition { fill: none; stroke: var(--ink); stroke-linecap: square; pointer-events: none; }
.plan-svg .partition--light { stroke: var(--paper); }
.plan-svg .win-gap { fill: none; stroke: var(--floor); pointer-events: none; }
.plan-svg .win-glass { fill: none; stroke: var(--ink); stroke-width: 1.3; pointer-events: none; }
.plan-svg .win-edge { fill: none; stroke: var(--ink); stroke-width: .7; pointer-events: none; }
.plan-svg .door-line { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: none; }
.plan-svg .door-line--gate { stroke-dasharray: none; stroke-width: 2; stroke: var(--ink-2); }
.plan-svg .paving { fill: #e4e0d4; stroke: none; }
.plan-svg .stair { pointer-events: none; }
.plan-svg .stair rect { fill: var(--floor); stroke: var(--ink-2); stroke-width: 1; }
.plan-svg .stair path { fill: none; stroke: var(--ink-2); stroke-width: .8; }
.plan-svg .stair--ext rect { fill: var(--paper); }
.plan-svg .extra { stroke: var(--ink-3); stroke-width: 1.2; pointer-events: none; }
.plan-svg .extra--dashed { stroke-dasharray: 6 4; }
.plan-svg .hatch-line { stroke: rgba(30, 36, 25, .22); stroke-width: 1; }
.plan-svg .room { fill: transparent; cursor: pointer; transition: fill .18s; outline: none; }
.plan-svg .room.is-hover { fill: rgba(58, 69, 49, .14); }
.plan-svg .room.is-active { fill: rgba(123, 43, 36, .13); }
.plan-svg .room:focus-visible { stroke: var(--oxblood); stroke-width: 3; }
.plan-svg .room--outdoor { fill: rgba(58, 69, 49, .06); }
.plan-svg .room--outdoor.is-hover { fill: rgba(58, 69, 49, .16); }
.plan-svg .route { fill: none; stroke: var(--oxblood); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linecap: round; pointer-events: none; }
.plan-svg .route-head { fill: var(--oxblood); }
.plan-svg .lbl-route { fill: var(--oxblood); font-style: italic; }
.plan-svg .road { fill: #d9d6cd; stroke: var(--ink-3); stroke-width: 1.2; pointer-events: none; }
.plan-svg .lot { fill: #eeebe0; stroke: none; pointer-events: none; }
.plan-svg .lot-edge { fill: none; stroke: var(--oxblood); stroke-width: 2.2; pointer-events: none; }
.plan-svg .room--e-corte { fill: #e2dccb; }
.plan-svg .room--e-corte.is-hover, .plan-svg .room--e-corte.is-active { fill: #d6cdb4; }
.plan-svg .room--e-giardino { fill: rgba(91, 107, 66, .2); }
.plan-svg .room--e-giardino.is-hover, .plan-svg .room--e-giardino.is-active { fill: rgba(91, 107, 66, .32); }
.plan-svg .patio { fill: #e8cdb3; stroke: rgba(123, 43, 36, .25); stroke-width: 1; pointer-events: none; }
.plan-svg .ramp { pointer-events: none; }
.plan-svg .ramp-band { fill: none; stroke: #d3c7ae; stroke-linejoin: round; stroke-linecap: butt; }
.plan-svg .ramp-chevrons { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan-svg .railing { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; pointer-events: none; }
.plan-svg .gate { fill: none; stroke: var(--ink); stroke-width: 6; stroke-dasharray: 10 5; pointer-events: none; }
.plan-svg .low-wall { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.plan-svg .lbl-road { text-anchor: middle; dominant-baseline: central; font: italic 400 calc(var(--u, 4) * 12px) var(--sans); fill: var(--ink-2); letter-spacing: .04em; pointer-events: none; }
.plan-svg .north circle { fill: rgba(250, 248, 242, .9); stroke: var(--line-strong); stroke-width: 1; }
.plan-svg .north .north-a { fill: var(--ink); }
.plan-svg .north .north-b { fill: var(--paper); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.plan-svg .north text { text-anchor: middle; font: 600 11px var(--sans); fill: var(--ink); }
.plan-svg .footprint { fill: var(--olive-2); stroke: var(--ink); stroke-width: 2; cursor: pointer; transition: fill .18s; outline: none; }
.plan-svg .footprint--annex { fill: var(--ink-3); }
.plan-svg .footprint:hover, .plan-svg .footprint:focus-visible { fill: var(--oxblood); }
.plan-svg .tree { fill: rgba(91, 107, 66, .28); stroke: rgba(58, 69, 49, .55); stroke-width: 1.2; pointer-events: none; }
.is-schematic .stair rect { fill: var(--olive-2); stroke: var(--stone); }
.is-schematic .stair path { stroke: var(--stone); }

.plan-svg text { pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.plan-svg .lbl-name { font: 500 calc(var(--u, 4) * 12.5px) var(--sans); fill: var(--ink); letter-spacing: .01em; }
.plan-svg .lbl-area { font: 500 calc(var(--u, 4) * 15px) var(--serif); fill: var(--ink-2); }
.plan-svg .lbl-big { font-size: calc(var(--u, 4) * 15px); fill: var(--stone); }
.is-schematic .lbl-annex { fill: var(--paper); }
.is-schematic + .plan-foot .foot-source { display: none; }
.plan-svg .lbl--stair .lbl-name { font-size: calc(var(--u, 4) * 11px); fill: var(--ink-3); }
.plan-svg .lbl--compact .lbl-area { font-size: calc(var(--u, 4) * 13px); }
.plan-svg .lbl-extra { font: italic 400 calc(var(--u, 4) * 11.5px) var(--sans); fill: var(--ink-3); }
.plan-svg .lbl.is-active .lbl-name, .plan-svg .lbl.is-hover .lbl-name { fill: var(--oxblood); }
.plan-svg .scalebar path { fill: none; stroke: var(--ink-2); stroke-width: calc(var(--u, 4) * 1.2px); }
.plan-svg .scalebar text { text-anchor: start; font: 500 calc(var(--u, 4) * 11px) var(--sans); fill: var(--ink-2); }

.plan-svg .pin { cursor: pointer; outline: none; }
.plan-svg .pin-hit { fill: transparent; }
.plan-svg .pin-cone { fill: rgba(123, 43, 36, .2); transition: fill .2s; }
.plan-svg .pin-dot { fill: var(--oxblood); stroke: var(--paper); stroke-width: 1.5; transition: fill .2s; }
.plan-svg .pin-num { font: 600 10.5px var(--sans); fill: #fff; }
.plan-svg .pin:hover .pin-dot, .plan-svg .pin:focus-visible .pin-dot, .plan-svg .pin.is-hover .pin-dot, .plan-svg .pin.is-active .pin-dot { fill: var(--ink); }
.plan-svg .pin:hover .pin-cone, .plan-svg .pin:focus-visible .pin-cone, .plan-svg .pin.is-hover .pin-cone, .plan-svg .pin.is-active .pin-cone { fill: rgba(30, 36, 25, .28); }
.plan-svg .pin:focus-visible .pin-dot { stroke: var(--oxblood); stroke-width: 3; }
.plan-svg .pin.is-current .pin-dot { fill: var(--ink); stroke: var(--oxblood); stroke-width: 3.5; }
.plan-svg .pin.is-current .pin-cone { fill: rgba(123, 43, 36, .45); }
.plan-svg .pin.is-flash .pin-dot { animation: pinFlash 1.1s ease-in-out 2; }
@keyframes pinFlash { 50% { fill: var(--ink); r: 16; } }

.is-small .plan-svg .lbl--compact, .is-small .plan-svg .lbl:not(.lbl--stair) .lbl-name, .is-small .plan-svg .lbl--stair, .is-small .plan-svg .lbl-extra { display: none; }
.is-small .plan-svg .lbl-area { transform: translateY(calc(var(--u, 4) * -9px)); }
.is-small .plan-svg .pin-num { font-size: 9.5px; }
.is-rot .plan-svg .lbl-name { font-size: calc(var(--u, 4) * 11px); }
.is-rot .plan-svg .lbl-area { font-size: calc(var(--u, 4) * 13px); }
.is-rot .plan-svg .lbl--compact .lbl-area { font-size: calc(var(--u, 4) * 11px); }
.is-rot .plan-svg .lbl-extra { font-size: calc(var(--u, 4) * 10px); }
.is-rot .plan-svg .lbl-route { display: none; }
.is-rot .plan-svg .pin-num { font-size: 9.5px; }

.plan-tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  background: var(--olive-deep); color: var(--stone); padding: 8px 12px; border-radius: 2px;
  font-size: 14px; line-height: 1.3; white-space: nowrap; display: flex; gap: 10px; align-items: baseline;
  box-shadow: 0 6px 18px rgba(27, 33, 23, .25);
}
.plan-tip strong { font-weight: 600; }
.plan-tip span { font-family: var(--serif); }
.plan-tip em { font-size: 12.5px; opacity: .8; }
.rb-area small { font: 400 12.5px/1.3 var(--sans); color: var(--sage); }
.is-small .plan-svg .lbl-sub { display: none; }

.plan-side { color: var(--stone); }
.side-level { font: 400 30px/1.1 var(--serif); }
.side-meta { margin-top: 8px; font-size: 14px; color: var(--sage); }
.side-note { margin-top: 10px; font-size: 13.5px; color: var(--sage); }
.room-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line-dark); }
.room-btn {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line-dark); cursor: pointer;
  padding: 12px 10px; margin: 0; transition: background-color .15s;
}
.room-btn:hover, .room-btn.is-hover, .room-btn.is-active { background: rgba(233, 230, 221, .08); }
.room-btn.is-active { box-shadow: inset 2px 0 0 var(--stone); }
.rb-name { font-size: 15.5px; font-weight: 500; }
.rb-area { font: 400 17px/1.2 var(--serif); }
.rb-photos { grid-column: 1 / -1; font-size: 13px; color: var(--sage); }
.rb-photos.is-empty { font-style: italic; opacity: .8; }
.rb-photos.is-twin::before { content: ''; display: inline-block; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.side-loose { margin-top: 14px; font-size: 14px; color: var(--sage); }

@media (max-width: 980px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-side { display: grid; grid-template-columns: 1fr; }
  .room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 20px; }
}
@media (max-width: 600px) {
  .plan-tabs { border-radius: 2px; width: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-left: 0; border-right: 0; }
  .plan-tabs button { padding: 10px 14px; font-size: 14.5px; }
  .plan-sheet { margin-inline: calc(var(--gutter) * -1 + 6px); padding: 6px; }
  .plan-foot { padding: 10px 6px 4px; font-size: 12.5px; }
  .room-list { grid-template-columns: 1fr; }
}

/* ---------- room panel ---------- */
.panel-scrim { position: fixed; inset: 0; z-index: 58; background: rgba(27, 33, 23, .45); opacity: 0; transition: opacity .3s; }
.panel-scrim.is-open { opacity: 1; }
.room-panel {
  position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(460px, 92vw);
  background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -24px 0 48px rgba(27, 33, 23, .22);
  transform: translateX(104%); transition: transform .32s var(--ease);
}
.room-panel.is-open { transform: none; }
.sheet-handle { display: none; }
@media (min-width: 901px) { .panel-scrim { display: none; } }
@media (max-width: 900px) {
  .room-panel {
    top: auto; left: 0; width: 100%; max-height: 86svh; border-radius: 14px 14px 0 0;
    transform: translateY(104%); box-shadow: 0 -16px 40px rgba(27, 33, 23, .25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet-handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--stone-3); margin: 10px auto 0; }
  .panel-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .room-panel, .panel-scrim { transition: none; } }
.rp-head { position: relative; padding: 28px 72px 20px 28px; }
.rp-level { font-size: 13.5px; color: var(--ink-3); }
.rp-title { font-size: 34px; line-height: 1.1; margin-top: 4px; outline: none; }
.rp-meta { margin-top: 8px; font: 400 19px/1.3 var(--serif); color: var(--ink-2); }
.rp-note { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.rp-close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--stone); border: 0; cursor: pointer;
}
.rp-close:hover { background: var(--stone-2); }
.rp-carousel { padding: 0 28px 28px; }
.rp-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; outline: none;
}
.rp-track::-webkit-scrollbar { display: none; }
.rp-track:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.rp-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.rp-zoom { display: block; width: 100%; padding: 0; border: 0; background: var(--stone-2); cursor: zoom-in; }
.rp-zoom img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.rp-slide figcaption { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.rp-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.rp-step { display: flex; align-items: center; gap: 6px; }
.rp-step .rp-count { min-width: 64px; text-align: center; }
.rp-nav .rp-full {
  display: inline-flex; align-items: center; width: auto; height: 40px; margin-left: auto; padding: 0 14px; gap: 8px; border-radius: 2px;
  font: 500 14px var(--sans); color: var(--ink); border: 1px solid var(--line-strong); background: transparent;
}
.rp-nav .rp-full:hover { background: var(--stone-2); }
.rp-nav .rp-full svg { width: 18px; height: 18px; }
.rp-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: none;
  display: grid; place-items: center; cursor: pointer;
}
.rp-nav button:disabled { opacity: .3; cursor: default; }
.rp-count { font: 400 17px var(--serif); color: var(--ink-2); }
.rp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 18px; }
.rp-thumb { padding: 0; border: 0; background: var(--stone-2); cursor: pointer; aspect-ratio: 1; overflow: hidden; opacity: .6; transition: opacity .15s; box-shadow: inset 0 0 0 0 var(--ink); }
.rp-thumb img, .rp-thumb picture { width: 100%; height: 100%; object-fit: cover; }
.rp-thumb:hover { opacity: .9; }
.rp-thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .rp-head { padding: 14px 68px 14px 20px; }
  .rp-close { top: 10px; right: 14px; }
  .rp-title { font-size: 28px; }
  .rp-carousel { padding: 0 20px 20px; }
  .rp-zoom img { aspect-ratio: 4 / 3; }
}
.badge {
  display: inline-block; margin-top: 10px; padding: 5px 9px; border-radius: 2px;
  font-size: 12.5px; line-height: 1.35; background: var(--stone); color: var(--ink-2);
  border-left: 2px solid var(--oxblood);
}
.rp-empty { margin: 0 28px 28px; padding: 36px 24px; border: 1px dashed var(--line-strong); text-align: center; color: var(--ink-2); font-size: 14.5px; }
.rp-empty svg { width: 44px; height: 44px; fill: none; stroke: var(--ink-3); stroke-width: 1.4; margin: 0 auto 10px; }
.rp-empty-t { font: 400 22px/1.2 var(--serif); color: var(--ink); margin-bottom: 6px; }

/* ---------- gallery ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 9px 15px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: none; cursor: pointer;
  font: 500 14.5px/1.2 var(--sans); transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--stone); }
.chip-n { font-size: 12px; opacity: .65; }
/* calm editorial grid: blocks of one 3:2 feature + four 4:3 tiles, feature side alternating */
.gallery { --gg: 14px; display: grid; gap: var(--gg); }
.gallery-more { margin-top: 28px; text-align: center; }
.btn--line-dark { border-color: var(--ink); color: var(--ink); background: none; }
.btn--line-dark:hover { background: var(--ink); color: var(--stone); }
.g-block { display: grid; gap: var(--gg); grid-template-columns: 2.25fr 1fr 1fr; }
.g-block .g-item--feature { grid-row: span 2; }
.g-block--rev { grid-template-columns: 1fr 1fr 2.25fr; }
.g-block--rev .g-item--feature { grid-column: 3; grid-row: 1 / span 2; }
.g-block--row { grid-template-columns: repeat(4, 1fr); }
.g-block--n1, .g-block--n2 { grid-template-columns: repeat(2, 1fr); }
.g-block--n1 .g-item, .g-block--n2 .g-item { aspect-ratio: 3 / 2; }
.g-block--n3 { grid-template-columns: repeat(3, 1fr); }
.g-item { position: relative; margin: 0; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.g-item--feature { aspect-ratio: auto; }
.g-btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; cursor: zoom-in; text-align: left; }
.g-btn picture, .g-btn img { display: block; width: 100%; height: 100%; }
.g-btn img { object-fit: cover; transition: transform .7s var(--ease); }
.g-btn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.g-badge {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px;
  background: rgba(27, 33, 23, .72); color: #fff; font: 500 11.5px/1.3 var(--sans); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 18, 12, .72), rgba(15, 18, 12, 0)); color: #fff; font-size: 13.5px; line-height: 1.35;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease);
}
.g-btn:focus-visible .g-cap { opacity: 1; transform: none; }
@media (hover: hover) {
  .g-btn:hover img { transform: scale(1.03); }
  .g-btn:hover .g-cap { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .g-btn img, .g-cap { transition: none; } .g-btn:hover img { transform: none; } }
@media (max-width: 620px) {
  .gallery { --gg: 8px; }
  .g-block, .g-block--rev, .g-block--row, .g-block--n3 { grid-template-columns: 1fr 1fr; }
  .g-block .g-item--feature, .g-block--rev .g-item--feature { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .g-block--n3 .g-item:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .g-block--n1 .g-item, .g-block--n2 .g-item { aspect-ratio: 4 / 3; }
  .g-badge { top: 6px; left: 6px; padding: 3px 8px; font-size: 10.5px; }
}
img.is-missing { object-fit: cover; }

/* ---------- the town (Monteroduni) ---------- */
.sec--town { background: var(--olive); color: var(--stone); }
.sec--town .lead { color: var(--sage); }
.sec--town :focus-visible { outline-color: var(--stone); }
.town-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(24px, 3vw, 40px); }
.town-card { display: flex; flex-direction: column; min-width: 0; }
.town-fig { margin: 0 0 20px; }
.town-fig picture, .town-fig img { display: block; width: 100%; }
.town-fig img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--olive-2); }
.town-credit { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--sage); }
.town-credit a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(191, 194, 173, .5); }
.town-credit a:hover { text-decoration-color: currentColor; }
.town-card h3 { font-size: clamp(23px, 2vw, 28px); line-height: 1.15; margin-bottom: 10px; }
.town-card p { font-size: 15.5px; color: rgba(233, 230, 221, .88); }
.sec--town .town-note { margin-top: clamp(32px, 4vw, 48px); color: var(--sage); }
@media (max-width: 880px) { .town-list { grid-template-columns: 1fr; gap: 44px; } }

/* ---------- location ---------- */
.sec--location { background: var(--stone-2); }
.loc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.loc-text .lead { margin-top: 20px; }
.loc-address { margin-top: 20px; font: 400 21px/1.35 var(--serif); }
.distances { margin: 24px 0 10px; border-top: 1px solid var(--line-strong); }
.distances > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.distances dt { font-weight: 500; font-size: 15.5px; }
.distances dd { margin: 0; color: var(--ink-2); font-size: 15.5px; text-align: right; }
.loc-text .btn { margin-top: 22px; }
.map-frame { position: relative; aspect-ratio: 4 / 3; background: var(--stone-3); border: 1px solid var(--line); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.7) sepia(.08); }
@media (max-width: 880px) { .loc-grid { grid-template-columns: 1fr; } .map-frame { aspect-ratio: 1 / 1; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: stretch; }
.contact-text { display: flex; flex-direction: column; }
.contact-text .lead { margin-top: 20px; }
/* The card fills the column so its bottom lines up with the form's submit row. */
.contact-card { flex: 1; display: flex; flex-direction: column; margin-top: 32px; background: var(--olive); color: var(--stone); padding: 28px; border-radius: 3px; }
.contact-card .btn--wa { margin-top: auto; }
.cc-label { font-size: 13.5px; color: var(--sage); }
.cc-list { list-style: none; margin: 18px 0 22px; padding: 0; border-top: 1px solid var(--line-dark); }
.cc-list a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; font-size: 16px; min-height: 48px; word-break: break-word; }
.cc-list a[href]:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cc-list a.is-disabled { opacity: .6; }
.cc-list svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cc-todo { margin-top: 12px; font-size: 13.5px; color: var(--sage); }

.contact-form { display: grid; gap: 22px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label, .field legend { font-size: 14px; color: var(--ink-2); padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  padding: 10px 0; transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 120px; border: 1px solid var(--line-strong); padding: 12px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field textarea:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--oxblood); box-shadow: 0 1px 0 var(--oxblood); }
.field ::placeholder { color: var(--ink-3); opacity: .8; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; color: var(--ink); transition: background-color .15s, color .15s; }
.seg input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--stone); }
.seg input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-actions .fine { max-width: 32ch; }
/* Status sits just under the form, out of the flow, so the form's bottom lines up with the contact card. */
.contact-form { position: relative; }
.form-status { position: absolute; top: 100%; left: 0; right: 0; margin-top: 14px; font-size: 15px; }
.form-status.is-error { color: var(--oxblood); }
.form-status.is-ok { color: var(--olive-2); }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } .contact-card { flex: none; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .form-actions .btn { width: 100%; } }

/* ---------- footer ---------- */
.site-footer { background: var(--olive-deep); color: var(--stone); padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 48px; }
.brand--footer { margin: 0; }
.brand--footer .brand-street { font-size: 26px; }
.brand--footer .brand-town { margin-top: 6px; font-size: 14px; }
.footer-notes { display: grid; gap: 10px; font-size: 14px; color: var(--sage); max-width: 62ch; }
.footer-meta { display: flex; gap: 20px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- lightbox ---------- */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--olive-deep); color: var(--stone); overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgba(27, 33, 23, .7); }
.lb-stage { position: relative; min-height: 0; overflow: hidden; }
.lb-img { position: absolute; inset: 64px 16px 8px; display: flex; align-items: center; justify-content: center; }
.lb-img picture { display: contents; }
.lb-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-stage { touch-action: none; }
.lb-img img { cursor: zoom-in; transform-origin: 50% 50%; will-change: transform; }
.lightbox.is-zoomed .lb-img img { cursor: grab; }
.lightbox.is-zoomed .lb-img img:active { cursor: grabbing; }
.lb-zin:disabled, .lb-zout:disabled { opacity: .35; cursor: default; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); }
.lb-text { min-width: 0; flex: 1 1 280px; }
.lb-cap { font: 400 20px/1.3 var(--serif); }
.lb-where { font-size: 13.5px; color: var(--sage); margin-top: 2px; }
.lb-badge { margin: 0 0 8px; background: rgba(233, 230, 221, .1); color: var(--stone); border-left-color: var(--stone); }
.lb-controls { display: flex; align-items: center; gap: 12px; }
.lb-count { font: 400 17px var(--serif); min-width: 56px; text-align: center; }
.lb-onplan { color: var(--stone); font-size: 14px; margin-right: 6px; }
.lb-close { position: absolute; top: 12px; right: 12px; background: rgba(27, 33, 23, .5); }
.lb-close, .lb-prev, .lb-next { color: var(--stone); }
.lb-open { overflow: hidden; }
@media (max-width: 600px) {
  .lb-img { inset: 60px 0 4px; }
  .lb-cap { font-size: 17px; }
  .lb-controls { width: 100%; justify-content: space-between; }
  .lb-onplan { order: 3; margin: 0; }
}

/* ---------- areas table ---------- */
.areas { width: 100%; border-collapse: collapse; font-size: 15px; }
.areas caption { text-align: left; font: 600 14px/1.4 var(--sans); letter-spacing: .02em; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.areas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.areas th, .areas td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.areas th { color: var(--ink-2); }
.areas td { text-align: right; font-family: var(--serif); font-size: 17px; font-variant-numeric: lining-nums tabular-nums; }
.areas .is-total th { color: var(--ink); font-weight: 600; }
.areas .is-total td { font-weight: 600; }
.areas .is-total th, .areas .is-total td { border-bottom-color: var(--ink); }
.areas .is-group th { padding-top: 18px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- potential ---------- */
.sec--gallery + .sec--potential { padding-top: clamp(24px, 4vw, 56px); }
.pot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.pot { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; }
.pot-icon { width: 48px; height: 48px; fill: none; stroke: var(--olive-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.pot-icon text { stroke: none; fill: var(--olive-2); font: 600 7.5px var(--sans); text-anchor: middle; }
.pot h3 { font-size: clamp(23px, 2vw, 28px); line-height: 1.15; margin-bottom: 10px; }
.pot p { font-size: 15.5px; color: var(--ink-2); }
.pot .pot-caveat { margin-top: 14px; font-size: 13.5px; font-style: italic; color: var(--ink-3); }
/* image-led cards: concept renderings (only when the files exist) */
.pot.has-media { border-top: 0; padding-top: 0; }
.pot.has-media .pot-icon { display: none; }
.pot-media { position: relative; margin-bottom: 22px; }
.pot-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--stone-2); }
.pot-track::-webkit-scrollbar { display: none; }
.pot-track:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.pot-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.pot-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pot-zoom img, .pot-zoom picture { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pot-badge {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); margin: 0; padding: 5px 10px; border-radius: 2px;
  font: 500 12px/1.35 var(--sans); color: #fff; background: rgba(27, 33, 23, .78); pointer-events: none;
}
.pot p.pot-badge { font-size: 12px; color: #fff; }
.pot-nav { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 22px; background: rgba(27, 33, 23, .62); color: #fff; }
.pot-nav button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: #fff; }
.pot-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.pot-nav button:disabled { opacity: .35; cursor: default; }
.pot-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pot-count { font: 500 13px var(--sans); color: #fff; min-width: 40px; text-align: center; }
@media (max-width: 880px) { .pot-list { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- plan toolbar: tabs + furnish ---------- */
.plan-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.plan-toolbar .plan-tabs { margin-bottom: 0; }
.plan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
@media (max-width: 600px) {
  .plan-toolbar { margin-bottom: 14px; }
  .plan-tools { width: 100%; justify-content: space-between; }
}

/* ---------- furnished / unfurnished segmented toggle ---------- */
.furnish { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.furnish[hidden], .lb-nofurnish [data-furnish] { display: none; }
.furnish-label { font-size: 13.5px; color: var(--ink-3); }
.furnish-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
.furnish-seg button {
  background: none; border: 0; cursor: pointer; min-height: 36px; padding: 7px 14px; border-radius: 999px;
  font: 500 14px/1 var(--sans); color: var(--ink-2);
}
.furnish-seg button[aria-pressed="true"] { background: var(--olive); color: var(--stone); }
.furnish--dark .furnish-label { color: var(--sage); }
.furnish--dark .furnish-seg { border-color: var(--line-dark); }
.furnish--dark .furnish-seg button { color: var(--sage); }
.furnish--dark .furnish-seg button[aria-pressed="true"] { background: var(--stone); color: var(--olive); }
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.gallery-toolbar .chips { margin-bottom: 0; min-width: 0; }
/* one tidy line: chips scroll sideways if they ever overflow, the furnish toggle stays on the right */
.gallery-toolbar { flex-wrap: nowrap; }
.gallery-toolbar .chips { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.gallery-toolbar .chips::-webkit-scrollbar { display: none; }
.gallery-toolbar .chip { flex: none; }
.gallery-toolbar .furnish { flex: none; margin-left: auto; }
@media (max-width: 900px) {
  .gallery-toolbar { flex-wrap: wrap; }
  .gallery-toolbar .furnish { margin-left: 0; }
}
@media (max-width: 620px) {
  .gallery-toolbar .chips { flex-basis: 100%; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
}
.lightbox .furnish { order: 2; }

/* ---------- 404 ---------- */
.page-404 { min-height: 100vh; display: grid; place-items: center; background: var(--stone); }
.nf { padding-block: 64px; }
.nf .brand { margin-bottom: 56px; }
.nf h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1.04; max-width: 14ch; margin-bottom: 24px; }
.nf .lead + .lead { margin-top: 8px; }
.nf-actions { margin-top: 36px; }

/* Location list: airport icon */
.loc-airport dt { display: flex; align-items: center; gap: 8px; }
.loc-ico { flex: none; width: 16px; height: 16px; color: var(--oxblood); transform: rotate(45deg); }

/* Contact form honeypot (hidden from people, visible to naive bots) */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 4px 0 16px; }

/* Floor-plan hint (js/plan-hint.js) */
.plan-stage { position: relative; }
.plan-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
  padding: 8px 8px 8px 12px; border-radius: 999px;
  background: var(--olive-deep); color: var(--paper);
  font: 500 13px/1.3 var(--sans); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.plan-hint.is-gone { opacity: 0; transform: translate(-50%, -6px); pointer-events: none; }
.plan-hint-ico { flex: none; width: 20px; height: 20px; }
.plan-hint-ico circle { fill: var(--oxblood); }
.plan-hint-ico .ring { fill: none; stroke: var(--oxblood); stroke-width: 1.5; transform-origin: center; animation: hint-ring 1.8s ease-out infinite; }
.plan-hint-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(246, 244, 239, .12); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.plan-hint-x:hover, .plan-hint-x:focus-visible { background: rgba(246, 244, 239, .25); }
.plan-hint .hint-tap { display: none; }
@media (hover: none) { .plan-hint .hint-click { display: none; } .plan-hint .hint-tap { display: inline; } }
.plan-hinting .pin-dot { transform-box: fill-box; transform-origin: center; animation: pin-pulse 1.8s ease-in-out infinite; }
@keyframes pin-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes hint-ring { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plan-hinting .pin-dot, .plan-hint-ico .ring { animation: none; } }

/* ---------- swipe hints for sideways-scrolling rows (js/scroll-hint.js) ---------- */
/* An edge fade with a chevron, pinned to the visible edge with position: sticky; shown only while more content is off-screen. */
#planTabs { --hs-bg: var(--olive); }
#galleryFilters { --hs-bg: var(--stone); }
#planTabs::after, #galleryFilters::after, #planTabs::before, #galleryFilters::before {
  content: ''; flex: none; position: sticky; z-index: 1; width: 44px; align-self: stretch;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#planTabs::after, #galleryFilters::after {
  right: 0; margin-left: -44px; order: 99;
  background: linear-gradient(to right, transparent, var(--hs-bg) 55%);
}
#planTabs::before, #galleryFilters::before {
  left: 0; margin-right: -44px; order: -1;
  background: linear-gradient(to left, transparent, var(--hs-bg) 55%);
}
#planTabs.hs-right::after, #galleryFilters.hs-right::after, #planTabs.hs-left::before, #galleryFilters.hs-left::before { opacity: 1; }
#planTabs.hs-right::after, #galleryFilters.hs-right::after { pointer-events: auto; cursor: pointer; }
/* chevron drawn on top of the fade */
#planTabs::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23e9e6dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 18px no-repeat, linear-gradient(to right, transparent, var(--hs-bg) 55%); }
#galleryFilters::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%231e2419' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 18px no-repeat, linear-gradient(to right, transparent, var(--hs-bg) 55%); }