:root{
    --iron-950:#0f0f13;
    --iron-900:#17171d;
    --iron-800:#232330;
    --iron-700:#34343f;
    --iron-600:#4a4a56;
    --gold-500:#c39a3e;
    --gold-400:#d9b968;
    --gold-300:#e8d29a;
    --oak-700:#6e4a2e;
    --oak-500:#8a613f;
    --ivory-50:#f8f4ec;
    --ivory-100:#efe8d8;
    --ink:#1a1a1e;
    --line: rgba(201,154,62,0.35);
    --shadow: 0 20px 60px rgba(0,0,0,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    margin:0;
    background:var(--ivory-50);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    margin:0;
    color:var(--iron-950);
    letter-spacing:0.01em;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .label{
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold-500);
    font-weight:500;
  }
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  section{position:relative;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 34px;
    border:1px solid var(--gold-500);
    color:var(--ivory-50);
    background:transparent;
    font-family:'Jost',sans-serif;
    font-size:0.78rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    cursor:pointer;
    transition:all .35s ease;
    border-radius:1px;
  }
  .btn:hover{background:var(--gold-500); color:var(--iron-950);}
  .btn-solid{background:var(--gold-500); color:var(--iron-950);}
  .btn-solid:hover{background:var(--gold-400); border-color:var(--gold-400);}
  .btn-dark{border-color:var(--iron-800); color:var(--iron-950);}
  .btn-dark:hover{background:var(--iron-950); color:var(--gold-400); border-color:var(--iron-950);}

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

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; flex-direction:column;
    transition:background .4s ease, box-shadow .4s ease;
    background:linear-gradient(to bottom, rgba(15,15,19,0.75), transparent);
  }
  header.scrolled{
    background:var(--iron-950);
    box-shadow:0 6px 24px rgba(0,0,0,0.25);
  }
  .header-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 40px;
    transition:padding .4s ease;
  }
  header.scrolled .header-top{padding:14px 40px;}
  .mobile-jumpnav{display:none;}
  @media (max-width:900px){
    .mobile-jumpnav{
      display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
      padding:0 20px 14px; margin:0; background:rgba(15,15,19,0.55);
      scrollbar-width:none;
    }
    .mobile-jumpnav::-webkit-scrollbar{display:none;}
    .mobile-jumpnav a{
      flex:0 0 auto; padding:7px 16px; font-size:0.68rem; letter-spacing:0.07em; text-transform:uppercase;
      color:var(--ivory-100); border:1px solid rgba(201,154,62,0.4); border-radius:20px; white-space:nowrap;
      opacity:0.9;
    }
    .mobile-jumpnav a.jn-book{background:var(--gold-500); color:var(--iron-950); border-color:var(--gold-500); opacity:1; font-weight:500;}
  }
  .brand{
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem;
    color:var(--ivory-50);
    letter-spacing:0.06em;
  }
  .brand em{color:var(--gold-400); font-style:normal;}
  .brand-plaque{
    display:inline-flex; align-items:center;
    background:var(--ivory-50);
    padding:8px 20px;
    box-shadow:0 6px 22px rgba(0,0,0,0.28);
    border-radius:1px;
    transition:padding .35s ease;
  }
  .brand-plaque img{height:48px; width:auto; display:block; transition:height .35s ease;}
  header.scrolled .brand-plaque{padding:5px 16px;}
  header.scrolled .brand-plaque img{height:34px;}
  .footer-logo{
    display:inline-flex; align-items:center;
    background:var(--ivory-50);
    padding:10px 22px;
    margin-bottom:18px;
  }
  .footer-logo img{height:52px; width:auto; display:block;}
  nav ul{list-style:none; display:flex; gap:34px; margin:0; padding:0;}
  nav a{
    font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ivory-100); opacity:0.85; transition:opacity .2s, color .2s;
  }
  nav a:hover{opacity:1; color:var(--gold-400);}
  .nav-toggle{display:none; background:none; border:none; color:var(--ivory-50); font-size:1.6rem; cursor:pointer;}
  @media (max-width:900px){
    #siteNav{position:fixed; top:0; right:-100%; width:78%; max-width:340px; height:100vh;
      background:var(--iron-950); flex-direction:column; padding:100px 40px; transition:right .4s ease;}
    #siteNav.open{right:0;}
    #siteNav ul{flex-direction:column; gap:26px;}
    .nav-toggle{display:block;}

    /* Keep in-page anchors below the fixed header + mobile jump navigation. */
    html{scroll-padding-top:140px;}
    section[id], footer[id]{scroll-margin-top:140px;}
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:100vh;
    display:flex; align-items:flex-end;
    background:
      linear-gradient(180deg, rgba(15,15,19,0.35) 0%, rgba(15,15,19,0.55) 55%, rgba(15,15,19,0.92) 100%),
      repeating-linear-gradient(115deg, #26262f 0 3px, #1c1c23 3px 6px);
    padding:0 0 90px 0;
    color:var(--ivory-50);
    overflow:hidden;
  }
  .hero-inner{padding:0 40px; max-width:1180px; margin:0 auto; width:100%;}
  .hero .label{color:var(--gold-400); margin-bottom:18px; display:block;}
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 5.2rem);
    color:var(--ivory-50);
    line-height:1.05;
    max-width:14ch;
  }
  .hero h1 em{color:var(--gold-400); font-style:italic;}
  .hero p.sub{
    margin-top:22px; font-size:1.05rem; letter-spacing:0.03em; color:var(--ivory-100);
    max-width:46ch; font-weight:300;
  }
  .hero-ctas{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .hero-crest{
    position:absolute; top:120px; right:60px; width:150px; opacity:0.5; z-index:0;
    filter:brightness(0) invert(1) opacity(0.14);
  }
  @media (max-width:760px){.hero-crest{display:none;}}
  @media (max-width:560px){
    .hero{min-height:92vh; padding-bottom:56px;}
    .hero-inner{padding:0 24px;}
    .hero h1{font-size:2.5rem; max-width:100%;}
    .hero p.sub{font-size:0.95rem;}
    .hero-ctas{gap:12px; margin-top:28px;}
    .hero-ctas .btn{padding:13px 26px; font-size:0.74rem;}
  }

  /* ---------- scroll motif divider (wrought iron) ---------- */
  .scrollwork{display:flex; align-items:center; justify-content:center; padding:6px 0;}
  .scrollwork svg{width:220px; height:34px;}

  /* ---------- section shells ---------- */
  .section{padding:110px 0;}
  .section-dark{background:var(--iron-950); color:var(--ivory-100);}
  .section-dark h2, .section-dark h3{color:var(--ivory-50);}
  .section-head{text-align:center; max-width:640px; margin:0 auto 64px;}
  .section-head .label{display:block; margin-bottom:14px;}
  .section-head h2{font-size:clamp(2rem,4vw,3rem);}
  .section-dark .section-head p{color:var(--ivory-100); opacity:0.75;}
  .section-head p{margin-top:16px; opacity:0.7; font-size:1rem;}
  @media (max-width:760px){
    .section{padding:64px 0;}
    .section-head{margin-bottom:40px;}
  }

  /* ---------- why you'll love it ---------- */
  .love-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);}
  .love-card{background:var(--ivory-50); padding:42px 30px; text-align:center;}
  .love-card svg{width:34px; height:34px; margin-bottom:20px; stroke:var(--gold-500);}
  .love-card h4{font-size:1.2rem; margin-bottom:10px;}
  .love-card p{font-size:0.88rem; opacity:0.65; margin:0;}
  @media (max-width:900px){.love-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){
    .love-grid{grid-template-columns:repeat(2,1fr); gap:1px;}
    .love-card{padding:22px 14px;}
    .love-card svg{width:26px; height:26px; margin-bottom:12px;}
    .love-card h4{font-size:1rem; margin-bottom:6px;}
    .love-card p{font-size:0.8rem;}
  }

  /* ---------- gallery ---------- */
  .gallery-tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:44px;}
  .gtab{
    padding:9px 20px; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    border:1px solid var(--iron-700); color:var(--iron-800); cursor:pointer; background:transparent; transition:.25s;
  }
  .gtab.active, .gtab:hover{background:var(--iron-950); color:var(--gold-400); border-color:var(--iron-950);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }
  .gitem{
    aspect-ratio:4/3;
    background:var(--iron-900);
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .gitem img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:transform .35s ease;
  }
  .gitem:hover img{
    transform:scale(1.025);
  }
  .gitem .ph-label{
    color:var(--gold-300);
    font-family:'Cormorant Garamond',serif;
    font-size:1rem;
    text-align:center;
    padding:0 14px;
    opacity:0.85;
  }
  @media (max-width:900px){
    .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:560px){
    .gallery-grid{grid-template-columns:1fr; gap:12px;}
    .gitem{aspect-ratio:4/3;}
  }

  /* ---------- highlights icon grid ---------- */
  .highlights-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .hi{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
    padding:26px 14px; border:1px solid var(--line);
  }
  .hi svg{width:30px; height:30px; stroke:var(--gold-400);}
  .hi span{font-size:0.85rem; letter-spacing:0.03em; color:var(--ivory-100);}
  @media (max-width:900px){.highlights-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){
    .highlights-grid{gap:12px;}
    .hi{padding:16px 10px; gap:8px;}
    .hi svg{width:24px; height:24px;}
    .hi span{font-size:0.78rem;}
  }

  /* ---------- floor plan / video split ---------- */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
  .split .media-block{
    aspect-ratio:4/3; background:linear-gradient(160deg,var(--iron-700),var(--iron-950));
    display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
  }
  .split .media-block span{color:var(--gold-300); font-family:'Cormorant Garamond',serif; opacity:0.8;}
  .split ul{list-style:none; padding:0; margin:26px 0 0;}
  .split ul li{
    padding:12px 0; border-bottom:1px solid var(--line); font-size:0.95rem; display:flex; gap:14px; align-items:baseline;
  }
  .split ul li:before{content:"—"; color:var(--gold-500);}
  @media (max-width:860px){.split{grid-template-columns:1fr;}}

  /* ---------- amenities ---------- */
  .amenity-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);}
  .amenity-col{background:var(--ivory-50); padding:36px 26px;}
  .amenity-col h4{font-size:1.15rem; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--gold-500); display:inline-block;}
  .amenity-col ul{list-style:none; padding:0; margin:0; font-size:0.86rem;}
  .amenity-col li{padding:6px 0; opacity:0.75;}
  @media (max-width:1000px){.amenity-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.amenity-grid{grid-template-columns:1fr;}}

  /* ---------- explore / map ---------- */
  .explore-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start;}
  .explore-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 30px;}
  .explore-list div{padding:14px 0; border-bottom:1px solid var(--line); font-size:0.92rem;}
  .map-block{
    aspect-ratio:1/1; background:linear-gradient(150deg,var(--iron-800),var(--iron-950));
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  }
  .map-block span{color:var(--gold-300); font-family:'Cormorant Garamond',serif;}
  @media (max-width:860px){.explore-grid{grid-template-columns:1fr;}}

  /* ---------- explore granville cards ---------- */
  .explore-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .explore-card{background:var(--iron-900); border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden;}
  .explore-card-photo{aspect-ratio:4/3; background:linear-gradient(145deg,var(--iron-800),var(--iron-600)); display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .explore-card-photo img{width:100%; height:100%; object-fit:cover;}
  .explore-card-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px;}
  .explore-card-cat{font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-500);}
  .explore-card-body h4{font-size:1.15rem; color:var(--ivory-50); margin:0;}
  .explore-card-body p{font-size:0.85rem; opacity:0.68; margin:0; line-height:1.55;}
  .explore-card-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
  .explore-card-actions a{
    font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-400);
    border-bottom:1px solid var(--gold-500); padding-bottom:2px;
  }
  .explore-card-actions a:hover{color:var(--gold-300);}
  @media (max-width:900px){.explore-cards{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.explore-cards{grid-template-columns:1fr;}}

  .distance-table{width:100%; border-collapse:collapse; max-width:640px; margin:0 auto;}
  .distance-table td{padding:16px 10px; border-bottom:1px solid var(--line); font-size:0.95rem;}
  .distance-table td:last-child{text-align:right; color:var(--gold-500); font-family:'Cormorant Garamond',serif; font-size:1.15rem;}

  /* ---------- perfect for ---------- */
  .chip-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
  .chip{
    padding:12px 26px; border:1px solid var(--gold-500); color:var(--ivory-50);
    font-size:0.82rem; letter-spacing:0.06em;
  }
  @media (max-width:560px){
    .chip-row{gap:8px;}
    .chip{padding:9px 16px; font-size:0.74rem;}
  }

  /* ---------- reviews ---------- */
  .review-track{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .review-card{background:var(--ivory-50); border:1px solid var(--line); padding:34px; position:relative;}
  .review-card .quote-mark{font-family:'Cormorant Garamond',serif; font-size:3rem; color:var(--gold-500); line-height:1; opacity:0.5;}
  .review-card p{font-style:italic; font-size:0.98rem; margin:14px 0 18px;}
  .review-card .who{font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; opacity:0.6;}
  @media (max-width:900px){.review-track{grid-template-columns:1fr;}}

  /* ---------- FAQ ---------- */
  .faq{max-width:760px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:22px 4px;
    display:flex; justify-content:space-between; align-items:center; cursor:pointer;
    font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--iron-950);
  }
  .faq-q .plus{color:var(--gold-500); font-size:1.4rem; transition:transform .3s ease;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
  .faq-a p{padding:0 4px 22px; margin:0; opacity:0.72; font-size:0.95rem;}

  /* ---------- house rules ---------- */
  .rules-list{max-width:560px; margin:0 auto; list-style:none; padding:0;}
  .rules-list li{
    display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:0.95rem; align-items:center;
  }
  .rules-list svg{width:18px; height:18px; stroke:var(--gold-400); flex-shrink:0;}

  /* ---------- hosts ---------- */
  .host-wrap{display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:center;}
  .host-photo{aspect-ratio:1/1; background:linear-gradient(150deg,var(--iron-700),var(--iron-950)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
  .host-photo span{color:var(--gold-300); font-family:'Cormorant Garamond',serif;}
  @media (max-width:760px){.host-wrap{grid-template-columns:1fr; text-align:center;} .host-photo{max-width:220px; margin:0 auto;}}

  /* ---------- concierge add-ons ---------- */
  .addon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .addon-card{border:1px solid var(--line); padding:36px 30px; text-align:center;}
  .addon-card svg{width:34px; height:34px; stroke:var(--gold-400); margin-bottom:18px;}
  .addon-card h4{color:var(--ivory-50); margin-bottom:10px;}
  .addon-card p{font-size:0.88rem; opacity:0.68; margin:0 0 14px;}
  .addon-card .price{color:var(--gold-400); font-family:'Cormorant Garamond',serif; font-size:1.1rem;}
  @media (max-width:860px){.addon-grid{grid-template-columns:1fr;}}

  /* ---------- direct booking ---------- */
  .db-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
  .db-grid div h3{font-size:2.2rem; color:var(--gold-500);}
  .db-grid div p{font-size:0.85rem; opacity:0.7; margin-top:6px;}
  @media (max-width:800px){.db-grid{grid-template-columns:repeat(2,1fr);}}

  /* ---------- contact / footer ---------- */
  footer{background:var(--iron-950); color:var(--ivory-100); padding:80px 0 30px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; margin-bottom:60px;}
  .foot-grid h4{color:var(--gold-400); font-size:0.95rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:18px; font-family:'Jost',sans-serif; font-weight:500;}
  .foot-grid p, .foot-grid a{display:block; font-size:0.9rem; opacity:0.75; margin-bottom:10px;}
  .foot-bottom{border-top:1px solid var(--iron-700); padding-top:24px; text-align:center; font-size:0.78rem; opacity:0.5;}
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr;}}

  /* ---------- booking widget ---------- */
  .book-widget{
    max-width:940px; margin:0 auto; background:var(--iron-900);
    border:1px solid var(--line); padding:44px; text-align:left;
  }
  .book-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:56px;}
  @media (max-width:860px){.book-grid{grid-template-columns:1fr; gap:40px;}}

  .cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .cal-nav button{
    width:34px; height:34px; border:1px solid var(--line); background:none; color:var(--gold-400);
    font-size:1.2rem; cursor:pointer; transition:.2s;
  }
  .cal-nav button:hover{background:var(--gold-500); color:var(--iron-950);}
  .cal-title{font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--ivory-50);}
  .cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.7rem; letter-spacing:0.1em; opacity:0.55; margin-bottom:8px;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
  .cal-grid button{
    aspect-ratio:1; border:none; background:none; color:var(--ivory-100); font-size:0.85rem;
    cursor:pointer; border-radius:2px; position:relative; transition:.15s;
  }
  .cal-grid button:hover:not(:disabled){background:var(--iron-700);}
  .cal-grid button:disabled{opacity:0.25; cursor:not-allowed; text-decoration:line-through;}
  .cal-grid .cal-empty{visibility:hidden;}
  .cal-grid .is-today{box-shadow:inset 0 0 0 1px var(--gold-500);}
  .cal-grid .is-start, .cal-grid .is-end{background:var(--gold-500); color:var(--iron-950); font-weight:500;}
  .cal-grid .is-in-range{background:rgba(195,154,62,0.22);}
  .cal-legend{display:flex; gap:20px; margin-top:18px; font-size:0.75rem; opacity:0.65; flex-wrap:wrap;}
  .cal-legend span{display:flex; align-items:center; gap:6px;}
  .sw{width:11px; height:11px; display:inline-block; border-radius:2px;}
  .sw-avail{background:var(--iron-700);}
  .sw-selected{background:var(--gold-500);}
  .sw-blocked{background:var(--iron-700); opacity:0.4; text-decoration:line-through;}

  .stay-summary{
    font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--gold-300);
    padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); min-height:1.5em;
  }
  .guest-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; font-size:0.9rem;}
  .stepper{display:flex; align-items:center; gap:16px;}
  .stepper button{
    width:30px; height:30px; border:1px solid var(--line); background:none; color:var(--gold-400);
    cursor:pointer; font-size:1rem; transition:.2s;
  }
  .stepper button:hover{background:var(--gold-500); color:var(--iron-950);}
  .stepper span{min-width:1.2em; text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.15rem;}

  #bookForm{display:flex; flex-direction:column; gap:16px;}
  #bookForm label{font-size:0.78rem; letter-spacing:0.05em; opacity:0.8; display:flex; flex-direction:column; gap:6px;}
  #bookForm .opt{opacity:0.5; font-style:italic; letter-spacing:0;}
  #bookForm input[type="text"], #bookForm input[type="email"], #bookForm input[type="tel"], #bookForm textarea{
    background:var(--iron-800); border:1px solid var(--iron-600); color:var(--ivory-50);
    padding:11px 12px; font-family:'Jost',sans-serif; font-size:0.92rem; font-weight:300; resize:vertical;
  }
  #bookForm input:focus, #bookForm textarea:focus{outline:none; border-color:var(--gold-500);}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
  .book-submit{margin-top:6px; width:100%; justify-content:center;}
  .book-submit:disabled{opacity:0.4; cursor:not-allowed;}
  .book-submit:disabled:hover{background:var(--gold-500); color:var(--iron-950);}
  .book-status{font-size:0.85rem; margin:10px 0 0; min-height:1.2em;}
  .book-status.ok{color:#8fd19e;}
  .book-status.err{color:#e07a7a;}

  /* ---------- flash messages ---------- */
  .flash-stack{position:fixed; top:0; left:0; right:0; z-index:200; display:flex; flex-direction:column;}
  .flash{padding:14px 20px; text-align:center; font-size:0.85rem; letter-spacing:0.03em;}
  .flash-success{background:var(--gold-500); color:var(--iron-950);}
  .flash-error{background:#8a2b2b; color:var(--ivory-50);}

  /* ---------- guest book page ---------- */
  .guestbook-layout{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start;}
  .guestbook-form-panel{background:var(--iron-950); color:var(--ivory-100); padding:36px; position:sticky; top:110px;}
  .guestbook-form-panel h3{color:var(--ivory-50); font-size:1.3rem; margin-bottom:18px;}
  .gb-form{display:flex; flex-direction:column; gap:16px;}
  .gb-form label{font-size:0.78rem; letter-spacing:0.03em; opacity:0.85; display:flex; flex-direction:column; gap:6px;}
  .gb-form .opt{opacity:0.5; font-style:italic; letter-spacing:0;}
  .gb-form input, .gb-form textarea{
    background:var(--iron-800); border:1px solid var(--iron-600); color:var(--ivory-50);
    padding:11px 12px; font-family:'Jost',sans-serif; font-size:0.92rem; font-weight:300; resize:vertical;
  }
  .gb-form input:focus, .gb-form textarea:focus{outline:none; border-color:var(--gold-500);}
  .guestbook-entries{display:flex; flex-direction:column; gap:20px;}
  .gb-entry{border:1px solid var(--line); padding:24px 26px; background:var(--ivory-50);}
  .gb-entry-head{display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
  .gb-entry-name{font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--iron-950);}
  .gb-entry-loc{font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-500);}
  .gb-entry p{margin:0 0 10px; font-size:0.92rem; line-height:1.6; opacity:0.85;}
  .gb-entry-date{font-size:0.72rem; opacity:0.5; letter-spacing:0.04em;}
  @media (max-width:860px){
    .guestbook-layout{grid-template-columns:1fr;}
    .guestbook-form-panel{position:static;}
  }

  /* ---------- guest book homepage teaser ---------- */
  .gb-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:36px;}
  .gb-teaser-card{border:1px solid var(--line); padding:24px 26px;}
  .gb-teaser-card .gb-entry-name{color:var(--iron-950);}
  .gb-teaser-card p{margin:8px 0 10px; font-size:0.9rem; line-height:1.6; opacity:0.75;}
  @media (max-width:860px){.gb-teaser-grid{grid-template-columns:1fr;}}

  /* ---------- sticky mobile book bar ---------- */
  .sticky-book{
    position:fixed; bottom:0; left:0; right:0; z-index:90;
    background:var(--iron-950); padding:14px 20px; display:none;
    align-items:center; justify-content:space-between; box-shadow:0 -6px 20px rgba(0,0,0,0.3);
  }
  .sticky-book span{color:var(--ivory-50); font-family:'Cormorant Garamond',serif; font-size:1.05rem;}
  @media (max-width:760px){.sticky-book{display:flex;}}
/* ======================================================================
   MOBILE LAYOUT HOTFIX v2
   Keeps the fixed header compact, prevents the desktop Book Now button
   from crowding the mobile header, and makes the hero/sticky CTA usable.
   ====================================================================== */
@media (max-width:900px){
  header{
    background:rgba(15,15,19,0.96);
  }

  .header-top{
    min-height:64px;
    padding:8px 16px;
    gap:12px;
  }
  header.scrolled .header-top{
    padding:8px 16px;
  }

  .brand-plaque{
    flex:0 0 auto;
    width:136px;
    height:50px;
    padding:4px 10px;
    justify-content:center;
    overflow:hidden;
  }
  .brand-plaque img{
    width:100%;
    height:100%;
    max-width:116px;
    object-fit:contain;
  }
  header.scrolled .brand-plaque{
    width:124px;
    height:46px;
    padding:4px 10px;
  }
  header.scrolled .brand-plaque img{
    width:100%;
    height:100%;
    max-width:106px;
  }

  /* main.js shows this after scrolling on desktop. Never show it on mobile. */
  #headerBook{
    display:none !important;
  }

  #navOpen{
    flex:0 0 42px;
    width:42px;
    height:42px;
    padding:0;
    margin-left:auto;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:1.9rem;
  }

  .mobile-jumpnav{
    gap:7px;
    padding:6px 12px 9px;
    background:var(--iron-950);
    border-top:1px solid rgba(201,154,62,0.16);
  }
  .mobile-jumpnav a{
    padding:5px 12px;
    font-size:0.62rem;
    line-height:1.35;
    letter-spacing:0.08em;
    border-radius:16px;
  }

  /* Fixed mobile header + jump row is about 110px tall. */
  html{scroll-padding-top:116px;}
  section[id], footer[id]{scroll-margin-top:116px;}
}

