/* ============================================================================
 * HOME BASE  ·  SINGLE PROPERTY TEMPLATE  ·  styles
 * Companion file for the [homebase_property] shortcode.
 * Upload to:  /wp-content/uploads/homebase-property/hbpd.css
 * Do not paste this into Elementor Custom CSS. The snippet enqueues it.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Karla:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------- tokens */
.hbpd{
  --primary-900:#1b2438; --primary-800:#232e47; --primary-700:#2d3857;
  --primary-500:#4e5c7e; --primary-200:#b9c1d1; --primary-100:#d6dbe5; --primary-50:#edeff4;
  --secondary-800:#083539; --secondary-700:#0a3e42; --secondary-100:#cbdcd9;
  --accent-800:#8c6c2f; --accent-700:#a8843c; --accent-600:#be9a4f;
  --accent-500:#d6b67a; --accent-400:#e0c690; --accent-100:#f3e8cc; --accent-50:#faf4e6;
  --warm-600:#b06a4e; --warm-500:#c0795f;
  --ink:#2b2926;
  --stone-700:#4a463f; --stone-600:#5f5a50; --stone-500:#8f8575;
  --stone-300:#c5bdac; --stone-200:#ddd6c6; --stone-100:#ece7da;
  --paper:#fbf9f2; --paper-bright:#fefdfc; --canvas:#f6f2e8; --sand:#ece4d3;
  --light:#faf5e7; --white:#fff;

  --font-display:var(--e-global-typography-primary-font-family,'Cormorant Garamond',Georgia,'Times New Roman',serif);
  --font-sans:var(--e-global-typography-secondary-font-family,'Karla',system-ui,-apple-system,'Segoe UI',sans-serif);
  --font-mono:var(--e-global-typography-accent-font-family,'Spline Sans Mono','SFMono-Regular',Menlo,monospace);

  --r-sm:7px; --r-md:11px; --r-lg:16px; --r-xl:22px;
  --sh-xs:0 1px 2px rgba(45,56,87,.06);
  --sh-sm:0 1px 3px rgba(45,56,87,.08),0 1px 2px rgba(45,56,87,.04);
  --sh-md:0 4px 12px rgba(45,56,87,.08),0 2px 4px rgba(45,56,87,.05);
  --sh-lg:0 12px 28px rgba(45,56,87,.12),0 4px 10px rgba(45,56,87,.06);
  --sh-xl:0 24px 56px rgba(27,36,56,.18),0 8px 18px rgba(27,36,56,.08);
  --focus:0 0 0 3px rgba(214,182,122,.55);
  --ease:cubic-bezier(.32,.08,.24,1); --ease-out:cubic-bezier(.16,1,.3,1);

  font-family:var(--font-sans);color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px;
  /* clip, never hidden: hidden makes this a scroll container and the sticky
     booking rail stops sticking. Swallows the scrollbar's share of the
     gallery's 100vw. */
  overflow-x:clip;
}
.hbpd *,.hbpd *::before,.hbpd *::after{box-sizing:border-box;}
.hbpd img{display:block;max-width:100%;height:auto;}
.hbpd a{color:inherit;text-decoration:none;}
.hbpd p{margin:0;text-wrap:pretty;}
.hbpd ul,.hbpd ol{margin:0;padding:0;list-style:none;}
.hbpd h1,.hbpd h2,.hbpd h3,.hbpd h4{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  line-height:1.1;color:var(--primary-900);margin:0;text-wrap:balance;
  text-transform:none !important;
}
.hbpd button{font-family:inherit;text-transform:none !important;letter-spacing:normal;}
.hbpd blockquote{margin:0;}
.hbpd figure{margin:0;}
.hbpd :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm);}
.hbpd .hbpd-ico{width:20px;height:20px;flex:0 0 auto;}
.hbpd .hbpd-ico.is-star{width:15px;height:15px;color:var(--accent-600);}
.hbpd .hbpd-ico.is-check{width:17px;height:17px;color:var(--accent-700);}

.hbpd-wrap{max-width:1240px;margin:0 auto;padding-left:clamp(1.25rem,5vw,3.5rem);padding-right:clamp(1.25rem,5vw,3.5rem);}

.hbpd .hbpd-eyebrow{
  font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.2em;
  font-weight:700;font-size:12.5px;color:var(--accent-700);display:inline-block;
}
.hbpd .hbpd-eyebrow.on-dark{color:var(--accent-400);}

/* This theme + Elementor kit style bare <button> elements (uppercase, tracking,
   dark background, their own padding). Every control we own therefore pins its
   contested properties with scoped !important. The selector list is explicit so
   the HomeRunner booking widget and the Fluent form keep their own chrome. */
.hbpd .hbpd-btn,.hbpd .hbpd-link,.hbpd .hbpd-act,.hbpd .hbpd-gal-cell,
.hbpd .hbpd-gal-all,.hbpd .hbpd-x,.hbpd .hbpd-lb-nav,.hbpd .hbpd-share-i{
  font-family:var(--font-sans) !important;text-transform:none !important;
  letter-spacing:normal !important;line-height:1.3 !important;min-width:0 !important;
  min-height:0 !important;width:auto !important;height:auto !important;
  -webkit-appearance:none;appearance:none;cursor:pointer;text-decoration:none !important;
  text-shadow:none !important;
}

.hbpd .hbpd-btn{
  display:inline-flex !important;align-items:center;justify-content:center;gap:9px;
  font-weight:700 !important;font-size:15px !important;border-radius:var(--r-md) !important;
  padding:13px 24px !important;border:1px solid transparent !important;
  transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out),color .3s var(--ease-out);
}
.hbpd .hbpd-btn .hbpd-ico{width:17px;height:17px;}
.hbpd .hbpd-btn-accent,.hbpd a.hbpd-btn-accent:hover,.hbpd a.hbpd-btn-accent:visited{color:var(--primary-900) !important;}
.hbpd .hbpd-btn-accent{background:var(--accent-500) !important;box-shadow:var(--sh-sm);}
.hbpd .hbpd-btn-accent:hover{background:var(--accent-600) !important;box-shadow:var(--sh-md);}
.hbpd .hbpd-btn-ghost{
  background:transparent !important;border-color:var(--stone-300) !important;
  color:var(--primary-800) !important;padding:12px 22px !important;
}
.hbpd .hbpd-btn-ghost:hover{background:var(--paper) !important;border-color:var(--primary-700) !important;box-shadow:var(--sh-xs);}
.hbpd .hbpd-link{
  display:inline-flex !important;align-items:center;gap:8px;background:none !important;
  border:0 !important;box-shadow:none !important;padding:0 0 3px 0 !important;margin-top:18px;
  color:var(--accent-800) !important;font-weight:700 !important;font-size:14.5px !important;
  border-bottom:1px solid var(--accent-500) !important;border-radius:0 !important;
  transition:gap .3s var(--ease-out);
}
.hbpd .hbpd-link:hover{gap:12px;}
.hbpd .hbpd-link .hbpd-ico{width:15px;height:15px;}
.hbpd .hbpd-note{font-size:14px;color:var(--stone-600);}

