/* ==========================================================================
   REZIDENCIA VEĽKÁ IDA
   Palette: warm ivory · celadon sage · pine ink · a single red accent
   Type:    Cabinet Grotesk (display) · Inter Tight (body)
   ========================================================================== */

:root{
  /* --- warm ivory --- */
  --paper:        #FCFAF5;
  --ivory:        #F6F1E7;
  --ivory-deep:   #EDE5D6;
  --ivory-line:   #E2D9C8;

  /* --- celadon sage --- */
  --sage-pale:    #E5EBE2;
  --sage-light:   #C6D5C5;
  --sage:         #9DB4A0;
  --sage-deep:    #77907B;

  /* --- pine ink --- */
  --pine:         #1B2A23;
  --pine-soft:    #2C4136;
  --pine-mute:    #5C6F63;

  /* --- the one red --- */
  --red:          #C43D28;
  --red-deep:     #A3301E;

  /* --- pastels for the four variants --- */
  --pastel-a:     #E5EBE2;
  --pastel-b:     #F1E8DB;
  --pastel-c:     #E4E9ED;
  --pastel-d:     #F3E5DF;

  --font-display: 'Cabinet Grotesk','Satoshi',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --font-body:    'Inter Tight','Inter',ui-sans-serif,system-ui,'Segoe UI',sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1320px;
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ivory);
  color:var(--pine);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--red); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 6px 0;
  font-size:.8rem; font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage-deep);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.5rem;
}
.eyebrow::before{ content:''; width:2.25rem; height:1px; background:var(--sage); flex:none; }
.eyebrow .num{ color:var(--red); font-variant-numeric:tabular-nums; }

.lede{
  font-size:clamp(1.125rem,1.02rem + .5vw,1.4rem);
  line-height:1.5;
  letter-spacing:-.015em;
  color:var(--pine-soft);
  max-width:46ch;
}

/* ==========================================================================
   Logo — house monogram, knot style
   ========================================================================== */
.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.logo svg{ width:38px; height:38px; overflow:visible; flex:none; }
.logo svg .knot{
  fill:none; stroke:currentColor; stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round;
}
.logo svg .knot-accent{ stroke:var(--red); }
.logo-text{ line-height:1.05; }
.logo-text b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:.95rem; letter-spacing:-.02em; text-transform:uppercase;
}
.logo-text span{
  display:block; font-size:.6rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; opacity:.62;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--gutter);
  color:var(--ivory);
  transition:background .45s var(--ease), color .45s var(--ease),
             box-shadow .45s var(--ease), padding .45s var(--ease);
}
.site-head::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,rgba(16,26,21,.55),rgba(16,26,21,0));
  transition:opacity .45s var(--ease);
}
.site-head.is-stuck{
  background:var(--paper); color:var(--pine);
  box-shadow:0 1px 0 var(--ivory-line), 0 12px 30px -24px rgba(27,42,35,.5);
  padding-block:.8rem;
}
.site-head.is-stuck::before{ opacity:0; }

.site-nav{ display:flex; gap:1.75rem; margin-left:auto; }
.site-nav a{
  text-decoration:none; font-size:.8rem; font-weight:500;
  letter-spacing:.02em; padding-block:.35rem; position:relative; opacity:.85;
  transition:opacity .25s;
}
.site-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.site-nav a:hover{ opacity:1; }
.site-nav a:hover::after,.site-nav a.is-active::after{ transform:scaleX(1); }
.site-nav a.is-active{ opacity:1; }

.head-tools{ display:flex; align-items:center; gap:.85rem; }

