/* ============================================================
   574 HOTEL — Design System
   Warm earthy neutrals + olive green · calm, cozy, local
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root{
  /* surfaces — warm cream/sand */
  --cream:      #f7f2e9;
  --cream-deep: #efe7d8;
  --sand:       #e7dcc8;
  --paper:      #fbf8f1;
  --ink:        #2c2a24;   /* warm near-black */
  --ink-soft:   #4a463d;
  --muted:      #837c6e;
  --line:       #ddd2bf;
  --line-soft:  #e8deca;

  /* olive — the single brand accent */
  --olive:      #5d6440;
  --olive-deep: #474d30;
  --olive-soft: #7c8456;
  --olive-tint: #eef0e3;

  /* warm secondary used very sparingly */
  --clay:       #b9714c;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Mulish', system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(44,42,36,.06), 0 2px 8px rgba(44,42,36,.05);
  --shadow-md: 0 4px 14px rgba(44,42,36,.08), 0 16px 40px rgba(44,42,36,.08);
  --shadow-lg: 0 10px 30px rgba(44,42,36,.10), 0 30px 70px rgba(44,42,36,.12);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --logo-dark: url(../../images/logo.png);
  --logo-light: url(../../images/logo-light.png);
}

/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* ---- Type scale ---- */
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.01em;
  font-size:clamp(2.4rem, 5.2vw, 4.6rem);
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
h2{font-size:clamp(2rem, 4.5vw, 3.4rem);font-weight:400}
h3{font-size:clamp(1.5rem, 2.6vw, 2.1rem);font-weight:500}
h4{font-size:1.3rem;font-weight:500}
p{text-wrap:pretty}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-soft);font-weight:400;line-height:1.55}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--olive);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--olive);opacity:.6;
}
.eyebrow.center::before{display:none}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,128px)}
.section.tight{padding-block:clamp(48px,6vw,84px)}
.bg-paper{background:var(--paper)}
.bg-cream-deep{background:var(--cream-deep)}
.bg-olive{background:var(--olive);color:var(--cream)}
.bg-ink{background:var(--ink);color:var(--cream)}
.center{text-align:center}
.measure{max-width:60ch}
.stack-sm>*+*{margin-top:1rem}
.stack>*+*{margin-top:1.5rem}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;
  padding:.95em 1.8em;border-radius:999px;
  transition:all .35s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--olive);color:var(--cream)}
.btn-primary:hover{background:var(--olive-deep);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{border:1px solid currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-text{
  font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.5em;padding-bottom:3px;
  border-bottom:1px solid var(--line);transition:.3s var(--ease);
}
.btn-text:hover{border-color:var(--olive);color:var(--olive);gap:.9em}
.btn-text .arrow{transition:transform .3s var(--ease)}
.btn-text:hover .arrow{transform:translateX(4px)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block:22px;
}
.site-header.scrolled{
  background:rgba(247,242,233,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:12px;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center}
.brand .logo{height:60px;width:74px;display:block;background-repeat:no-repeat;background-position:left center;background-size:contain;transition:all .4s var(--ease)}
.logo-dark{background-image:var(--logo-dark)}
.logo-light{background-image:var(--logo-light);display:none}
.site-header.scrolled .brand .logo{height:48px;width:58px}
/* over a dark hero (transparent header): use the cream logo + cream nav */
.site-header:not(.scrolled).on-hero .logo-dark{display:none}
.site-header:not(.scrolled).on-hero .logo-light{display:block}
.site-header:not(.scrolled).on-hero .nav-links a{color:var(--cream)}
.site-header:not(.scrolled).on-hero .nav-toggle span{background:var(--cream)}
/* mobile drawer open over cream: force the dark logo + dark toggle */
.site-header.menu-open .logo-dark{display:block}
.site-header.menu-open .logo-light{display:none}
.site-header.menu-open .nav-toggle span{background:var(--ink)}

.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);
  position:relative;padding-block:4px;transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--olive)}

.nav-cta{display:flex;align-items:center;gap:18px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;z-index:80}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s var(--ease)}

/* mobile drawer */
@media(max-width:920px){
  .nav-links{
    position:fixed;inset:0;flex-direction:column;justify-content:center;
    background:var(--cream);gap:6px;transform:translateX(100%);
    transition:transform .45s var(--ease);z-index:70;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--ink)}
  .nav-links a::after{display:none}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header:not(.scrolled).on-hero .nav-links a{color:var(--ink)}
  .nav-cta .btn{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media image-slot,.hero-media .ph,.hero-media .imgfill{position:absolute;inset:0;width:100%;height:100%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,26,22,.46) 0%,rgba(28,26,22,.16) 30%,rgba(28,26,22,.40) 58%,rgba(28,26,22,.80) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,6vw,72px)}
