/* ==========================================================================
   Guest Guardian — concept site
   Design system. Built by MP Launch, 28 July 2026.
   Palette and type: their Digital Brand Guidelines v1.0 (Argon, 2026).
     Charcoal #343534 · Ash #A7ABA1 · Light Lavender #E5E1E6 · White.
     Arpona Medium headings, Outfit everything else. No red, ever.
   ========================================================================== */

:root {
  /* ── THEIR OFFICIAL BRAND PALETTE ────────────────────────────────────────
     Source: "Guest Guardian Digital Brand Guidelines", v1.0, Argon Design
     Studio, sent by Nick 17 Aug 2026. Section 02 lists FOUR colours and no
     others: Charcoal (the core), Ash Grey, Light Lavender, White.
     "The colour values specified should be kept consistent at all times."

     🚨 THERE IS NO RED IN THEIR BRAND. An earlier build used a rust #C02B0A
     as "their accent" — it was never theirs. Nick confirmed the same thing
     independently for the signature: "No red, just black or charcoal (or same
     colour (ash) as the profile logo)." Red now survives ONLY as --alert, a
     functional error/danger signal, never as decoration. Do not reintroduce a
     rust brand token.
     ⚠️ --sand #E8E2D6 was also not theirs (a warm beige); the real supporting
     colour is Light Lavender #E5E1E6, which is cool. Replaced. */
  --ink:        #1C1D1C;
  --ink-2:      #343534;   /* Charcoal — their CORE brand colour */
  --sage:       #A7ABA1;   /* Ash Grey — exact match to the guide */
  --sage-deep:  #7C8377;   /* darkened Ash, for text contrast only */
  --sage-pale:  #DDE0D8;   /* lightened Ash, for fills only */
  --lavender:   #E5E1E6;   /* Light Lavender — their supporting colour */
  --sand:       #E5E1E6;   /* alias, kept so existing rules resolve */
  --paper:      #F7F6F2;
  --paper-2:    #FFFFFF;   /* White */

  /* Functional only. Errors, destructive actions, and the live-mode warning.
     NOT a brand colour and never used decoratively. */
  --alert:      #C02B0A;

  --muted:      #6B6E69;
  --line:       rgba(28,29,28,.12);
  --line-soft:  rgba(28,29,28,.07);

  /* Type — section 03 of the guide, and exactly how their current site does it:
     big headings (H0/H1/H2) in Arpona Medium, sub-headings (H3/H4/H5) in
     Outfit Medium, body in Outfit.
     🚨 27 Sep 2026: Arpona now ACTUALLY LOADS, from the Adobe Fonts project
     their current site uses (use.typekit.net/qqf3aap, Arpona 500 + italic).
     Until today every heading here rendered in Fraunces, a serif the guide
     never mentions, because Arpona had no web source. If the Adobe project
     ever fails, headings fall back to Outfit, which is what the guide asks
     for ("opt for native sans-serif typefaces"), never to another serif. */
  --serif: "arpona", "Outfit", Helvetica, Arial, sans-serif;
  --sans:  "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1240px;
  --rad: 4px;
  --rad-lg: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 1px 2px rgba(28,29,28,.05), 0 4px 14px rgba(28,29,28,.05);
  --shadow-md: 0 2px 6px rgba(28,29,28,.06), 0 18px 44px rgba(28,29,28,.09);
  --shadow-lg: 0 30px 80px rgba(28,29,28,.16);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gut) * 2), 780px); margin-inline: auto; }
section { position: relative; }
.pad     { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.pad-sm  { padding-block: clamp(3rem, 6vw, 5rem); }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.85rem, 7.2vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
/* Sub-headings are Outfit Medium, per the guide's type hierarchy (H3/H4/H5)
   and their current site. Until 27 Sep they were set in the display serif. */
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.lede {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
}
.eyebrow {
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.35rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow.centered { justify-content: center; }
em.accent { font-style: italic; color: var(--sage-deep); }

/* Keyword line that lives INSIDE the h1, so the heading carries the search term
   as well as the brand line. This is the on-page fix the audit recommends. */
.h1-kicker {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.72rem, 1vw, .82rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  border-radius: 100px;
  border: 1px solid transparent;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow-md); }
.btn-sage { background: var(--sage); color: var(--ink); }
.btn-sage:hover { background: var(--sage-deep); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.32); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* Text link with animated rule */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .93rem; font-weight: 500;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease);
}
.tlink:hover { background-size: 100% 1px; }
.tlink .arw { transition: transform .35s var(--ease); }
.tlink:hover .arw { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  letter-spacing: .02em;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar a { transition: color .25s; }
.topbar a:hover { color: #fff; }
.topbar .tb-right { display: flex; align-items: center; gap: 1.6rem; }
@media (max-width: 780px) { .topbar .tb-hide { display: none; } }
/* Guest-facing CTA. Sits beside the owner CTA in the nav: owners are the
   paying audience so they get the solid button, guests get the outline. */
.btn-book {
  background-color: transparent; color: #1C1D1C;
  border-color: rgba(28,29,28,.22);
}
.btn-book:hover { background-color: #A7ABA1; border-color: #A7ABA1; color: #1C1D1C; }

/* ==========================================================================
   Embedded booking engine
   Their real Holiday Future engine, framed inside the site so the guest never
   leaves guestguardian. Verified: the platform's CSP sets
   frame-ancestors 'self' https://*  — embedding is explicitly permitted.
   ========================================================================== */
/* Compact search bar. Hands off to the real engine on submit, so the guest
   sees our brand first rather than a whole site framed inside ours. */
.bookbar {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr auto;
  gap: .9rem;
  align-items: end;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--rad-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-md);
}
.bb-field { display: flex; flex-direction: column; gap: .35rem; }
.bb-label {
  font-size: .66rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sage-deep);
}
.bookbar input, .bookbar select {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: .93rem;
  border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--paper); color: var(--ink);
  transition: border-color .3s, box-shadow .3s;
}
.bookbar input:focus, .bookbar select:focus {
  outline: none; border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(167,171,161,.22);
}
.bookbar .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .bookbar { grid-template-columns: 1fr 1fr; }
  .bookbar .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 460px) { .bookbar { grid-template-columns: 1fr; } }