/* language switcher */
.lang{
  display:flex; align-items:center; border:1px solid currentColor;
  border-radius:999px; padding:2px; opacity:.78; transition:opacity .25s;
}
.lang:hover{ opacity:1; }
.lang button{
  border:0; background:none; cursor:pointer; border-radius:999px;
  font-size:.7rem; font-weight:600; letter-spacing:.1em;
  padding:.3rem .62rem; line-height:1;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lang button[aria-pressed="true"]{ background:currentColor; }
.site-head .lang button[aria-pressed="true"]{ color:var(--pine); }
.site-head.is-stuck .lang button[aria-pressed="true"]{ color:var(--paper); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  font-size:.8rem; font-weight:600; letter-spacing:.01em;
  padding:.72rem 1.35rem; white-space:nowrap;
  transition:transform .3s var(--ease-out), background .3s var(--ease),
             color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 24px -14px rgba(196,61,40,.9); }
.btn-red:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn-pine{ background:var(--pine); color:var(--ivory); }
.btn-pine:hover{ background:var(--pine-soft); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:inherit; border:1px solid currentColor; }
.btn-ghost:hover{ background:rgba(246,241,231,.12); }
.btn-lg{ padding:.95rem 1.9rem; font-size:.875rem; }
.btn .arw{ transition:transform .35s var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }

.burger{ display:none; }

/* ==========================================================================
   01 · Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:7rem 0 3.5rem; overflow:hidden; background:var(--pine); color:var(--ivory);
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img,.hero-media video{
  width:100%; height:100%; object-fit:cover;
}
.hero-media img{ transform:scale(1.06); animation:heroDrift 26s var(--ease) infinite alternate; }
.hero-media video{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease); }
.hero-media video.ready{ opacity:1; }
@keyframes heroDrift{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{ transform:scale(1.13) translate3d(-1.5%,-1.5%,0); }
}
.hero-media::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top,rgba(16,26,21,.9) 0%,rgba(16,26,21,.55) 38%,rgba(16,26,21,.12) 68%,rgba(16,26,21,.42) 100%),
    radial-gradient(120% 80% at 20% 100%,rgba(27,42,35,.55),transparent 60%);
}

/* floor-plan intro flourish */
.hero-plan{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:var(--pine); pointer-events:none;
}
.hero-plan svg{ width:min(62vw,560px); height:auto; overflow:visible; }
.hero-plan .pl{
  fill:none; stroke:var(--sage-light); stroke-width:1.4;
  stroke-linecap:square; stroke-linejoin:miter;
  stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
  opacity:.85;
}
.hero-plan .pl-accent{ stroke:var(--red); stroke-width:2; opacity:1; }
.hero.plan-run .hero-plan .pl{
  animation:drawPlan 1.25s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * .07s);
}
@keyframes drawPlan{ to{ stroke-dashoffset:0; } }
.hero.plan-done .hero-plan{ animation:planOut 1.4s var(--ease) forwards; }
@keyframes planOut{ to{ opacity:0; transform:scale(1.14); visibility:hidden; } }

