:root{
  --navy:#183C5C;
  --navy-deep:#0E2537;
  --powder:#A7C8DF;
  --powder-deep:#5E8FB4;
  --cream:#F5F1E8;
  --cream-2:#EAE4D7;
  --ink:#253039;
  --ink-soft:#56636E;
  --white:#FFFDF8;
  /* Warm gold, used only for the Airbnb Guest favorite badge so it echoes
     the laurel treatment on the listing without fighting the powder blue. */
  --gold:#B0842C;
  --gold-soft:#C9A24B;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.75}
h1,h2,h3,h4,.hero h1,.page-banner h1{line-height:1.1}
/* A hair of tracking on headings, echoing the wide-tracked all-caps labels
   without going uppercase. Measured at .01em across every page: no heading
   changes its line count. .02em was tried and pushed "Ready to see the cove
   for yourself?" onto a second line, so it was not used. Uppercase labels
   that happen to be h4 keep their own wider tracking by specificity. */
h1,h2,h3,h4{letter-spacing:.01em}
/* Line breaking. `balance` evens out the line lengths of short headings;
   `pretty` stops body copy stranding a single word on its own last line.
   Both are ignored by browsers that don't support them, so there is no
   fallback to maintain. */
/* `balance` is for headings only. It equalises line lengths by shrinking the
   longest line, which on a paragraph pulls the whole block in — a three-line
   intro came back at 67% of its column with a dead gutter down the right.
   Body copy gets `pretty`, which keeps the full measure and only guards the
   last line. A slightly short last line is normal; a narrow column is not. */
h1,h2,h3,h4,.hero h1,.page-banner h1{text-wrap:balance}
p,li,.np-d,.t-sub,.map-note,.section-sub,.intro p,.hero .lede{text-wrap:pretty}
/* Orphaned last lines are handled in the MARKUP, not here. Chrome 148 computes
   `pretty` on all of the above and still leaves single words stranded, and
   `text-wrap:balance` fixes that only by pulling the block in — measured at 72%
   of its box on the feature cards, 59% on a photo caption, and as low as 55% in
   the nearby grid. A   binding the last two or three words costs nothing in
   width and holds at every viewport, so that is what the copy uses. Search the
   HTML for   before assuming one is a typo. */
/* figures align optically in columns */
/* Cormorant defaults to oldstyle figures, which sit below cap height — fine
   in running text, wrong in all-caps, where "ROOM 01" renders as tiny
   subscripts. Every uppercase label and every figure read as data gets
   lining numerals. */
.drive .time,.review-banner .rb-num,.bed-card h3,
.eyebrow,.mm-badge,.spec-line,.tile .t-kicker,.tile .t-more,.review-cta,
.map-fallback .mf-k,.map-ring span,.nearby-cat h4,
.nearby-place .np-t,.contact-detail .k,.pager .lbl,footer .col h4,.btn-nav,
nav .links a,.mobile-links a,footer .col a,
.split-row .sr-k,.split-row .sr-more{font-variant-numeric:lining-nums tabular-nums}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:1000;background:rgba(245,241,232,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(24,60,92,.12)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 28px}
.brand{display:flex;align-items:center;text-decoration:none}
/* With the Home item gone from the nav, the wordmark is the only route back
   to the homepage, so it has to read as a link. A slight fade on hover is the
   whole cue — anything stronger competes with the logo itself. */
.brand{transition:opacity .18s}
.brand:hover,.brand:focus-visible{opacity:.74}
.brand-logo{height:84px;width:auto}
nav .nav-right{display:flex;align-items:center;gap:26px}
nav .links{display:flex;gap:30px;align-items:center}
nav .links a{position:relative;text-decoration:none;font-family:var(--font-display);font-size:1.06rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);opacity:.72;padding:6px 0;transition:opacity .18s}
nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--powder-deep);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
nav .links a:hover,nav .links a:focus-visible{opacity:1}
nav .links a:hover::after,nav .links a:focus-visible::after{transform:scaleX(1)}
nav .links a.active{opacity:1}
nav .links a.active::after{transform:scaleX(1);background:var(--navy)}
.btn-nav{
  position:relative;overflow:hidden;z-index:0;background:transparent;border:1px solid var(--navy);
  color:var(--navy)!important;padding:9px 16px;border-radius:2px;text-decoration:none;font-weight:600;
  font-family:var(--font-display);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;transition:color .28s;
}
.btn-nav::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--navy);z-index:-1;transition:height .3s cubic-bezier(.4,0,.2,1)}
.btn-nav:hover,.btn-nav:focus-visible{color:var(--cream)!important}
.btn-nav:hover::before,.btn-nav:focus-visible::before{height:100%}
@media(max-width:1040px){nav .nav-right{gap:20px}nav .links{gap:22px}nav .links a{font-size:.96rem;letter-spacing:.09em}}
@media(max-width:880px){.brand-logo{height:62px}}
/* Narrow phones. .btn-nav was font-size:.6rem — 9.6px, too small for uppercase
   Cormorant — with 8px vertical padding giving a 35px tap target. Measured at
   320px there is 18px of horizontal slack (space-between distributes it), so
   .66rem fits; the taller padding costs no width at all. */