@media (max-width:560px){
  body{
    padding-bottom:66px;
  }

  .hero{
    min-height:100svh;
    padding:126px 0 42px;
    align-items:flex-end;
  }
  .hero-inner{
    padding:0 22px;
  }
  .hero .label{
    margin-bottom:12px;
    font-size:0.64rem;
    letter-spacing:0.22em;
  }
  .hero h1{
    max-width:100%;
    font-size:clamp(2.1rem, 9.5vw, 2.4rem);
    line-height:1.02;
  }
  .hero p.sub{
    margin-top:16px;
    max-width:100%;
    font-size:0.9rem;
    line-height:1.55;
  }

  .hero-ctas{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:24px;
  }
  .hero-ctas .btn{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:10px 8px;
    justify-content:center;
    text-align:center;
    font-size:0.62rem;
    line-height:1.25;
    letter-spacing:0.09em;
  }
  .hero-ctas .btn:first-child{
    grid-column:1 / -1;
    min-height:50px;
  }

  .sticky-book{
    min-height:64px;
    padding:8px 14px;
    gap:12px;
  }
  .sticky-book span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:0.95rem;
  }
  .sticky-book .btn{
    flex:0 0 auto;
    padding:10px 16px;
    font-size:0.66rem;
    line-height:1.2;
    letter-spacing:0.12em;
    white-space:nowrap;
  }
}