.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-light); margin-bottom:1.6rem;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
.hero h1{
  font-size:clamp(2.5rem,1.4rem + 6.2vw,7rem);
  letter-spacing:-.045em; line-height:.94; max-width:15ch; margin-bottom:1.75rem;
}
.hero h1 em{ font-style:normal; color:var(--sage-light); }
.hero-sub{
  font-size:clamp(1rem,.94rem + .35vw,1.25rem); line-height:1.5;
  max-width:44ch; color:rgba(246,241,231,.82); margin:0 0 2.5rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.hero-foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem;
  border-top:1px solid rgba(246,241,231,.18);
}
.hero-keys{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,2.75rem); }
.hero-keys div b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.85rem); letter-spacing:-.03em;
}
.hero-keys div span{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6;
}
.scroll-cue{
  display:flex; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; opacity:.62;
}
.scroll-cue i{
  width:1px; height:2.4rem; background:currentColor; display:block;
  transform-origin:top; animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(.2);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* ==========================================================================
   Facts marquee
   ========================================================================== */
.marquee{
  background:var(--pine); color:var(--ivory);
  padding:.95rem 0; overflow:hidden; display:flex; user-select:none;
  border-block:1px solid rgba(246,241,231,.1);
}
.marquee-track{ display:flex; flex:none; animation:slide 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee-track ul{
  display:flex; align-items:center; margin:0; padding:0; list-style:none; flex:none;
}
.marquee-track li{
  display:flex; align-items:baseline; gap:.55rem; white-space:nowrap;
  font-size:.8rem; letter-spacing:.02em; padding-right:2.4rem;
}
.marquee-track li b{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.025em;
}
.marquee-track li span{ opacity:.6; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.marquee-track li::after{ content:'\25C6'; color:var(--red); font-size:.48rem; margin-left:2.4rem; opacity:.9; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{ padding:clamp(4.5rem,3rem + 6vw,8.5rem) 0; position:relative; }
.sec-ivory{ background:var(--ivory); }
.sec-paper{ background:var(--paper); }
.sec-sage{ background:var(--sage-pale); }
.sec-pine{ background:var(--pine); color:var(--ivory); }
.sec-pine .eyebrow{ color:var(--sage-light); }
.sec-pine .eyebrow::before{ background:var(--sage-deep); }
.sec-pine .lede{ color:rgba(246,241,231,.78); }

.sec-head{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:clamp(2.5rem,2rem + 2vw,4rem); }
@media (min-width:900px){
  .sec-head{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:end; }
}
.sec-head h2{ font-size:clamp(2rem,1.35rem + 3vw,3.75rem); max-width:15ch; }

/* ---------- 02 project ---------- */
.proj-grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:900px){ .proj-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; } }
.proj-figure{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ivory-deep); aspect-ratio:4/3; margin:0;
}
.proj-figure img,.proj-figure video{ width:100%; height:100%; object-fit:cover; }
.proj-figure video{ position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease); }
.proj-figure video.ready{ opacity:1; }
.proj-copy p{ color:var(--pine-soft); max-width:52ch; }
.sec-pine .proj-copy p{ color:rgba(246,241,231,.76); }
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.pill{
  border:1px solid var(--ivory-line); background:var(--paper); color:var(--pine-soft);
  border-radius:999px; padding:.42rem .95rem; font-size:.78rem; font-weight:500;
}
.sec-pine .pill{ border-color:rgba(246,241,231,.22); background:transparent; color:rgba(246,241,231,.85); }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--ivory-line); border:1px solid var(--ivory-line);
  border-radius:var(--radius-lg); overflow:hidden; margin-top:clamp(2.5rem,4vw,4rem);
}
.sec-pine .stats{ background:rgba(246,241,231,.16); border-color:rgba(246,241,231,.16); }
.stats div{ background:var(--paper); padding:1.6rem 1.4rem; }
.sec-pine .stats div{ background:var(--pine); }
.stats b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.4rem); letter-spacing:-.035em; line-height:1;
}
.stats b .u{ font-size:.5em; color:var(--sage-deep); margin-left:.15em; }
.sec-pine .stats b .u{ color:var(--sage); }
.stats span{
  display:block; margin-top:.55rem; font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pine-mute);
}
.sec-pine .stats span{ color:var(--sage); }

/* ---------- 03 variants ---------- */
.variants{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.vcard{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--tint,var(--pastel-a)); padding:1.25rem 1.25rem 1.5rem;
  display:flex; flex-direction:column; gap:1.15rem; text-align:left;
  border:1px solid rgba(27,42,35,.07); cursor:pointer; width:100%;
  color:var(--pine); font-family:inherit;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.vcard:hover,.vcard:focus-visible{
  transform:translateY(-8px);
  box-shadow:0 30px 50px -32px rgba(27,42,35,.5);
}
.vcard-media{
  position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3;
  background:rgba(27,42,35,.06);
}
.vcard-media img,.vcard-media video{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), opacity .55s var(--ease);
}
.vcard:hover .vcard-media img{ transform:scale(1.07); }
.vcard-media video{ position:absolute; inset:0; opacity:0; }
.vcard.playing .vcard-media video{ opacity:1; }
.vcard.playing .vcard-media img{ opacity:0; }
.vcard-tag{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  background:rgba(252,250,245,.92); backdrop-filter:blur(6px);
  border-radius:999px; padding:.3rem .7rem;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.vcard h3{ font-size:1.5rem; letter-spacing:-.03em; }
.vcard .v-sub{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pine-mute); margin-top:.35rem; }
.vcard dl{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1rem; margin:0; }
.vcard dt{ font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--pine-mute); }
.vcard dd{ margin:.15rem 0 0; font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.vcard-foot{
  margin-top:auto; padding-top:1rem; border-top:1px solid rgba(27,42,35,.12);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.vcard-price small{ display:block; font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--pine-mute); }
.vcard-price b{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.03em; }
.vcard-go{
  width:34px; height:34px; border-radius:50%; background:var(--pine); color:var(--ivory);
  display:grid; place-items:center; flex:none;
  transition:background .35s var(--ease), transform .35s var(--ease-out);
}
.vcard:hover .vcard-go{ background:var(--red); transform:rotate(-45deg); }

.plan-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  margin-top:2.5rem; padding:1.25rem 1.5rem;
  border:1px dashed var(--sage); border-radius:var(--radius-lg);
  background:var(--paper); font-size:.85rem; color:var(--pine-soft);
}
.plan-note .k{ color:var(--red); font-weight:700; }