@media(max-width:420px){.brand-logo{height:52px}
  .btn-nav{padding:11px 12px;font-size:.66rem;letter-spacing:.07em}
  nav .nav-right{gap:12px}}

/* Mobile menu */
.menu-btn{display:none;background:none;border:1px solid rgba(24,60,92,.3);border-radius:2px;padding:9px 11px;cursor:pointer}
.menu-btn svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.8}
.mobile-links{display:none;flex-direction:column;background:var(--cream);border-bottom:1px solid rgba(24,60,92,.12);padding:8px 28px 20px}
.mobile-links a{font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(24,60,92,.08)}
.mobile-links a:last-child{border-bottom:none}
.mobile-links.open{display:flex}
@media(max-width:880px){nav .links{display:none}.menu-btn{display:block}}

/* ---------- Page hero ---------- */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:var(--white);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,37,55,.5) 0%,rgba(14,37,55,.12) 32%,rgba(14,37,55,.9) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:58px;width:100%}
.hero-logo{width:210px;margin-bottom:26px;opacity:.97}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,6vw,5rem);line-height:1.04;max-width:900px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;font-weight:300;color:var(--powder)}
.hero p.lede{margin-top:20px;max-width:780px;font-size:1.08rem;color:rgba(255,253,248,.92);line-height:1.65}
.cta-row{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
/* Once the buttons wrap onto separate lines they sit at their own content
   widths, which reads as ragged. Stack them to equal width instead. */
@media(max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row>.btn-primary,.cta-row>.btn-ghost,.cta-row>.btn-navy{text-align:center}
}
@media(max-width:600px){.hero-logo{width:150px}}

/* Interior page banner */
.page-banner{position:relative;color:var(--white);overflow:hidden;min-height:38vh;display:flex;align-items:flex-end}
.page-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,37,55,.35),rgba(14,37,55,.85))}
.page-banner .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:40px;width:100%}
.page-banner h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.08}
/* Prose caps at 780px, and lede-sized text is bumped a step to match.

   History, because the number has moved twice: 560px read well but left most of
   the 1064px row empty, so it went to 900px on the belief that this pulled the
   measure "toward something readable". Measured at 1440px, it did not -- 900px
   still yielded 107-111 characters per line, against a comfortable 45-85.

   780px alone would give about 94. Raising the type a step does the rest, since
   a wider glyph fits fewer characters in the same column: the four lede-ish
   rules below now land at roughly 83-88 characters while keeping a block that
   still reads as full width. Headings stay at 900px -- at 32-48px they were only
   ever 30 characters a line, so they were never the problem. */
.page-banner p{margin-top:12px;max-width:780px;color:rgba(255,253,248,.85);font-size:1.02rem}

.mm-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--powder);border:1px solid rgba(167,200,223,.45);border-radius:2px;padding:6px 14px;margin-bottom:22px;background:rgba(14,37,55,.35)}
.mm-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--powder)}

/* ---------- Buttons ---------- */
/* Outline buttons that fill from the bottom, like water rising */
.btn-primary,.btn-ghost,.btn-navy{
  position:relative;overflow:hidden;z-index:0;display:inline-block;text-decoration:none;
  padding:15px 30px;border-radius:2px;font-weight:600;font-size:.92rem;line-height:1.2;
  background:transparent;transition:color .28s;
}
.btn-primary::before,.btn-ghost::before,.btn-navy::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;
  transition:height .3s cubic-bezier(.4,0,.2,1);
}
/* on photography / navy backgrounds */
.btn-primary{border:1px solid var(--powder);color:var(--powder)}
.btn-primary::before{background:var(--powder)}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--navy-deep)}
.btn-primary:hover::before,.btn-primary:focus-visible::before{height:100%}
.btn-ghost{border:1px solid rgba(255,253,248,.45);color:var(--white)}
.btn-ghost::before{background:var(--white)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--navy-deep)}
.btn-ghost:hover::before,.btn-ghost:focus-visible::before{height:100%}
/* on cream backgrounds */
.btn-navy{border:1px solid var(--navy);color:var(--navy)}
.btn-navy::before{background:var(--navy)}
.btn-navy:hover,.btn-navy:focus-visible{color:var(--cream)}
.btn-navy:hover::before,.btn-navy:focus-visible::before{height:100%}


/* ---------- Sections ---------- */
section{padding:44px 0}
/* The first block in a section carries its own margin-top (.intro 8px,
   .map-holder 30px, .feats 34px), which stacked on the section padding and
   made the gap under the hero vary 44/52/74/78px page to page. Zero it so the
   section padding alone sets that distance. */