/* ---------------------------------------------------------- sticky nav */
.hbpd-nav{
  position:fixed;top:0;left:0;right:0;z-index:99990;background:rgba(251,249,242,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stone-200);transform:translateY(-102%);
  transition:transform .42s var(--ease-out);box-shadow:var(--sh-sm);
}
.hbpd-nav.is-on{transform:translateY(0);}
.hbpd-nav-in{
  max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:24px;
  height:56px;padding-left:clamp(1.25rem,5vw,3.5rem);padding-right:clamp(1.25rem,5vw,3.5rem);
}
.hbpd-nav-name{
  font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--primary-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch;
}
.hbpd-nav-links{display:flex;align-items:center;gap:26px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
.hbpd-nav-links::-webkit-scrollbar{display:none;}
.hbpd-nav-links a{
  font-size:14px;font-weight:600;color:var(--stone-600);white-space:nowrap;
  padding:6px 0 5px;border-bottom:2px solid transparent;transition:color .25s var(--ease);
}
.hbpd-nav-links a:hover{color:var(--primary-800);}
.hbpd-nav-links a.is-here{color:var(--primary-900);border-bottom-color:var(--accent-500);}
.hbpd-nav-tel{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:14px;font-weight:500;color:var(--primary-800);white-space:nowrap;flex:0 0 auto;
}
.hbpd-nav-tel .hbpd-ico{width:16px;height:16px;color:var(--accent-700);}
/* Under 900px the section links go away and the bar is just the property
   name and the phone. The strip is a horizontal scroller with a hidden
   scrollbar, so once it overflows there is nothing telling anyone the rest
   of the tabs exist. Measured on the live page, links fully visible out of
   five: 900px shows all 5 with no overflow, 768 shows 4, 640 shows 3,
   430 shows 1, and at 390 the strip is 30px wide and shows NOTHING while
   still occupying the row. 900 is the last width where all five fit, so
   cutting here means the strip is either complete or absent, never a
   silent scroller.
   flex:1 moved off the hidden strip and onto the name, otherwise the name
   and the phone bunch up on the left; min-width:0 keeps the existing
   ellipsis working when a long property name meets a narrow phone. */
@media (max-width:899px){
  .hbpd-nav-links{display:none;}
  .hbpd-nav-name{flex:1 1 auto;min-width:0;max-width:none;}
  .hbpd-nav-tel{margin-left:auto;}
}

/* ------------------------------------------------------------- gallery */
/* Full bleed. The shortcode sits inside an Elementor container that has its
   own max width, so widening the gallery is not enough: it has to break out
   of that container. 100vw plus the negative half-gutter does that from any
   parent width. .hbpd carries overflow-x:clip to swallow the scrollbar's
   share of 100vw. clip, not hidden, because hidden would create a scroll
   container and kill the sticky booking rail. */
.hbpd-gal-sec{
  padding:0 0 clamp(20px,3vw,32px);
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.hbpd-gal-wrap{position:relative;max-width:none;margin:0;}
.hbpd-gal{
  display:grid;gap:4px;
  grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:1fr 1fr;
  height:clamp(320px,42vw,530px);
  border-radius:0;overflow:hidden;background:var(--stone-100);
}
.hbpd .hbpd-gal-cell{
  position:relative;padding:0 !important;border:0 !important;margin:0 !important;
  overflow:hidden;background:var(--stone-100) !important;border-radius:0 !important;
  box-shadow:none !important;display:block !important;
}
.hbpd-gal-main{grid-row:1 / span 2;}
.hbpd-gal-cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out);}
.hbpd-gal-cell:hover img{transform:scale(1.035);}
.hbpd-gal-cell::after{
  content:'';position:absolute;inset:0;background:rgba(0,0,0,0);
  transition:background .3s var(--ease);
}
.hbpd-gal-cell:hover::after{background:rgba(0,0,0,.06);}
.hbpd .hbpd-gal-all{
  position:absolute;right:18px;bottom:18px;z-index:3;display:inline-flex !important;
  align-items:center;gap:9px;
  background:rgba(251,249,242,.96) !important;color:var(--primary-900) !important;
  border:1px solid var(--stone-200) !important;border-radius:var(--r-md) !important;
  padding:10px 16px !important;font-size:14px !important;font-weight:700 !important;
  box-shadow:var(--sh-md) !important;
}
.hbpd .hbpd-gal-all:hover{background:var(--white) !important;box-shadow:var(--sh-lg) !important;}
.hbpd-gal-all .hbpd-ico{width:15px;height:15px;}
.hbpd-gal-count{display:none;}

@media (max-width:1024px){
  .hbpd-gal{grid-template-columns:1.3fr 1fr;}
  .hbpd-gal-cell:nth-child(4),.hbpd-gal-cell:nth-child(5){display:none !important;}
}
@media (max-width:700px){
  .hbpd-gal{
    display:flex;height:auto;grid-template-columns:none;grid-template-rows:none;gap:0;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-radius:0;touch-action:pan-x pan-y;
  }
  .hbpd-gal::-webkit-scrollbar{display:none;}
  .hbpd .hbpd-gal-cell,.hbpd .hbpd-gal-main{
    flex:0 0 100%;min-width:100% !important;grid-row:auto;scroll-snap-align:start;
    aspect-ratio:4/3;display:block !important;
  }
  .hbpd .hbpd-gal-all{right:12px;bottom:12px;padding:9px 13px !important;font-size:13px !important;}
  .hbpd-gal-count{
    display:block;position:absolute;left:12px;bottom:12px;z-index:3;
    background:rgba(0,0,0,.58);color:#fff;font-family:var(--font-mono);font-size:12.5px;
    padding:5px 11px;border-radius:100px;pointer-events:none;
  }
}

/* -------------------------------------------------------------- header */
/* The header is the first child of .hbpd-main now, and .hbpd-shell already
   supplies the top padding, so this must not add a second helping. */