/* ---------- gallery ---------- */
.gallery{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:clamp(2.5rem,4vw,4rem);
}
.gfig{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:3/4; background:var(--ivory-deep); margin:0;
}
.gfig-wide{ aspect-ratio:3/2; }
@media (min-width:760px){ .gfig-wide{ grid-column:span 2; } }
.gfig img,.gfig video{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out), opacity .6s var(--ease);
}
.gfig video{ position:absolute; inset:0; opacity:0; }
.gfig.playing video{ opacity:1; }
.gfig:hover img{ transform:scale(1.06); }
.gfig figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.5rem 1.1rem .95rem; color:#fff;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  background:linear-gradient(to top,rgba(16,26,21,.8),transparent);
}

/* ---------- 04 location ---------- */
.loc-grid{ display:grid; gap:clamp(1.75rem,3vw,3rem); }
@media (min-width:900px){ .loc-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; } }
.loc-map{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:1/1; background:var(--pine-soft);
}
.loc-map svg{ width:100%; height:100%; display:block; }
.dist{ list-style:none; margin:0; padding:0; }
.dist li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:1rem;
  padding:1rem 0; border-bottom:1px solid rgba(246,241,231,.15);
}
.dist li:first-child{ border-top:1px solid rgba(246,241,231,.15); }
.dist .n{ font-size:.66rem; letter-spacing:.12em; color:var(--sage); font-variant-numeric:tabular-nums; }
.dist .p{ font-size:1rem; font-weight:500; }
.dist .d{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.03em; color:var(--sage-light); white-space:nowrap; }

/* ---------- 05 price ---------- */
.ptable{ border:1px solid var(--ivory-line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper); }
.ptable-row{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr) auto; gap:1rem;
  align-items:center; padding:1.15rem clamp(1rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--ivory-line);
}
.ptable-row:last-child{ border-bottom:0; }
.ptable-head{
  background:var(--sage-pale); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pine-mute); font-weight:600;
}
.ptable-row .name{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:-.025em; }
.ptable-row .name small{
  display:block; font-family:var(--font-body); font-weight:400; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--pine-mute); margin-top:.15rem;
}
.ptable-row .val{ font-variant-numeric:tabular-nums; font-size:.95rem; }
.ptable-row .price{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; letter-spacing:-.03em; }
.ptable-row .price small{
  font-family:var(--font-body); font-weight:500; font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pine-mute); display:block;
}
@media (max-width:820px){
  .ptable-head{ display:none; }
  .ptable-row{ grid-template-columns:1fr 1fr; gap:.6rem 1rem; }
  .ptable-row .name{ grid-column:1/-1; }
  .ptable-row .btn{ grid-column:1/-1; justify-self:start; margin-top:.4rem; }
  .ptable-row .val::before{
    content:attr(data-l) ' '; font-size:.64rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--pine-mute);
  }
}
.fin-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:clamp(2rem,3vw,3rem); }
.fin-card{ background:var(--paper); border:1px solid var(--ivory-line); border-radius:var(--radius-lg); padding:1.6rem 1.5rem; }
.fin-card .ic{
  width:34px; height:34px; border-radius:8px; background:var(--sage-pale);
  color:var(--sage-deep); display:grid; place-items:center; margin-bottom:1rem;
}
.fin-card h4{ font-size:1.05rem; margin-bottom:.5rem; }
.fin-card p{ margin:0; font-size:.875rem; color:var(--pine-mute); line-height:1.55; }
.disclaimer{ margin-top:2rem; font-size:.75rem; color:var(--pine-mute); max-width:74ch; line-height:1.6; }