section .wrap > *:first-child{margin-top:0}
.eyebrow{font-family:var(--font-display);font-weight:500;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--powder-deep);margin-bottom:16px}
h2.section-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.8vw,3rem);color:var(--navy);line-height:1.1;max-width:900px}
.section-sub{margin-top:16px;max-width:780px;color:var(--ink-soft);font-size:1rem;line-height:1.7}

/* The type bump that goes with the 780px cap, and ONLY where the cap bites.
   The cap is reached once the column is 780px wide, which needs a viewport of
   about 836px (780 + 56px of wrap padding), so 840px is the honest breakpoint.
   Applying the bump unconditionally was measured taking mobile down to 32
   characters a line — the cap is inert at 319px, so a larger glyph there only
   shortens an already-short measure. Below 840px these keep their base sizes. */
@media(min-width:840px){
  .hero p.lede{font-size:1.15rem}
  .page-banner p{font-size:1.1rem}
  .section-sub{font-size:1.1rem}
  .intro p{font-size:1.08rem}
}
.band-cream2{background:var(--cream-2)}

/* One-line spec row — the stat strip's information, none of its weight */
.spec-line{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:26px;
  font-family:var(--font-display);font-weight:500;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.9}
/* hero variant holds one line: tighter tracking + fluid size, no wrapping */
.spec-line.on-dark{flex-wrap:nowrap;white-space:nowrap;
  font-size:clamp(.7rem,1.24vw,.88rem);letter-spacing:.12em}
.spec-line.on-dark span{padding-right:clamp(9px,1.4vw,20px);margin-right:clamp(9px,1.4vw,20px)}
.spec-line span{position:relative;padding-right:20px;margin-right:20px}
.spec-line span::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:rgba(24,60,92,.28)}
.spec-line span:last-child{padding-right:0;margin-right:0}
.spec-line span:last-child::after{display:none}
/* on a photo banner */
.spec-line.on-dark{color:var(--powder);margin-top:22px;
  padding-top:18px;border-top:1px solid rgba(167,200,223,.3)}
.spec-line.on-dark span::after{background:rgba(167,200,223,.45)}
@media(max-width:760px){.spec-line{font-size:.66rem;letter-spacing:.1em}
  .spec-line span{padding-right:13px;margin-right:13px}
  .spec-line.on-dark{flex-wrap:wrap;white-space:normal;font-size:.62rem;letter-spacing:.08em}
  .spec-line.on-dark span{padding-right:11px;margin-right:11px}}
@media(max-width:880px){section{padding:36px 0}}
.band-navy{background:var(--navy);color:var(--white)}
.band-navy .eyebrow{color:var(--powder)}
.band-navy h2.section-title{color:var(--white)}
.band-navy .section-sub{color:rgba(255,253,248,.78)}

/* Centred CTA band — a modifier like .band-navy / .band-cream2, composable with
   them. Replaces five repeated style="" attributes per instance across
   index.html, book.html and 404.html.
   The 14px eyebrow gap is deliberate and not the site's usual 16px: a centred,
   wide-tracked label reads loose at 16. */
.band-cta{text-align:center}
.band-cta .eyebrow{margin-bottom:14px}
.band-cta h2.section-title{margin-left:auto;margin-right:auto}
.band-cta .section-sub{margin:16px auto 0}
.band-cta .cta-row{justify-content:center}
/* 404 only: a near-empty page wants its content nearer the middle of the fold. */
.band-tall{padding:120px 0}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:34px}
.split p{color:var(--ink-soft);margin-bottom:18px;line-height:1.75}
.band-navy .split p{color:rgba(255,253,248,.8)}
.split img{border-radius:2px;box-shadow:0 20px 48px rgba(24,60,92,.18)}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

/* ---------- Cards / teasers ---------- */
/* ---------- Photo-first tile: one component used site-wide ---------- */
.tile{position:relative;display:block;overflow:hidden;text-decoration:none;background:var(--navy-deep);height:340px}
.tile img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .7s cubic-bezier(.2,.6,.2,1),opacity .3s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05);opacity:1}
.tile .plate{position:absolute;left:0;right:0;bottom:0;padding:24px 24px 22px;color:var(--white);
  background:linear-gradient(180deg,rgba(14,37,55,0),rgba(14,37,55,.9))}
.tile h3,.tile h4{font-family:var(--font-display);font-size:1.7rem;font-weight:500;line-height:1.1;color:var(--white)}
.tile .t-sub{font-size:.88rem;color:rgba(255,253,248,.82);margin-top:5px}
.tile .t-kicker{font-family:var(--font-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--powder);margin-bottom:7px}
.tile .reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .36s ease,opacity .3s ease}
.tile:hover .reveal,.tile:focus-visible .reveal{max-height:40px;opacity:1}
.tile .t-more{margin-top:10px;font-family:var(--font-display);font-weight:500;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--powder)}
/* static tiles (not links) keep the same look without the hover cue */
.tile.static{cursor:default}