.hbpd-head{padding:0;}
.hbpd-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.hbpd-head-id{min-width:0;flex:1 1 460px;}
.hbpd-h1{font-size:clamp(36px,4.4vw,56px);line-height:1.04;margin-top:9px;}
.hbpd-tagline{
  font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(18px,2vw,23px);
  color:var(--secondary-700);margin-top:9px;
}
.hbpd-head-meta{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:16px;}
.hbpd-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--paper);
  border:1px solid var(--stone-200);border-radius:100px;padding:6px 14px;
  font-size:13.5px;color:var(--stone-700);
}
.hbpd-chip .hbpd-ico{width:15px;height:15px;color:var(--stone-500);}
.hbpd-chip b{font-family:var(--font-mono);font-weight:500;color:var(--primary-900);}
.hbpd-chip i{font-style:normal;color:var(--stone-500);}
.hbpd-head-acts{display:flex;gap:10px;flex:0 0 auto;padding-top:6px;}
.hbpd .hbpd-act{
  display:inline-flex !important;align-items:center;gap:8px;background:var(--paper) !important;
  border:1px solid var(--stone-200) !important;border-radius:var(--r-md) !important;
  padding:10px 16px !important;font-size:14px !important;font-weight:600 !important;
  color:var(--primary-800) !important;box-shadow:none !important;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.hbpd-act:hover{border-color:var(--primary-700) !important;background:var(--white) !important;}
.hbpd-act .hbpd-ico{width:17px;height:17px;color:var(--stone-600);transition:color .25s var(--ease);}
.hbpd-act[data-hbpd-fav] .hbpd-ico{fill:none;stroke:currentColor;}
.hbpd-act[data-hbpd-fav].is-on{border-color:var(--warm-500) !important;}
.hbpd-act[data-hbpd-fav].is-on .hbpd-ico{fill:var(--warm-500);color:var(--warm-500);}

/* .hbpd-specs is a <ul>, and the reset up top is `.hbpd ul{margin:0}` at
   specificity 0,1,1. A bare `.hbpd-specs` rule is 0,1,0, so its margin-top has
   been silently losing to the reset all along and the strip sat flush against
   the chips. Qualifying with .hbpd makes it 0,2,0, which wins. */
/* Three cells now, not four: bedrooms, bathrooms, guests. The bed total moved
   out, "Where you'll sleep" already lists every bed room by room.
   Three divides evenly at every width, so the old two up mobile break is gone
   and with it a latent bug: that override was written as bare `.hbpd-specs`
   (0,1,0) against this rule's `.hbpd .hbpd-specs` (0,2,0), so it never applied
   and the strip had been four across on a 390px screen all along. Any new
   override in here must carry the same `.hbpd` prefix. */
.hbpd .hbpd-specs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,3.6vw,44px);
  border:1px solid var(--stone-200);border-radius:var(--r-lg);background:var(--paper);
  overflow:hidden;
}
/* 22px of padding on a four up strip made the tallest block on the page out
   of the smallest amount of information. */
.hbpd-specs li{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:14px 12px;border-right:1px solid var(--stone-200);
}
.hbpd-specs li:last-child{border-right:0;}
.hbpd-spec-ic{color:var(--accent-700);}
.hbpd-spec-ic .hbpd-ico{width:18px;height:18px;}
.hbpd-specs b{font-family:var(--font-mono);font-weight:500;font-size:17px;color:var(--primary-900);}
.hbpd-specs i{font-style:normal;font-size:12.5px;color:var(--stone-600);letter-spacing:.02em;}
/* "bathrooms" is the widest label and it has to survive a 390px screen split
   three ways, so the cell loses padding and the label loses a little size
   rather than the strip losing a column. */
@media (max-width:640px){
  .hbpd .hbpd-specs li{padding:13px 6px;}
  .hbpd .hbpd-specs i{font-size:11.5px;letter-spacing:0;}
  .hbpd-head-acts{width:100%;margin-top:14px;padding-top:0;}
}

/* --------------------------------------------------------------- shell */
/* No align-items here on purpose. The rail must stretch to the row height or
   its sticky child has nowhere to travel and scrolls away with the page. */
.hbpd-shell{
  display:flex;gap:clamp(28px,4vw,60px);
  padding:clamp(30px,4vw,52px) 0 clamp(40px,6vw,80px);
}
.hbpd-main{flex:1 1 auto;min-width:0;}
.hbpd-rail{flex:0 0 372px;max-width:372px;align-self:stretch;}
.hbpd-rail-in{position:sticky;top:78px;}
@media (max-width:1080px){
  .hbpd-shell{flex-direction:column;}
  .hbpd-rail{order:-1;flex:1 1 auto;max-width:none;width:100%;}
  .hbpd-rail-in{position:static;}
}
/* Below 960px the rail is an empty shell, so it goes away entirely.
   HomeRunner swaps its desktop widget for the fixed bottom bar at UIkit's @m
   breakpoint (hk-visible@m on one, hk-hidden@m on the other, and @m is
   960px). Measured on the live page: at 960 the desktop widget is 822x279
   and the sticky bar is hidden; at 959 the widget is gone and the sticky bar
   appears. What survived was our own card chrome, the price header plus a
   36px empty box, repeating the price and total the sticky bar already
   shows.
   Safe to hide: the sticky bar is NOT a descendant of .hbpd-rail. HomeRunner
   renders it as a child of a uk-scope div at body level, verified in the DOM
   at 768px. Do not "simplify" this to hiding .hbpd-book instead without
   re-checking that, because if the bar ever moves inside the card, a
   display:none here would take mobile booking down with it. */
@media (max-width:959px){
  .hbpd-rail{display:none;}
}

/* ------------------------------------------------------------ sections */
.hbpd-sec{padding:clamp(34px,4.4vw,58px) 0;border-top:1px solid var(--stone-200);}
.hbpd-main > .hbpd-sec:first-child{border-top:0;padding-top:0;}
/* The section right after the page header goes borderless too. The header
   ends in the bordered, rounded spec strip, and a section rule a few pixels
   under it read as the strip having a second, squared-off bottom border. */
.hbpd-head + .hbpd-sec{border-top:0;}
.hbpd-sec-head{margin-bottom:clamp(20px,2.6vw,30px);}
.hbpd-sec-h{font-size:clamp(29px,3.1vw,40px);margin-top:9px;max-width:24ch;}
/* .hbpd-sec-lead is gone with the third argument of hbpd_sec_head(). Nothing
   emits the class any more, so the rule went with it rather than sitting here
   waiting to be re-adopted. */

.hbpd-prose{font-size:17px;line-height:1.78;color:var(--stone-700);max-width:68ch;}
.hbpd-prose p + p{margin-top:16px;}
.hbpd-prose-sm{font-size:15.5px;line-height:1.72;}

/* good to know grid inside about */
/* --------------------------------------------------- arrival bar (stay) */
/* Replaces .hbpd-facts, which was an auto-fit grid holding check in, check
   out, minimum stay and guest access. Guest access was long free text, it set
   the row height and left the two time cells swimming; it now lives only in
   the About modal. What is left is two times, so this is width:fit-content
   rather than a full bleed grid. Do not put a width on it. */
/* display:flex, NOT inline-flex. Inline-flex participates in inline flow, so
   on a property whose description is long enough to earn the "Read the full
   description" link (itself inline-flex) the bar hopped up onto the same
   line, parked to the right of the link. Block-level with fit-content width
   keeps the shrink-to-content look and always starts its own line. */