.hero-eyebrow{color:var(--cream);opacity:.9}
.hero-eyebrow::before{background:var(--cream)}
.hero h1{color:var(--cream);font-weight:400;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .lede{color:rgba(247,242,233,.92);max-width:36ch;margin-top:18px}

/* ---- Booking bar ---- */
.booking{
  position:relative;z-index:3;background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:10px;margin-top:36px;
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;align-items:stretch;
  max-width:920px;
}
.booking-field{display:flex;flex-direction:column;gap:3px;padding:14px 20px;border-radius:var(--r);transition:background .25s;cursor:pointer}
.booking-field:hover{background:var(--cream)}
.booking-field+.booking-field{border-left:1px solid var(--line)}
.booking-field label{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.booking-field .val{font-family:var(--serif);font-size:1.45rem;color:var(--ink);font-weight:500;line-height:1}
.booking-field .val small{font-family:var(--sans);font-size:.78rem;color:var(--muted);font-weight:500}
.booking-search{display:flex;align-items:center;justify-content:center;background:var(--olive);color:var(--cream);border-radius:var(--r);padding-inline:28px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;transition:background .3s}
.booking-search:hover{background:var(--olive-deep)}
@media(max-width:760px){
  .booking{grid-template-columns:1fr 1fr;gap:2px}
  .booking-field:nth-child(3){grid-column:1/-1}
  .booking-field+.booking-field{border-left:none}
  .booking-field:nth-child(2){border-left:1px solid var(--line)}
  .booking-search{grid-column:1/-1;padding-block:16px}
}

/* ============================================================
   BEDS24 BOOKING WIDGET — themed to match the site
   ============================================================ */
.book-strip-wrap{
  position:relative;z-index:3;margin-top:36px;max-width:920px;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:18px 20px;min-height:78px;
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
}
.book-strip{flex:1;min-width:0}
.book-fallback{flex:0 0 auto;display:none}
/* Generic theming of whatever inputs/selects/buttons the widget injects */
.book-strip input,
.book-strip select{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;
}
.book-strip input:focus,
.book-strip select:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px var(--olive-tint)}
.book-strip label{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.book-strip button,
.book-strip input[type=submit],
.book-strip input[type=button],
.book-strip .button,
.book-strip a.bookWidgetSubmit{
  background:var(--olive)!important;color:var(--cream)!important;border:none!important;
  border-radius:999px!important;font-family:var(--sans)!important;font-weight:600!important;
  letter-spacing:.06em;text-transform:uppercase;font-size:.82rem!important;
  padding:12px 24px!important;cursor:pointer;transition:background .3s var(--ease);
}
.book-strip button:hover,
.book-strip input[type=submit]:hover,
.book-strip .button:hover,
.book-strip a.bookWidgetSubmit:hover{background:var(--olive-deep)!important}
/* jQuery UI datepicker popup, themed */
.ui-datepicker{font-family:var(--sans);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;background:var(--paper)}
.ui-datepicker .ui-datepicker-header{background:var(--olive);color:var(--cream);border:none;border-radius:var(--r-sm)}
.ui-datepicker .ui-datepicker-title{font-weight:600}
.ui-datepicker th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.ui-datepicker td a,.ui-datepicker td span{text-align:center;border-radius:var(--r-sm);color:var(--ink);border:none}
.ui-datepicker td a.ui-state-hover{background:var(--olive-tint);color:var(--olive-deep)}
.ui-datepicker td a.ui-state-active,.ui-datepicker td.ui-datepicker-current-day a{background:var(--olive)!important;color:var(--cream)!important}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{cursor:pointer}
.ui-datepicker .ui-icon{filter:invert(1) brightness(2)}
@media(max-width:600px){
  .book-strip-wrap{flex-direction:column;align-items:stretch}
  .book-fallback{width:100%}
}

/* ============================================================
   IMAGE PLACEHOLDERS
   ============================================================ */
.ph{
  position:relative;overflow:hidden;background:
    repeating-linear-gradient(135deg,#e9e0cf 0 14px,#e3d9c5 14px 28px);
}
.ph::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Mulish',monospace;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#a99c80;text-align:center;padding:1em;
}
image-slot{--is-bg:transparent;border-radius:inherit}
/* real photo fills — actual <img> injected per page at build for reliable rendering */
.imgfill{position:relative;overflow:hidden;background-color:var(--sand)}
.imgfill>.ofill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.imgfill.pos-top>.ofill{object-position:center top}
.imgfill.pos-bottom>.ofill{object-position:center bottom}
/* full-bleed hero placeholders: tuck the label into the bottom corner */
.hero-media .ph::after{align-items:flex-end;justify-content:flex-end;padding:22px 26px;color:rgba(247,242,233,.72)}
.hero-media .ph{background:repeating-linear-gradient(135deg,#9a9079 0 16px,#8f856e 16px 32px)}

/* ============================================================
   GENERIC SECTIONS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,84px);align-items:center}
.split.wide-img{grid-template-columns:1.15fr .85fr}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

.section-head{max-width:62ch}
.section-head h2{margin-top:18px}
.section-head .lede{margin-top:16px}

/* feature image figure */
.figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.figure image-slot,.figure .ph,.figure .imgfill{width:100%;height:100%;display:block}
.figure.tall{aspect-ratio:4/5}
.figure.wide{aspect-ratio:3/2}
.figure.square{aspect-ratio:1/1}

/* stat / amenity strip */
.amenities{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.amenity{background:var(--paper);padding:26px 22px;display:flex;flex-direction:column;gap:6px}
.amenity .ico{font-family:var(--serif);font-size:1.6rem;color:var(--olive)}
.amenity h4{font-size:1.05rem;font-weight:600;font-family:var(--sans)}
.amenity p{font-size:.86rem;color:var(--muted)}

/* ---- Room cards ---- */
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(20px,3vw,36px)}
.room-card{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column}
.room-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.room-card .media{position:relative;aspect-ratio:4/3;overflow:hidden}
.room-card .media image-slot,.room-card .media .ph,.room-card .media .imgfill{width:100%;height:100%;transition:transform .6s var(--ease)}
.room-card:hover .media .ph,.room-card:hover .media image-slot,.room-card:hover .media .imgfill{transform:scale(1.04)}
.room-card .price-tag{position:absolute;top:14px;right:14px;background:rgba(251,248,241,.95);backdrop-filter:blur(4px);padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm)}
.room-card .price-tag small{font-weight:500;color:var(--muted)}
.room-card .body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:14px;flex:1}
.room-card h3{font-size:1.6rem}
.room-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);background:var(--cream-deep);padding:6px 12px;border-radius:999px}
.room-card .body .foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}