.tile-grid{display:grid;gap:20px;margin-top:30px}
.tile-grid.g3{grid-template-columns:repeat(3,1fr)}
.tile-grid.g2{grid-template-columns:repeat(2,1fr)}
.tile-grid.g2 .tile{height:380px}
.tile.tall{height:420px}
.tile.short{height:280px}

/* ---------- Home section rows ---------- */
/* Half image, half text, alternating sides. The image is absolutely placed
   inside a relative cell so the row height comes from the text rather than
   from each photo's native aspect — otherwise the three rows land at wildly
   different heights. */
.splits{display:flex;flex-direction:column;gap:20px;margin-top:34px}
.split-row{display:grid;grid-template-columns:1fr 1fr;background:var(--cream-2);
  text-decoration:none;overflow:hidden;border-radius:2px;
  transition:background .18s,transform .18s}
.split-row:hover,.split-row:focus-visible{background:var(--white);transform:translateY(-1px)}
.split-row .sr-img{position:relative;overflow:hidden;min-height:290px}
.split-row .sr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.split-row:hover .sr-img img,.split-row:focus-visible .sr-img img{transform:scale(1.04)}
.split-row .sr-txt{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.split-row .sr-k{font-family:var(--font-display);font-weight:500;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--powder-deep);margin-bottom:10px}
.split-row h3{font-family:var(--font-display);font-size:2.1rem;font-weight:500;color:var(--navy);
  line-height:1.1;margin-bottom:10px}
.split-row p{font-size:.94rem;color:var(--ink-soft);margin-bottom:16px}
.split-row .sr-more{font-family:var(--font-display);font-weight:500;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.split-row.flip .sr-img{order:2}
@media(max-width:860px){.tile-grid.g3,.tile-grid.g2{grid-template-columns:1fr}
  .tile,.tile-grid.g2 .tile,.tile.tall{height:280px}
  .tile .reveal{max-height:40px;opacity:1}
  .split-row{grid-template-columns:1fr}
  /* Image first on every stacked row — the alternating order only makes
     sense side by side, and leading with text buries the photo. */
  .split-row .sr-img{min-height:220px;order:-1!important}
  .split-row .sr-txt{padding:28px 26px}}

/* ---------- Galleries ---------- */
.feature-photo{margin-top:40px;border-radius:2px;overflow:hidden}
.feature-photo img{width:100%;height:520px;object-fit:cover}
@media(max-width:780px){.feature-photo img{height:280px}}

/* ---------- Feature list ---------- */
/* Feature cards on the navy band. Panel + hairline border + a left accent
   bar, reusing the vocabulary already on the site (the review block's left
   rule, the mm-badge's translucent bordered pill, the mono kickers). */
.feats{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{position:relative;overflow:hidden;border-radius:2px;padding:26px 26px 24px;
  background:rgba(255,253,248,.045);border:1px solid rgba(167,200,223,.22)}
.feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--powder),rgba(167,200,223,0))}
.feat .feat-ico{width:44px;height:44px;margin-bottom:18px;border-radius:50%;
  border:1px solid rgba(167,200,223,.35);background:rgba(14,37,55,.4);
  display:flex;align-items:center;justify-content:center}
.feats .feat svg{width:21px;height:21px;margin:0;color:var(--powder);fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feats .feat h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:8px;font-weight:500}
.feats .feat p{font-size:.89rem;color:rgba(255,253,248,.74)}
@media(max-width:780px){.feats{grid-template-columns:1fr;gap:14px}
  .feat{padding:22px 22px 20px}}