.hbpd-stay{
  display:flex;align-items:stretch;flex-wrap:nowrap;
  width:fit-content;max-width:100%;
  margin-top:clamp(24px,3vw,34px);
  border:1px solid var(--stone-200);border-radius:var(--r-lg);
  background:var(--paper);overflow:hidden;
}
.hbpd-stay-leg{
  display:flex;flex-direction:column;gap:3px;
  padding:15px clamp(20px,3vw,34px);
}
.hbpd-stay-l{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-500);
}
/* The time is the only thing anyone actually reads here, so it gets the mono
   face and the size. Tabular figures keep 4:00 and 10:00 on the same rhythm. */
.hbpd-stay-t{
  font-family:var(--font-mono);font-weight:500;font-size:clamp(21px,2.4vw,25px);
  line-height:1.15;color:var(--primary-900);font-variant-numeric:tabular-nums;
}
.hbpd-stay-n{font-style:normal;font-size:12.5px;color:var(--stone-600);}
/* A plain divider between the legs, no arrow: the labels already say which
   way time flows. Sibling selector, so a one legged bar (a property with only
   a check in time) draws no stray border. */
.hbpd-stay-leg + .hbpd-stay-leg{border-left:1px solid var(--stone-200);}
/* Below 520px the bar would outgrow the screen, so it stacks and the divider
   turns horizontal with it. */
@media (max-width:520px){
  .hbpd-stay{display:flex;flex-direction:column;width:100%;}
  .hbpd-stay-leg{padding:14px 18px;}
  .hbpd-stay-leg + .hbpd-stay-leg{border-left:0;border-top:1px solid var(--stone-200);}
}

/* --------------------------------------------------------------- rooms */
/* Three across, stepping down to two and one. Explicit tracks instead of the
   old auto-fill/minmax(252px): in the ~700px column that formula never fit a
   third track, and now that photoless cards are compact text chips, two-up
   left them oversized for what they say. */
.hbpd-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
@media (max-width:720px){.hbpd-rooms{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.hbpd-rooms{grid-template-columns:1fr;}}
.hbpd-room{
  background:var(--paper);border:1px solid var(--stone-200);border-radius:var(--r-lg);
  overflow:hidden;transition:box-shadow .35s var(--ease-out),transform .35s var(--ease-out);
}
.hbpd-room:hover{box-shadow:var(--sh-md);transform:translateY(-2px);}
.hbpd-room-img{aspect-ratio:4/3;overflow:hidden;background:var(--stone-100);}
.hbpd-room-img img{width:100%;height:100%;object-fit:cover;}
/* A photoless room renders no image area at all (the .hbpd-room-noimg
   bed-icon placeholder is gone with it). Two height behaviours, keyed off
   the has-photos class the PHP puts on the grid:
   - all-text grid (no photos anywhere): flat cards keep the grid default,
     stretch, so every card in a row lands on the same height and a 2-line
     name cannot leave its neighbours looking clipped;
   - mixed grid: flat cards hug their text, because stretching to a photo
     card's height reads as an empty frame. */
.hbpd-rooms.has-photos .hbpd-room.is-flat{align-self:start;}
.hbpd-room-body{padding:17px 19px 20px;}
.hbpd-room-name{font-size:21px;}
.hbpd-room-beds{
  display:flex;align-items:center;gap:9px;margin-top:9px;font-size:14.5px;color:var(--stone-600);
}
.hbpd-room-beds .hbpd-ico{width:17px;height:17px;color:var(--accent-700);}

/* ----------------------------------------------------------- amenities */
.hbpd-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);margin-bottom:clamp(24px,3vw,34px);}
@media (max-width:980px){.hbpd-feat{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hbpd-feat{grid-template-columns:1fr;}}
.hbpd-feat-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stone-200);
  background:var(--stone-100);
}
.hbpd-feat-card img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease-out);}
.hbpd-feat-card:hover img{transform:scale(1.04);}
.hbpd-feat-card figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:26px 16px 14px;color:var(--light);font-size:14.5px;font-weight:700;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 60%,rgba(0,0,0,.78) 100%);
}
.hbpd-feat-card figcaption .hbpd-ico{width:18px;height:18px;color:var(--accent-400);}

.hbpd-am-top{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px;
  margin-bottom:clamp(24px,3vw,32px);
}
/* min-height keeps a one line tile and a two line tile the same box, so the
   grid reads as one set rather than a ragged one. */
.hbpd-am-top li{
  display:flex;align-items:center;gap:11px;padding:13px 16px;min-height:54px;
  background:var(--paper);border:1px solid var(--stone-200);border-radius:var(--r-md);
  font-size:14.5px;font-weight:600;color:var(--primary-800);
}
.hbpd-am-top .hbpd-ico{width:19px;height:19px;color:var(--accent-700);}

.hbpd-am-groups{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(20px,2.6vw,28px);
}
.hbpd-am-groups.is-modal{grid-template-columns:1fr;gap:26px;margin-top:0;}
/* On page preview, shown only when there are no feature photo cards to show.
   The section head already supplies the space above, so the margin goes below
   instead, to hold the "Show all" button off the last line. Capped at three
   columns: auto-fit would happily make five narrow ones out of a wide
   container and the columns would stop reading as groups. */
.hbpd-am-groups.is-preview{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:0;margin-bottom:clamp(24px,3vw,32px);
}
@media (min-width:900px){
  .hbpd-am-groups.is-preview{grid-template-columns:repeat(3,1fr);}
  /* hbpd_amenity_preview() usually returns three groups, but a property with an
     odd amenity vocabulary falls through to a single flat "Included" list, and
     one column parked in a third of the row with two empty thirds beside it
     reads as a rendering fault. Track count follows child count instead.
     Old engines drop these two rules outright, because a selector carrying an
     unsupported :has() is invalid, and land on the repeat(3,1fr) above. That is
     the right way round: three groups is the common case and it stays correct
     everywhere, while the rare one and two group cases only get better on
     browsers that can express it. */
  .hbpd-am-groups.is-preview:not(:has(> :nth-child(3))){grid-template-columns:repeat(2,1fr);}
  .hbpd-am-groups.is-preview:not(:has(> :nth-child(2))){grid-template-columns:1fr;}
  .hbpd-am-groups.is-preview:not(:has(> :nth-child(2))) .hbpd-am-list{columns:2;column-gap:32px;}
}
/* Qualified with .hbpd, and text-transform carries !important, because the
   heading reset at the top of this file is `.hbpd h1,...,.hbpd h4` at 0,1,1
   with `text-transform:none !important` on it, put there to stop the theme
   shouting section titles. Written bare at 0,1,0 this rule lost weight,
   tracking and case to that reset, so the group titles rendered as ordinary
   600 weight mixed case text instead of the small caps they were meant to be.
   It never showed because the only caller was the modal. The fallback preview
   puts them on the page, where it was obvious. */