/* ---------- 06 contact ---------- */
.contact-grid{ display:grid; gap:clamp(2rem,4vw,4rem); }
@media (min-width:900px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); } }
.contact-list{ margin:2.5rem 0 0; padding:0; display:grid; gap:1.5rem; }
.contact-list dt{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); margin-bottom:.35rem; }
.contact-list dd{ margin:0; }
.contact-list a{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.1rem,1rem + .5vw,1.45rem); letter-spacing:-.03em; text-decoration:none;
  transition:color .25s;
}
.contact-list a:hover{ color:var(--sage-light); }
.contact-card{
  background:var(--paper); color:var(--pine); border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.5rem);
}
.contact-card h3{ font-size:1.5rem; margin-bottom:.75rem; }
.contact-card p{ font-size:.9rem; color:var(--pine-mute); margin:0 0 1.75rem; }

/* ---------- form ---------- */
.field{ margin-bottom:1.1rem; }
.field label{
  display:block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pine-mute); margin-bottom:.45rem; font-weight:600;
}
.field input,.field select{
  width:100%; border:1px solid var(--ivory-line); border-radius:var(--radius);
  background:var(--ivory); padding:.8rem .9rem; font:inherit; font-size:.925rem;
  color:var(--pine); transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus,.field select:focus{
  outline:none; border-color:var(--sage-deep); background:var(--paper);
  box-shadow:0 0 0 3px rgba(157,180,160,.3);
}
.field input:user-invalid{ border-color:var(--red); }
.field-row{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.72rem; color:var(--pine-mute); margin:1rem 0 0; line-height:1.55; }

/* ---------- footer ---------- */
.site-foot{ background:var(--pine); color:rgba(246,241,231,.6); padding:2.5rem 0; font-size:.78rem; }
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; justify-content:space-between; }
.site-foot .logo{ color:var(--ivory); }
.site-foot a{ text-decoration:none; transition:color .25s; }
.site-foot a:hover{ color:var(--ivory); }
.site-foot .credit{ max-width:46ch; line-height:1.55; }