/* ---------- Bedrooms ---------- */
.beds-grid{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.beds-grid .tile{height:300px}
@media(max-width:780px){.beds-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.beds-grid{grid-template-columns:1fr}.beds-grid .tile{height:260px}}

/* ---------- Review banner ---------- */
/* Airbnb Guest favorite badge, restated in the site's own materials: gold
   laurels and stars, but the site's cream card, hairline border and serif
   figures. Layout mirrors the listing — badge | claim | rating | count. */
/* 42px above AND below: this is a card interrupting prose, so it gets more air
   than the 30-34px used between ordinary blocks. Setting the lower gap here
   rather than on .splits means it collapses with any following block's
   margin-top and cannot end up smaller than the upper gap. */
.review-banner{margin-top:42px;margin-bottom:42px;display:block;
  padding:22px 28px;background:var(--cream);border:1px solid rgba(24,60,92,.16);
  border-left:3px solid var(--gold);border-radius:2px;text-decoration:none;
  transition:background .18s,border-color .18s,transform .18s}
.review-banner .rb-top{display:flex;align-items:center;gap:18px 34px;flex-wrap:wrap}
/* Second row: Airbnb's "Top 10% of homes" listing highlight. */
/* Equal space either side of the hairline -- it was 18px above, 16px below. */
.review-banner .rb-rank{display:flex;align-items:flex-start;gap:12px;margin-top:18px;
  padding-top:18px;border-top:1px solid rgba(24,60,92,.14)}
.review-banner .rb-trophy{width:19px;height:19px;flex-shrink:0;margin-top:1px;color:var(--gold);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.review-banner .rb-rank p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.review-banner .rb-rank strong{color:var(--ink)}
.band-cream2 .review-banner{background:var(--cream)}
.review-banner:hover,.review-banner:focus-visible{background:var(--white);
  border-left-color:var(--gold-soft);transform:translateY(-1px)}

.review-banner .rb-badge{display:flex;align-items:center;gap:1px;flex-shrink:0;color:var(--gold)}
.review-banner .laurel{width:23px;height:46px;fill:currentColor}
.review-banner .rb-flip{transform:scaleX(-1)}
.review-banner .rb-badge-txt{font-weight:700;font-size:1.02rem;line-height:1.14;
  color:var(--ink);text-align:center;padding:0 2px}

/* No max-width: the claim needs 436px on one line and the row has ~754px,
   so the old 330px cap was the only thing wrapping it. It still wraps
   naturally once the flex row runs out of room on narrow screens. */
.review-banner .rb-claim{font-size:.94rem;color:var(--ink);margin:0;line-height:1.5}
.review-cta{display:block;margin-top:8px;font-family:var(--font-display);font-weight:500;font-size:.84rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}

/* Badge + rating: one credential block, vertically centred so the 5.0 sits
   level with the laurels. Stacked figure-over-stars deliberately — the laurels
   are 46px tall and an inline "5.0 *****" would read squat beside them, where
   the stack lands at ~42px and aligns. */
.review-banner .rb-cred{display:flex;align-items:center;gap:20px;flex-shrink:0;
  /* Hairline between the credentials and the claim, so the pair reads as one
     unit rather than three loose items. Removed when the row wraps. */
  padding-right:20px;border-right:1px solid rgba(24,60,92,.16)}
.review-banner .rb-say{flex:1 1 320px;min-width:0}
.review-banner .rb-stat{display:flex;flex-direction:column;align-items:center;gap:5px}
.review-banner .rb-num{font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--navy);line-height:1}
.review-banner .stars{display:flex;gap:2px}
.review-banner .star{width:12px;height:12px;fill:var(--gold)}

@media(max-width:820px){
  .review-banner{padding:20px 22px}
}
/* Drop the divider just BEFORE the row wraps, not at the 820px padding
   breakpoint — dropping it that early left the badge and claim side by side with
   nothing between them.

   There is no exact breakpoint available, because the divider changes the number
   it would need to be: its 20px padding plus 1px border widens .rb-cred, so the
   row wraps at about 700px with the divider present and about 677px without it.
   Measured, not derived. 700px therefore errs early — roughly 677-700px shows
   no divider while still side by side, which is a far better failure than the
   alternative, where the divider survives the wrap and hangs as a stray vertical
   line under the badge. Do not "tighten" this to 677px; that reintroduces it. */
@media(max-width:700px){
  .review-banner .rb-cred{padding-right:0;border-right:0}
}

/* ---------- Map / location ---------- */
.intro{max-width:780px;margin-top:8px}
.intro p{color:var(--ink-soft);margin-bottom:18px;line-height:1.75}

/* Fallback shown if the map library can't load */
.map-fallback{height:100%;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--cream-2);padding:34px;text-align:center}
.map-fallback .mf-k{font-family:var(--font-display);font-weight:500;font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--powder-deep)}
.map-fallback .mf-t{font-family:var(--font-display);font-size:1.9rem;font-weight:500;color:var(--navy);margin-top:8px}
.map-fallback p{font-size:.9rem;color:var(--ink-soft);margin:12px auto 20px;max-width:380px}

.map-holder{margin-top:30px;border-radius:2px;overflow:hidden;border:1px solid rgba(24,60,92,.16);box-shadow:0 16px 40px rgba(24,60,92,.1)}
#map{height:460px;width:100%;background:var(--cream);position:relative}
#map iframe{display:block;width:100%;height:100%;border:0}
/* "Somewhere in here" ring drawn over the map embed. Deliberately vague —
   it marks an area, not the house. See the comment in location.html. */
.map-ring{position:absolute;top:50%;left:50%;width:230px;height:230px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:rgba(167,200,223,.30);border:1px solid var(--powder-deep)}
.map-ring span{position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--font-display);font-weight:500;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);background:rgba(245,241,232,.92);
  padding:4px 9px;border-radius:2px}
@media(max-width:600px){#map{height:340px}
  .map-ring{width:150px;height:150px}}
/* Sits on a single line on desktop: no max-width cap, and .79rem buys enough
   headroom to still fit on a 1024px laptop. Wraps normally below that. */