.hbpd .hbpd-am-group-t{
  font-family:var(--font-sans) !important;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase !important;color:var(--stone-500);margin-bottom:11px;
  padding-bottom:9px;border-bottom:1px solid var(--stone-200);
}
.hbpd-am-list li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:15px;color:var(--stone-700);}
.hbpd-am-list .hbpd-ico{margin-top:3px;}
.hbpd-am-groups.is-modal .hbpd-am-list{columns:2;column-gap:32px;}
@media (max-width:600px){.hbpd-am-groups.is-modal .hbpd-am-list{columns:1;}}

/* ---------------------------------------------------------- calendar */
.hbpd-cal{
  background:var(--paper);border:1px solid var(--stone-200);border-radius:var(--r-lg);
  padding:clamp(12px,2vw,22px);overflow:hidden;
}
.hbpd-cal .homelocal-availability-calendar,.hbpd-cal table{max-width:100%;}

/* ---------------------------------------------------------- location */
.hbpd-map{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stone-200);
  background:var(--stone-100);min-height:280px;margin-bottom:clamp(22px,3vw,30px);
}
.hbpd-map iframe,.hbpd-map > div{width:100% !important;min-height:340px;}
/* HomeRunner renders the map as <div id="single-property-map" class="hk-margin"
   hk-map ...> and that hk-margin utility adds a 20px margin-bottom, which
   inside this rounded, overflow-hidden frame read as a bare strip pinned
   under the map. The map div is the frame's only content, it owns no margin. */
.hbpd-map [hk-map],.hbpd-map .hk-margin{margin:0 !important;}
/* Two up. Safe now only because of the three line clamp below: without it
   these were two tall narrow columns of body copy, which is the shape that
   reads longest, and that is why they were stacked for a while.
   align-items:start so a column whose copy is short does not stretch to match
   the one next to it and leave its button floating. */
.hbpd-loc-rows{
  display:grid;grid-template-columns:repeat(2,1fr);align-items:start;
  gap:clamp(20px,2.6vw,34px);
}
@media (max-width:700px){.hbpd-loc-rows{grid-template-columns:1fr;}}
/* text-transform needs !important here. The heading reset at the top of this
   file is `.hbpd h1,...,.hbpd h4`, also 0,1,1, and it carries
   `text-transform:none !important`, so an equal specificity rule without the
   flag loses and these titles rendered mixed case. Same trap as
   .hbpd-am-group-t and .hbpd-modal-h3. Any new heading in eyebrow style has to
   carry the flag too. */
.hbpd-loc-row h3{
  font-family:var(--font-sans) !important;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase !important;color:var(--accent-700);margin-bottom:10px;
}

/* The clamp is presentational only: the full copy is always in the DOM, the
   button just removes this class. line-clamp cuts on a line boundary, so the
   teaser never ends mid word. Three lines, not four: at half width four lines
   was most of what the copy had to say, and the button read as decoration. */
.hbpd-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.hbpd-clamp.is-open{display:block;-webkit-line-clamp:unset;overflow:visible;}
.hbpd .hbpd-more{margin-top:12px;}

/* ----------------------------------------------------------- reviews */
/* The score reads as a summary now, not a headline: it comes after the cards
   and after the button. Whitespace alone separates it, no rule: the section
   border that follows already closes things off and two lines that close
   together read as clutter. */
/* flex-end, not center: the stars and the review count hang from the bottom
   of the big number instead of floating at its vertical middle. The 5px of
   padding is optical, it lands the star baseline on the digit baseline. */
.hbpd-score{
  display:flex;align-items:flex-end;gap:18px;
  margin-top:clamp(24px,3.2vw,34px);
}
.hbpd-score-s{padding-bottom:5px;}
/* In the modal it is a header again, so the margin flips sides. */
.hbpd-score.is-modal{margin-top:0;margin-bottom:clamp(20px,2.6vw,26px);}
.hbpd-score-n{font-family:var(--font-mono);font-weight:500;font-size:44px;color:var(--primary-900);line-height:1;}
.hbpd-score-s{display:flex;align-items:center;gap:3px;}
.hbpd-score-s span{margin-left:9px;font-size:14px;color:var(--stone-600);}
.hbpd-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(14px,2vw,20px);}
/* Two masonry columns in the modal. CSS columns, not the grid: reviews run
   wildly different lengths untruncated, and a grid row is as tall as its
   tallest card, which left short reviews swimming in empty card. Columns
   stack each card directly under the previous one, so the two lanes stay
   dense. break-inside keeps a card from splitting across the fold. */
.hbpd-revs.is-modal{display:block;columns:2;column-gap:14px;}
.hbpd-revs.is-modal .hbpd-rev{break-inside:avoid;margin-bottom:14px;}
@media (max-width:640px){.hbpd-revs.is-modal{columns:1;}}
.hbpd .hbpd-revs-all{margin-top:clamp(18px,2.4vw,24px);}
.hbpd-rev{
  background:var(--paper);border:1px solid var(--stone-200);border-radius:var(--r-lg);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;
}
.hbpd-rev-stars{display:flex;gap:2px;}
.hbpd-rev p{font-size:15.5px;line-height:1.7;color:var(--stone-700);flex:1;}
.hbpd-rev footer{display:flex;align-items:baseline;gap:10px;font-size:13.5px;}
.hbpd-rev footer b{color:var(--primary-900);}
.hbpd-rev footer i{font-style:normal;color:var(--stone-500);}

/* ------------------------------------------------------------- rules */
.hbpd-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:14px 26px;}
.hbpd-rules li{display:flex;gap:12px;align-items:flex-start;}
.hbpd-rules .hbpd-ico{color:var(--stone-500);margin-top:2px;}
/* Direct child only. A bare `.hbpd-rules span` also caught the label inside
   the "View full text" button on a clamped rule and rendered it as 11.5px
   uppercase grey, which read as a second heading rather than a control. */
.hbpd-rules li > div > span{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-500);margin-bottom:3px;
}
/* Long rules (a whole cancellation policy in one "Additional" line) are
   clamped to three lines and open in place. .hbpd-clamp does the clamping,
   this only tightens the button gap for the denser rules grid. */
.hbpd-rules .hbpd-more{margin-top:8px;}
.hbpd-rules p{font-size:15px;color:var(--primary-800);line-height:1.55;}

/* ------------------------------------------------------------ inquiry */
/* Back inside the left column as its last section, so there is no band and no
   inner max-width to set: the column is already about 700px, which is inside
   the range where a contact form still reads as a set of fields.
   Form first at full width, the two colour tiles as a pair underneath.
   Beside the form they were a tall thin stack next to a short wide box. */