/* ======================================================================
   RESPONSIVE BOOKING / CALENDAR FIX
   Keeps the availability calendar inside the viewport on narrow phones
   (including foldable cover displays) without horizontal scrolling.
   ====================================================================== */
@media (max-width:600px){
  #book .wrap{
    padding-left:12px;
    padding-right:12px;
  }

  #book .section-head{
    padding-left:8px;
    padding-right:8px;
  }

  .book-widget{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-left:auto;
    margin-right:auto;
    padding:20px 14px;
    overflow:hidden;
  }

  .book-grid,
  .cal-panel,
  .book-form-panel{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .book-grid{
    grid-template-columns:minmax(0,1fr);
    gap:30px;
  }

  .cal-nav{
    width:100%;
    min-width:0;
    gap:8px;
    margin-bottom:14px;
  }

  .cal-nav button{
    flex:0 0 32px;
    width:32px;
    height:32px;
    padding:0;
  }

  .cal-title{
    min-width:0;
    flex:1 1 auto;
    text-align:center;
    font-size:clamp(1rem,5vw,1.2rem);
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .cal-weekdays,
  .cal-grid{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:repeat(7,minmax(0,1fr));
  }

  .cal-weekdays{
    font-size:clamp(.56rem,2.6vw,.68rem);
    letter-spacing:.04em;
    margin-bottom:6px;
  }

  .cal-grid{
    gap:2px;
  }

  .cal-grid button{
    width:100%;
    max-width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
    padding:0;
    font-size:clamp(.66rem,3.2vw,.82rem);
    line-height:1;
    overflow:hidden;
  }

  .cal-legend{
    width:100%;
    max-width:100%;
    gap:8px 12px;
    margin-top:14px;
    font-size:.67rem;
    line-height:1.3;
  }

  .cal-legend span{
    min-width:0;
    white-space:nowrap;
  }

  .stay-summary{
    font-size:1.05rem;
  }

  #bookForm,
  #bookForm label,
  #bookForm input[type="text"],
  #bookForm input[type="email"],
  #bookForm input[type="tel"],
  #bookForm textarea,
  .book-submit{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}

@media (max-width:380px){
  #book .wrap{
    padding-left:8px;
    padding-right:8px;
  }

  .book-widget{
    padding:16px 9px;
  }

  .cal-nav button{
    flex-basis:30px;
    width:30px;
    height:30px;
  }

  .cal-title{
    font-size:.98rem;
  }

  .cal-grid{
    gap:1px;
  }

  .cal-grid button{
    font-size:.68rem;
  }

  .cal-legend{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px 8px;
  }

  .cal-legend span{
    white-space:normal;
  }
}

@media (max-width:320px){
  .book-widget{
    padding-left:6px;
    padding-right:6px;
  }

  .cal-weekdays{
    font-size:.54rem;
  }

  .cal-grid button{
    font-size:.62rem;
  }
}