.map-note{margin-top:14px;font-size:.79rem;color:var(--ink-soft);display:flex;align-items:flex-start;gap:8px}
.map-note svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--powder-deep);fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:1000px){.map-note{font-size:.83rem;max-width:640px}}
.drives{margin-top:42px}
.drives h3{font-family:var(--font-display);font-size:1.7rem;color:var(--navy);font-weight:500;margin-bottom:20px}
/* Takes any number of cities. The rules between cells are borders on the
   cells themselves — container draws top+left, each cell draws right+bottom —
   rather than the container's background showing through 1px gaps. An
   unfilled slot in the last row therefore paints nothing at all, instead of
   the empty grey box the old fixed-column version left behind. Columns are
   auto-fit, so add or remove a city in location.html and the CSS follows. */
.drive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid rgba(24,60,92,.14);border-left:1px solid rgba(24,60,92,.14)}
.drive{background:var(--cream-2);padding:22px 18px;
  border-right:1px solid rgba(24,60,92,.14);border-bottom:1px solid rgba(24,60,92,.14)}
.drive .city{font-weight:600;font-size:.9rem;color:var(--navy);margin-bottom:7px}
.drive .time{font-family:var(--font-display);font-size:1.75rem;font-weight:500;color:var(--powder-deep);line-height:1}
.drive .miles{font-size:.76rem;color:var(--ink-soft);margin-top:6px;font-variant-numeric:lining-nums tabular-nums}
/* ---------- Nearby ---------- */
/* Proximity is given in coarse bands ("Under 15 min"), never exact minutes:
   precise per-place drive times would triangulate back to the house, which
   defeats the deliberately vague map above. Keep the bands vague. */
.nearby-cat{margin-top:30px}
.nearby-cat h4{font-family:var(--font-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--powder-deep);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(24,60,92,.12)}
.nearby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:0 30px}
.nearby-place{display:block;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(24,60,92,.07)}
.nearby-place .np-n{font-family:var(--font-display);font-size:1.24rem;font-weight:500;color:var(--navy);
  display:flex;align-items:center;gap:7px;transition:color .18s}
.nearby-place .np-n svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;opacity:.45}
.nearby-place:hover .np-n,.nearby-place:focus-visible .np-n{color:var(--powder-deep)}
.nearby-place .np-d{font-size:.83rem;color:var(--ink-soft);margin-top:3px;line-height:1.55}
.nearby-place .np-t{font-family:var(--font-display);font-weight:500;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--powder-deep);margin-top:6px}

/* ---------- Inquiry form ---------- */
.inquiry-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;margin-top:34px;align-items:start}
@media(max-width:860px){.inquiry-grid{grid-template-columns:1fr;gap:34px}}
.contact-detail{display:flex;gap:14px;margin-bottom:18px;font-size:.93rem;color:rgba(255,253,248,.86)}
.contact-detail .k{font-family:var(--font-display);font-weight:500;font-size:.84rem;color:var(--powder);text-transform:uppercase;letter-spacing:.14em;min-width:78px;padding-top:4px}
.contact-detail a{color:var(--powder);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(167,200,223,.4)}
.contact-detail a:hover{color:var(--white)}
form.inquiry-form{background:var(--white);padding:30px;border-radius:2px;color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:.78rem;font-weight:600}
.field input,.field textarea{font-family:var(--font-body);font-size:.93rem;padding:11px 13px;border:1px solid rgba(24,60,92,.24);border-radius:2px;background:var(--white);color:var(--ink);width:100%}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--powder-deep);outline-offset:1px}
.field textarea{resize:vertical;min-height:96px}
.submit-btn{
  position:relative;overflow:hidden;z-index:0;width:100%;background:transparent;color:var(--navy);
  border:1px solid var(--navy);padding:15px;border-radius:2px;font-weight:600;font-size:.95rem;
  font-family:var(--font-body);cursor:pointer;transition:color .28s;
}
.submit-btn::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--navy);z-index:-1;transition:height .3s cubic-bezier(.4,0,.2,1)}
.submit-btn:hover,.submit-btn:focus-visible{color:var(--cream)}
.submit-btn:hover::before,.submit-btn:focus-visible::before{height:100%}
.form-note{font-size:.77rem;color:var(--ink-soft);margin-top:11px}
.form-status{font-size:.85rem;margin-top:12px;line-height:1.6}
.form-status:empty{display:none}
.form-status.ok{color:#2C6B4F;background:#EAF3ED;border-left:3px solid #2C6B4F;padding:11px 14px}
.form-status.err{color:#8C3A2B;background:#F6EAE7;border-left:3px solid #8C3A2B;padding:11px 14px}
.submit-btn:disabled{opacity:.65;cursor:default}

/* ---------- Next-page pager ---------- */
/* Pager — destination photo ghosts in behind the label */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(24,60,92,.16);
  border-top:1px solid rgba(24,60,92,.16);border-bottom:1px solid rgba(24,60,92,.16)}
.pager a{position:relative;overflow:hidden;display:block;background:var(--cream-2);
  padding:28px 32px;text-decoration:none;transition:background .24s}
.pager a:hover,.pager a:focus-visible{background:var(--cream)}
.pager .ghost{position:absolute;inset:0;opacity:0;transition:opacity .34s ease}
.pager .ghost img{width:100%;height:100%;object-fit:cover}
.pager a:hover .ghost,.pager a:focus-visible .ghost{opacity:.14}
.pager .lbl{position:relative;display:block;font-family:var(--font-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--powder-deep);margin-bottom:7px}
.pager .to{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-size:1.9rem;font-weight:500;color:var(--navy);line-height:1.1}
.pager .next{text-align:right}
.pager .next .to{justify-content:flex-end}
.pager svg{width:20px;height:20px;stroke:var(--powder-deep);fill:none;stroke-width:1.5;flex-shrink:0;transition:transform .28s}
.pager a.next:hover svg,.pager a.next:focus-visible svg{transform:translateX(5px)}
.pager a.prev:hover svg,.pager a.prev:focus-visible svg{transform:translateX(-5px)}
.pager .empty{background:var(--cream-2)}
@media(max-width:700px){.pager{grid-template-columns:1fr}.pager .next,.pager .next .to{text-align:left;justify-content:flex-start}
  .pager .empty{display:none}}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:rgba(255,253,248,.66);padding:50px 0 26px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px}