/* ---- Reviews ---- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.review{background:var(--paper);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}
.stars{display:flex;gap:3px;color:var(--olive);font-size:.95rem;letter-spacing:2px}
.review blockquote{font-family:var(--serif);font-size:1.35rem;line-height:1.35;color:var(--ink);font-weight:400}
.review .by{display:flex;align-items:center;gap:12px;margin-top:auto}
.review .av{width:40px;height:40px;border-radius:50%;background:var(--olive-tint);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--olive);font-size:.9rem}
.review .by .who{font-size:.86rem}
.review .by .who strong{display:block;font-weight:700}
.review .by .who span{color:var(--muted);font-size:.78rem}

/* ---- Gallery masonry ---- */
.gallery-grid{columns:3;column-gap:16px}
.gallery-grid .g-item{break-inside:avoid;margin-bottom:16px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.gallery-grid image-slot,.gallery-grid .ph,.gallery-grid .imgfill{width:100%;display:block}
@media(max-width:860px){.gallery-grid{columns:2}}
@media(max-width:520px){.gallery-grid{columns:1}}

/* ---- Blog ---- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(24px,3vw,40px)}
.post-card{display:flex;flex-direction:column;gap:16px}
.post-card .media{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.post-card .media image-slot,.post-card .media .ph,.post-card .media .imgfill{width:100%;height:100%;transition:transform .6s var(--ease)}
.post-card:hover .media .ph,.post-card:hover .media image-slot,.post-card:hover .media .imgfill{transform:scale(1.04)}
.post-card .cat{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.post-card h3{font-size:1.5rem}
.post-card .meta{font-size:.8rem;color:var(--muted)}

/* ---- Page hero (interior pages) ---- */
.page-hero{position:relative;padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(48px,6vw,80px);overflow:hidden}
.page-hero.media-bg{min-height:54vh;display:flex;align-items:flex-end;color:var(--cream)}
.page-hero.media-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,22,.25),rgba(28,26,22,.62));z-index:1}
.page-hero.media-bg .hero-media{position:absolute;inset:0;z-index:0}
.page-hero.media-bg .hero-media .imgfill{position:absolute;inset:0;width:100%;height:100%}
.page-hero.media-bg .wrap{position:relative;z-index:2}
.page-hero.media-bg h1,.page-hero.media-bg .eyebrow{color:var(--cream)}
.page-hero.media-bg .eyebrow::before{background:var(--cream)}
.page-hero h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:400;margin-top:14px}
.breadcrumb{font-size:.78rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.breadcrumb .sep{opacity:.5}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#cfc8b9;padding-top:clamp(64px,8vw,96px)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr}}
.site-footer .brand .logo{height:84px;width:104px;background-position:center}
.site-footer .brand .logo-dark{display:none}
.site-footer .brand .logo-light{display:block}
.footer-col h5{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--olive-soft);margin-bottom:18px}
.footer-col a,.footer-col p{font-size:.92rem;color:#cfc8b9;line-height:1.9}
.footer-col a:hover{color:var(--cream)}
.footer-intro p{font-size:.95rem;line-height:1.7;margin-top:18px;max-width:32ch;color:#b3ac9d}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-block:28px;font-size:.8rem;color:#8f8979}
.social{display:flex;gap:14px}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.social a:hover{background:var(--olive);border-color:var(--olive);color:var(--cream)}
.social svg{width:16px;height:16px}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---- Misc ---- */
.divider-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.25;font-weight:400}
.tag-row{display:flex;flex-wrap:wrap;gap:10px}
.info-list{display:flex;flex-direction:column;gap:2px}
.info-list li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.info-list li span:first-child{color:var(--muted);font-size:.9rem}
.info-list li span:last-child{font-weight:600;font-size:.95rem}

/* ---- Lightbox ---- */
#lightbox{position:fixed;inset:0;z-index:200;background:rgba(28,26,22,.92);display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:40px}
#lightbox.open{display:flex}
#lightbox .lb-frame{width:min(680px,90vw);aspect-ratio:2/3;max-height:86vh;border-radius:var(--r);background:repeating-linear-gradient(135deg,#3a3730 0 16px,#332f29 16px 32px);background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;box-shadow:var(--shadow-lg)}
#lightbox .lb-frame.has-img .lb-label{background:rgba(28,26,22,.6);padding:6px 14px;border-radius:999px;margin-bottom:16px;color:var(--cream)}
#lightbox .lb-label{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#a99c80}
#lightbox .lb-close{position:absolute;top:24px;right:30px;color:var(--cream);font-size:2rem;line-height:1}

/* ---- Contact form ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px var(--olive-tint)}
.field textarea{resize:vertical;min-height:130px}

/* ---- Map placeholder ---- */
.map-ph{width:100%;height:100%;min-height:340px;border-radius:var(--r-lg);background:
  linear-gradient(0deg,rgba(93,100,64,.06),rgba(93,100,64,.06)),
  repeating-linear-gradient(0deg,#e7dcc8 0 1px,transparent 1px 44px),
  repeating-linear-gradient(90deg,#e7dcc8 0 1px,transparent 1px 44px),var(--paper);
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.map-ph .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:6px}
.map-ph .pin .dot{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--olive);transform:rotate(-45deg);box-shadow:var(--shadow-sm)}
.map-ph .pin .lbl{background:var(--ink);color:var(--cream);font-size:.7rem;font-weight:600;letter-spacing:.08em;padding:5px 10px;border-radius:999px;white-space:nowrap}

/* ---- About timeline / values ---- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
.value .n{font-family:var(--serif);font-size:2.4rem;color:var(--olive);line-height:1}
.value h4{margin:12px 0 8px;font-family:var(--sans);font-weight:700;font-size:1.05rem}
.value p{color:var(--muted);font-size:.92rem}

/* ---- Detail page specifics ---- */
.gallery-hero{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(320px,52vh,560px)}
.gallery-hero>*{border-radius:var(--r);overflow:hidden}
.gallery-hero>* .imgfill{width:100%;height:100%}
.gallery-hero>*:first-child{grid-row:1/3}
@media(max-width:700px){.gallery-hero{grid-template-columns:1fr 1fr;height:auto}.gallery-hero>*{aspect-ratio:1/1}.gallery-hero>*:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:3/2}}
.spec-card{background:var(--paper);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm);position:sticky;top:96px}
.price-big{font-family:var(--serif);font-size:2.6rem;color:var(--ink);line-height:1}
.price-big small{font-family:var(--sans);font-size:.9rem;color:var(--muted);font-weight:500}
.amenity-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.amenity-list li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft)}
.amenity-list li::before{content:"✦";color:var(--olive);font-size:.8rem}