/* ==========================================================================
   Reservation modal
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:1.25rem; visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s;
}
.modal.is-open{ visibility:visible; opacity:1; }
.modal-scrim{
  position:absolute; inset:0; background:rgba(16,26,21,.68);
  backdrop-filter:blur(5px); border:0; width:100%; cursor:pointer;
}
.modal-panel{
  position:relative; z-index:1; width:min(560px,100%); max-height:92svh; overflow-y:auto;
  background:var(--paper); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 40px 80px -40px rgba(16,26,21,.8);
  transform:translateY(18px) scale(.985); transition:transform .5s var(--ease-out);
}
.modal.is-open .modal-panel{ transform:none; }
.modal-close{
  position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--ivory-line); background:var(--ivory); cursor:pointer;
  display:grid; place-items:center; transition:background .3s, color .3s, transform .3s;
}
.modal-close:hover{ background:var(--red); color:#fff; transform:rotate(90deg); }
.modal-panel h3{ font-size:clamp(1.5rem,1.3rem + .8vw,2rem); margin-bottom:.6rem; padding-right:2.5rem; }
.modal-panel .m-sub{ font-size:.9rem; color:var(--pine-mute); margin:0 0 1.75rem; }
.modal-ok{ text-align:center; padding:1.5rem 0; }
.modal-ok .tick{
  width:56px; height:56px; border-radius:50%; background:var(--sage-pale); color:var(--sage-deep);
  display:grid; place-items:center; margin:0 auto 1.25rem;
}
.modal-ok h3{ padding:0; }
.modal-ok p{ margin:.5rem auto 1.75rem; max-width:38ch; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s }
.rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .hero-media img,.marquee-track,.scroll-cue i{ animation:none !important; }
  .hero-plan{ display:none !important; }
  *{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media (max-width:960px){
  .burger{
    display:grid; place-items:center; width:38px; height:38px; border:0;
    background:none; cursor:pointer; gap:5px; order:3;
  }
  .burger i{ width:20px; height:1.5px; background:currentColor; display:block; transition:transform .4s var(--ease), opacity .3s; }
  .site-head.nav-open .burger i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .site-head.nav-open .burger i:nth-child(2){ opacity:0; }
  .site-head.nav-open .burger i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .site-nav{
    position:fixed; inset:0; z-index:-1; background:var(--pine); color:var(--ivory);
    flex-direction:column; justify-content:center; gap:1.25rem;
    padding:var(--gutter); margin:0;
    clip-path:circle(0% at calc(100% - 3rem) 2rem);
    transition:clip-path .7s var(--ease-out);
  }
  .site-head.nav-open .site-nav{ clip-path:circle(150% at calc(100% - 3rem) 2rem); }
  .site-nav a{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,5vw,2rem); letter-spacing:-.03em; opacity:1; }
  .head-tools{ margin-left:auto; }
  .head-tools .btn-red{ display:none; }
  .site-head.nav-open{ color:var(--ivory); }
  .site-head.nav-open.is-stuck{ background:transparent; box-shadow:none; }
}

/* ==========================================================================
   Photo motion — Ken Burns drift + hero parallax, driven from the real photos
   .mv wraps the media so its transform never fights the hover transform
   that sits on the <img> itself.
   ========================================================================== */
.mv{ position:absolute; inset:0; will-change:transform; }
.mv img,.mv video{ width:100%; height:100%; object-fit:cover; }

/* the drift only starts once the figure has scrolled into view */
.mv.run[data-motion="dolly"]{ animation:kbDolly 26s var(--ease) infinite alternate; }
.mv.run[data-motion="pan-l"]{ animation:kbPanL  30s var(--ease) infinite alternate; }
.mv.run[data-motion="pan-r"]{ animation:kbPanR  30s var(--ease) infinite alternate; }
.mv.run[data-motion="rise"] { animation:kbRise  28s var(--ease) infinite alternate; }
.mv.run[data-motion="sink"] { animation:kbSink  28s var(--ease) infinite alternate; }

@keyframes kbDolly{ from{ transform:scale(1.02); } to{ transform:scale(1.14); } }
@keyframes kbPanL { from{ transform:scale(1.1) translate3d(2.5%,0,0); }  to{ transform:scale(1.1) translate3d(-2.5%,0,0); } }
@keyframes kbPanR { from{ transform:scale(1.1) translate3d(-2.5%,0,0); } to{ transform:scale(1.1) translate3d(2.5%,0,0); } }
@keyframes kbRise { from{ transform:scale(1.09) translate3d(0,2.5%,0); } to{ transform:scale(1.09) translate3d(0,-2.5%,0); } }
@keyframes kbSink { from{ transform:scale(1.09) translate3d(0,-2%,0); }  to{ transform:scale(1.09) translate3d(0,2.5%,0); } }

/* a generated clip already carries its own camera move — don't double it up */
.vcard.playing .mv,.gfig.playing .mv,.proj-figure .mv.has-clip{ animation-play-state:paused; }

/* hero: the media plane drifts against the page as you scroll */
.hero-media .mv{ inset:-16% 0; will-change:transform; }

/* stronger, quicker push while a card is hovered — this rides on the <img>,
   one layer below the drift, so the two compose instead of collide */
.vcard:hover .vcard-media img,
.vcard:focus-visible .vcard-media img{ transform:scale(1.07); }
.gfig:hover .mv img{ transform:scale(1.05); }

@media (prefers-reduced-motion:reduce){
  .mv.run{ animation:none !important; }
  .hero-media .mv{ inset:0; transform:none !important; }
}