.hbpd-ask-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,24px);align-items:start;}
/* Last section of the column, and a change of mode: everything above it is
   reading about the home, this is contacting someone about it. A little more
   air above than the sections that merely follow one another. */
.hbpd-sec-ask{padding-top:clamp(40px,5vw,66px);}
.hbpd-ask-form{
  background:var(--paper-bright);border:1px solid var(--stone-200);border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,30px);box-shadow:var(--sh-xs);
}
.hbpd-ask-side{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:640px){.hbpd-ask-side{grid-template-columns:1fr;}}
.hbpd-ask-card{
  background:var(--primary-700);color:var(--light);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-md);
}
.hbpd-ask-card h3{color:var(--light);font-size:26px;margin-top:8px;}
.hbpd-ask-card p{font-size:14.5px;color:rgba(250,245,231,.82);margin-top:10px;line-height:1.6;}
.hbpd-ask-card-alt{background:var(--secondary-700);}
.hbpd-tel{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--font-mono);
  font-size:19px;font-weight:500;color:var(--accent-400) !important;
}
.hbpd-tel .hbpd-ico{width:18px;height:18px;}

/* ---------------------------------------------------------- book rail */
/* ONE inset for the whole card. Every part reads it from here, so the price
   header and the booking form can never drift apart again: they used to be
   22px and 16px, and HomeRunner's own body added another 20px on top of the
   16px, so the form sat 36px in while the price sat 22px in. */
.hbpd-book{
  --rail-pad:20px;
  background:var(--paper-bright);border:1px solid var(--stone-200);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.hbpd-book-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:var(--rail-pad) var(--rail-pad) 15px;border-bottom:1px solid var(--stone-200);
}
.hbpd-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
/* The display serif, same voice as every heading on the page. This number
   used to be Spline Sans Mono, which made the one number a guest actually
   shops on read like telemetry. The mono face still fits the small side
   figures (the 4.80 rating chip, the lightbox counter), just not the price. */
.hbpd-price-n{
  font-family:var(--font-display);font-weight:600;font-size:clamp(30px,2.6vw,36px);
  color:var(--primary-900);line-height:1;letter-spacing:-.01em;
}
/* "avg / night" until dates are picked, "/ night" after. hbpd.js swaps it. */
.hbpd-price-u{font-size:14.5px;color:var(--stone-600);}
/* Original nightly rate, struck through. Only shown when a length-of-stay
   discount applies; hbpd.js fills it from HomeRunner's .rent-deleted. */
.hbpd-price-was{
  font-family:var(--font-display);font-weight:500;font-size:clamp(19px,1.6vw,22px);
  color:var(--stone-500);line-height:1;text-decoration:line-through;text-decoration-thickness:1px;
}
.hbpd-price-was[hidden]{display:none;}
/* HomeRunner's own price rows (mobile bar, price details) print the same two
   prices with no space between them. */
.hbpd .rent-deleted{margin-right:.35em;color:var(--stone-500);}
/* "Total 5 nights", filled by hbpd.js once the widget has a real quote.
   width:100% drops it to its own line inside the flex wrap. */
.hbpd-price-total{width:100%;font-size:13.5px;color:var(--stone-600);margin-top:5px;}
.hbpd-book-rate{display:inline-flex;align-items:center;gap:6px;font-size:14px;flex:0 0 auto;}
.hbpd-book-rate b{font-family:var(--font-mono);font-weight:500;color:var(--primary-900);}
/* 16px on top. The widget's first visible row used to be its own .rent-unit
   price line, which spaced the date fields off the header; that line is
   hidden now (the card header mirrors it), so without this the Check In
   labels sat flush against the header's border. */
.hbpd-book-widget{padding:16px var(--rail-pad) var(--rail-pad);}

/* HomeRunner booking widget, keep it inside our card */
.hbpd-book-widget .uk-card,.hbpd-book-widget .hk-card{
  box-shadow:none !important;border:0 !important;background:transparent !important;padding:0 !important;
}
/* The widget body ships its own 20px box. Ours is the only one that should
   count, or the form ends up inset twice as far as the price above it. */
.hbpd-book-widget .homelocal-booking-widget-body{padding:0 !important;}
/* Its rows stack margin-bottom on the row and margin-top on the control
   inside, which doubles up into a loose 20px ladder. Halve the outer half and
   leave the label to control gap alone. */
.hbpd-book-widget .checkin-row,
.hbpd-book-widget .checkout-row,
.hbpd-book-widget .guests-row{margin-bottom:4px !important;}
.hbpd-book-widget .homelocal-booking-widget{max-width:100% !important;}
/* Air between the last field (Guests) and the CTA. Before dates are picked
   the overview rows between them are hidden, so the button sat almost flush
   against the select. Scoped to the desktop container: the mobile sticky
   bar packs its own button tight on purpose. */
.hbpd-book-widget .homelocal-booking-widget-container .checkout-button{margin-top:18px !important;}
/* The widget's own per-night and nights lines are hidden because the card
   header mirrors them (hbpd.js). Scoped to the desktop container so the
   mobile sticky bar, which has no header of ours above it, keeps its own
   price line. The nodes stay in the DOM, that is what the mirror reads. */
.hbpd-book-widget .homelocal-booking-widget-container .rent-unit,
.hbpd-book-widget .homelocal-booking-widget-container .total-nights{display:none !important;}
.hbpd-book-widget input,.hbpd-book-widget select,.hbpd-book-widget button{
  font-family:var(--font-sans) !important;text-transform:none !important;letter-spacing:normal !important;
}
/* HomeRunner ships square corners on its fields; every other input on this
   page is var(--r-md), so these follow the site instead of the plugin. */
.hbpd-book-widget .hk-input,.hbpd-book-widget .hk-select,
.hbpd-book-widget input[type=text],.hbpd-book-widget select{
  border-radius:var(--r-md) !important;
  border-color:var(--stone-200) !important;
}
/* "Show Details" is a text button and the theme's global button:hover paints
   it a dark slab. Pin both states to transparent and let the underline do
   the work. Same treatment for the Close button inside the price modal. */
.hbpd-book-widget .price-details-modal-button,
.homelocal-booking-price-details-modal .hk-modal-close{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:var(--primary-800) !important;font-weight:600 !important;
  text-decoration:underline;text-underline-offset:3px;padding:4px 0 !important;cursor:pointer;
}
.hbpd-book-widget .price-details-modal-button:hover,
.hbpd-book-widget .price-details-modal-button:focus,
.homelocal-booking-price-details-modal .hk-modal-close:hover{
  background:transparent !important;color:var(--primary-900) !important;
}
/* The Price Details modal opens transparent on this install: the hk-modal
   bundle that ships with the booking widget carries the toggle behaviour but
   not the dialog chrome, so the table floated unreadable over the page.
   Painted here instead: dim scrim, solid dialog, z-index above the sticky
   nav (99990) and below our own modals (99995).

   NO .hbpd prefix and NO var() anywhere in this block, both on purpose.
   hk-modal is a UIkit build, and UIkit re-appends an opening modal to
   <body>: the first version of these rules was scoped under .hbpd and died
   the moment the modal moved out of it, which is exactly the transparent
   modal it was supposed to fix. Outside .hbpd the custom properties do not
   exist either, so every value is a literal from the token sheet at the top
   of this file. */