footer .foot-logo{width:180px;margin-bottom:20px}
footer .col{max-width:340px}
footer .col h4{font-family:var(--font-display);font-weight:500;font-size:.84rem;text-transform:uppercase;letter-spacing:.14em;color:var(--powder);margin-bottom:18px}
.foot-tagline{font-family:var(--font-display);font-weight:300;font-size:1rem;line-height:1.45;letter-spacing:.04em;color:rgba(255,253,248,.78)}
.foot-tagline span{display:block;white-space:nowrap}
footer .col a{position:relative;display:block;width:fit-content;text-decoration:none;font-family:var(--font-display);font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,253,248,.72);margin-bottom:13px;padding-bottom:3px;transition:color .18s}
footer .col a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--powder);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
footer .col a:hover,footer .col a:focus-visible{color:var(--white)}
footer .col a:hover::after,footer .col a:focus-visible::after{transform:scaleX(1)}
footer .bottom{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,253,248,.12);font-size:.76rem;text-align:center;color:rgba(255,253,248,.42)}
@media(max-width:600px){.foot-tagline{font-size:.88rem}footer .foot-logo{width:150px}}

/* ---------- Skip link ---------- */
/* Keyboard and screen-reader users otherwise have to tab the whole nav on
   every page before reaching content. Hidden off-canvas rather than with
   display:none, which would take it out of the tab order entirely. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy);color:var(--cream);text-decoration:none;
  font-family:var(--font-display);font-weight:500;font-size:.84rem;
  letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;border-radius:2px}
.skip-link:focus{left:10px;top:10px;outline:2px solid var(--powder);outline-offset:2px}
/* Skip-link and in-page anchor targets are containers made focusable with
   tabindex="-1". A default focus ring around a whole section or header reads
   as a rendering bug, so suppress it on those specifically — never on real
   interactive elements. */
section[tabindex="-1"]:focus,header[tabindex="-1"]:focus{outline:none}

/* ---------- Good to Know ---------- */
/* Label/value rows grouped into categories. Two columns of categories on
   desktop, one below that; the row heights come from the content, so a
   category with three rows and one with eight can sit side by side. */
.gtk{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:34px 52px;align-items:start}
.gtk-cat h3{font-family:var(--font-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--powder-deep);margin-bottom:6px;
  padding-bottom:8px;border-bottom:1px solid rgba(24,60,92,.12)}
.gtk-row{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid rgba(24,60,92,.07)}
.gtk-row:last-child{border-bottom:none}
.gtk-row .k{flex:0 0 132px;font-size:.84rem;font-weight:600;color:var(--navy);line-height:1.55}
.gtk-row .v{font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.gtk-row .v strong{color:var(--ink);font-weight:600}
@media(max-width:520px){.gtk-row{flex-direction:column;gap:3px}
  .gtk-row .k{flex:none}}

/* ---------- House rules ---------- */
/* At-a-glance strip. The allowed/not-allowed distinction is carried by the
   icon SHAPE — a check versus a barred circle — not by colour, so it survives
   colour blindness and a greyscale print. Everything stays powder-deep; no
   warning red is introduced into the palette for this. */
.rules-glance{margin-top:30px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:1px;background:rgba(24,60,92,.14);border:1px solid rgba(24,60,92,.14)}
.rg{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:var(--white)}
.rg svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;color:var(--powder-deep);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rg .rg-t{font-size:.89rem;color:var(--ink);line-height:1.5;font-variant-numeric:lining-nums}
.rg .rg-t em{font-style:normal;display:block;font-size:.79rem;color:var(--ink-soft);margin-top:3px}

/* The detailed policy. Two columns of groups on desktop, one below — same
   shape as .gtk above it, so the page reads as one system. Shared by the
   amenities list and the house rules. */
.detail-groups{margin-top:42px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:32px 52px;align-items:start}
.detail-group h4{font-family:var(--font-display);font-weight:500;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--powder-deep);margin-bottom:11px;
  padding-bottom:8px;border-bottom:1px solid rgba(24,60,92,.12)}