/* Availability search + attribute filter */
.bookbar-filter { grid-template-columns: 1.1fr 1.1fr .7fr .8fr .7fr auto; }
.bookbar-filter .bb-hint strong {
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-weight: 400;
}
@media (max-width: 1100px) { .bookbar-filter { grid-template-columns: 1fr 1fr 1fr; } }
.bookbar .bb-hint {
  grid-column: 1 / -1; margin: .5rem 0 0;
  font-size: .78rem; color: var(--muted);
}
@media (max-width: 760px) {
  .bookbar-filter { grid-template-columns: 1fr 1fr; }
  .bookbar-filter .bb-count { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 460px) { .bookbar-filter { grid-template-columns: 1fr; } }
/* Filtered-out cards must not leave reveal-animation ghosts */
#proplist .prop[style*="display: none"] { display: none !important; }

/* ==========================================================================
   Booking modal — the real listing page opens over the site, so the guest
   books without ever leaving guestguardian.com.au.
   ========================================================================== */
.bmodal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: clamp(.5rem, 2.5vw, 2rem);
  background: rgba(20,21,20,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bmodal.open { display: flex; }
.bmodal-panel {
  position: relative; width: min(1180px, 100%); height: min(92vh, 980px);
  background: var(--paper-2); border-radius: var(--rad-lg);
  overflow: hidden; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.bmodal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem .85rem 1.35rem;
  background: var(--ink); color: #fff; flex: none;
}
.bmodal-title { font-family: var(--serif); font-size: 1.05rem; letter-spacing: -.015em; }
.bmodal-sub { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: .15rem; }
.bmodal-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.bmodal-actions a, .bmodal-close {
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
  border-radius: 100px; padding: .45rem .9rem; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.bmodal-actions a:hover, .bmodal-close:hover { background: #fff; color: var(--ink); }
.bmodal-body { position: relative; flex: 1; background: var(--paper); }
.bmodal-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.bmodal-load {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--paper); color: var(--muted); font-size: .88rem;
  transition: opacity .4s var(--ease);
}
.bmodal-load.gone { opacity: 0; pointer-events: none; }
body.bmodal-lock { overflow: hidden; }
@media (max-width: 620px) {
  .bmodal-panel { height: 94vh; }
  .bmodal-actions .bm-newtab { display: none; }
}
.book-note {
  display: flex; align-items: flex-start; gap: .7rem;
  background: rgba(167,171,161,.14); border-left: 2px solid var(--sage-deep);
  padding: 1rem 1.25rem; border-radius: var(--rad);
  font-size: .88rem; color: var(--muted); margin-top: 1.5rem;
}

.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247,246,242,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.nav.stuck { box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(28,29,28,.06); background: rgba(247,246,242,.94); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
/* The header row carries brand + 6 links + Sign in + 2 buttons, which is
   right at the limit of the container. Let the menu give ground first so
   the row can never push the page wider than the viewport. */
.nav .menu { min-width: 0; }
.nav-cta { flex: none; }

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
/* Their real logo artwork. height:auto so the intrinsic 3.4921 ratio is never
   distorted, whatever width the layout gives it. The old .brand-mark and
   .brand-name rules are gone: the name is part of the artwork now, and their
   guidelines forbid redrawing or re-setting it. */
.brand-logo { display: block; width: 110px; height: auto; flex: none; }
@media (max-width: 520px) { .brand-logo { width: 92px; } }

.menu { display: flex; align-items: center; gap: 2.1rem; }
.menu a {
  font-size: .93rem; font-weight: 400; color: var(--ink); position: relative; padding: .3rem 0;
  transition: color .25s;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu a[aria-current="page"] { font-weight: 500; }

.nav-cta { display: flex; align-items: center; gap: .9rem; flex: none; }
.nav-cta .btn { padding: .72rem 1.4rem; font-size: .87rem; }

.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  background: transparent; border-radius: 50%; position: relative; flex: none;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { bottom: 16px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

.mobile-menu {
  display: none; border-top: 1px solid var(--line-soft); background: var(--paper);
  padding: 1rem var(--gut) 2rem;
}
.mobile-menu.open { display: block; }
/* 16 Oct 2026 (Nick, iPhone): the open menu is taller than a phone screen and
   could not scroll, so a swipe moved the page behind it. It is now its own layer
   pinned from the bottom of the header to the bottom of the screen: it scrolls by
   itself, never hands the swipe to the page, and the page underneath is held
   still (app.js sets --mm-top and blocks stray touch-scrolls while it is open). */
.mobile-menu.open {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--mm-top, 68px); z-index: 89;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
/* NO overflow lock on html or body while the menu is open. body carries
   overflow-x:hidden, so hiding html's overflow turns body into its own scroller
   and the sticky header jumps off the top of the screen (Chrome on Android;
   caught in a touch test, 16 Oct 2026). The page is held still by the touch
   guard in app.js instead. */
.mobile-menu a {
  display: block; padding: .95rem 0; border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em;
}
.mobile-menu .btn { margin-top: 1.5rem; width: 100%; }
/* The two buttons at the foot of the phone menu are links too, so the rule
   above gave them 24px serif text, no padding and a grey bottom edge (found in
   the 15 Oct pre-launch review). Put the button look back. */
.mobile-menu a.btn {
  display: flex; justify-content: center; padding: 1.05rem 2.1rem;
  font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  border-bottom-color: transparent;
}
.mobile-menu a.btn-book { border-color: rgba(28,29,28,.22); }

@media (max-width: 1020px) {
  .menu { display: none; }
  .nav-cta .btn-primary, .nav-cta .btn-book { display: none; }
  .burger { display: block; }
}
/* Below the widest desktop the two nav buttons get tight — drop the guest one
   first, since the owner CTA is the one that earns. */
@media (max-width: 1180px) and (min-width: 1021px) {
  .nav-cta .btn-book { display: none; }
}
.mobile-menu .btn-book { margin-top: 1.5rem; }
.mobile-menu .btn-book + .btn-primary { margin-top: .7rem; }

/* ==========================================================================
   Hero — full-bleed cinematic (homepage)
   ========================================================================== */
.hero-cinema {
  position: relative; overflow: hidden;
  min-height: min(92vh, 980px);
  display: flex; align-items: flex-end;
  background: var(--ink); color: #fff;
}
.hc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .9;
  transform: scale(1.08);
}
html.js .hc-bg { animation: kenburns 16s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.03); } }
.hc-veil {
  position: absolute; inset: 0;
  /* The kicker sits high in the frame where the old gradient was almost
     clear, so it fell onto whatever the photo was doing. Darkened the top
     band and the midtones enough to read against any image. */
  background:
    linear-gradient(to top, rgba(20,21,20,.94) 0%, rgba(20,21,20,.72) 38%, rgba(20,21,20,.52) 70%, rgba(20,21,20,.62) 100%);
}
.hc-content {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.75rem, 5vw, 4rem);
  max-width: var(--max);
}
.hc-content .display { color: #fff; max-width: 13ch; margin-bottom: 1.5rem; }
.hc-content .lede { color: rgba(255,255,255,.78); max-width: 46ch; margin-bottom: 2.4rem; }
.eyebrow.light { color: var(--sage-pale); }
.h1-kicker.light { color: #E8EAE5; text-shadow: 0 1px 12px rgba(0,0,0,.65); }
.hc-content em.accent { color: var(--sage); }
.hc-stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.24);
}
.hc-stat .n {
  font-family: var(--serif); font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1; letter-spacing: -.02em; color: #fff;
}
.hc-stat .l {
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-top: .55rem;
}
.hc-scroll {
  position: absolute; right: clamp(1.25rem, 4vw, 2.5rem); bottom: 2.2rem; z-index: 2;
  font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: .7rem;
}
.hc-scroll::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
}
html.js .hc-scroll::after { animation: scrollhint 2.4s var(--ease) infinite; }
@keyframes scrollhint { 0% { transform: scaleY(.2); transform-origin: top; opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }
@media (max-width: 720px) { .hc-scroll { display: none; } .hero-cinema { min-height: 88vh; } }
@media (prefers-reduced-motion: reduce) {
  html.js .hc-bg, html.js .hc-scroll::after { animation: none !important; }
  .hc-bg { transform: scale(1.03); }
}

/* Legacy split hero (kept for inner-page reuse) */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.hero-copy { max-width: 620px; }
.hero h1 { margin-bottom: 1.6rem; }
.hero .lede { max-width: 47ch; margin-bottom: 2.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.hero-visual { position: relative; }
.hero-frame {
  position: relative; aspect-ratio: 4/5; border-radius: var(--rad-lg); overflow: hidden;
  background: var(--sage-pale); box-shadow: var(--shadow-lg);
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; left: -28px; bottom: 44px; z-index: 3;
  background: var(--paper-2); border-radius: var(--rad-lg);
  padding: 1.15rem 1.35rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .95rem; max-width: 265px;
}
.hero-badge .num { font-family: var(--serif); font-size: 2.15rem; line-height: 1; color: var(--ink); }
.hero-badge .lbl { font-size: .78rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-frame { aspect-ratio: 16/11; }
  .hero-badge { left: auto; right: 16px; bottom: -22px; }
}

/* Trust strip */
.trust { border-block: 1px solid var(--line-soft); background: var(--paper-2); }
.trust .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem; padding-block: 1.5rem;
}
/* Six items since "Airbnb Superhost" (11 Oct 2026): one row on wide screens, two even
   rows of three in between, so no item is ever left alone on a line. Measured: the six
   need ~1,172px in one row with 1.5rem gaps, so one row starts at a 1300px viewport. */
@media (min-width: 761px) and (max-width: 1299px) {
  .trust .wrap { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1.1rem 1rem; }
}
@media (min-width: 1300px) { .trust .wrap { flex-wrap: nowrap; column-gap: 1.5rem; } }
.trust-item { display: flex; align-items: center; gap: .7rem; font-size: .87rem; color: var(--muted); }
.trust-item svg { flex: none; color: var(--sage-deep); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.stat { background: var(--paper); padding: clamp(1.75rem,3.5vw,2.75rem) clamp(1.1rem,2vw,1.75rem); text-align: center; }
.stat .n { font-family: var(--serif); font-size: clamp(2.1rem,4.2vw,3.1rem); line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.stat .l { font-size: .8rem; color: var(--muted); margin-top: .6rem; letter-spacing: .01em; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Section headers
   ========================================================================== */
.sec-head { max-width: 700px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head.centered { margin-inline: auto; text-align: center; }
.sec-head .h2 { margin-bottom: 1.1rem; }
.sec-head.split { max-width: none; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: end; }
@media (max-width: 860px) { .sec-head.split { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.35rem); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--rad-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.card .h3 { margin-bottom: .7rem; }
.card p { font-size: .95rem; color: var(--muted); }
.card-ico {
  width: 46px; height: 46px; border-radius: 50%; background: var(--sage-pale);
  display: grid; place-items: center; margin-bottom: 1.25rem; color: var(--ink); flex: none;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.card:hover .card-ico { background: var(--ink); color: var(--paper); }
.card-foot { margin-top: auto; padding-top: 1.3rem; }

/* Numbered process */
.step { position: relative; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.step .idx {
  font-family: var(--serif); font-size: .95rem; color: var(--sage-deep);
  position: absolute; top: 1rem; left: 0; letter-spacing: .04em;
}
.step .h3 { margin: .5rem 0 .75rem; }
.step p { color: var(--muted); font-size: .95rem; }

/* Service list rows */
.srow {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 1.5rem; align-items: center;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line-soft);
  transition: padding-left .4s var(--ease);
}
.srow:first-child { border-top: 1px solid var(--line-soft); }
.srow:hover { padding-left: .7rem; }
.srow .n { font-family: var(--serif); color: var(--sage-deep); font-size: 1rem; }
.srow .t { display: block; font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.55rem); letter-spacing: -.02em; }
.srow .d { display: block; font-size: .92rem; color: var(--muted); margin-top: .3rem; max-width: 62ch; }
.srow .go { color: var(--sage-deep); transition: transform .4s var(--ease), color .4s var(--ease); }
.srow:hover .go { transform: translateX(5px); color: var(--ink); }
@media (max-width: 700px) {
  .srow { grid-template-columns: 40px 1fr; }
  .srow .go { display: none; }
}

/* ==========================================================================
   Dark band
   ========================================================================== */
.dark { background: var(--ink); color: rgba(255,255,255,.78); }
.dark .h2, .dark .display, .dark .h3 { color: #fff; }
.dark .eyebrow { color: var(--sage); }
.dark .lede { color: rgba(255,255,255,.66); }
.dark .stat { background: transparent; }
.dark .stat .n { color: #fff; }
.dark .stat .l { color: rgba(255,255,255,.55); }
.dark .stats { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.1); }
.dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark .card p { color: rgba(255,255,255,.62); }
.dark .card-ico { background: rgba(255,255,255,.1); color: #fff; }
.dark .card:hover .card-ico { background: var(--sage); color: var(--ink); }

/* ==========================================================================
   Quote / testimonial
   ========================================================================== */
.quote { font-family: var(--serif); font-size: clamp(1.4rem, 2.9vw, 2.15rem); line-height: 1.3; letter-spacing: -.025em; }
.quote-attr { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; font-size: .88rem; color: var(--muted); }
.quote-attr .av { width: 42px; height: 42px; border-radius: 50%; background: var(--sage-pale); flex: none; overflow: hidden; }
.quote-attr .av img { width: 100%; height: 100%; object-fit: cover; }
.dark .quote-attr { color: rgba(255,255,255,.6); }

.tcard {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--rad-lg);
  padding: clamp(1.6rem,2.6vw,2.1rem); display: flex; flex-direction: column;
}
.tcard .stars { color: var(--sage-deep); letter-spacing: .18em; font-size: .8rem; margin-bottom: 1rem; }
.tcard p { font-size: 1rem; line-height: 1.6; }
.tcard .quote-attr { margin-top: auto; padding-top: 1.5rem; }

/* ==========================================================================
   Areas / suburb grid
   ========================================================================== */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--rad-lg); overflow: hidden; }
.area {
  background: var(--paper-2); padding: 1.35rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.area:hover { background: var(--ink); color: #fff; }
/* 🚨 BOTH MUST BE BLOCK. These are two <span>s with nothing between them in the
   markup, so while they were inline they rendered as one run-on word:
   "GlenelgBeachfront and marina". The margin-top below was silently doing
   nothing, because vertical margins are ignored on an inline box — which is
   the tell that stacking was always the intent. */
.area .nm { display: block; font-family: var(--sans); font-weight: 500; font-size: 1.02rem; letter-spacing: -.005em; }
.area .sub { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.area:hover .sub { color: rgba(255,255,255,.6); }
.area .go { opacity: 0; transform: translateX(-6px); transition: all .35s var(--ease); }
.area:hover .go { opacity: 1; transform: translateX(0); }

/* Media object */
.media {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.media.reverse .media-img { order: 2; }
.media-img { border-radius: var(--rad-lg); overflow: hidden; aspect-ratio: 5/4; background: var(--sage-pale); box-shadow: var(--shadow-md); }
.media-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
/* Nick's sofa photo is 2:1 and the box is 5:4: centre on the sofa, not the gap. */
.media-couch img { object-position: 60% 50%; }
.media:hover .media-img img, .media-img:hover img { transform: scale(1.045); }
@media (max-width: 860px) { .media, .media.reverse { grid-template-columns: 1fr; } .media.reverse .media-img { order: 0; } }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .85rem; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; font-size: .96rem; }
.checks svg { color: var(--sage-deep); margin-top: 4px; }
.dark .checks svg { color: var(--sage); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.5rem); align-items: start; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.plan {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--rad-lg);
  padding: clamp(1.75rem,2.6vw,2.35rem); display: flex; flex-direction: column; position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan.featured { background: var(--ink); color: rgba(255,255,255,.75); border-color: var(--ink); box-shadow: var(--shadow-lg); }
.plan.featured .plan-name, .plan.featured .plan-price { color: #fff; }
.plan.featured .checks svg { color: var(--sage); }
.plan-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--sage); color: var(--ink); font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; padding: .35rem .95rem; border-radius: 100px;
}
.plan-name { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em; }
.plan-desc { font-size: .89rem; color: var(--muted); margin-top: .45rem; min-height: 2.6em; }
.plan.featured .plan-desc { color: rgba(255,255,255,.6); }
.plan-price { font-family: var(--serif); font-size: 3.2rem; line-height: 1; margin: 1.4rem 0 .3rem; letter-spacing: -.035em; }
.plan-price sup { font-size: 1.2rem; vertical-align: super; opacity: .6; }
.plan-unit { font-size: .82rem; color: var(--muted); }
.plan.featured .plan-unit { color: rgba(255,255,255,.55); }
.plan .checks { margin-top: 1.7rem; }
.plan .btn { margin-top: 1.9rem; width: 100%; }

/* Comparison table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--rad-lg); background: var(--paper-2); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .93rem; }
table.cmp th, table.cmp td { padding: .95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.cmp thead th { font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: rgba(28,29,28,.025); }
table.cmp td:not(:first-child), table.cmp th:not(:first-child) { text-align: center; }
table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp tbody tr:hover { background: rgba(167,171,161,.08); }
.yes { color: var(--sage-deep); font-weight: 600; }
.no  { color: rgba(28,29,28,.24); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.05rem,1.7vw,1.3rem); letter-spacing: -.015em;
  transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--sage-deep); border-bottom: 1.5px solid var(--sage-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details[open] summary { color: var(--ink); }
.faq .ans { padding: 0 3rem 1.6rem 0; color: var(--muted); font-size: .98rem; max-width: 74ch; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--rad-lg);
  padding: clamp(1.75rem, 3.2vw, 2.75rem); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; margin-bottom: .45rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--rad); background: var(--paper);
  color: var(--ink); transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage-deep); background: #fff;
  box-shadow: 0 0 0 3px rgba(167,171,161,.22);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: .78rem; color: var(--muted); margin-top: 1rem; text-align: center; }

/* Form controls on a DARK band (the estimator).
   `color-scheme: dark` is the key: without it the browser paints the native
   dropdown list light-on-light and the options are unreadable. */
.dark .field label { color: #fff; }
.dark .field select,
.dark .field input {
  color-scheme: dark;
  background-color: rgba(255,255,255,.07);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.dark .field select option { background-color: #1C1D1C; color: #fff; }
.dark .field select:focus,
.dark .field input:focus {
  background-color: rgba(255,255,255,.12);
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(167,171,161,.25);
}
/* Range slider on dark */
.dark input[type=range] { color-scheme: dark; accent-color: var(--sage); }
input[type=range] { accent-color: var(--sage-deep); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 380px at 82% 8%, rgba(167,171,161,.22), transparent 65%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 2; text-align: center; }
.cta-band .h2 { color: #fff; margin-bottom: 1rem; }
.cta-band .lede { color: rgba(255,255,255,.68); margin-inline: auto; max-width: 55ch; margin-bottom: 2.2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: #151615; color: rgba(255,255,255,.58); font-size: .89rem; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3rem,5vw,4.5rem); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }
.foot h4 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 1.1rem; font-weight: 500; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.foot a { transition: color .25s; }
.foot a:hover { color: #fff; }
.foot .foot-blurb { max-width: 34ch; margin-top: 1.1rem; line-height: 1.6; }
.foot-social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75);
  transition: color .25s, background-color .25s, border-color .25s; }
.foot-social a:hover { color: #151615; background: #fff; border-color: #fff; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem;
  color: rgba(255,255,255,.42);
}
.foot-bottom a:hover { color: #fff; }
/* "Website by MP Launch" sits with Privacy and Terms, in their type (28 Sep
   2026; it used to be a full-width dark ribbon under the footer). Never split
   across two lines on a phone. */
.foot-credit { white-space: nowrap; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.phero { background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.phero .wrap { padding-block: clamp(3rem, 6vw, 5.25rem); }
.phero .display { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin-bottom: 1.1rem; }
.phero .lede { max-width: 62ch; }
.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { opacity: .45; }

/* ==========================================================================
   Reveal animation — PROGRESSIVE ENHANCEMENT
   Content is visible by default. It is only hidden once the inline head script
   has confirmed JS is running, and a watchdog in app.js reveals everything if
   IntersectionObserver never fires. A visitor can never get a blank page.
   ========================================================================== */
.rv { opacity: 1; transform: none; }
html.js .rv {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card:hover, .plan:hover { transform: none !important; }
}

/* ==========================================================================
   PREMIUM LAYER
   Editorial devices that lift the build from "clean" to "expensive":
   grain, marquee, sticky process, before/after, pull quotes, journal,
   oversized footer wordmark, margin numerals, staggered heading reveal.
   ========================================================================== */

/* ---- Grain. Tactile depth on dark bands. Pure CSS, no image request. ---- */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* ---- Section numeral in the margin. Editorial signature. ---- */
.sec-num {
  font-family: var(--serif); font-size: .82rem; letter-spacing: .08em;
  color: var(--sage-deep); margin-bottom: .9rem; display: block;
}
.sec-num i { font-style: normal; opacity: .45; }
.dark .sec-num { color: var(--sage); }

/* ---- Marquee. Infinite suburb ticker. ---- */
.marquee {
  overflow: hidden; border-block: 1px solid rgba(255,255,255,.13);
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
html.js .marquee-track { animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-inline: clamp(.75rem, 1.6vw, 1.4rem);
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  letter-spacing: -.025em; color: rgba(255,255,255,.34);
  white-space: nowrap; transition: color .4s var(--ease);
}
.marquee-item:hover { color: #fff; }
.marquee-item::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage); opacity: .5; flex: none;
}
@media (prefers-reduced-motion: reduce) { html.js .marquee-track { animation: none; } }

/* ---- Sticky process. Left pins, right scrolls. ---- */
.sticky-wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.sticky-side { position: sticky; top: 120px; }
.sticky-steps { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
.pstep { display: grid; grid-template-columns: 74px 1fr; gap: clamp(1rem,2vw,1.8rem); align-items: start; }
.pstep-n {
  font-family: var(--serif); font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: .85;
  color: transparent; -webkit-text-stroke: 1px var(--sage-deep);
  letter-spacing: -.04em; transition: color .5s var(--ease);
}
.dark .pstep-n { -webkit-text-stroke-color: rgba(255,255,255,.42); }
.pstep:hover .pstep-n, .pstep.in .pstep-n { color: var(--sage); -webkit-text-stroke-color: transparent; }
.pstep h3 { margin-bottom: .6rem; }
.pstep p { color: var(--muted); font-size: .96rem; }
.dark .pstep p { color: rgba(255,255,255,.62); }
.pstep + .pstep { padding-top: clamp(2.25rem,5vw,4rem); border-top: 1px solid var(--line); }
.dark .pstep + .pstep { border-top-color: rgba(255,255,255,.13); }
@media (max-width: 900px) {
  .sticky-wrap { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .pstep { grid-template-columns: 56px 1fr; }
}

/* ---- Before / after slider ---- */
.ba {
  position: relative; border-radius: var(--rad-lg); overflow: hidden;
  aspect-ratio: 3/2; box-shadow: var(--shadow-lg); background: var(--sage-pale);
  cursor: ew-resize; user-select: none; touch-action: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: rgba(255,255,255,.95); transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(28,29,28,.16); pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-md); color: var(--ink);
}
.ba-tag {
  position: absolute; bottom: 1rem; z-index: 3;
  font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(28,29,28,.72); color: #fff; padding: .42rem .85rem; border-radius: 100px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.ba-tag.l { left: 1rem; } .ba-tag.r { right: 1rem; }

/* ---- Pull quote. Magazine device. ---- */
.pullquote { position: relative; padding-left: clamp(2.5rem, 6vw, 5rem); }
.pullquote::before {
  content: "\201C"; position: absolute; left: 0; top: -.04em;
  font-family: var(--serif); font-size: clamp(5rem, 12vw, 9rem);
  line-height: 1; color: var(--sage); opacity: .34;
}
.pullquote p {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.26; letter-spacing: -.028em;
}
@media (max-width: 620px) { .pullquote { padding-left: 0; padding-top: 2.6rem; } }

/* ---- Journal cards ---- */
.jcard { display: flex; flex-direction: column; group: none; }
.jcard-img {
  border-radius: var(--rad-lg); overflow: hidden; aspect-ratio: 3/2;
  background: var(--sage-pale); margin-bottom: 1.25rem;
}
.jcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jcard:hover .jcard-img img { transform: scale(1.05); }
.jcard-meta {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-deep);
}
.jcard-meta span:last-child { color: var(--muted); opacity: .8; }
.jcard h3 { margin-bottom: .55rem; transition: opacity .3s; }
.jcard:hover h3 { opacity: .62; }
.jcard p { font-size: .93rem; color: var(--muted); }

/* ---- Oversized footer wordmark ----
   Sits BEHIND the footer content as a watermark rather than below it, and is
   sized to the footer's own width so the full name always fits. */
.foot { position: relative; overflow: hidden; }
.foot > .wrap { position: relative; z-index: 1; }
.foot-mark {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  pointer-events: none; overflow: hidden; text-align: center;
  container-type: inline-size;
}
.foot-mark span {
  display: block; font-family: var(--serif); font-weight: 400;
  /* Sized to FIT THE FOOTER, not the screen (fixed 28 Sep 2026, second time
     the last "n" got sliced off). The old min(11.2vw, 190px) followed the
     VIEWPORT, but the footer stops growing at 1240px, so on any screen wider
     than ~1650px the name hit 190px, measured 1,265px against a 1,240px box,
     and lost 25px. The switch to their real font (Arpona, wider than
     Fraunces) is what pushed it over.
     Measured "Guest Guardian" at this letter-spacing: Arpona 6.66em, Arial
     6.43em, Outfit 6.39em. 14.5cqw = 97% of the footer in Arpona, and
     narrower in either fallback, so it cannot clip at any width.
     The vw line is only for browsers without container units. */
  font-size: min(10.8vw, 180px);
  font-size: 14.5cqw;
  line-height: .8;
  letter-spacing: -.045em; white-space: nowrap;
  color: rgba(255,255,255,.055);
  transform: translateY(.16em);
}
/* Room for the watermark to breathe under the content */
.foot .foot-bottom { padding-bottom: clamp(4rem, 11vw, 9rem); border-bottom: 0; }

/* ---- Staggered word reveal on headings ---- */
.rw .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  /* The mask is needed for the slide-up, but a 1.08 line-height box cuts
     the tails off y, g and p. Extend below the baseline and take the space
     back, so nothing clips and nothing shifts. */
  padding-bottom: .18em; margin-bottom: -.18em;
}
.rw .w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%); transition: transform .85s var(--ease);
}
html:not(.js) .rw .w > i { transform: none; }
.rw.in .w > i { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rw .w > i { transform: none !important; transition: none !important; } }

/* ---- Warm image treatment ---- */
.img-warm { position: relative; }
.img-warm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(167,171,161,.20), rgba(28,29,28,.14));
  mix-blend-mode: multiply;
}

/* ---- Offset image pair (editorial) ---- */
.img-pair { position: relative; padding-bottom: clamp(3rem, 8vw, 6rem); padding-right: clamp(2rem, 6vw, 5rem); }
.img-pair .a { border-radius: var(--rad-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--sage-pale); box-shadow: var(--shadow-md); }
.img-pair .a img { width: 100%; height: 100%; object-fit: cover; }
.img-pair .b {
  position: absolute; right: 0; bottom: 0; width: 54%; aspect-ratio: 1;
  border-radius: var(--rad-lg); overflow: hidden; background: var(--sand);
  box-shadow: var(--shadow-lg); border: 6px solid var(--paper);
}
.dark .img-pair .b { border-color: var(--ink); }
.img-pair .b img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Feature list with hairline rules + hover wash ---- */
.frow {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
  padding: 1.15rem 1rem 1.15rem 0; border-bottom: 1px solid var(--line-soft);
  transition: background .4s var(--ease), padding-left .4s var(--ease);
}
.frow:hover { background: rgba(167,171,161,.09); padding-left: 1rem; }
.dark .frow { border-bottom-color: rgba(255,255,255,.11); }
.dark .frow:hover { background: rgba(255,255,255,.05); }
.frow .k { font-family: var(--serif); color: var(--sage-deep); font-size: .9rem; letter-spacing: .05em; }
.dark .frow .k { color: var(--sage); }
.frow .v strong { font-weight: 500; }
.frow .v em { font-style: normal; color: var(--muted); display: block; font-size: .9rem; margin-top: .2rem; }
.dark .frow .v em { color: rgba(255,255,255,.58); }

/* ---- Accent rule under section heads ---- */
.rule-accent { width: 46px; height: 2px; background: var(--sage); margin-bottom: 1.6rem; }
.rule-accent.centered { margin-inline: auto; }

/* Utilities */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ==========================================================================
   ADDITIONS — 7 Aug 2026, built against Nick's wishlist email.
   1. Gated income estimator      2. Owner portal + installable app
   3. Per-property pages, direct links and the embed widget
   ========================================================================== */

/* ---- Topbar owner login ---- */
.topbar .tb-owner {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .2rem .7rem; border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px; line-height: 1.9;
}
.topbar .tb-owner:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.topbar .tb-owner svg { flex: none; opacity: .8; }
@media (max-width: 520px) { .topbar .tb-owner span { display: none; } .topbar .tb-owner { padding: .2rem .5rem; } }

.book-note-dark {
  background: rgba(255,255,255,.06); border-left-color: var(--sage);
  color: rgba(255,255,255,.72);
}
.book-note-dark strong, .book-note-dark b { color: #fff; }

/* ==========================================================================
   1. GATED ESTIMATOR
   ========================================================================== */
.estwrap { position: relative; }
/* The gate REPLACES the figures rather than floating over them. An overlay left
   the blurred numbers showing through behind the card, which looked like a
   rendering fault rather than a deliberate lock. Straight swap: form, then
   figures. */
.estwrap.is-locked .stats { display: none; }
.estwrap:not(.is-locked) .estgate { display: none; }

.estgate { display: block; }
.estgate-card {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rad-lg);
  padding: 1.5rem 1.5rem 1.35rem;
  text-align: center;
}
.estgate-ico {
  width: 38px; height: 38px; margin: 0 auto .75rem; border-radius: 100px;
  display: grid; place-items: center;
  background: rgba(167,171,161,.18); color: var(--sage);
}
.estgate-h { font-family: var(--serif); font-size: 1.28rem; color: #fff; margin-bottom: .4rem; }
.estgate-p { font-size: .85rem; color: rgba(255,255,255,.62); margin-bottom: 1.15rem; }
.estform { text-align: left; }
.estform .field { margin-bottom: .75rem; }
.estform .field-row { gap: .75rem; margin-bottom: 0; }
.estform label { color: rgba(255,255,255,.6); font-size: .72rem; }
.estform input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
  color: #fff; padding: .6rem .8rem;
}
.estform input::placeholder { color: rgba(255,255,255,.3); }
.estform input:focus { border-color: var(--sage); background: rgba(255,255,255,.11); }
.estform input.is-bad { border-color: var(--alert); }
.estgate-fine { font-size: .72rem; color: rgba(255,255,255,.4); text-align: center; margin: .7rem 0 0; }

/* Result card (16 Oct 2026): headline nightly rate, month + year beneath. */
.estwrap.is-locked .estres { display: none; }
.estres {
  margin-top: 1.1rem; border-radius: var(--rad-lg);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  overflow: hidden; text-align: center;
}
.estres-hero { padding: 1.35rem 1rem 1.1rem; }
.estres-k {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.estres-n {
  font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 3.1rem); line-height: 1.05;
  color: #fff; margin-top: .35rem; font-variant-numeric: tabular-nums;
}
.estres-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.12); }
.estres-cell { padding: .95rem .75rem 1.05rem; }
.estres-cell + .estres-cell { border-left: 1px solid rgba(255,255,255,.12); }
.estres-m {
  font-family: var(--serif); font-size: clamp(1.25rem, 3.4vw, 1.55rem); line-height: 1.1;
  color: #fff; margin-top: .3rem; font-variant-numeric: tabular-nums;
}
#est-basis { font-size: .74rem; line-height: 1.55; margin-top: .9rem !important; }

.estdone {
  display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem;
  padding: .7rem .9rem; border-radius: var(--rad);
  background: rgba(167,171,161,.16); border-left: 2px solid var(--sage);
  font-size: .82rem; color: rgba(255,255,255,.8);
}
.estdone svg { flex: none; color: var(--sage); margin-top: .18rem; }
.estdone b { color: #fff; font-weight: 500; }

/* ==========================================================================
   2. OWNER PORTAL
   ========================================================================== */
.demo-hint {
  display: flex; align-items: flex-start; gap: .55rem; margin-top: 1.15rem;
  padding: .7rem .85rem; border-radius: var(--rad);
  background: rgba(167,171,161,.16); border-left: 2px solid var(--sage-deep);
  font-size: .8rem; color: var(--muted); line-height: 1.5;
}
.demo-hint svg { flex: none; color: var(--sage-deep); margin-top: .1rem; }

.owner-top { background: var(--ink); color: #fff; padding: 2.25rem 0 0; }
.owner-top .eyebrow { color: var(--sage); }
.owner-top .muted { color: rgba(255,255,255,.5); }
.owner-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.owner-top-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.owner-top-actions .btn-ghost {
  border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.86);
  padding: .5rem .9rem; font-size: .82rem; gap: .45rem;
}
.owner-top-actions .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }

.owner-tabs { display: flex; gap: .25rem; margin-top: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.owner-tabs::-webkit-scrollbar { display: none; }
.owner-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.55); padding: .7rem 1.05rem; font-size: .9rem;
  white-space: nowrap; transition: color .2s, border-color .2s;
}
.owner-tab:hover { color: #fff; }
.owner-tab.is-on { color: #fff; border-bottom-color: var(--sage); }

.owner-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .owner-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .owner-kpis { grid-template-columns: 1fr; } }
.okpi { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 1.1rem 1.15rem; }
.okpi-l { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.okpi-l svg { flex: none; color: var(--sage-deep); }
.okpi-n { font-family: var(--serif); font-size: 1.85rem; line-height: 1.1; margin: .5rem 0 .2rem; }
.okpi-s { font-size: .78rem; color: var(--muted); }

.ocard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 1.35rem 1.4rem; }
.ocard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.ocard-head .h3 { font-size: 1.06rem; }

.ochart { display: flex; align-items: flex-end; gap: clamp(.35rem, 2vw, 1rem); height: 190px; }
.ochart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ochart-val { font-size: .74rem; color: var(--muted); margin-bottom: .35rem; }
.ochart-bar {
  position: relative; width: 100%; max-width: 54px; margin-top: auto;
  background: linear-gradient(180deg, var(--sage) 0%, var(--sage-deep) 100%);
  border-radius: 3px 3px 0 0; min-height: 6px;
}
.ochart-occ { position: absolute; left: -3px; right: -3px; height: 2px; background: var(--ink-2); border-radius: 2px; }
.ochart-lab { font-size: .76rem; color: var(--muted); margin-top: .45rem; }

.obar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.obar-lab { font-size: .84rem; }
.obar-track { height: 7px; background: rgba(28,29,28,.07); border-radius: 100px; overflow: hidden; }
.obar-fill { display: block; height: 100%; border-radius: 100px; }
.obar-n { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 460px) { .obar-row { grid-template-columns: 1fr auto; } .obar-track { grid-column: 1 / -1; } }

.otbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.otbl td, .otbl th { padding: .58rem 0; border-bottom: 1px solid var(--line-soft); text-align: left; }
.otbl th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 400; }
.otbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.otbl .neg { color: var(--muted); }
.otbl tr.sep td { border-top: 1px solid var(--line); }
.otbl tr.tot td { border-bottom: 0; padding-top: .8rem; font-weight: 500; font-size: 1rem; }
.otbl tr.tot td.num { color: var(--ink); }
.otbl-wide th, .otbl-wide td { padding: .7rem .6rem; }
.otbl-wide th:first-child, .otbl-wide td:first-child { padding-left: 0; }
.otbl-wide th:last-child, .otbl-wide td:last-child { padding-right: 0; }
.otbl .tlink { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; }

.pill { display: inline-block; padding: .18rem .6rem; border-radius: 100px; font-size: .74rem; background: rgba(52,53,52,.1); color: var(--ink-2); }
.pill-ok { background: rgba(167,171,161,.24); color: var(--sage-deep); }

.ocal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ocal-dow { text-align: center; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: .3rem; }
.ocal-pad { aspect-ratio: 1; }
.ocal-day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--rad);
  font-size: .82rem; color: var(--ink); background: rgba(28,29,28,.035);
  font-variant-numeric: tabular-nums;
}
.ocal-day.is-booked { background: var(--sage-deep); color: #fff; }

.obook { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.obook:last-child { border-bottom: 0; padding-bottom: 0; }
.obook-d { font-size: .92rem; font-weight: 500; }
.obook-s { font-size: .78rem; color: var(--muted); }
.obook-r { text-align: right; }
.obook-r span { display: block; font-size: .76rem; color: var(--muted); }
.obook-r b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. PROPERTY PAGES, DIRECT LINKS, EMBED
   ========================================================================== */
.phero-tight { padding-bottom: 0; }

.prop-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 880px) { .prop-hero { grid-template-columns: 1fr; } }
.prop-hero-img { border-radius: var(--rad-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.prop-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.prop-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.prop-facts span { font-size: .78rem; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); }

.propbook { margin-top: 1.4rem; padding: 1.15rem 1.2rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rad-lg); box-shadow: var(--shadow-sm); }
.propbook-row { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: .6rem; margin-bottom: .8rem; }
@media (max-width: 520px) { .propbook-row { grid-template-columns: 1fr 1fr; } }
.propbook-hint { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font-size: .78rem; color: var(--muted); }
.propbook-hint svg { flex: none; color: var(--sage-deep); }

.prop-share { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 1.35rem 1.4rem; }

.copyrow { display: flex; gap: .5rem; margin-top: .7rem; }
.copyrow input {
  flex: 1; min-width: 0; padding: .55rem .75rem; font-size: .82rem;
  border: 1px solid var(--line); border-radius: var(--rad);
  background: rgba(28,29,28,.03); color: var(--muted); font-family: var(--sans);
}
.copyrow .btn { flex: none; padding: .55rem .9rem; font-size: .82rem; gap: .4rem; }
.btn-copy.is-done { border-color: var(--sage-deep); color: var(--sage-deep); }

.share-strip {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1.1rem 1.3rem;
  background: rgba(167,171,161,.14); border-radius: var(--rad-lg);
}
.share-strip > svg { flex: none; color: var(--sage-deep); }
.share-strip > div { flex: 1; min-width: 220px; font-size: .88rem; }
.share-strip b { display: block; font-weight: 500; color: var(--ink); }
.share-strip span { color: var(--muted); }
.share-strip .btn { flex: none; }

.linklist { display: flex; flex-direction: column; gap: .8rem; }
.linkrow {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 1.1rem; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: .9rem 1.1rem;
}
.linkrow-img { border-radius: var(--rad); overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.linkrow-img img { width: 100%; height: 100%; object-fit: cover; }
.linkrow-body { min-width: 0; }
.linkrow-go { flex: none; }
@media (max-width: 720px) {
  .linkrow { grid-template-columns: 74px 1fr; }
  .linkrow-go { grid-column: 1 / -1; justify-content: center; }
}

.embed-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (max-width: 880px) { .embed-grid { grid-template-columns: 1fr; } }
.embed-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rad-lg); padding: 1.35rem 1.4rem; }
.embed-panel label { color: rgba(255,255,255,.6); }
.embed-panel select { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.embed-panel select option { color: var(--ink); }
.embed-code-label { display: flex; align-items: center; gap: .45rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-bottom: .5rem; }
.embed-code-label svg { flex: none; color: var(--sage); }
.embed-code {
  width: 100%; padding: .8rem .9rem; margin-bottom: .8rem; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.6; color: var(--sage-pale);
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--rad); white-space: pre; overflow-x: auto;
}
.embed-code:focus { outline: 2px solid var(--sage); outline-offset: 1px; }

.embed-preview { border-radius: var(--rad-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.embed-preview-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .85rem; background: #EDECE8; border-bottom: 1px solid rgba(28,29,28,.1); }
.embed-preview-bar .dot { width: 9px; height: 9px; border-radius: 100px; background: rgba(28,29,28,.18); flex: none; }
.embed-preview-url { margin-left: .6rem; font-size: .74rem; color: var(--muted); background: #fff; border-radius: 100px; padding: .18rem .75rem; }
.embed-preview-body { padding: 1.2rem 1.3rem 1.4rem; }
.embed-preview-fake { font-size: .84rem; color: #B4B6B1; margin: 0 0 .9rem; }
.embed-preview-fake:last-child { margin: .9rem 0 0; }
.embed-preview iframe { width: 100%; height: 470px; border: 0; display: block; }
@media (max-width: 520px) { .embed-preview iframe { height: 430px; } }

/* ==========================================================================
   MANAGER / BACK OFFICE — added 7 Aug 2026.
   Guest Guardian's own side: what they control vs what Hostaway owns.
   ========================================================================== */

.role-switch {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  text-align: center;
}
.role-switch > span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .6rem; }
.role-switch .btn { width: 100%; justify-content: center; gap: .45rem; }

.sync-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: 100px; font-size: .8rem;
  background: rgba(167,171,161,.16); color: var(--sage);
  border: 1px solid rgba(167,171,161,.28);
}
.sync-pill svg { flex: none; }

/* ---- the two-kinds-of-data legend ---- */
.mg-legend {
  display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.5rem;
  padding: 1rem 1.25rem; border-radius: var(--rad-lg);
  background: rgba(167,171,161,.14); border-left: 2px solid var(--sage-deep);
  font-size: .87rem; color: var(--muted); line-height: 1.6;
}
.mg-legend > svg { flex: none; color: var(--sage-deep); margin-top: .15rem; }
.mg-legend b { color: var(--ink); font-weight: 500; }

.tag {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  padding: .12rem .5rem; border-radius: 100px;
  font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.tag svg { width: 11px; height: 11px; }
.tag-auto { background: rgba(28,29,28,.08); color: var(--muted); }
.tag-web  { background: rgba(52,53,52,.1); color: var(--ink-2); }
b.tag-auto, b.tag-web { font-weight: 500; padding: .1rem .45rem; border-radius: 100px; }

/* ---- one property row ---- */
.mgprop {
  display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--rad-lg); padding: 1.25rem; margin-bottom: 1rem;
}
@media (max-width: 760px) { .mgprop { grid-template-columns: 1fr; } }
.mgprop-img { border-radius: var(--rad); overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.mgprop-img img { width: 100%; height: 100%; object-fit: cover; }
.mgprop-body { min-width: 0; }
.mgprop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mgprop-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 1rem; }
.mgprop-facts span {
  font-size: .74rem; padding: .2rem .6rem; border-radius: 100px;
  background: rgba(28,29,28,.05); color: var(--muted);
}
.mgprop .field { margin-bottom: .8rem; }
.mgprop .field label { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.mgprop textarea {
  width: 100%; padding: .6rem .8rem; font: inherit; font-size: .88rem;
  border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--paper); color: var(--ink); resize: vertical;
}
.mgprop textarea:focus, .mgprop select:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.mgprop-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.btn-save { padding: .45rem .9rem; font-size: .82rem; }
.btn-save.is-done { border-color: var(--sage-deep); color: var(--sage-deep); }

/* ---- toggles ---- */
.mgfields { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.mgtoggle { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.mgtoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mgtoggle-ui {
  width: 38px; height: 22px; border-radius: 100px; flex: none;
  background: rgba(28,29,28,.16); position: relative; transition: background .2s var(--ease);
}
.mgtoggle-ui::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 100px; background: #fff;
  transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.mgtoggle input:checked + .mgtoggle-ui { background: var(--sage-deep); }
.mgtoggle input:checked + .mgtoggle-ui::after { transform: translateX(16px); }
.mgtoggle input:focus-visible + .mgtoggle-ui { outline: 2px solid var(--sage); outline-offset: 2px; }
.mgtoggle-lab { font-size: .86rem; }

.chip {
  display: inline-block; padding: .14rem .55rem; margin: .1rem .15rem .1rem 0;
  border-radius: 100px; font-size: .74rem;
  background: rgba(167,171,161,.22); color: var(--ink-2);
}

/* ---- the two routes ---- */
.mgroute { position: relative; padding-top: 1.6rem; }
.mgroute-tag {
  position: absolute; top: -.7rem; left: 1.35rem;
  padding: .2rem .7rem; border-radius: 100px;
  font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: var(--sage-deep); color: #fff;
}
.mgroute-tag-b { background: var(--muted); }
.mgroute-a { border-color: rgba(124,131,119,.45); }
.mgsteps { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .89rem; }
.mgsteps li { margin-bottom: .45rem; padding-left: .2rem; }
.mgsteps li::marker { color: var(--sage-deep); font-weight: 500; }

/* ==========================================================================
   ADD A PROPERTY — safe-mode form, 8 Aug 2026
   ========================================================================== */

.safebar {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.25rem; border-radius: var(--rad-lg);
  background: rgba(167,171,161,.16); border-left: 3px solid var(--sage-deep);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.safebar > svg { flex: none; color: var(--sage-deep); margin-top: .15rem; }
.safebar > div { flex: 1; min-width: 0; font-size: .87rem; line-height: 1.6; }
.safebar b { display: block; color: var(--ink); font-weight: 500; margin-bottom: .2rem; }
.safebar span { color: var(--muted); }
.safebar-pill {
  flex: none; align-self: center; padding: .25rem .75rem; border-radius: 100px;
  background: var(--sage-deep); color: #fff; font-size: .72rem;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.safebar.is-live { background: rgba(192,43,10,.09); border-left-color: var(--alert); }
.safebar.is-live > svg { color: var(--alert); }
.safebar.is-live .safebar-pill { background: var(--alert); }
.safebar.is-live .safebar-pill::after { content: ' mode off'; }

/* ---- the live switch ---- */
.livecheck {
  display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
  padding: .9rem 1rem; border-radius: var(--rad);
  border: 1px solid var(--line); background: rgba(28,29,28,.02);
  transition: border-color .2s, background .2s;
}
.livecheck:hover { border-color: rgba(192,43,10,.4); }
.livecheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.livecheck-ui {
  flex: none; width: 20px; height: 20px; margin-top: .1rem; border-radius: 4px;
  border: 2px solid var(--muted); position: relative; transition: all .18s var(--ease);
}
.livecheck input:checked + .livecheck-ui { background: var(--alert); border-color: var(--alert); }
.livecheck input:checked + .livecheck-ui::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.livecheck input:focus-visible + .livecheck-ui { outline: 2px solid var(--sage); outline-offset: 2px; }
.livecheck-txt { font-size: .87rem; line-height: 1.55; }
.livecheck-txt b { display: block; margin-bottom: .15rem; }
.livecheck-txt span { color: var(--muted); font-size: .82rem; }
.livecheck input:checked ~ .livecheck-txt b { color: var(--alert); }

.btn-danger { background: var(--alert); border-color: var(--alert); color: #fff; }
.btn-danger:hover { background: #A32409; border-color: #A32409; }

/* ---- what you get back ---- */
.ap-created {
  padding: 1rem 1.15rem; border-radius: var(--rad);
  background: rgba(167,171,161,.14); margin-bottom: 1.25rem;
}
.ap-created h3 { font-family: var(--serif); font-size: 1.2rem; margin: .35rem 0 .3rem; }
.ap-created p { margin: 0; font-size: .84rem; color: var(--muted); }
.ap-badge {
  display: inline-block; padding: .16rem .6rem; border-radius: 100px;
  background: var(--sage-deep); color: #fff;
  font-size: .68rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
}
.embed-code-light {
  background: rgba(28,29,28,.04); border-color: var(--line); color: var(--ink-2);
}
.ap-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.ap-actions .btn { padding: .45rem .9rem; font-size: .82rem; }

.role-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 460px) { .role-btns { grid-template-columns: 1fr; } }
.role-btns .btn { flex-direction: column; align-items: center; gap: .3rem; padding: .85rem .7rem; text-align: center; height: 100%; }
.role-btns .btn svg { color: var(--sage-deep); }
.role-btns .btn span { font-size: .86rem; }
.role-btns .btn em { font-style: normal; font-size: .72rem; color: var(--muted); line-height: 1.35; }

/* ---- one login page, three destinations ---- */
/* Pushed to the far right and separated, so it reads as a different kind of
   action to the two calls-to-action rather than a third button. */
.nav-signin {
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  margin-left:1.1rem; padding:.45rem .95rem; font-size:.85rem; font-weight:500;
  /* Had only a hairline left-divider, so it read as loose text rather than
     something you press. Given its own outline. */
  color:var(--ink-2); border:1px solid rgba(28,29,28,.28); border-radius:100px;
  transition:color .2s, background .2s, border-color .2s; }
.nav-signin:hover { color:var(--ink); background:rgba(28,29,28,.06); border-color:var(--ink-2); }
.nav-signin svg { opacity:.85; }
/* Signed in, the same control becomes the way out, and says so in red. */
.nav-signin.is-out { color:var(--alert); border-color:rgba(192,43,10,.45); }
.nav-signin.is-out:hover { color:#fff; background:var(--alert); border-color:var(--alert); }
.nav-signin svg { opacity:.7; }
@media (max-width:1040px){ .nav-signin { display:none; } }
.demo-roles { margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid var(--line); }
.demo-roles-lab { display:block; text-align:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.65rem; }
.demo-roles-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
@media (max-width:420px){ .demo-roles-btns { grid-template-columns:1fr; } }
.demo-roles-btns button { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.6rem .4rem; font-size:.76rem; line-height:1.3; text-align:center; color:var(--muted); background:rgba(28,29,28,.03); border:1px solid var(--line); border-radius:var(--rad); transition:all .18s var(--ease); }
.demo-roles-btns button:hover { color:var(--ink); border-color:var(--sage-deep); background:rgba(167,171,161,.14); }
.demo-roles-btns svg { color:var(--sage-deep); }

/* ---- phone in the header, now the black strip above it is gone ---- */
.nav-phone { display:inline-flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:500; color:var(--ink); padding:.45rem .8rem; border-radius:100px; transition:background .2s; }
.nav-phone:hover { background:rgba(28,29,28,.05); }
.nav-phone svg { color:var(--sage-deep); }
@media (max-width:1180px){ .nav-phone span { display:none; } }
@media (max-width:900px){ .nav-phone { display:none; } }

/* ==========================================================================
   LEADS TABLE — Guest Guardian only
   ========================================================================== */
.lead-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.lead-tools input[type="search"], .lead-tools select {
  padding: .45rem .7rem; font-size: .84rem; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--paper); color: var(--ink);
}
.lead-tools input[type="search"] { min-width: 210px; }
.lead-tools input:focus, .lead-tools select:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.lead-tools .btn { padding: .45rem .8rem; font-size: .82rem; gap: .35rem; }
@media (max-width: 620px) {
  .lead-tools { width: 100%; }
  .lead-tools input[type="search"] { flex: 1; min-width: 0; }
}

.leadtbl { min-width: 860px; }
.leadtbl th { padding: 0; }
.th-sort {
  display: inline-flex; align-items: center; gap: .3rem;
  width: 100%; padding: .7rem .6rem .7rem 0; background: none; border: 0;
  font: inherit; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: left; transition: color .18s;
}
.th-sort:hover { color: var(--ink); }
.th-arrow { width: 0; height: 0; opacity: 0; transition: opacity .18s; }
.th-sort.is-asc .th-arrow, .th-sort.is-desc .th-arrow {
  opacity: 1; border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.th-sort.is-asc .th-arrow { border-bottom: 5px solid var(--sage-deep); }
.th-sort.is-desc .th-arrow { border-top: 5px solid var(--sage-deep); }
.th-sort.is-asc, .th-sort.is-desc { color: var(--ink); }

.leadtbl tbody tr:hover { background: rgba(167,171,161,.09); }
.lead-when { display: block; font-weight: 500; font-size: .86rem; }
.lead-time { display: block; font-size: .74rem; color: var(--muted); }
.lead-em { display: block; font-size: .82rem; }
.lead-ph { display: block; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lead-note { font-size: .84rem; color: var(--muted); max-width: 260px; }

.src {
  display: inline-block; padding: .16rem .55rem; border-radius: 100px;
  font-size: .74rem; white-space: nowrap;
  background: rgba(28,29,28,.06); color: var(--muted);
}
.src-estimator { background: rgba(52,53,52,.1); color: var(--ink-2); }
.src-appraisal { background: rgba(167,171,161,.26); color: var(--sage-deep); }
.src-booking { background: rgba(124,131,119,.18); color: var(--sage-deep); }
.src-phone { background: rgba(28,29,28,.07); color: var(--muted); }
.pill-mute { background: rgba(28,29,28,.07); color: var(--muted); }

/* ---- photo picker on Add a property ---- */
.dropzone { display:flex; flex-direction:column; align-items:center; gap:.25rem; cursor:pointer;
  padding:1.4rem 1rem; border:1.5px dashed var(--line); border-radius:var(--rad-lg);
  background:rgba(28,29,28,.02); text-align:center; transition:all .2s var(--ease); }
.dropzone:hover, .dropzone.is-over { border-color:var(--sage-deep); background:rgba(167,171,161,.12); }
.dropzone svg { color:var(--sage-deep); margin-bottom:.2rem; }
.dz-main { font-size:.88rem; font-weight:500; color:var(--ink); }
.dz-sub { font-size:.76rem; color:var(--muted); }
.dz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem; margin-top:.7rem; }
.dz-item { position:relative; margin:0; aspect-ratio:4/3; border-radius:var(--rad); overflow:hidden; background:var(--sand); }
.dz-item img { width:100%; height:100%; object-fit:cover; }
.dz-item figcaption { position:absolute; left:4px; bottom:4px; padding:.1rem .4rem; border-radius:100px;
  background:rgba(28,29,28,.78); color:#fff; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; }
.dz-item button { position:absolute; top:3px; right:3px; width:20px; height:20px; border:0; border-radius:50%;
  background:rgba(28,29,28,.72); color:#fff; font-size:14px; line-height:1; cursor:pointer; }
.dz-item button:hover { background:var(--alert); }
.ap-cover { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--rad); margin:.6rem 0 .4rem; }
.ap-photocount { font-size:.78rem; color:var(--muted); margin:0 0 .3rem !important; }

.lc-note { display:inline; color:var(--sage-deep); }

/* ---- co-branded vs white-label picker ---- */
.wlpick { display:grid; gap:.5rem; margin-bottom:.8rem; }
.wlopt { display:flex; align-items:flex-start; gap:.65rem; cursor:pointer; padding:.7rem .85rem;
  border:1px solid var(--line); border-radius:var(--rad); background:rgba(28,29,28,.02); transition:all .18s var(--ease); }
.wlopt:hover { border-color:var(--sage-deep); }
.wlopt input { position:absolute; opacity:0; width:0; height:0; }
.wlopt-ui { flex:none; width:17px; height:17px; margin-top:.15rem; border-radius:50%;
  border:2px solid var(--muted); position:relative; transition:all .18s var(--ease); }
.wlopt input:checked + .wlopt-ui { border-color:var(--sage-deep); }
.wlopt input:checked + .wlopt-ui::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sage-deep); }
.wlopt input:focus-visible + .wlopt-ui { outline:2px solid var(--sage); outline-offset:2px; }
.wlopt input:checked ~ .wlopt-txt b { color:var(--sage-deep); }
.wlopt-txt { font-size:.85rem; line-height:1.5; }
.wlopt-txt b { display:block; margin-bottom:.1rem; }
.wlopt-txt span { color:var(--muted); font-size:.79rem; }

/* ---- added-confirmation + inline manage panel ---- */
.addtoast { display:flex; align-items:flex-start; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem;
  padding:.9rem 1.1rem; border-radius:var(--rad); font-size:.86rem; line-height:1.55;
  background:rgba(167,171,161,.2); border-left:3px solid var(--sage-deep); color:var(--muted); }
.addtoast b { color:var(--ink); font-weight:500; }
.addtoast-go { flex:none; margin-left:auto; padding:.35rem .8rem; font-size:.8rem;
  border:1px solid var(--sage-deep); border-radius:100px; background:none; color:var(--sage-deep); cursor:pointer; }
.addtoast-go:hover { background:var(--sage-deep); color:#fff; }
.mgmanage { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.mgmanage input[readonly] { background:rgba(28,29,28,.05); color:var(--muted); cursor:not-allowed; }
.mgmanage .wlpick { margin-bottom:.7rem; }
.mgmanage .wlopt { padding:.5rem .7rem; }
.mgmanage .wlopt-txt { font-size:.8rem; }

/* ---- estimator: one centred card, three steps ---- */
.estcard { max-width:520px; margin-inline:auto; padding:clamp(1.6rem,3.5vw,2.2rem);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rad-lg); text-align:left; }
.estcard [data-est-gate] { text-align:center; }
.estcard .estform { text-align:left; }
.estcard .stats { margin-bottom:0; }
.estcard label { color:rgba(255,255,255,.6); }
.estcard select, .estcard input:not([type=range]) { background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16); color:#fff; }
.estcard select option { color:var(--ink); }
.estback { display:block; width:100%; margin-top:1rem; padding:.5rem; background:none;
  border:0; font:inherit; font-size:.8rem; color:rgba(255,255,255,.5);
  text-decoration:underline; cursor:pointer; }
.estback:hover { color:#fff; }

/* ---- booking panel on a property page ---- */
.bookpanel { margin-top:1.4rem; padding:1.25rem 1.3rem; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--rad-lg); box-shadow:var(--shadow-sm); }
.bp-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.bp-from, .bp-night { font-size:.82rem; color:var(--muted); }
.bp-head b { font-family:var(--serif); font-size:1.5rem; }
.bp-live { display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; color:var(--sage-deep); }
.bp-calbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; font-size:.9rem; font-weight:500; }
.bp-nav { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:none;
  font-size:1.1rem; line-height:1; color:var(--ink); cursor:pointer; }
.bp-nav:hover:not(:disabled) { background:rgba(28,29,28,.05); }
.bp-nav:disabled { opacity:.3; cursor:not-allowed; }
.bp-dow, .bp-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.bp-dow span { text-align:center; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-bottom:.25rem; }
.bp-pad { aspect-ratio:1; }
.bp-day { aspect-ratio:1; display:grid; place-items:center; border:0; border-radius:var(--rad);
  background:rgba(28,29,28,.04); font:inherit; font-size:.82rem; color:var(--ink); cursor:pointer;
  font-variant-numeric:tabular-nums; transition:background .15s; }
.bp-day:hover:not(:disabled) { background:rgba(167,171,161,.4); }
.bp-day.is-taken, .bp-day.is-out { background:transparent; color:rgba(28,29,28,.22);
  text-decoration:line-through; cursor:not-allowed; }
.bp-day.is-start, .bp-day.is-end { background:var(--ink); color:#fff; }
.bp-day.is-mid { background:rgba(167,171,161,.45); }
.bp-hint { margin:.7rem 0 0; font-size:.78rem; color:var(--muted); min-height:1.1em; }
.bp-quote { margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.bp-lines { width:100%; border-collapse:collapse; font-size:.88rem; }
.bp-lines td { padding:.35rem 0; }
.bp-lines td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.bp-lines .bp-total td { padding-top:.6rem; border-top:1px solid var(--line-soft); font-weight:500; font-size:1rem; }
.bp-note { margin:.6rem 0 0; font-size:.75rem; color:var(--muted); text-align:center; }

/* ---- booking: details + confirmation steps ---- */
.bp-back { background:none; border:0; padding:0; font:inherit; font-size:.82rem;
  color:var(--muted); cursor:pointer; text-decoration:underline; }
.bp-back:hover { color:var(--ink); }
.bookpanel input.is-bad, .bookpanel textarea.is-bad { border-color:var(--alert); }
.bookpanel textarea { width:100%; padding:.6rem .8rem; font:inherit; font-size:.9rem;
  border:1px solid var(--line); border-radius:var(--rad); background:var(--paper); resize:vertical; }
.bp-confirmed { text-align:center; }
.bp-confirmed .bp-lines { text-align:left; }
.bp-tick { width:46px; height:46px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
  background:rgba(167,171,161,.28); color:var(--sage-deep); }
.bp-tick svg { width:22px; height:22px; }
.bp-ref { margin:.9rem 0 0; font-size:.8rem; color:var(--muted); }
.bp-ref b { color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.03em; }

/* ---- Payment step. The whole point is that this looks and behaves like a
   checkout while never leaving Guest Guardian's own page, so it gets the same
   restraint as the rest of the site rather than a louder "secure payment" skin. */
.bp-payhead { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.bp-onsite { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--sage-deep);
  background:rgba(167,171,161,.22); border-radius:100px; padding:.2rem .6rem; white-space:nowrap; }
.bp-onsite svg { width:12px; height:12px; }
.bp-sublabel { margin:0 0 .5rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bp-extras { margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.bp-extra { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; margin-bottom:.4rem;
  border:1px solid var(--line); border-radius:var(--rad); cursor:pointer; font-size:.88rem; }
.bp-extra:hover { border-color:var(--ink); }
.bp-extra input { flex:none; accent-color:var(--ink); }
.bp-extra-name { flex:1; }
.bp-extra-price { font-variant-numeric:tabular-nums; color:var(--muted); }
.bp-coupon { margin-top:.9rem; }
.bp-coupon-row { display:flex; gap:.5rem; margin-top:.5rem; }
.bp-coupon-row input { flex:1; min-width:0; padding:.6rem .8rem; font:inherit; font-size:.88rem;
  border:1px solid var(--line); border-radius:var(--rad); background:var(--paper-2); color:var(--ink); }
.bp-coupon-row .btn { padding:.6rem 1rem; font-size:.82rem; flex:none; }
.bp-lines .bp-good td { color:var(--sage-deep); }
.bp-good-text { color:var(--sage-deep); margin:.5rem 0 0; }

/* The demonstration notice. Deliberately impossible to miss: this is a card
   form on a prospect's demo site and nobody should ever wonder whether it is
   about to charge them. */
.bp-demo { margin-top:1rem; padding:.7rem .85rem; border-radius:var(--rad);
  background:rgba(52,53,52,.06); border:1px solid rgba(52,53,52,.22);
  font-size:.78rem; line-height:1.5; color:var(--ink); }
.bp-demo b { color:var(--ink-2); }

.bp-card { margin-top:1rem; }
.bp-card .field { margin-bottom:.7rem; }
.bp-ccwrap { position:relative; }
.bp-ccwrap input { padding-right:4rem; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.bp-brand { position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  font-size:.62rem; letter-spacing:.1em; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:.1rem .35rem; pointer-events:none; }
/* An address bar, quoted inline. The whole payment-options page turns on what
   the guest reads there, so it has to look like a URL and not like prose. */
.pcode { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.82em;
  background:rgba(28,29,28,.05); border:1px solid var(--line-soft); border-radius:5px;
  padding:.1rem .35rem; word-break:break-all; color:var(--ink); }
/* Country code sits against the number as one control. */
.bp-phone { display:flex; gap:.4rem; }
.bp-phone select { flex:none; width:6.2rem; }
.bp-phone input { flex:1; min-width:0; }

.bp-billing { margin-top:.2rem; }
.bp-optin { display:flex; align-items:flex-start; gap:.55rem; margin-top:.9rem;
  font-size:.82rem; line-height:1.5; color:var(--muted); cursor:pointer; }
.bp-optin input { flex:none; margin-top:.15rem; accent-color:var(--ink); }
.bp-agree { margin:.6rem 0 0; font-size:.72rem; line-height:1.55; color:var(--muted); text-align:center; }
.bp-agree a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* The confirmation email, shown as an email rather than described as one. */
.bp-mail { margin-top:1.1rem; text-align:left; border:1px solid var(--line);
  border-radius:var(--rad); overflow:hidden; background:var(--paper); }
.bp-mail-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .75rem; background:rgba(28,29,28,.04); border-bottom:1px solid var(--line-soft); }
.bp-mail-tag { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bp-mail-status { font-size:.66rem; color:var(--ink-2); }
.bp-mail-body { padding:.75rem; }
.bp-mail-line { margin:0 0 .2rem; font-size:.76rem; color:var(--muted); }
.bp-mail-line b { color:var(--ink); font-weight:500; display:inline-block; min-width:3.4rem; }
.bp-mail-sep { height:1px; background:var(--line-soft); margin:.55rem 0; }
.bp-mail-body > div:last-child { white-space:pre-wrap; font-size:.78rem; line-height:1.6; color:var(--ink); }

/* Book Your Stay hero: one line of heading, then the search. Nobody arriving
   here needs persuading that booking a stay is a good idea, so the page stops
   selling and starts working. */
/* 🪤 The space was never on the SECTION. `.phero .wrap` carries
   `padding-block: clamp(3rem, 6vw, 5.25rem)` — 76.8px top AND bottom on a
   desktop — so padding the section did nothing visible and the search bar still
   started 413px down. Override the wrap, which is where the padding lives. */
.phero-book { padding-top: 0; padding-bottom: 0; }
.phero-book .wrap { padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.4rem, 2.5vw, 2rem); }
.phero-book .crumbs { margin-bottom: .8rem; }
.h1-book { font-family: var(--serif); font-weight: 300; letter-spacing: -.03em;
  font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.04; margin: 0 0 .6rem; }
.lede-tight { max-width: 46rem; margin-bottom: clamp(1.2rem, 3vw, 1.7rem); }
.phero-book .bookbar-filter { margin-bottom: 0; }

/* 🪤 SITE-WIDE SPACING. `.phero .wrap` was padding 76.8px top AND bottom on
   every page, which on a laptop pushed the first useful thing on the page down
   past 400px. Halved. The hero still breathes, it just no longer costs half a
   screen before anyone can see what the page is for. */
.phero .wrap { padding-block: clamp(1.6rem, 3vw, 2.6rem) clamp(2rem, 3.5vw, 3rem); }

/* "See what yours could be worth" — the estimator nudge. */
.estnudge { display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--rad-lg); padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 2rem); }
.estnudge > div { flex: 1 1 22rem; min-width: 0; }
.estnudge .btn { flex: none; }
.estnudge-lg { background: var(--sand); border-color: transparent; }

/* ==========================================================================
   THE STATEMENT DOCUMENT. Sized to A4 so what appears on screen is what comes
   out of Print to PDF, rather than a web page that happens to print.
   ========================================================================== */
.bare { background: #E8E7E3; }
.doc-shell { max-width: 900px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gut) 4rem; }
.doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.2rem; }
.doc-bar-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.doc-bar select { padding: .55rem .8rem; font: inherit; font-size: .86rem; border: 1px solid var(--line);
  border-radius: var(--rad); background: #fff; color: var(--ink); }

.doc { background: #fff; color: #14150F; padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: 6px; box-shadow: 0 10px 40px rgba(28,29,28,.10); }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); }
.doc-brand { display: flex; align-items: center; gap: .7rem; }
/* 🪤 The mark is TWO overlapping paths, not a circle. A CSS mask of a radial
   gradient rendered it as a plain filled dot — inline SVG is the only way it
   comes out right, and it still never prints as a missing image box. */
.doc-mark { width: 36px; height: 36px; flex: none; color: var(--ink); display: block;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-biz { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; letter-spacing: -.02em; }
.doc-biz b { font-weight: 600; }
.doc-tag { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .1rem; }
.doc-meta { text-align: right; }
.doc-kind { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.doc-period { font-family: var(--serif); font-size: 1.15rem; margin-top: .15rem; }
.doc-range { font-size: .72rem; color: var(--muted); }

.doc-to { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; padding: 1.1rem 0; }
.doc-to div { display: flex; flex-direction: column; gap: .15rem; }
.doc-to span { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc-to b { font-weight: 500; font-size: .95rem; }

.doc-headline { display: flex; align-items: baseline; justify-content: space-between;
  background: var(--paper); border-radius: 5px; padding: .9rem 1.1rem; margin-bottom: 1.4rem; }
.doc-headline span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc-headline b { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; font-variant-numeric: tabular-nums; }

.doc-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
.doc-tbl th { text-align: left; font-weight: 500; font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); padding: 0 .75rem .45rem 0;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.doc-tbl th:last-child, .doc-tbl td:last-child { padding-right: 0; }
.doc-tbl td { padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc-tbl .num, .doc-run .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-tbl th.num { padding-right: 0; }
.doc-tbl .strong { font-weight: 600; }
.d-sub { display: block; font-size: .68rem; color: var(--muted); }

.doc-run { width: 100%; max-width: 26rem; margin: 1.3rem 0 0 auto; border-collapse: collapse; }
.doc-run td { padding: .4rem 0; font-size: .85rem; }
.doc-run .sub td { color: var(--muted); }
.doc-run .mid td { border-top: 1px solid var(--line-soft); font-weight: 500; }
.doc-run .tot td { border-top: 2px solid var(--ink); padding-top: .6rem;
  font-family: var(--serif); font-size: 1.25rem; }

.doc-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .68rem; line-height: 1.6; color: var(--muted); }
.doc-foot p { margin: 0 0 .3rem; }
.doc-demo { font-style: italic; }

@media print {
  @page { size: A4; margin: 12mm; }
  .bare { background: #fff; }
  .no-print { display: none !important; }
  .doc-shell { max-width: none; padding: 0; }
  .doc { box-shadow: none; border-radius: 0; padding: 0; }
  .doc-tbl { font-size: .72rem; }
  .doc-tbl tr, .doc-run tr { break-inside: avoid; }
  .doc-head { break-after: avoid; }
}

/* ---- Owner statements ---------------------------------------------------- */
.fy-card { display:flex; align-items:center; gap:clamp(1rem,3vw,2rem); flex-wrap:wrap; }
.fy-card > div:first-child { flex:1 1 18rem; min-width:0; }
.fy-nums { display:flex; gap:clamp(1rem,3vw,2rem); flex-wrap:wrap; }
.fy-nums div { display:flex; flex-direction:column; gap:.15rem; }
.fy-nums span { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fy-nums b { font-family:var(--serif); font-size:1.35rem; font-weight:400; font-variant-numeric:tabular-nums; }
.fy-card .btn { flex:none; }
.fy-btns { display:flex; gap:.5rem; flex-wrap:wrap; flex:none; }
.nowrap { white-space:nowrap; }
/* 🪤 Two goes at this failed for two separate reasons, both worth remembering.
   1. `.otbl td, .otbl th` sets `text-align:left`, which is MORE SPECIFIC than a
      bare `.stmt-links`, so the right-align was being thrown away. Qualify with
      the table class or it silently loses.
   2. `display:flex` on a <td> pulls the cell out of table layout, so it stops
      lining up with its own heading. Keep it a table-cell and lay the links out
      as inline-flex inside it. */
/* Centred, not right-aligned. Right-aligning parked the heading above the
   SECOND link, so "Statement" floated over "Month" with "Year" hanging out to
   its left and the whole column reading as jammed into the edge. Centring sits
   the heading over the pair it actually labels. */
.otbl th.stmt-links-h, .otbl td.stmt-links { text-align: center; white-space: nowrap; }
.stmt-links .tlink { display: inline-flex; align-items: center; gap: .35rem; }
.stmt-links .tlink + .tlink { margin-left: 1.4rem; }
/* 🪤 Right-aligning to the table edge left a TWO PIXEL gutter — the links were
   touching the card. A right-aligned last column still needs breathing room. */
.otbl th.stmt-links-h, .otbl td.stmt-links { padding-right: .3rem; padding-left: 1rem; }
/* 🪤 The two icons ship at DIFFERENT sizes (doc is 20px, down is 16px), so
   centring each link independently still left them sitting at different
   heights next to identical text. Force one size for both. */
.stmt-links .tlink svg { width: 15px; height: 15px; flex: none; }

.stmt-head { align-items:flex-start; }
.stmt-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.stmt-actions select { padding:.5rem .7rem; font:inherit; font-size:.85rem; border:1px solid var(--line);
  border-radius:var(--rad); background:var(--paper-2); color:var(--ink); }
.stmt-actions .btn { padding:.5rem .9rem; font-size:.78rem; }
.stmt-period { margin:.2rem 0 1rem; font-size:.8rem; color:var(--muted); }
.stmt-sub { display:block; font-size:.74rem; color:var(--muted); margin-top:.15rem; }
.stmt-flag { color:var(--alert); }
.stmt-tbl td, .stmt-tbl th { vertical-align:top; }
.otbl td.neg, .stmt-run .neg-row td { color:var(--muted); }
.stmt-run { width:100%; margin-top:1rem; border-top:1px solid var(--line); }
.stmt-run td { padding:.45rem 0; font-size:.9rem; }
.stmt-run td.num { text-align:right; font-variant-numeric:tabular-nums; }
.stmt-run .stmt-sub-total td { border-top:1px solid var(--line-soft); font-weight:500; }
.stmt-run .stmt-total td { border-top:2px solid var(--ink); padding-top:.7rem;
  font-family:var(--serif); font-size:1.2rem; }
.stmt-note { margin:.9rem 0 0; }

/* ---- Where every dollar went -------------------------------------------- */
.stackchart { display:flex; align-items:flex-end; gap:clamp(.4rem,1.5vw,1rem); height:200px; margin-top:.5rem; }
.stackcol { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.35rem; height:100%; }
.stackbar { flex:1; width:100%; max-width:52px; display:flex; flex-direction:column-reverse;
  border-radius:5px; overflow:hidden; background:var(--paper); }
.sg { display:block; width:100%; }
.sg-owner { background:var(--ink); }
.sg-comm  { background:var(--sage-deep); }
.sg-clean { background:var(--sage); }
.sg-fee   { background:var(--ink-2); }
.sg-linen { background:var(--sand); }
.stacklab { font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.stackval { font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.stackkey { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:1rem; font-size:.76rem; color:var(--muted); }
.stackkey span { display:inline-flex; align-items:center; gap:.4rem; }
.stackkey i { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* ---- Print: the statement becomes the PDF, nothing else on the page ------ */
@media print {
  body.printing-stmt > *:not(main),
  body.printing-stmt main > *:not(.owner-panel[data-panel="statements"]),
  body.printing-stmt .nav, body.printing-stmt .site-footer,
  body.printing-stmt .owner-tabs, body.printing-stmt .book-note,
  body.printing-stmt .fy-card, body.printing-stmt .stmt-actions { display:none !important; }
  body.printing-stmt .ocard { border:0; padding:0; }
  body.printing-stmt { background:#fff; }
  .stmt-run .stmt-total td { border-top:2px solid #000; }
}

/* ---- Guest reviews on a property page ----------------------------------- */
.prop-revs { background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--rad-lg); padding: clamp(1rem, 2.4vw, 1.35rem); }
.revs-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.revs-score { font-size: 1.35rem; }
.revs-stars { color: var(--sage-deep); font-size: 1.05rem; letter-spacing: .1em; }
.revs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .7rem; }
.rev { margin: 0; padding: .8rem .9rem; background: var(--paper); border-radius: var(--rad);
  display: flex; flex-direction: column; gap: .4rem; }
.rev-top b { font-family: var(--serif); font-size: 1.1rem; }
.rev-top span { font-size: .74rem; color: var(--muted); }
.rev blockquote { margin: 0; font-size: .82rem; line-height: 1.55; }
.rev figcaption { font-size: .76rem; font-weight: 500; margin-top: auto; }
.rev figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; }
/* 🪤 `display:grid` BEATS the `hidden` attribute, so every "hidden" review was
   showing and the Read-all button sat above content already on screen. Any
   element given a display value needs its hidden state restated. */
.revs-rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .7rem; margin-top: .7rem; }
.revs-rest[hidden] { display: none; }

/* ---- Lead-photo picker, manager side ------------------------------------ */
.mgcover { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.mgcover-lab { margin: 0 0 .55rem; font-size: .78rem; font-weight: 500; }
.mgcover-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.mgcover-pic { flex: none; width: 62px; height: 46px; padding: 0; border: 2px solid transparent;
  border-radius: 5px; overflow: hidden; background: none; cursor: pointer; opacity: .55;
  transition: opacity .15s, border-color .15s; }
.mgcover-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgcover-pic:hover { opacity: .85; }
.mgcover-pic.is-on { border-color: var(--ink); opacity: 1; }

/* ---- Property photo gallery -------------------------------------------- */
.prop-gal { position: relative; display: grid; grid-template-columns: 2fr 1fr;
  gap: .5rem; border-radius: var(--rad-lg); overflow: hidden; }
.prop-gal button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.pg-main { height: 100%; }
.pg-main img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.pg-side { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-all { position: absolute; right: .9rem; bottom: .9rem; display: inline-flex !important;
  align-items: center; gap: .45rem; background: #fff; color: var(--ink);
  border-radius: 100px !important; padding: .5rem .95rem !important; font-size: .8rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); cursor: pointer; }
.pg-all svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .prop-gal { grid-template-columns: 1fr; }
  .pg-side { grid-template-rows: 1fr; }
  .pg-side .pg-thumb:nth-child(n+3) { display: none; }
}

/* Lightbox. Kept deliberately plain: a photo, a count, and a way out. */
.pgl { position: fixed; inset: 0; z-index: 300; background: rgba(11,13,20,.94);
  display: none; align-items: center; justify-content: center; }
.pgl.is-on { display: flex; }
.pgl img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 4px; }
.pgl-close, .pgl-prev, .pgl-next { position: absolute; background: rgba(255,255,255,.12);
  color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 1.4rem;
  cursor: pointer; display: grid; place-items: center; }
.pgl-close { top: 1.2rem; right: 1.2rem; }
.pgl-prev { left: 1.2rem; } .pgl-next { right: 1.2rem; }
.pgl-close:hover, .pgl-prev:hover, .pgl-next:hover { background: rgba(255,255,255,.24); }
.pgl-count { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .82rem; letter-spacing: .04em; }

/* Where you'll be. */
.pf-loc { background: var(--ink); border-color: var(--ink) !important; color: #fff !important; }
.pf-loc svg { color: #fff !important; }
.prop-loc { background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--rad-lg); padding: 1.35rem 1.4rem; }
.locmap { position: relative; border-radius: var(--rad); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper); }
/* The rough area, drawn over the map. Sized to roughly a kilometre at this
   zoom, and pointer-events off so it never blocks panning the map underneath. */
.locmap-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: rgba(167,171,161,.28); border: 2px solid var(--sage-deep);
  box-shadow: 0 0 0 9999px rgba(28,29,28,.05); }
/* Fixed ratio so the card does not jump around while the map loads. */
.locmap iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border: 0; }
.loclist { list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .1rem .9rem; }
.loclist li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .45rem 0; border-bottom: 1px solid var(--line-soft); font-size: .86rem; }
.loclist span { color: var(--muted); }
.loclist b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The answer to a date search, on the card itself. Green when it is free with
   the real price, muted when the date is simply past the window we hold. */
.jcard-av { display:block; margin:.55rem 0 0; font-size:.8rem; font-weight:500;
  font-variant-numeric:tabular-nums; }
.jcard-av.is-free { color:var(--sage-deep); }
.jcard-av.is-outside { color:var(--muted); font-weight:400; }

/* Guest share row. Buttons wrap rather than squash on a phone. */
.sharebtns { display:flex; flex-wrap:wrap; gap:.5rem; }
.sharebtns .btn { padding:.55rem 1rem; font-size:.82rem; }

.bp-terms { margin-top:.4rem; }
.bp-termlist { margin:0; padding-left:1.05rem; font-size:.8rem; color:var(--muted); line-height:1.65; }
.src-direct, .src-booking { background:rgba(167,171,161,.3); color:var(--sage-deep); }

/* ==========================================================================
   PROPERTY PAGE — relaid out 9 Aug.
   Title full width, photo wide, then description left / booking right with the
   card STICKY. Previously the photo and a tall thin column sat side by side,
   which left dead space beside the photo and pushed the calendar so far down
   the page that the thing the visitor came to do was below the fold.
   ========================================================================== */
/* Title left, share top-right, spec pills across the bottom.
   Grid rather than flex so the share button aligns to the TITLE's row and the
   pills still run the full width underneath it. */
.prop-head {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start;
  column-gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.prop-head-main { max-width: 820px; }
.prop-head .h2 { margin-bottom: 1rem; }
.prop-head .prop-facts { grid-column: 1 / -1; }
.prop-head-share { justify-content: flex-end; padding-top: .35rem; }
.prop-head-share .btn { padding: .45rem .85rem; font-size: .78rem; }
.prop-head-share .btn svg:not(.arw) { width: 14px; height: 14px; }
@media (max-width: 720px) {
  /* On a phone the share drops under the title rather than squeezing it, and
     the labels go so three buttons still fit on one line. */
  .prop-head { grid-template-columns: 1fr; }
  .prop-head-share { justify-content: flex-start; margin-bottom: 1rem; }
  .prop-head-share .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prop-head-share .btn { padding: .5rem .7rem; }
}

.prop-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.prop-facts span {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; padding: .35rem .85rem;
  border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
}
.prop-facts svg { width: 15px; height: 15px; color: var(--sage-deep); flex: none; }
.prop-facts .pf-rating { background: rgba(167,171,161,.2); border-color: transparent; color: var(--ink-2); }

.prop-media {
  border-radius: var(--rad-lg); overflow: hidden; background: var(--sand);
  aspect-ratio: 21/9; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.prop-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .prop-media { aspect-ratio: 4/3; } }

.prop-body {
  display: grid; grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 940px) {
  .prop-body { grid-template-columns: 1fr; }
  /* Stacked, the booking card belongs FIRST — on a phone nobody scrolls past
     the description to find out whether the place is even free. */
  .prop-side { order: -1; }
}
.prop-main { min-width: 0; }
/* Follows the reader down. 96px clears the sticky header. */
.prop-side { position: sticky; top: 96px; }
@media (max-width: 940px) { .prop-side { position: static; } }
.prop-side .bookpanel { margin-top: 0; }

/* The calendar was tall enough to push the price out of view. */
.bp-day, .bp-pad { font-size: .8rem; }
.bp-days { gap: 2px; }

/* ==========================================================================
   HEADER, tightened 9 Aug.
   The base .btn is sized for a hero (1.05rem x 2.1rem of padding, .12em
   letter-spacing). Two of those in a header row dominated everything and made
   the nav links feel like an afterthought.
   ========================================================================== */
.btn-sm { padding: .5rem 1rem; font-size: .72rem; }
.btn-nav {
  padding: .55rem 1rem;
  font-size: .69rem;
  letter-spacing: .06em;
}
.btn-nav .arw { width: 13px; height: 13px; }

/* Both header actions are buttons now, but the weight is deliberately unequal:
   outlined for the guest, solid for the owner enquiry that earns money. Equal
   weight is what made this header shout twice. */
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.nav-book { white-space: nowrap; }
@media (max-width: 1120px) { .nav-book { display: none; } }

.nav .wrap { min-height: 68px; }
.menu a { font-size: .88rem; }
/* "Journal" became "News & Insights" (27 Sep), the longest label in the row.
   At ~1180px the menu then broke onto two lines under the buttons. Labels never
   wrap now; the gaps tighten first and the guest button drops out earlier. */
.menu a { white-space: nowrap; }
/* 1 Oct 2026: Contact joined the desktop menu (Nick: "the Contact is missing
   from the desktop"). Seven links left 15px of slack at full width and ran
   into the buttons between ~1040 and 1100px, measured in headless Edge. So:
   slightly tighter gaps, the guest button drops out below 1280px, and up to
   1120px the links live behind the burger while the owner button stays. */
.menu { gap: 1.8rem; }
@media (max-width: 1320px) { .menu { gap: 1.45rem; } }
/* 16 Oct 2026 (Nick, go-live call): on a ~1250px laptop the guest button
   vanished and a guest had no way to book from the top bar. Book a stay now
   stays all the way down to the burger; the owner button says "Free projection"
   instead, which frees the room. */
@media (max-width: 1280px) { .cta-long { display: none; } }
/* 16 Oct 2026: 1200, was 1120, so Book a stay can stay in the bar between
   1121 and 1200px without the links running into it (measured). */
@media (max-width: 1200px) {
  .menu { display: none; }
  .burger { display: block; }
}

/* ── Suburb type-ahead ──────────────────────────────────────────────────────
   Replaces a native <datalist>, which dumped all 243 suburbs on focus in the
   browser's own light styling over a dark card. This one is ours: quiet until
   two characters, at most eight matches, anchored under the input. */
.est-ac { position: relative; }
.est-ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  margin: .35rem 0 0; padding: .3rem; list-style: none;
  background: #1a1c22; border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  max-height: 15.5rem; overflow-y: auto; overscroll-behavior: contain;
}
.est-ac-list li {
  padding: .55rem .7rem; border-radius: 7px; cursor: pointer;
  color: rgba(255,255,255,.86); font-size: .93rem; line-height: 1.3;
}
.est-ac-list li b { color: #fff; font-weight: 600; }   /* the matched characters */
.est-ac-list li[aria-selected="true"], .est-ac-list li:hover { background: rgba(255,255,255,.11); }
.est-ac-none { padding: .55rem .7rem; color: rgba(255,255,255,.5); font-size: .88rem; }

/* Estimator heading — hold it on one line.
   "What your property could earn?" broke after "could" at the standard .h2
   size, orphaning "earn?" on its own line. Wider block, slightly smaller type,
   and nowrap once there is genuinely room for it. Below that it wraps, but
   text-wrap:balance splits it evenly instead of stranding one word. */
.est-head { max-width: 880px; }
.est-head .h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); text-wrap: balance; }
@media (min-width: 820px) { .est-head .h2 { white-space: nowrap; } }

/* Live-payment feedback under the Continue button (24 Aug 2026). */
.bp-paymsg{margin:.65rem 0 0;line-height:1.5;color:var(--ink-2)}
.bp-paymsg.is-bad{color:var(--alert)}


/* ==========================================================================
   27 Sep 2026 — Nick's consolidated feedback
   ========================================================================== */

/* The home hero's first line is a real header now, as on their current site
   ("AIRBNB & SHORT-TERM RENTAL MANAGEMENT IN ADELAIDE"), not small print. */
.h1-kicker-hero {
  font-size: clamp(.86rem, 1.35vw, 1.08rem);
  letter-spacing: .16em;
  font-weight: 500;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  color: #fff;
}

/* Anchored sections clear the sticky header when a link lands on them. */
section[id], .aguide, #included { scroll-margin-top: 96px; }

/* Home 02/06: one photo per discipline (their own photos). */
.pcard {
  display: flex; flex-direction: column; border-radius: var(--rad-lg); overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.pcard:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.pcard-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.045); }
.pcard-body { padding: clamp(1.35rem, 2.4vw, 1.9rem); }
.pcard .h3 { margin-bottom: .6rem; }
.pcard p { font-size: .95rem; color: rgba(255,255,255,.68); }

/* Areas page: the area guide every non-page area tile lands on. */
.aguide-group { margin-top: clamp(2rem, 4vw, 3rem); }
.aguide-title {
  font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .19em;
  text-transform: uppercase; color: var(--sage-deep); padding-bottom: .9rem;
  border-bottom: 1px solid var(--line); margin-bottom: .2rem;
}
.aguide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.aguide { padding: 1.35rem .9rem 1.35rem 0; border-bottom: 1px solid var(--line-soft); border-radius: 6px; transition: background .6s var(--ease), padding .6s var(--ease); }
.aguide-name { font-family: var(--sans); font-weight: 500; font-size: 1.12rem; margin-bottom: .45rem; color: var(--ink); }
.aguide-name span { display: block; font-size: .74rem; font-weight: 400; color: var(--muted); letter-spacing: .02em; margin-top: .15rem; }
.aguide p { font-size: .95rem; color: var(--muted); max-width: 60ch; }
.aguide:target { background: var(--lavender); padding-left: 1rem; }
@media (max-width: 760px) { .aguide-list { grid-template-columns: 1fr; } }

/* Pricing: one fee, 20% + GST. */
.fee {
  display: grid; grid-template-columns: 1.35fr 1fr; border-radius: var(--rad-lg); overflow: hidden;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); background: var(--paper-2);
}
.fee-main { background: var(--ink); color: rgba(255,255,255,.75); padding: clamp(2rem, 5vw, 3.6rem); }
.fee-main .eyebrow { color: var(--sage); }
.fee-price { font-family: var(--serif); font-weight: 500; color: #fff; font-size: clamp(4rem, 10vw, 6.8rem); line-height: .95; letter-spacing: -.03em; }
.fee-gst { font-family: var(--sans); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 400; letter-spacing: 0; margin-left: .6rem; color: var(--sage); }
.fee-unit { margin-top: .9rem; font-size: 1.02rem; color: #fff; }
.fee-copy { margin-top: 1.1rem; max-width: 46ch; font-size: .96rem; }
.fee-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.fee-side { padding: clamp(2rem, 4.5vw, 3.2rem); display: flex; flex-direction: column; justify-content: center; }
.fee-side-h { font-family: var(--sans); font-weight: 500; font-size: 1.12rem; margin-bottom: 1.1rem; }
.fee-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.fee-list li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; font-size: .95rem; color: var(--muted); }
.fee-list li svg { margin-top: .3rem; color: var(--sage-deep); }
.fee-list strong { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .fee { grid-template-columns: 1fr; } }
.card.incl .checks { margin-top: .4rem; }
.card.incl .checks li { font-size: .92rem; }

/* News & Insights */
.news-lead { color: inherit; }
.news-lead:hover .h2 { opacity: .7; }
.news-lead .h2 { transition: opacity .3s; }
.phero-art .wrap-narrow { padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(1.6rem, 3vw, 2.4rem); }
.art-meta { margin-bottom: 1rem; }
.art-title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.02em; text-wrap: balance;
}
.art-fig { margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--sage-pale); }
.art-fig img { width: 100%; height: auto; display: block; }
.prose { font-size: 1.04rem; line-height: 1.75; color: #3d403c; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.25; color: var(--ink); margin-top: 2em; }
.prose h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-top: 1.7em; }
.prose h2 + *, .prose h3 + * { margin-top: .55em; }
/* A heading that opens the text (Privacy Policy, Terms) starts flush: the
   section's own padding is the gap, not padding plus a 2em heading margin. */
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--sage-deep); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.art-foot { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2.2rem, 5vw, 3.2rem); padding-top: 1.8rem; border-top: 1px solid var(--line); }

/* Photo credits (a CC BY licence requires one). */
.media-fig { margin: 0; }
.img-credit { margin-top: .55rem; font-size: .72rem; color: var(--muted); }
.img-credit a { text-decoration: underline; text-underline-offset: 2px; }
.dark .img-credit { color: rgba(255,255,255,.5); }

/* Contact: the "Let's chat" photo. Square, never wider than the photo. */
.chat-img .media-img { aspect-ratio: 1; max-width: 420px; }

/* Owner portal: Overview + Upcoming bookings (27 Sep 2026). The portal loads
   this same stylesheet, so its screens are styled here with the site. */
.ov-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.ov-grid .form-card { padding: 1.4rem 1.5rem; }
.ov-grid .eyebrow { margin-bottom: .8rem; }
.ov-grid .form-note, .ov-table + .form-note, .form-card > .form-note { text-align: left; }
.ov-main { background: var(--ink); color: rgba(255,255,255,.72); border-color: var(--ink); }
.ov-main .eyebrow { color: var(--sage); }
.ov-main .form-note { color: rgba(255,255,255,.62); }
.ov-big { font-family: var(--serif); font-weight: 500; color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.3rem); line-height: 1; letter-spacing: -.02em; margin-bottom: .8rem; font-variant-numeric: tabular-nums; }
.ov-mid { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.05rem); line-height: 1; margin-bottom: .7rem; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .ov-grid { grid-template-columns: 1fr; } }
.ov-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.ov-table th { text-align: left; font-weight: 500; padding: .5rem .6rem; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.ov-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ov-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-barcell { position: relative; min-width: 190px; }
.ov-bar { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); height: 1.35rem; max-width: calc(100% - 1.2rem); background: var(--lavender); border-radius: 4px; }
.ov-val { position: relative; padding-left: .45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-sub { display: block; font-size: .76rem; color: var(--muted); margin-top: .12rem; }

/* ── Free rental estimate page: the calculator above the fold (16 Oct 2026) ───────────
   One dark section under the header. Desktop: promise left, calculator right.
   Phone: headline, calculator, then the "what you get" list. */
.est-hero { padding-block: clamp(2rem, 4.5vw, 3.6rem) clamp(3rem, 6vw, 5rem); }
.est-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "copy card" "gets card";
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 1.8rem; align-items: start;
}
.est-hero-copy { grid-area: copy; align-self: end; }
.est-hero-card { grid-area: card; align-self: center; }
.est-hero-gets { grid-area: gets; }
.crumbs-light, .crumbs-light a { color: rgba(255,255,255,.55); }
.crumbs-light span:last-child { color: rgba(255,255,255,.4); }
.est-hero-h1 { color: #fff; margin-bottom: 1rem; }
.est-hero-lede { color: rgba(255,255,255,.74); max-width: 34rem; margin-bottom: 0; }
.est-card-h { font-family: var(--serif); font-size: clamp(1.45rem, 2.3vw, 1.85rem); letter-spacing: -.02em;
  color: #fff; text-align: center; margin: 0 0 .35rem; text-wrap: balance; }
.est-card-sub { color: rgba(255,255,255,.55); text-align: center; font-size: .9rem; margin: 0 0 1.1rem; }
.est-hero-card .estcard { max-width: none; margin: 0; }
.est-gets { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; max-width: 34rem; }
.est-gets li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.5; }
.est-gets li strong { color: #fff; font-weight: 600; }
.est-gets svg { flex: none; width: 18px; height: 18px; margin-top: .2rem; color: var(--ash, #A7ABA1); }
.est-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.est-step { border: 1px solid var(--line-soft); border-radius: 18px; padding: clamp(1.3rem, 3vw, 1.8rem); background: #fff; }
.est-step h3 { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -.02em; margin: .9rem 0 .4rem; }
.est-step p { margin: 0; color: var(--muted, #5f625c); }
.est-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink, #1C1D1C); color: #fff; font-weight: 600; font-size: .95rem; }
.est-close .lede { color: rgba(255,255,255,.72); max-width: 40rem; }
@media (max-width: 900px) {
  .est-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "gets"; row-gap: 1.6rem; }
  .est-hero-copy { align-self: start; }
  .est-steps { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: get the first estimator field onto the first screen. */
@media (max-width: 900px) {
  .est-hero { padding-top: 1.1rem; }
  .est-hero .crumbs-light { display: none; }
  .est-hero-h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); margin-bottom: .6rem; }
  .est-hero .h1-kicker { margin-bottom: .55rem; }
  .est-hero-lede { font-size: 1rem; line-height: 1.5; }
  .est-card-h { font-size: 1.35rem; }
  .est-card-sub { display: none; }
  .est-hero-card .estcard { padding: 1.2rem; }
}
@media (min-width: 901px) { .est-hero-copy { align-self: start; padding-top: 2.2rem; } }