.homelocal-booking-price-details-modal.hk-modal{
  background:rgba(27,36,56,.55) !important;z-index:99994;
}
.homelocal-booking-price-details-modal .hk-modal-dialog{
  background:#fefdfc !important;color:#2b2926;
  width:min(92vw,540px);margin:8vh auto;padding:26px 24px !important;
  border-radius:16px;box-shadow:0 30px 70px rgba(27,36,56,.30);
}
.homelocal-booking-price-details-modal .hk-modal-title{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-size:24px;font-weight:600;color:#1b2438;margin:0 0 14px;
}
.homelocal-booking-price-details-modal table{width:100%;border-collapse:collapse;}
.homelocal-booking-price-details-modal td,
.homelocal-booking-price-details-modal th{
  padding:9px 6px;font-size:14.5px;color:#4a463f;
  border-bottom:1px solid #ddd6c6;background:transparent !important;
}
/* Their subtotal and total rows carry hk-background-muted; with the cell
   backgrounds forced transparent above, give those rows the sand tone back
   so the two summary lines still stand out from the itemised ones. */
.homelocal-booking-price-details-modal tr.hk-background-muted td{
  background:#f1ecdf !important;font-weight:700;color:#1b2438;
}

/* The availability calendar modal is the same hk-modal build (and gets the
   same re-append to <body>, hence no .hbpd scope and literal values). Its
   footer buttons, CLEAR DATES and CLOSE, were picking up the theme's dark
   button:hover slab. Pin both states; the day cells are divs, untouched. */
.homelocal-availability-calendar-modal .hk-button,
.homelocal-availability-calendar-modal .hk-button:hover,
.homelocal-availability-calendar-modal .hk-button:focus{
  background:transparent !important;color:#2d3857 !important;
  box-shadow:none !important;border-color:#ddd6c6 !important;
}
.homelocal-availability-calendar-modal .hk-button:hover{color:#1b2438 !important;}
.hbpd-book-widget .uk-button-primary,.hbpd-book-widget .hk-button-primary{
  background:var(--accent-500) !important;color:var(--primary-900) !important;
  border-radius:var(--r-md) !important;font-weight:700 !important;border:0 !important;
}
.hbpd-book-widget .uk-button-primary:hover,.hbpd-book-widget .hk-button-primary:hover{
  background:var(--accent-600) !important;
}

/* -------------------------------------------------------------- bands */
.hbpd-band{padding:clamp(44px,6vw,80px) 0;border-top:1px solid var(--stone-200);}
.hbpd-band-soft{background:var(--paper);}
.hbpd-band-navy{background:var(--primary-700);border-top:0;}
.hbpd-band-navy .hbpd-sec-h,.hbpd-band-navy h2,.hbpd-band-navy h3{color:var(--light);}
.hbpd-conc{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:12px;}
.hbpd-conc li{
  display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--paper-bright);
  border:1px solid var(--stone-200);border-radius:var(--r-md);font-size:14.5px;
  font-weight:600;color:var(--primary-800);
}
.hbpd-conc .hbpd-ico{width:20px;height:20px;color:var(--accent-700);}

.hbpd-related{margin-bottom:26px;}
/* The related-properties shortcode prints its own header before the grid: a
   ul.hk-list holding a home icon and an h3, "Explore other places in <city>".
   Our section head already says exactly that, and the list ships with
   opacity:0 from its scrollspy anyway, so all it contributed was an invisible
   block of whitespace between the heading and the cards. Scoped to the direct
   child so the selector can never reach into a card. */
.hbpd-related .hk-width-1-1 > ul.hk-list{display:none !important;}
.hbpd-related .uk-card,.hbpd-related .hk-card{border-radius:var(--r-lg) !important;overflow:hidden;}
/* HomeRunner's own markup pushes the first card 32px right of the heading:
   .hfse-properties-container adds 20px of padding and every card another
   12px of margin. Drop the padding and pull the strip back by one card
   margin, which keeps the gap BETWEEN cards and lands the outer edges on
   the same line as the title. Measured on the live DOM, 2026-08-07. */
.hbpd-related .hfse-properties-container{
  padding-left:0 !important;padding-right:0 !important;
  margin-left:-12px !important;margin-right:-12px !important;
}

.hbpd-owner{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;}
.hbpd-owner-h{font-size:clamp(29px,3.2vw,42px);margin-top:10px;max-width:22ch;}
.hbpd-owner-h em{font-style:italic;color:var(--accent-400);font-weight:500;}
.hbpd-owner p{margin-top:14px;font-size:16.5px;color:rgba(250,245,231,.85);max-width:52ch;line-height:1.65;}
.hbpd-owner-trust{margin-top:16px;font-size:15px;color:rgba(250,245,231,.72);}
.hbpd-owner-trust b{font-family:var(--font-mono);font-weight:500;color:var(--accent-400);}
.hbpd-owner-cta{flex:0 0 auto;}

/* ------------------------------------------------------------- modals */
.hbpd-modal{position:fixed;inset:0;z-index:99995;display:none;}
.hbpd-modal.is-open{display:block;}
.hbpd-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.hbpd-modal-box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,760px);
  max-height:86vh;display:flex;flex-direction:column;background:var(--paper);
  border-radius:var(--r-lg);box-shadow:var(--sh-xl);overflow:hidden;
}
.hbpd-modal.is-narrow .hbpd-modal-box{width:min(92vw,470px);}
.hbpd-modal-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex:0 0 auto;
  padding:18px 22px;border-bottom:1px solid var(--stone-200);background:var(--paper-bright);
}
.hbpd-modal-bar span{
  font-family:var(--font-sans);font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone-600);
}
.hbpd-modal-body{padding:26px 24px 30px;overflow-y:auto;}
/* .hbpd qualifier and !important for the same reason as .hbpd-loc-row h3: this
   is an h3 and the global heading reset pins text-transform:none !important. */
.hbpd .hbpd-modal-h3{
  font-family:var(--font-sans) !important;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase !important;color:var(--accent-700);margin:26px 0 10px;
}
.hbpd .hbpd-x{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:transparent !important;border:1px solid var(--stone-200) !important;
  border-radius:100px !important;cursor:pointer;color:var(--primary-800) !important;padding:0 !important;
}
.hbpd .hbpd-x:hover{background:var(--stone-100) !important;}