.detail-group ul{list-style:none}
/* Lining figures throughout: Inter's defaults are fine, but these lists are
   dense with money and clock times ($150, 10:00 PM) that should align. */
.detail-group li{position:relative;padding-left:15px;margin-bottom:8px;
  font-size:.88rem;color:var(--ink-soft);line-height:1.6;font-variant-numeric:lining-nums}
.detail-group li:last-child{margin-bottom:0}
.detail-group li::before{content:"";position:absolute;left:0;top:.72em;
  width:6px;height:1px;background:var(--powder-deep)}
.detail-group li strong{color:var(--ink);font-weight:600}

.rules-final{margin-top:44px;padding:26px 30px;background:var(--cream);
  border:1px solid rgba(24,60,92,.16);border-left:3px solid var(--powder-deep);border-radius:2px}
.rules-final p{font-family:var(--font-display);font-size:1.12rem;font-weight:400;
  color:var(--navy);line-height:1.55}
@media(max-width:600px){.rules-final{padding:22px}.rules-final p{font-size:1.02rem}}

/* Amenity variant of the shared group. Amenities are things you get, so the
   item name carries the weight and any qualifier drops to a sub-line; the
   house rules read the other way round, as running instructions. */
.detail-groups.amen li{color:var(--ink)}
.detail-groups.amen li em{font-style:normal;display:block;font-size:.81rem;
  color:var(--ink-soft);margin-top:2px;line-height:1.5}

/* In-page jump row. This page is the longest on the site by a wide margin —
   quick reference, then everything the house offers, then the rules — so the
   three landmarks get named up front rather than left to a long scroll. */
.page-jump{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;
  padding-bottom:18px;border-bottom:1px solid rgba(24,60,92,.14)}
.page-jump a{position:relative;text-decoration:none;padding:0 20px 0 0;margin-right:20px;
  font-family:var(--font-display);font-weight:500;font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);opacity:.75;transition:opacity .18s}
.page-jump a:hover,.page-jump a:focus-visible{opacity:1}
.page-jump a::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:rgba(24,60,92,.28)}
.page-jump a:last-child{padding-right:0;margin-right:0}
.page-jump a:last-child::after{display:none}
@media(max-width:600px){.page-jump{flex-direction:column;gap:12px}
  .page-jump a{padding:0;margin:0}.page-jump a::after{display:none}}

/* ---------- Tabs (Book page) ---------- */
/* The Book page carries four panels: the inquiry form, the quick reference,
   the amenity list and the house rules.

   No-JS is the DEFAULT state, not a fallback bolted on afterwards: the markup
   ships with every panel visible and the tab bar hidden, so a visitor without
   JS gets the whole page stacked and nothing is unreachable. An inline script
   in <head> adds .js to <html>, which is the only thing that turns the tab
   behaviour on. Never invert this — a tab bar that appears before its script
   can run is a set of dead buttons, and panels hidden by default would take
   the house rules offline for anyone JS fails on. */
.tabs{display:none;background:var(--cream);border-bottom:1px solid rgba(24,60,92,.14);
  position:sticky;top:var(--nav-h,0px);z-index:900}
html.js .tabs{display:block}
html.js .tab-panel{display:none}
/* Between the head flag landing and the tab script running, nothing yet has
   .is-active. Show the first panel in that window so the page is never blank;
   the script then adds .tabs-ready and takes over. */
html.js:not(.tabs-ready) .tab-panel:first-of-type{display:block}
html.js .tab-panel.is-active{display:block}

.tabs .wrap{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{position:relative;flex:0 0 auto;background:none;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-weight:500;font-size:1rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--navy);opacity:.6;padding:17px 0;margin-right:34px;
  transition:opacity .18s}
.tab:last-child{margin-right:0}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.tab:hover,.tab:focus-visible{opacity:1}
.tab[aria-selected="true"]{opacity:1}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
/* Four uppercase tracked labels do not fit a phone; the row scrolls sideways
   inside its own container rather than widening the page. */
@media(max-width:880px){
  .tabs .wrap{padding:0 20px}
  .tab{font-size:.86rem;letter-spacing:.1em;margin-right:26px;padding:14px 0}
}
/* The panels already carry their own section padding, so the first heading in
   a panel should not add to it. */
.tab-panel > .wrap > *:first-child{margin-top:0}
/* On a phone the four labels total ~604px against ~335px of content, which
   pushed House Rules entirely off-screen behind a sideways scroll. Wrapping to
   two rows is slightly less tidy than a scrolling strip but every tab is
   visible, which matters more for the tab carrying the fees and the
   enforcement terms. */
@media(max-width:620px){
  .tabs .wrap{flex-wrap:wrap}
  .tab{font-size:.8rem;letter-spacing:.08em;margin-right:22px;padding:11px 0}
}