.hbpd-share{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.hbpd-share-i{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:20px 10px;background:var(--paper-bright) !important;border:1px solid var(--stone-200) !important;
  border-radius:var(--r-md) !important;font-size:12.5px;font-weight:600;cursor:pointer;
  color:var(--primary-800) !important;transition:border-color .25s var(--ease);
}
.hbpd-share-i:hover{border-color:var(--primary-700) !important;}
.hbpd-share-i > span{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:100px;
  background:var(--primary-700);color:var(--light);
}
/* The real marks (hbpd_share_glyph), not initial letters. Filled logos, so
   they size by the box alone. WhatsApp's official path draws to the very
   edge of its viewBox, hence 18px rather than something larger. */
.hbpd-share-i > span .hbpd-share-svg{width:18px;height:18px;display:block;}
.hbpd-share-i em{font-style:normal;}
@media (max-width:520px){.hbpd-share{grid-template-columns:repeat(2,1fr);}}

/* ----------------------------------------------------------- lightbox */
.hbpd-lb{position:fixed;inset:0;z-index:99996;display:none;flex-direction:column;background:var(--canvas);}
.hbpd-lb.is-open{display:flex;}
.hbpd-lb-bar{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(16px,4vw,40px);background:rgba(246,242,232,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--stone-200);flex:0 0 auto;
}
.hbpd-lb-title{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--primary-900);}
.hbpd-lb-grid{
  flex:1;overflow-y:auto;padding:22px clamp(16px,4vw,40px) 70px;max-width:1020px;margin:0 auto;
  width:100%;display:grid;gap:8px;grid-template-columns:1fr 1fr;
  /* max-content, not the default auto. flex:1 gives this grid a DEFINITE
     height, and auto rows then share that height out between themselves
     instead of growing to their photos: every row collapsed to ~26px and
     the images were clipped to slivers. Verified on the live page. */
  grid-auto-rows:max-content;
  /* No visible scrollbar. The grid still scrolls (wheel, touch, keys), the
     gutter just does not draw: on a full screen photo wall the bar read as
     chrome. Both properties needed, Firefox takes the first, WebKit the
     pseudo element below. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.hbpd-lb-grid::-webkit-scrollbar{display:none;width:0;height:0;}
.hbpd-lb-grid figure{margin:0;cursor:pointer;overflow:hidden;border-radius:var(--r-md);background:var(--stone-100);}
.hbpd-lb-grid figure:nth-child(3n+1){grid-column:1 / -1;}
.hbpd-lb-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease-out);}
.hbpd-lb-grid figure:nth-child(3n+1) img{aspect-ratio:16/9;}
.hbpd-lb-grid figure:hover img{transform:scale(1.02);}
.hbpd-lb-grid figcaption{
  padding:8px 4px 12px;font-size:13px;color:var(--stone-600);line-height:1.5;
}
.hbpd-lb-one{display:none;flex:1;align-items:center;justify-content:center;position:relative;min-height:0;padding:20px;}
.hbpd-lb.is-single .hbpd-lb-grid{display:none;}
.hbpd-lb.is-single .hbpd-lb-one{display:flex;}
.hbpd-lb-one figure{max-width:min(1100px,92vw);text-align:center;}
.hbpd-lb-one img{max-height:calc(100vh - 190px);width:auto;max-width:100%;margin:0 auto;border-radius:var(--r-md);}
.hbpd-lb-one figcaption{margin-top:14px;font-size:14px;color:var(--stone-600);max-width:74ch;margin-left:auto;margin-right:auto;}
.hbpd-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(251,249,242,.94) !important;border:1px solid var(--stone-200) !important;
  border-radius:100px !important;color:var(--primary-900) !important;box-shadow:var(--sh-md);padding:0 !important;
}
.hbpd-lb-prev{left:clamp(8px,2vw,26px);}
.hbpd-lb-next{right:clamp(8px,2vw,26px);}
.hbpd-lb-count{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:13px;color:var(--stone-600);
}
@media (max-width:640px){
  .hbpd-lb-grid{grid-template-columns:1fr;}
  .hbpd-lb-grid figure:nth-child(3n+1){grid-column:auto;}
  .hbpd-lb-title{font-size:17px;}
}

/* --------------------------------------------------- Fluent Forms skin */
.hbpd-ask-form .ff-el-group{margin-bottom:16px;}
.hbpd-ask-form .ff-el-input--label label{
  font-family:var(--font-sans) !important;font-size:13px !important;font-weight:700 !important;
  color:var(--primary-800) !important;letter-spacing:.02em;text-transform:none !important;
}
.hbpd-ask-form input[type=text],.hbpd-ask-form input[type=email],.hbpd-ask-form input[type=tel],
.hbpd-ask-form input[type=number],.hbpd-ask-form input[type=date],.hbpd-ask-form select,
.hbpd-ask-form textarea,.hbpd-ask-form .ff-el-form-control{
  font-family:var(--font-sans) !important;font-size:15px !important;color:var(--ink) !important;
  background:var(--white) !important;border:1px solid var(--stone-200) !important;
  border-radius:var(--r-md) !important;padding:12px 14px !important;box-shadow:none !important;
  text-transform:none !important;letter-spacing:normal !important;min-height:46px;
}
.hbpd-ask-form textarea,.hbpd-ask-form textarea.ff-el-form-control{min-height:118px;}
.hbpd-ask-form .ff-el-form-control:focus{
  border-color:var(--accent-500) !important;box-shadow:var(--focus) !important;outline:none !important;
}
.hbpd-ask-form .ff-btn-submit,.hbpd-ask-form button.ff-btn{
  background:var(--accent-500) !important;color:var(--primary-900) !important;
  border:0 !important;border-radius:var(--r-md) !important;padding:14px 26px !important;
  font-family:var(--font-sans) !important;font-weight:700 !important;font-size:15px !important;
  text-transform:none !important;letter-spacing:normal !important;box-shadow:var(--sh-sm) !important;
}
.hbpd-ask-form .ff-btn-submit:hover{background:var(--accent-600) !important;box-shadow:var(--sh-md) !important;}
/* The post-submit confirmation. Fluent frames it as a bordered, shadowed box,
   which inside our already-carded form read as a box in a box. Plain text on
   the card is enough. */
.hbpd-ask-form .ff-message-success{
  border:0 !important;box-shadow:none !important;background:transparent !important;
  color:var(--primary-800);font-size:16px;padding:8px 0 !important;
}

/* ------------------------------------------------------- misc guards */
.hbpd [hidden]{display:none !important;}
body.hbpd-locked{overflow:hidden !important;}
@media (prefers-reduced-motion:reduce){
  .hbpd *,.hbpd *::before,.hbpd *::after{transition:none !important;animation:none !important;}
}