/**
 * Bespoke Garden Rooms — component styles.
 *
 * Design tokens live in style.css. This file turns them into the components in
 * the approved concept.
 *
 * HOW THIS IS USED
 * Build the structure in Elementor, then type the class name into the widget's
 * "CSS Classes" field (Advanced tab). The styling comes from here, not from the
 * Elementor UI. That keeps the design in version control instead of buried in
 * the database, and it survives a future change of builder.
 *
 * Selectors are doubled up where Elementor wraps things:
 *   .bgr-btn-cedar .elementor-button   → the widget
 *   a.bgr-btn-cedar                    → a plain link with the class
 *
 * The site is light-only by design. The mockup carried a dark mode because
 * artifact viewers have a theme setting; a garden room business site does not
 * need one, and a single committed palette reads more confidently.
 */

/* ==========================================================================
   1. Layout helpers
   ========================================================================== */

.bgr-section {
  padding-block: var(--bgr-s7);
}

.bgr-section--tight {
  padding-block: var(--bgr-s6);
}

/* Alternating band: sits on Surface 2 with hairline rules top and bottom. */
.bgr-band {
  background: var(--bgr-surface-2);
  border-top: 1px solid var(--bgr-rule);
  border-bottom: 1px solid var(--bgr-rule);
}

/* The dark trust band. */
.bgr-band-dark {
  background: var(--bgr-basalt);
  color: #E8EBE4;
}

.bgr-band-dark h1,
.bgr-band-dark h2,
.bgr-band-dark h3 {
  color: #fff;
}

.bgr-band-dark p {
  color: #9AA398;
}

.bgr-band-dark .bgr-eyebrow {
  color: #D9A877;
}

.bgr-band-dark em {
  color: #E0B78D;
}

/* --- grids ----------------------------------------------------------------
   Elementor containers default to flex. The class is doubled in each selector
   to raise specificity above `.e-con` so `display: grid` wins without needing
   !important. Layout lives here rather than in per-container flex settings,
   which keeps the page JSON simple and the responsive behaviour in one place.
   -------------------------------------------------------------------------- */

/* A "boxed" Elementor container wraps its children in an inner `.e-con-inner`
   div, so the grid has to be declared on that inner element — putting it on the
   outer one lays out a single child and leaves the cards stacked. Both are
   targeted so the classes work on boxed and full-width containers alike. */

/* Target exactly one element, never both.
   A boxed container puts its children inside `.e-con-inner`, so the grid goes
   there. A full-width container has no inner wrapper, so the grid goes on the
   element itself. Declaring it on both makes the inner wrapper a grid ITEM of
   its own parent grid — it lands in column one and the cards end up a third of
   the width they should be. */

.bgr-grid-2.e-con-boxed > .e-con-inner, .bgr-grid-2.e-con-full,
.bgr-grid-3.e-con-boxed > .e-con-inner, .bgr-grid-3.e-con-full,
.bgr-grid-4.e-con-boxed > .e-con-inner, .bgr-grid-4.e-con-full,
.bgr-split.e-con-boxed > .e-con-inner, .bgr-split.e-con-full,
.bgr-split-cb.e-con-boxed > .e-con-inner, .bgr-split-cb.e-con-full {
  display: grid;
  width: 100%;
}

.bgr-grid-2.e-con-boxed > .e-con-inner, .bgr-grid-2.e-con-full { grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.bgr-grid-3.e-con-boxed > .e-con-inner, .bgr-grid-3.e-con-full { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.bgr-grid-4.e-con-boxed > .e-con-inner, .bgr-grid-4.e-con-full { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }

/* Asymmetric splits: copy gets the wider column. */
.bgr-split.e-con-boxed > .e-con-inner, .bgr-split.e-con-full {
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: start;
}

.bgr-split-cb.e-con-boxed > .e-con-inner, .bgr-split-cb.e-con-full {
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

@media (max-width: 1024px) {
  .bgr-grid-3.e-con-boxed > .e-con-inner, .bgr-grid-3.e-con-full,
  .bgr-grid-4.e-con-boxed > .e-con-inner, .bgr-grid-4.e-con-full { grid-template-columns: repeat(2, 1fr); }
  .bgr-split.e-con-boxed > .e-con-inner, .bgr-split.e-con-full,
  .bgr-split-cb.e-con-boxed > .e-con-inner, .bgr-split-cb.e-con-full { grid-template-columns: 1fr; gap: var(--bgr-s5); }
}

@media (max-width: 767px) {
  .bgr-grid-2.e-con-boxed > .e-con-inner, .bgr-grid-2.e-con-full,
  .bgr-grid-3.e-con-boxed > .e-con-inner, .bgr-grid-3.e-con-full,
  .bgr-grid-4.e-con-boxed > .e-con-inner, .bgr-grid-4.e-con-full { grid-template-columns: 1fr; }
}

/* Section heading block: eyebrow, heading, lede. */
.bgr-sec-head {
  max-width: 64ch;
  margin-bottom: var(--bgr-s6);
}

/* ==========================================================================
   2. Type
   ========================================================================== */

.bgr-eyebrow,
.bgr-eyebrow .elementor-heading-title {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bgr-cedar);
  line-height: 1.4;
}

/* Light variant for use over photography. */
.bgr-eyebrow-light,
.bgr-eyebrow-light .elementor-heading-title {
  color: #E0B78D;
}

.bgr-lede,
.bgr-lede p {
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.7;
  color: var(--bgr-slate);
  max-width: 62ch;
}

/* Italic clause inside a heading — the accent device used throughout. */
.bgr-display em,
.bgr-display i {
  font-style: italic;
  color: var(--bgr-cedar);
}

/* Stops headings breaking with one orphaned word on the last line. */
.bgr-display,
.bgr-display .elementor-heading-title {
  text-wrap: balance;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.bgr-btn-cedar .elementor-button,
a.bgr-btn-cedar,
.bgr-btn-ghost .elementor-button,
a.bgr-btn-ghost,
.bgr-btn-solid .elementor-button,
a.bgr-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--bgr-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.bgr-btn-cedar .elementor-button,
a.bgr-btn-cedar {
  background-color: var(--bgr-cedar);
  color: #fff;
  border-color: var(--bgr-cedar);
}

.bgr-btn-cedar .elementor-button:hover,
a.bgr-btn-cedar:hover {
  background-color: var(--bgr-cedar-deep);
  border-color: var(--bgr-cedar-deep);
  color: #fff;
}

/* For use over photography only — needs a dark backdrop to read. */
.bgr-btn-ghost .elementor-button,
a.bgr-btn-ghost {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.bgr-btn-ghost .elementor-button:hover,
a.bgr-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.bgr-btn-solid .elementor-button,
a.bgr-btn-solid {
  background-color: var(--bgr-ink);
  color: var(--bgr-lichen);
  border-color: var(--bgr-ink);
}

.bgr-btn-solid .elementor-button:hover,
a.bgr-btn-solid:hover {
  background-color: var(--bgr-cedar);
  border-color: var(--bgr-cedar);
  color: #fff;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.bgr-topline {
  background: var(--bgr-basalt);
  border-bottom: 1px solid #2E352F;
  font-size: 13.5px;
  color: #AFB7AC;
}

.bgr-topline a {
  color: #AFB7AC;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bgr-topline a:hover {
  color: #fff;
}

.bgr-navbar {
  background: var(--bgr-basalt);
}

/* Nav links: uppercase, letterspaced, with a cedar rule that wipes in. */
.bgr-nav .elementor-nav-menu > li > a,
.bgr-nav .elementor-nav-menu a.elementor-item {
  font-family: var(--bgr-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #D5DBD1;
  padding: 6px 0;
  position: relative;
  transition: color 0.25s ease;
}

.bgr-nav .elementor-nav-menu a.elementor-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bgr-cedar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.bgr-nav .elementor-nav-menu a.elementor-item:hover,
.bgr-nav .elementor-nav-menu a.elementor-item-active {
  color: #fff;
}

.bgr-nav .elementor-nav-menu a.elementor-item:hover::after,
.bgr-nav .elementor-nav-menu a.elementor-item-active::after {
  transform: scaleX(1);
}

/* Elementor draws its own underline/highlight on nav items; suppress it so the
   rule above is the only indicator. */
.bgr-nav .e--pointer-underline .elementor-item:before,
.bgr-nav .e--pointer-underline .elementor-item:after {
  background: none;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

/* Height, never aspect-ratio. An aspect-ratio combined with a max-height makes
   the box shrink horizontally on wide monitors and leaves a dark gap beside the
   image — that was the bug in the first concept round. */
.bgr-hero {
  position: relative;
  width: 100%;
  min-height: 560px;
  height: min(80vh, 58vw);
  overflow: hidden;
  background: #0E110F;
}

.bgr-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two layered gradients: one left-to-right so the headline has a dark bed, one
   bottom-up so the caption plate reads. Elementor's overlay control only gives
   one, which is why this lives here. */
.bgr-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(12, 14, 13, 0.82) 0%, rgba(12, 14, 13, 0.52) 45%, rgba(12, 14, 13, 0.18) 78%, rgba(12, 14, 13, 0.35) 100%),
    linear-gradient(to top, rgba(12, 14, 13, 0.7) 0%, rgba(12, 14, 13, 0) 46%);
}

/* Full-bleed layer that vertically centres the headline over the slider.
   Having this in CSS means the hero is built as four plain stacked children in
   Elementor — no absolute-position controls to configure by hand. */
.bgr-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Keeps the buttons clear of the caption plate pinned to the bottom. */
  padding-bottom: 96px;
  /* Let clicks through to the carousel except on the copy itself. */
  pointer-events: none;
}

.bgr-hero-overlay > *,
.bgr-hero-overlay .e-con-inner {
  pointer-events: auto;
  width: 100%;
}

.bgr-hero-copy {
  max-width: 620px;
  color: #fff;
}

/* Scoped to the display heading. An eyebrow is a heading widget too, so an
   unscoped `.bgr-hero-copy .elementor-heading-title` sets the small uppercase
   label at 86px as well. */
.bgr-hero-copy h1,
.bgr-hero-copy .bgr-display .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: clamp(44px, 6.4vw, 86px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: #fff;
}

.bgr-hero-copy h1 em,
.bgr-hero-copy .bgr-display .elementor-heading-title em {
  font-style: italic;
  color: #E7C29B;
}

.bgr-hero-copy p {
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}

/* --- slide caption plate ------------------------------------------------- */

.bgr-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(to top, rgba(10, 12, 11, 0.66), rgba(10, 12, 11, 0));
  padding: 16px 0 20px;
}

.bgr-plate-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bgr-s3);
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--bgr-content-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.bgr-plate-id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
}

.bgr-plate-num {
  font-family: var(--bgr-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #E0B78D;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bgr-plate-name {
  font-family: var(--bgr-font-display);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  color: #fff;
  line-height: 1.25;
}

.bgr-plate-loc {
  display: block;
  font-family: var(--bgr-font-body);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
}

/* --- carousel overrides --------------------------------------------------- */

/* The widget's own caption is the data source for the plate. Hide it visually
   but keep it in the DOM and available to screen readers. */
.bgr-hero-slider .elementor-image-carousel-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The carousel fills the hero rather than sitting in normal flow, so the
   overlay layers stack on top of it without any manual positioning. */
.bgr-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bgr-hero-slider,
.bgr-hero-slider .elementor-widget-container,
.bgr-hero-slider .elementor-image-carousel-wrapper,
.bgr-hero-slider .swiper,
.bgr-hero-slider .swiper-wrapper,
.bgr-hero-slider .swiper-slide,
/* Elementor wraps each image in this figure. Left out of the chain, it sized
   itself to the photo's own ratio and the hero showed a black band below it on
   a phone, where the hero is much taller than a landscape photo. */
.bgr-hero-slider .swiper-slide-inner {
  height: 100%;
}

.bgr-hero-slider .swiper-slide-inner {
  display: block;
  margin: 0;
}

.bgr-hero-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slow zoom on the active slide. Duration is set from --bgr-slide-ms so it
   always matches the autoplay interval you set in the widget. */
.bgr-kenburns .swiper-slide-active img {
  animation: bgr-kenburns calc(var(--bgr-slide-ms, 6000) * 1.25ms) linear both;
}

@keyframes bgr-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Pagination as thin bars that fill over the slide duration, rather than dots. */
.bgr-hero-slider .swiper-pagination-bullet {
  width: 34px;
  height: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.bgr-hero-slider .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.5);
}

.bgr-hero-slider .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.bgr-hero-slider .swiper-pagination-bullet-active::after {
  animation: bgr-fill calc(var(--bgr-slide-ms, 6000) * 1ms) linear forwards;
}

@keyframes bgr-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ==========================================================================
   6. Facts list (intro section)
   ========================================================================== */

.bgr-facts {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bgr-rule);
}

.bgr-fact {
  display: flex;
  gap: var(--bgr-s3);
  align-items: baseline;
  padding-block: var(--bgr-s3);
  border-bottom: 1px solid var(--bgr-rule);
}

.bgr-fact-n {
  font-family: var(--bgr-font-display);
  font-size: 36px;
  line-height: 1;
  color: var(--bgr-cedar);
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: 92px;
}

.bgr-fact-t {
  font-size: 14.5px;
  color: var(--bgr-slate);
  line-height: 1.5;
}

.bgr-fact-t strong,
.bgr-fact-t b {
  display: block;
  color: var(--bgr-ink);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}

/* ==========================================================================
   7. Cards
   ========================================================================== */

.bgr-card {
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  overflow: hidden;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bgr-card:hover {
  transform: translateY(-4px);
  border-color: var(--bgr-cedar);
  box-shadow: 0 2px 4px rgba(25, 29, 27, 0.06), 0 24px 48px -20px rgba(25, 29, 27, 0.22);
}

.bgr-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bgr-card:hover img {
  transform: scale(1.05);
}

.bgr-card h3,
.bgr-card .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.bgr-card p {
  font-size: 14.5px;
  color: var(--bgr-slate);
  line-height: 1.6;
}

/* "View rooms →" — the arrow nudges right on hover. */
.bgr-card-more {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bgr-cedar);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.bgr-card-more::after {
  content: "→";
  display: inline-block;
  transition: transform 0.25s ease;
}

.bgr-card:hover .bgr-card-more::after {
  transform: translateX(4px);
}

/* ==========================================================================
   8. Process steps
   ========================================================================== */

.bgr-step {
  border-top: 2px solid var(--bgr-rule);
  padding-top: var(--bgr-s3);
  height: 100%;
}

/* Only the first rule is accented — it marks where the sequence starts without
   decorating every divider. */
.bgr-step--first {
  border-top-color: var(--bgr-cedar);
}

.bgr-step-n {
  font-family: var(--bgr-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bgr-cedar);
  font-variant-numeric: tabular-nums;
}

.bgr-step h3,
.bgr-step .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 20px;
  font-weight: 400;
}

.bgr-step p {
  font-size: 14.5px;
  color: var(--bgr-slate);
  line-height: 1.65;
}

/* ==========================================================================
   9. Gallery shots
   ========================================================================== */

.bgr-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--bgr-radius);
  border: 1px solid var(--bgr-rule);
  aspect-ratio: 4 / 3;
}

.bgr-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bgr-shot:hover img {
  transform: scale(1.05);
}

.bgr-shot figcaption,
.bgr-shot .bgr-shot-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(10, 12, 11, 0.78), rgba(10, 12, 11, 0));
}

/* Trust band item: hairline rule above, then heading and copy. */
.bgr-band-item {
  border-top: 1px solid #333B35;
  padding-top: var(--bgr-s3);
}

.bgr-band-item h3,
.bgr-band-item .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 1.25;
}

.bgr-band-item p {
  font-size: 14.5px;
  color: #9AA398;
  line-height: 1.65;
}

/* Phone and email on the callback section. */
.bgr-cb-direct {
  margin-top: var(--bgr-s4);
  padding-top: var(--bgr-s3);
  border-top: 1px solid var(--bgr-rule);
  line-height: 1.9;
}

.bgr-cb-direct a {
  font-family: var(--bgr-font-display);
  font-size: clamp(18px, 1.9vw, 24px);
  color: var(--bgr-ink);
  text-decoration: none;
  /* The address is one unbreakable word, wider than a small phone. Without
     this it pushed the whole page sideways on a 360px screen. */
  overflow-wrap: anywhere;
}

.bgr-cb-direct a:hover {
  color: var(--bgr-cedar);
}

.bgr-cb-note {
  font-size: 13px;
  color: var(--bgr-slate);
  line-height: 1.6;
  margin-top: var(--bgr-s2);
}

/* Line-height safety net.
   Elementor's Theme Style writes line-height with whatever unit is selected,
   and 1.65 saved as px collapses every inheriting block to two pixels tall.
   These give the components a sane floor so a unit slip in the builder cannot
   destroy the page.

   The kit really is saving it as px on this site, which collapsed the room
   breadcrumb to 3px tall and printed its two lines on top of each other. The
   rule below repairs it at the root: the attribute selector outranks the kit's
   own `.elementor-kit-NNNN`, and matches whatever number the kit is given if it
   is ever rebuilt. Fix the unit in Elementor as well, but the site must not
   depend on someone remembering to. */
body[class*="elementor-kit"] {
  line-height: 1.65;
}

.bgr-crumbs {
  line-height: 1.6;
}

/* Long unbroken strings in editor content, an email address or a full URL,
   are wider than a small phone and push the whole page sideways. The legal
   pages each carry one. `break-word` rather than `anywhere`: it only breaks a
   word when there is no other way to fit it. */
.bgr-prose,
.bgr-prose p,
.bgr-prose li,
.bgr-article-body,
.bgr-article-body p,
.bgr-article-body li,
.bgr-article-body a {
  overflow-wrap: break-word;
}

.bgr-section p,
.bgr-band-dark p,
.bgr-prose p,
.bgr-lede,
.bgr-lede p,
.bgr-card p,
.bgr-step p {
  line-height: 1.65;
}

.bgr-section h1,
.bgr-section h2,
.bgr-section h3,
.bgr-sec-head h2,
.bgr-hero-copy h1,
.bgr-rhero-copy h1 {
  line-height: 1.14;
}

/* ==========================================================================
   10. Single room page
   ========================================================================== */

.bgr-rhero {
  position: relative;
  width: 100%;
  min-height: 380px;
  height: min(56vh, 42vw);
  overflow: hidden;
  background: #0E110F;
}

/* Positioned to fill the hero rather than sized by percentage. On narrow
   screens the hero's height is a minimum, not a fixed value, and a percentage
   height against that resolves to nothing, so the photo fell back to its own
   shape and left grey bands above and below it. */
.bgr-rhero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bgr-rhero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12, 14, 13, 0.85) 0%, rgba(12, 14, 13, 0.25) 55%, rgba(12, 14, 13, 0.35) 100%);
}

/* Laid over the bottom of the photo. In normal flow it sat after the
   full-height image, and the hero's overflow:hidden cut it off. */
.bgr-rhero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  color: #fff;
  padding-bottom: clamp(28px, 4vw, 52px);
}

.bgr-rhero-copy .bgr-crumbs {
  margin-bottom: var(--bgr-s3);
}

.bgr-rhero-copy .bgr-eyebrow {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #E0B78D;
  margin-bottom: var(--bgr-s2);
}

body .bgr-rhero-copy h1 {
  margin: 0;
  color: #fff;
  text-wrap: balance;
}

.bgr-rhero-copy h1,
.bgr-rhero-copy .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: #fff;
}

.bgr-crumbs {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.bgr-crumbs a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}

.bgr-crumbs a:hover {
  color: #fff;
}

/* Imported room descriptions render through here. */
.bgr-prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--bgr-slate);
  margin-bottom: var(--bgr-s3);
  max-width: 64ch;
}

.bgr-prose p:first-of-type {
  font-size: clamp(18px, 1.7vw, 20.5px);
  color: var(--bgr-ink);
  line-height: 1.65;
}

.bgr-prose h2 {
  font-family: var(--bgr-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300;
  margin: var(--bgr-s5) 0 var(--bgr-s3);
}

/* --- spec panel ---------------------------------------------------------- */

.bgr-spec {
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  padding: var(--bgr-s3);
}

.bgr-spec h3 {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bgr-slate);
  margin-bottom: var(--bgr-s2);
}

/* Works with an Elementor Icon List, or a plain dl. */
.bgr-spec .elementor-icon-list-item,
.bgr-spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--bgr-s2);
  padding-block: 11px;
  border-bottom: 1px solid var(--bgr-rule-soft, #E4E7DF);
  font-size: 13.5px;
}

.bgr-spec .elementor-icon-list-item:last-child,
.bgr-spec-row:last-child {
  border-bottom: 0;
}

.bgr-spec-label {
  color: var(--bgr-slate);
  flex: none;
}

.bgr-spec-value {
  font-weight: 500;
  text-align: right;
  color: var(--bgr-ink);
}

/* --- room callout -------------------------------------------------------- */

.bgr-rcta {
  background: var(--bgr-basalt);
  border-radius: var(--bgr-radius);
  padding: var(--bgr-s3);
  color: #E8EBE4;
}

.bgr-rcta h3,
.bgr-rcta .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 21px;
  font-weight: 400;
  color: #fff;
}

.bgr-rcta p {
  font-size: 13.5px;
  color: #9AA398;
  line-height: 1.6;
}

/* Sidebar that follows the reader down the page.
   Elementor Pro's Sticky effect does this too — this works without Pro. */
.bgr-sticky {
  position: sticky;
  top: 24px;
}

/* ==========================================================================
   11. Forms
   ========================================================================== */

.bgr-form {
  background: var(--bgr-lichen);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  padding: clamp(22px, 3vw, 36px);
}

.bgr-form .elementor-field-label {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bgr-slate);
  margin-bottom: 7px;
}

.bgr-form .elementor-field-textual {
  font-family: var(--bgr-font-body);
  font-size: 15.5px;
  color: var(--bgr-ink);
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  padding: 12px 13px;
  transition: border-color 0.2s ease;
}

.bgr-form .elementor-field-textual:focus {
  border-color: var(--bgr-cedar);
  box-shadow: none;
  outline: none;
}

.bgr-form textarea.elementor-field-textual {
  min-height: 96px;
  resize: vertical;
}

.bgr-form .elementor-button[type="submit"] {
  width: 100%;
  background-color: var(--bgr-cedar);
  color: #fff;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 14px 26px;
}

.bgr-form .elementor-button[type="submit"]:hover {
  background-color: var(--bgr-cedar-deep);
}

.bgr-form-fine {
  font-size: 12.5px;
  color: var(--bgr-slate);
  text-align: center;
  line-height: 1.55;
}

/* ==========================================================================
   12. Motion
   ========================================================================== */

.bgr-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.bgr-rv.is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   13. Accessibility
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--bgr-cedar);
  outline-offset: 3px;
}

.bgr-skip-link {
  position: absolute;
  left: -9999px;
}

.bgr-skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 999;
  background: var(--bgr-basalt);
  color: #fff;
  padding: 12px 18px;
  border-radius: 2px;
}

/* ==========================================================================
   14. Responsive

   Breakpoints match Elementor's defaults (tablet 1024, mobile 767) so the
   builder's responsive controls and these rules switch at the same width.
   If the breakpoints are ever changed in Site Settings > Layout, change them
   here too or grids will restack before the styles follow.
   ========================================================================== */

@media (max-width: 1024px) {
  .bgr-sticky {
    position: static;
  }

  .bgr-rhero {
    height: auto;
    min-height: 340px;
  }
}

@media (max-width: 767px) {
  .bgr-section {
    padding-block: var(--bgr-s6);
  }

  .bgr-hero {
    height: 84vh;
    min-height: 540px;
  }

  .bgr-hero-copy {
    padding-bottom: 120px;
  }

  .bgr-plate-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bgr-s2);
  }

  .bgr-fact-n {
    min-width: 70px;
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .bgr-rv {
    opacity: 1;
    transform: none;
  }

  .bgr-kenburns .swiper-slide-active img {
    animation: none;
    transform: none;
  }
}

/* ==========================================================================
   15. Specificity overrides

   Elementor loads its per-widget stylesheets (widget-heading.css and friends)
   AFTER this file, so rules like `.elementor-widget-heading
   .elementor-heading-title` tie with ours on specificity and win on source
   order. Prefixing with `body` adds a type selector, which breaks the tie
   without resorting to !important.

   Only rules that target Elementor's own markup need this. Anything styling a
   plain .bgr-* element is unaffected.
   ========================================================================== */

body .bgr-eyebrow,
body .bgr-eyebrow .elementor-heading-title {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-cedar);
}

body .bgr-eyebrow-light,
body .bgr-eyebrow-light .elementor-heading-title {
  color: #E0B78D;
}

body .bgr-display .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-weight: 300;
  line-height: 1.14;
  text-wrap: balance;
}

/* Scoped to .bgr-display, not to every heading in the container — an eyebrow
   is a heading widget too, and an unscoped rule here renders it at 78px. */
body .bgr-hero-copy .bgr-display .elementor-heading-title {
  font-size: clamp(40px, 5.6vw, 78px);
  color: #fff;
  line-height: 1.06;
}

body .bgr-card .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}

body .bgr-step .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

body .bgr-band-item .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 1.25;
}

body .bgr-sec-head .bgr-display .elementor-heading-title {
  font-size: clamp(30px, 3.6vw, 48px);
}

/* Small uppercase labels must never wrap — a collapsed line-height turns a
   two-line "VIEW ROOMS" into overlapping text. */
.bgr-card-more,
.bgr-step-n,
.bgr-plate-num {
  line-height: 1.4;
  white-space: nowrap;
}

/* Section heads and hero copy sit tighter than Elementor's default widget gap. */
body .bgr-sec-head > .e-con-inner,
body .bgr-hero-copy {
  gap: var(--bgr-s2);
}

body .bgr-btn-cedar .elementor-button,
body .bgr-btn-ghost .elementor-button,
body .bgr-btn-solid .elementor-button {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 14px 26px;
}

body .bgr-btn-cedar .elementor-button { background-color: var(--bgr-cedar); color: #fff; }
body .bgr-btn-cedar .elementor-button:hover { background-color: var(--bgr-cedar-deep); }
body .bgr-btn-ghost .elementor-button { background-color: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
body .bgr-btn-ghost .elementor-button:hover { background-color: rgba(255,255,255,.12); border-color: #fff; }
body .bgr-btn-solid .elementor-button { background-color: var(--bgr-ink); color: var(--bgr-lichen); }
body .bgr-btn-solid .elementor-button:hover { background-color: var(--bgr-cedar); color: #fff; }

/* The card image must fill its cell edge to edge. */
body .bgr-card .elementor-widget-image,
body .bgr-card .elementor-widget-image .elementor-widget-container {
  width: 100%;
  line-height: 0;
}

body .bgr-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Hero crop: bias away from empty sky. */
body .bgr-hero-slider img {
  object-position: center 60%;
}

/* ==========================================================================
   16. Site header and footer

   Rendered by template-parts/header.php and footer.php, so these are plain
   elements — no Elementor markup to work around.
   ========================================================================== */

.bgr-wrap {
  width: 100%;
  max-width: var(--bgr-content-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* --- header --------------------------------------------------------------- */

.bgr-header {
  position: relative;
  z-index: 40;
}

.bgr-topline .bgr-wrap {
  display: flex;
  justify-content: flex-end;
  gap: var(--bgr-s3);
  padding-block: 10px;
  flex-wrap: wrap;
  line-height: 1.5;
}

.bgr-topline a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bgr-topline-label {
  color: #7E877D;
}

.bgr-navbar .bgr-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bgr-s3);
  padding-block: 16px;
}

.bgr-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.bgr-logo--header { width: 150px; height: auto; }
.bgr-logo--footer { width: 165px; height: auto; margin-bottom: var(--bgr-s3); }

.bgr-logo-text {
  font-family: var(--bgr-font-display);
  font-size: 26px;
  color: #fff;
}

.bgr-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bgr-menu a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-family: var(--bgr-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #D5DBD1;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.25s ease;
}

.bgr-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bgr-cedar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.bgr-menu a:hover,
.bgr-menu .current-menu-item > a {
  color: #fff;
}

.bgr-menu a:hover::after,
.bgr-menu .current-menu-item > a::after {
  transform: scaleX(1);
}

.bgr-header-cta { flex: none; }

/* --- mobile nav ----------------------------------------------------------- */

/* `body button.bgr-burger`, not `.bgr-burger`: the Elementor kit styles every
   `button` on the site, cedar background and all, and a tag plus a class beats
   a lone class. Written weaker, this rendered as a solid orange block with the
   menu bars barely visible on it. */
body button.bgr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid #333B35;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
}

body button.bgr-burger:hover {
  background: none;
  border-color: #55605A;
}

.bgr-burger span[aria-hidden] {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: #D5DBD1;
}

.bgr-mobile-nav {
  background: var(--bgr-basalt);
  border-top: 1px solid #2E352F;
  padding-block: var(--bgr-s3);
}

.bgr-menu-mobile {
  list-style: none;
  margin: 0 0 var(--bgr-s3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bgr-s2);
}

.bgr-menu-mobile a {
  font-family: var(--bgr-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #D5DBD1;
  text-decoration: none;
}

.bgr-menu-mobile a:hover { color: #fff; }

/* --- footer --------------------------------------------------------------- */

.bgr-footer {
  background: var(--bgr-basalt);
  color: #B9C0B5;
  padding-block: var(--bgr-s6) var(--bgr-s4);
  font-size: 14.5px;
  line-height: 1.65;
}

.bgr-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
}

.bgr-foot-brand p {
  color: #8E968C;
  font-size: 14px;
  line-height: 1.65;
  max-width: 34ch;
  margin: 0;
}

.bgr-foot-heading {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--bgr-s3);
}

.bgr-foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bgr-foot-list a,
.bgr-foot-contact a {
  color: #B9C0B5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bgr-foot-list a:hover { color: var(--bgr-cedar); }
.bgr-foot-contact a:hover { color: #fff; }

.bgr-foot-contact {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
}

.bgr-foot-cta { margin-top: 8px; }

.bgr-foot-bar {
  margin-top: var(--bgr-s6);
  padding-top: var(--bgr-s3);
  border-top: 1px solid #2E352F;
  display: flex;
  justify-content: space-between;
  gap: var(--bgr-s3);
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #7E877D;
}

.bgr-foot-legal a {
  color: #7E877D;
  text-decoration: none;
}

.bgr-foot-legal a:hover { color: #B9C0B5; }

@media (max-width: 1024px) {
  .bgr-foot-grid { grid-template-columns: 1fr 1fr; }

  /* `a.bgr-header-cta`, not `.bgr-header-cta`: the button's own rule is
     `a.bgr-btn-cedar`, and an element plus a class outranks a lone class no
     matter which rule comes last. Written as a class alone this did nothing,
     and the header stayed wider than a phone screen. */
  .bgr-menu,
  a.bgr-header-cta { display: none; }

  body button.bgr-burger { display: flex; }
}

@media (max-width: 767px) {
  .bgr-foot-grid { grid-template-columns: 1fr; }
  .bgr-topline .bgr-wrap { justify-content: center; font-size: 12.5px; }
}

/* ==========================================================================
   17. Carousel pagination

   Elementor renders the dots outside the widget by default. The slider is
   absolutely positioned to fill the hero, so they need placing deliberately —
   bottom right, on the same baseline as the caption plate.
   ========================================================================== */

.bgr-hero-slider .swiper-pagination,
.bgr-hero-slider .elementor-swiper-button {
  z-index: 6;
}

.bgr-hero-slider .swiper-pagination {
  position: absolute;
  left: auto;
  right: clamp(20px, 4vw, 48px);
  bottom: 26px;
  width: auto;
  display: flex;
  gap: 9px;
  align-items: center;
}

.bgr-hero-slider .swiper-pagination-bullet {
  width: 40px;
  height: 3px;
  margin: 0 !important;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bgr-hero-slider .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Wider hit area than the 3px bar, so it is actually clickable. */
.bgr-hero-slider .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

.bgr-hero-slider .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.bgr-hero-slider .swiper-pagination-bullet-active::after {
  animation: bgr-fill calc(var(--bgr-slide-ms, 6000) * 1ms) linear forwards;
}

@media (max-width: 767px) {
  .bgr-hero-slider .swiper-pagination { bottom: 16px; }
  .bgr-hero-slider .swiper-pagination-bullet { width: 26px; }
}

/* ==========================================================================
   18. Fixes

   The Elementor kit styles headings by tag — `.elementor-kit-2170 h2` — which
   is a class plus a type selector. A single class of ours ties on specificity
   and loses on source order, so footer headings came out at 40px. Two classes
   settle it. The kit also writes line-height with whatever unit is selected in
   the builder, and 1.15 saved as px collapses a heading onto itself.
   ========================================================================== */

.bgr-footer .bgr-foot-heading {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 var(--bgr-s3);
}

.bgr-footer .bgr-foot-list,
.bgr-footer .bgr-foot-contact,
.bgr-footer .bgr-foot-brand p,
.bgr-footer .bgr-foot-bar {
  line-height: 1.65;
}

.bgr-header .bgr-menu a,
.bgr-header .bgr-topline a {
  line-height: 1.4;
}

/* Crop from just above centre. Buildings sit mid-frame with sky above; pushing
   further down loses the roofline and shows fence and grass instead. */
body .bgr-hero-slider img {
  object-position: center 45%;
}

/* A gentler zoom. At 1.06 the first frames are visibly soft on a large hero. */
@keyframes bgr-kenburns {
  from { transform: scale(1.035); }
  to   { transform: scale(1); }
}

/* ==========================================================================
   19. Carousel pagination, forced

   Elementor's widget-image-carousel.min.css and Swiper's own stylesheet both
   load AFTER this file and both style the pagination. A `body` prefix adds a
   type selector so these win the tie without !important.

   `.elementor-widget-image-carousel .swiper` is set to `position: static` by
   Elementor, so the bullets resolve their absolute position against
   `.bgr-hero-slider` — which is exactly where we want them.
   ========================================================================== */

body .bgr-hero-slider .swiper-pagination,
body .bgr-hero-slider .swiper-pagination-bullets,
body .bgr-hero-slider .swiper-horizontal > .swiper-pagination-bullets {
  position: absolute;
  z-index: 10;
  inset: auto clamp(20px, 4vw, 48px) 30px auto;
  left: auto;
  width: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body .bgr-hero-slider .swiper-pagination-bullet {
  width: 44px;
  height: 3px;
  margin: 0;
  flex: none;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background-color 0.2s ease;
}

body .bgr-hero-slider .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* The bar is 3px tall; this gives it a finger-sized target without changing
   how it looks. */
body .bgr-hero-slider .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: -14px -5px;
}

body .bgr-hero-slider .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

body .bgr-hero-slider .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.3);
}

body .bgr-hero-slider .swiper-pagination-bullet-active::after {
  animation: bgr-fill calc(var(--bgr-slide-ms, 6000) * 1ms) linear forwards;
}

/* Elementor pads the carousel to sit the dots underneath it; the hero needs
   them inside the frame. */
body .bgr-hero-slider.elementor-pagination-position-outside .swiper,
body .bgr-hero-slider .elementor-image-carousel-wrapper {
  padding-bottom: 0;
}

@media (max-width: 767px) {
  body .bgr-hero-slider .swiper-pagination { bottom: 18px; }
  body .bgr-hero-slider .swiper-pagination-bullet { width: 28px; }
}

/* ==========================================================================
   20. Room listing, gallery and inner pages

   These render from shortcodes as plain markup, so there is no Elementor
   wrapper to work around and the selectors stay simple.
   ========================================================================== */

.bgr-page-hero { padding-block: var(--bgr-s6) var(--bgr-s5); }
.bgr-page-head { margin-bottom: 0; }

/* On a narrow screen the intro and the listing below it are both padded, which
   stacked into a gap of well over 100px of empty page. */
@media (max-width: 1024px) {
  .bgr-page-hero.bgr-page-hero { padding-block: var(--bgr-s5) var(--bgr-s3); }
  .bgr-brochure-list.bgr-brochure-list { padding-top: var(--bgr-s3); }
}

/* --- filters -------------------------------------------------------------- */

.bgr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--bgr-s3);
}

.bgr-filter {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
  background: transparent;
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.bgr-filter:hover {
  color: var(--bgr-ink);
  border-color: var(--bgr-slate);
}

.bgr-filter.is-on {
  background: var(--bgr-ink);
  border-color: var(--bgr-ink);
  color: var(--bgr-lichen);
}

.bgr-rooms-count {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bgr-slate);
  margin: 0 0 var(--bgr-s4);
}

/* --- grids ---------------------------------------------------------------- */

.bgr-room-grid,
.bgr-gallery {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
}

.bgr-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bgr-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bgr-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .bgr-cols-3, .bgr-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .bgr-cols-2, .bgr-cols-3, .bgr-cols-4 { grid-template-columns: 1fr; }
}

/* --- room card (plain markup version) ------------------------------------- */

.bgr-room-card {
  display: flex;
  flex-direction: column;
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bgr-room-card:hover {
  transform: translateY(-4px);
  border-color: var(--bgr-cedar);
  box-shadow: 0 2px 4px rgba(25, 29, 27, 0.06), 0 24px 48px -20px rgba(25, 29, 27, 0.22);
}

.bgr-card-media {
  display: block;
  overflow: hidden;
  background: var(--bgr-surface-2);
  line-height: 0;
}

.bgr-card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bgr-room-card:hover .bgr-card-media img { transform: scale(1.05); }

.bgr-card-noimage { aspect-ratio: 4 / 3; background: var(--bgr-surface-2); }

.bgr-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--bgr-s3) var(--bgr-s3) var(--bgr-s4);
  flex: 1;
}

.bgr-card-cat {
  font-family: var(--bgr-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bgr-cedar);
  line-height: 1.4;
}

.bgr-card-title {
  font-family: var(--bgr-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bgr-ink);
}

.bgr-card-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bgr-slate);
}

.bgr-room-card .bgr-card-more { margin-top: auto; padding-top: var(--bgr-s2); }

/* --- gallery -------------------------------------------------------------- */

.bgr-gallery .bgr-shot { display: block; text-decoration: none; }
.bgr-gallery figure { margin: 0; }

.bgr-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* --- single room ---------------------------------------------------------- */

.bgr-room-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 1024px) {
  .bgr-room-layout { grid-template-columns: 1fr; gap: var(--bgr-s5); }
}

.bgr-spec h2 {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
  margin: 0 0 var(--bgr-s2);
}

.bgr-rcta h2 {
  font-family: var(--bgr-font-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 8px;
}

.bgr-rcta .bgr-btn-cedar { width: 100%; margin-top: var(--bgr-s2); }

.bgr-rcta-tel {
  display: block;
  text-align: center;
  margin-top: var(--bgr-s2);
  font-size: 13px;
  color: #9AA398;
  text-decoration: none;
}

.bgr-rcta-tel:hover { color: #fff; }

/* --- process and contact -------------------------------------------------- */

.bgr-ticks {
  list-style: none;
  margin: var(--bgr-s3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 62ch;
}

.bgr-ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bgr-slate);
}

.bgr-ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bgr-cedar);
  font-weight: 600;
}

.bgr-contact-h {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
  margin: var(--bgr-s4) 0 var(--bgr-s2);
}

.bgr-contact-block > .bgr-contact-h:first-child { margin-top: 0; }

.bgr-contact-block p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--bgr-slate);
  margin: 0;
}

.bgr-cta-copy { max-width: 62ch; margin-bottom: 0; }

.bgr-cta-buttons {
  display: flex;
  flex-direction: row;
  gap: var(--bgr-s2);
  flex-wrap: wrap;
  margin-top: var(--bgr-s3);
}

/* ==========================================================================
   21. Hero slide controls

   Rendered by bgr-ui.js into the caption plate. Native Swiper pagination is
   hidden — it lives inside markup that three stylesheets compete over, and
   these bars sit somewhere nothing else touches.
   ========================================================================== */

body .bgr-hero-slider .swiper-pagination {
  display: none;
}

.bgr-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: none;
  margin-left: auto;
}

.bgr-dot {
  width: 44px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease;
}

.bgr-dot:hover {
  background: rgba(255, 255, 255, 0.65);
}

/* Finger-sized target over a 3px bar. */
.bgr-dot::before {
  content: "";
  position: absolute;
  inset: -14px -5px;
}

.bgr-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.bgr-dot[aria-selected="true"]::after {
  animation: bgr-fill calc(var(--bgr-slide-ms, 6000) * 1ms) linear forwards;
}

@media (prefers-reduced-motion: reduce) {
  .bgr-dot[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 767px) {
  .bgr-dots { margin-left: 0; }
  .bgr-dot { width: 28px; }
}

/* ==========================================================================
   22. Blog

   The archive and single post render through the theme, not Elementor, so the
   kit's heading rules apply directly — including its line-height in px. These
   set their own so the posts are readable regardless.
   ========================================================================== */

.bgr-blog { padding-block: var(--bgr-s6) var(--bgr-s7); }

.bgr-post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}

@media (max-width: 1024px) { .bgr-post-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .bgr-post-list { grid-template-columns: 1fr; } }

.bgr-post-card {
  display: flex;
  flex-direction: column;
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bgr-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--bgr-cedar);
  box-shadow: 0 2px 4px rgba(25, 29, 27, 0.06), 0 24px 48px -20px rgba(25, 29, 27, 0.22);
}

.bgr-post-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.bgr-post-body {
  padding: var(--bgr-s3) var(--bgr-s3) var(--bgr-s4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bgr-post-date {
  font-family: var(--bgr-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-cedar);
}

.bgr-post-title {
  font-family: var(--bgr-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bgr-ink);
  margin: 0;
}

.bgr-post-excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bgr-slate);
  margin: 0;
}

/* --- single post ---------------------------------------------------------- */

.bgr-article { padding-block: var(--bgr-s6) var(--bgr-s7); }

.bgr-article-head { max-width: 62ch; margin-bottom: var(--bgr-s5); }

.bgr-article-head h1 {
  font-family: var(--bgr-font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 var(--bgr-s2);
  text-wrap: balance;
}

.bgr-article-media { margin-bottom: var(--bgr-s5); }

.bgr-article-media img {
  width: 100%;
  border-radius: var(--bgr-radius);
  display: block;
}

.bgr-article-body {
  max-width: 68ch;
}

.bgr-article-body p,
.bgr-article-body li {
  font-size: 17px;
  line-height: 1.75;
  color: var(--bgr-slate);
  margin: 0 0 var(--bgr-s3);
}

.bgr-article-body h2,
.bgr-article-body h3 {
  font-family: var(--bgr-font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bgr-ink);
  margin: var(--bgr-s5) 0 var(--bgr-s2);
}

.bgr-article-body h2 { font-size: clamp(24px, 2.6vw, 32px); }
.bgr-article-body h3 { font-size: 22px; }

.bgr-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bgr-radius);
}

.bgr-article-body a { color: var(--bgr-cedar); }

.bgr-empty {
  font-size: 17px;
  line-height: 1.65;
  color: var(--bgr-slate);
}

/* Breadcrumbs on a light page, rather than over a photograph. */
.bgr-crumbs--dark,
.bgr-crumbs--dark a {
  color: var(--bgr-slate);
}

.bgr-crumbs--dark a:hover {
  color: var(--bgr-cedar);
}

.bgr-article-head .bgr-crumbs {
  margin-bottom: var(--bgr-s3);
}

/* ==========================================================================
   23. Hero dots — button reset

   The bars are <button> elements, and Elementor's Theme Style styles buttons
   by tag: `.elementor-kit-… button` is a class plus a type selector, which
   outranks a single class of ours. Result: cedar background, 26px padding, and
   five large rectangles instead of hairline bars.

   Two classes win the tie, and everything the button default sets is reset
   explicitly rather than relying on inheritance.
   ========================================================================== */

.bgr-dots .bgr-dot {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 44px;
  height: 3px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
  background-image: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 0;
  line-height: 0;
  letter-spacing: normal;
  text-transform: none;
  color: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex: none;
  transition: background-color 0.2s ease;
}

.bgr-dots .bgr-dot:hover,
.bgr-dots .bgr-dot:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  transform: none;
}

.bgr-dots .bgr-dot::before {
  content: "";
  position: absolute;
  inset: -14px -5px;
  background: none;
}

.bgr-dots .bgr-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.bgr-dots .bgr-dot[aria-selected="true"]::after {
  animation: bgr-fill calc(var(--bgr-slide-ms, 6000) * 1ms) linear forwards;
}

@media (prefers-reduced-motion: reduce) {
  .bgr-dots .bgr-dot[aria-selected="true"]::after {
    animation: none;
    transform: scaleX(1);
  }
}

@media (max-width: 767px) {
  .bgr-dots .bgr-dot { width: 28px; }
}

/* ==========================================================================
   24. Plain headings

   Sections rendered by PHP templates use real <h1>/<h2> tags, so they get the
   Elementor kit's `h1 { line-height: 1.12px }` directly — collapsing the
   heading to a couple of pixels and letting it overlap the eyebrow above it.
   The Elementor-targeted rules elsewhere in this file only cover
   `.elementor-heading-title`, which these are not.
   ========================================================================== */

.bgr-blog h1, .bgr-blog h2, .bgr-blog h3,
.bgr-article h1, .bgr-article h2, .bgr-article h3,
.bgr-room-single h1, .bgr-room-single h2, .bgr-room-single h3,
.bgr-footer h1, .bgr-footer h2, .bgr-footer h3,
h1.bgr-display, h2.bgr-display, h3.bgr-display {
  line-height: 1.14;
  margin-block: 0;
}

.bgr-blog .bgr-sec-head h1,
.bgr-article .bgr-article-head h1 {
  font-family: var(--bgr-font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--bgr-ink);
}

/* Stack the eyebrow, heading and lede with real spacing rather than relying on
   whatever margins the tags happen to carry. */
.bgr-blog .bgr-sec-head,
.bgr-room-single .bgr-sec-head,
.bgr-article .bgr-article-head {
  display: flex;
  flex-direction: column;
  gap: var(--bgr-s2);
}

.bgr-blog .bgr-sec-head .bgr-lede,
.bgr-blog .bgr-sec-head p {
  margin: 0;
}

/* ==========================================================================
   25. Testimonials
   ========================================================================== */

.bgr-quote {
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  padding: var(--bgr-s3);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--bgr-s2);
}

/* Five stars, matching the review graphics these came from. */
.bgr-stars {
  color: var(--bgr-cedar);
  font-size: 15px;
  letter-spacing: 0.18em;
  line-height: 1;
}

.bgr-quote .bgr-quote-text p {
  font-family: var(--bgr-font-display);
  font-size: clamp(16px, 1.4vw, 17.5px);
  font-style: italic;
  line-height: 1.6;
  color: var(--bgr-ink);
  margin: 0;
}

.bgr-quote-by {
  margin-top: auto;
  padding-top: var(--bgr-s2);
  border-top: 1px solid var(--bgr-rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bgr-quote-name {
  font-family: var(--bgr-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bgr-ink);
}

.bgr-quote-project {
  font-family: var(--bgr-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-cedar);
}

/* ==========================================================================
   26. Testimonial marquee

   The track holds the reviews twice over, so as the first set scrolls out of
   frame the copy is already in position behind it. Animating to exactly -50%
   lands the copy where the original started, and the loop is seamless.

   Full-bleed on purpose: a marquee that stops at the content edge looks like
   it is broken rather than continuing.
   ========================================================================== */

.bgr-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  padding-block: 4px;
  /* Fade both ends so cards enter and leave rather than being chopped off. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.bgr-marquee .bgr-marquee-track,
.bgr-marquee.bgr-marquee-track {
  display: flex;
  /* Elementor containers are created with `flex_direction: column` and apply it
     through `--flex-direction`, so the direction has to be stated here or the
     track stacks the cards vertically instead of running them in a row. */
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: max-content;
  /* The track is Elementor's own `.e-con-inner`, which carries the 1240px
     content width. Left in place it would clip the row and the loop would
     jump instead of running on. */
  max-width: none;
  padding: 0;
  gap: clamp(16px, 2vw, 24px);
  animation: bgr-marquee var(--bgr-marquee-duration, 60s) linear infinite;
  will-change: transform;
}

@keyframes bgr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Let people stop it to finish reading one. */
.bgr-marquee:hover .bgr-marquee-track,
.bgr-marquee:focus-within .bgr-marquee-track,
.bgr-marquee.bgr-marquee-track:hover,
.bgr-marquee.bgr-marquee-track:focus-within {
  animation-play-state: paused;
}

.bgr-marquee .bgr-quote {
  flex: 0 0 auto;
  width: clamp(280px, 27vw, 400px);
  height: auto;
}

/* No motion: fall back to a normal scrollable row, which still shows every
   review and can be swiped or arrow-keyed through. */
@media (prefers-reduced-motion: reduce) {
  .bgr-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bgr-marquee .bgr-marquee-track,
  .bgr-marquee.bgr-marquee-track {
    animation: none;
  }

  .bgr-marquee .bgr-quote--clone {
    display: none;
  }
}

@media (max-width: 767px) {
  .bgr-marquee .bgr-quote { width: 80vw; }
}

/* ==========================================================================
   27. Room filter fixes

   Two separate problems, both specificity.

   1. `[hidden]` is a user-agent rule (`display: none`), and any author rule
      that sets `display` beats it. `.bgr-room-card { display: flex }` therefore
      kept every card visible even after the filter set `hidden` on it. Scoping
      the hide to the element's own class wins the tie without !important.

   2. Elementor's Theme Style styles buttons by tag, so the filter buttons were
      picking up the cedar background meant for real calls to action. Two
      classes settle it.
   ========================================================================== */

.bgr-room-card[hidden],
.bgr-quote[hidden],
.bgr-shot[hidden],
.bgr-post-card[hidden] {
  display: none;
}

.bgr-filters .bgr-filter {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
  background: transparent;
  background-image: none;
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  box-shadow: none;
  padding: 10px 16px;
  margin: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.bgr-filters .bgr-filter:hover {
  color: var(--bgr-ink);
  border-color: var(--bgr-slate);
  background: transparent;
  transform: none;
}

/* The selected filter is the only one that fills, so it reads at a glance. */
.bgr-filters .bgr-filter.is-on,
.bgr-filters .bgr-filter[aria-pressed="true"] {
  background: var(--bgr-ink);
  border-color: var(--bgr-ink);
  color: var(--bgr-lichen);
}

.bgr-filters .bgr-filter.is-on:hover,
.bgr-filters .bgr-filter[aria-pressed="true"]:hover {
  background: var(--bgr-cedar);
  border-color: var(--bgr-cedar);
  color: #fff;
}

/* ==========================================================================
   28. Pagination
   ========================================================================== */

.bgr-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--bgr-s5);
}

.bgr-pagination:empty {
  display: none;
}

/* Buttons again, so two classes to clear Elementor's Theme Style. */
.bgr-pagination .bgr-page-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  margin: 0;
  font-family: var(--bgr-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: none;
  color: var(--bgr-slate);
  background: transparent;
  background-image: none;
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.bgr-pagination .bgr-page-btn:hover:not(:disabled) {
  color: var(--bgr-ink);
  border-color: var(--bgr-slate);
  background: transparent;
  transform: none;
}

.bgr-pagination .bgr-page-btn.is-on {
  background: var(--bgr-ink);
  border-color: var(--bgr-ink);
  color: var(--bgr-lichen);
}

/* Disabled rather than hidden, so the row does not shift as you page. */
.bgr-pagination .bgr-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.bgr-pagination .bgr-page-prev,
.bgr-pagination .bgr-page-next {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11.5px;
  padding: 0 18px;
}

.bgr-page-gap {
  color: var(--bgr-slate);
  padding-inline: 4px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .bgr-pagination .bgr-page-prev,
  .bgr-pagination .bgr-page-next {
    padding: 0 12px;
    font-size: 10.5px;
  }

  .bgr-pagination .bgr-page-btn {
    min-width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   29. Specification form

   The form is a GoHighLevel iframe, so its insides cannot be styled from here.
   What this does is make the frame sit correctly in the layout, and style the
   fallback that shows until a form id is configured.
   ========================================================================== */

.bgr-spec-embed {
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  overflow: hidden;
  min-height: 420px;
}

.bgr-spec-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* --- fallback, shown while no form id is set ------------------------------ */

.bgr-form--fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bgr-s3);
}

.bgr-form-lead {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--bgr-slate);
  margin: 0;
  max-width: 46ch;
}

/* Only administrators see this, so it is a note rather than a design element. */
.bgr-form-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--bgr-slate);
  background: var(--bgr-surface-2);
  border-left: 2px solid var(--bgr-cedar);
  padding: 10px 12px;
  margin: 0;
}

/* A full-width band for the form, used where it is the whole point of the
   section rather than one column of two. */
.bgr-spec-band .bgr-spec-embed {
  max-width: 820px;
  margin-inline: auto;
}

/* ==========================================================================
   30. Contact page

   `.bgr-contact-h` is on <h2> elements, and the Elementor kit styles headings
   by tag, so a single class lost the tie and the labels rendered at 40px. Two
   classes settle it, as elsewhere.
   ========================================================================== */

.bgr-contact-block .bgr-contact-h,
.bgr-contact-card .bgr-contact-h {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
  margin: var(--bgr-s4) 0 var(--bgr-s2);
}

.bgr-contact-block > .bgr-contact-h:first-child {
  margin-top: 0;
}

.bgr-contact-block a {
  font-family: var(--bgr-font-display);
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--bgr-ink);
  text-decoration: none;
  word-break: break-word;
}

.bgr-contact-block a:hover {
  color: var(--bgr-cedar);
}

.bgr-contact-block p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--bgr-slate);
  margin: 0;
}

/* --- the form card -------------------------------------------------------- */

.bgr-spec-card {
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  padding: clamp(22px, 3vw, 34px);
}

.bgr-spec-card .bgr-spec-card-title,
.bgr-spec-card .elementor-heading-title {
  font-family: var(--bgr-font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--bgr-ink);
  margin: 0 0 var(--bgr-s3);
}

/* Inside the card the form has its own frame already, so drop the double
   border and let it fill the width. */
.bgr-spec-card .bgr-form,
.bgr-spec-card .bgr-form--fallback {
  background: none;
  border: 0;
  padding: 0;
}

.bgr-spec-card .bgr-spec-embed {
  border: 0;
  min-height: 0;
}

.bgr-spec-card .bgr-btn-cedar {
  width: 100%;
}

/* ==========================================================================
   31. Enquiry form

   Plain markup from the theme, so no builder classes to fight. Fields are
   styled to the same rules as the rest of the site rather than left to the
   browser default.
   ========================================================================== */

.bgr-enquiry .bgr-form {
  background: none;
  border: 0;
  padding: 0;
}

.bgr-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bgr-s2);
}

@media (max-width: 640px) {
  .bgr-field-row { grid-template-columns: 1fr; }
}

.bgr-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 var(--bgr-s3);
}

.bgr-field label {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
}

/* The required marker is the one place cedar earns its keep in a form. */
.bgr-field label span,
.bgr-consent label span {
  color: var(--bgr-cedar);
}

.bgr-enquiry input[type="text"],
.bgr-enquiry input[type="email"],
.bgr-enquiry input[type="tel"],
.bgr-enquiry textarea {
  font-family: var(--bgr-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--bgr-ink);
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  padding: 12px 13px;
  width: 100%;
  transition: border-color 0.2s ease;
}

.bgr-enquiry input:focus,
.bgr-enquiry textarea:focus {
  border-color: var(--bgr-cedar);
  outline: none;
  box-shadow: none;
}

.bgr-enquiry textarea {
  resize: vertical;
  min-height: 130px;
}

/* --- consent ------------------------------------------------------------- */

.bgr-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 var(--bgr-s3);
}

.bgr-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--bgr-cedar);
}

.bgr-consent label {
  font-family: var(--bgr-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--bgr-slate);
}

/* --- send ---------------------------------------------------------------- */

.bgr-enquiry .bgr-enquiry-send {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--bgr-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: var(--bgr-cedar);
  border: 1px solid var(--bgr-cedar);
  border-radius: 2px;
  padding: 16px 26px;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.bgr-enquiry .bgr-enquiry-send:hover {
  background: var(--bgr-cedar-deep);
  border-color: var(--bgr-cedar-deep);
}

/* --- honeypot: present for bots, gone for everyone else ------------------ */

.bgr-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- states -------------------------------------------------------------- */

.bgr-enquiry-done {
  border: 1px solid var(--bgr-rule);
  border-left: 3px solid var(--bgr-cedar);
  background: var(--bgr-paper);
  padding: var(--bgr-s4);
}

.bgr-enquiry-done h3 {
  font-family: var(--bgr-font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bgr-ink);
  margin: 0 0 8px;
}

.bgr-enquiry-done p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bgr-slate);
  margin: 0;
}

.bgr-enquiry-error {
  font-size: 14px;
  line-height: 1.55;
  color: #8A2B1E;
  background: #F7EDEA;
  border-left: 3px solid #8A2B1E;
  padding: 12px 14px;
  margin: 0 0 var(--bgr-s3);
}

/* ==========================================================================
   32. Contact page layout
   ========================================================================== */

/* The hero and the body are separate sections, and their padding stacked into
   a gap of well over 100px. The body starts close under the hero instead. */
.bgr-contact-hero.bgr-contact-hero {
  padding-bottom: var(--bgr-s4);
}

.bgr-contact-body.bgr-contact-body {
  padding-top: var(--bgr-s3);
  padding-bottom: var(--bgr-s7);
}

/* The form is the reason the page exists, so it gets the wider column. */
.bgr-contact-grid.e-con-boxed > .e-con-inner,
.bgr-contact-grid.e-con-full {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  width: 100%;
}

/* --- details ------------------------------------------------------------- */

.bgr-contact-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bgr-rule);
}

.bgr-contact-item {
  padding-block: var(--bgr-s3);
  border-bottom: 1px solid var(--bgr-rule);
}

.bgr-contact-list dt {
  font-family: var(--bgr-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-slate);
  margin: 0 0 6px;
}

/* Every value at one size, so none of them shouts over the others. */
.bgr-contact-list dd {
  margin: 0;
  font-family: var(--bgr-font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bgr-ink);
}

.bgr-contact-list dd a {
  color: var(--bgr-ink);
  text-decoration: underline;
  text-decoration-color: var(--bgr-rule);
  text-underline-offset: 4px;
  word-break: break-word;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.bgr-contact-list dd a:hover {
  color: var(--bgr-cedar);
  text-decoration-color: var(--bgr-cedar);
}

/* --- specification form card ---------------------------------------------- */

.bgr-spec-promo {
  margin-top: var(--bgr-s5);
  background: var(--bgr-basalt);
  border-radius: var(--bgr-radius);
  padding: clamp(24px, 3vw, 34px);
}

.bgr-spec-promo-eyebrow {
  font-family: var(--bgr-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #D9A877;
  margin-bottom: var(--bgr-s2);
}

.bgr-spec-promo .bgr-spec-promo-title {
  font-family: var(--bgr-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 var(--bgr-s3);
  text-wrap: balance;
}

.bgr-spec-promo .bgr-spec-promo-title em {
  font-style: italic;
  color: #E0B78D;
}

.bgr-spec-promo .bgr-spec-promo-btn {
  display: flex;
  width: 100%;
}

/* --- form card ------------------------------------------------------------ */

.bgr-contact-formcard .bgr-spec-card-title {
  font-family: var(--bgr-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--bgr-ink);
  margin: 0 0 var(--bgr-s4);
  padding-bottom: var(--bgr-s3);
  border-bottom: 1px solid var(--bgr-rule);
}

/* --- small screens: form first ------------------------------------------- */

@media (max-width: 1024px) {
  .bgr-contact-grid.e-con-boxed > .e-con-inner,
  .bgr-contact-grid.e-con-full {
    grid-template-columns: 1fr;
    gap: var(--bgr-s5);
  }

  .bgr-contact-grid .bgr-contact-formcard {
    order: -1;
  }

  .bgr-spec-promo {
    margin-top: var(--bgr-s4);
  }
}

/* ==========================================================================
   33. Brochures

   Listing reuses the room card; covers are square, so the image ratio is
   overridden. The single page is plain template markup, and the Elementor kit
   styles h1/h2 by tag, so headings here carry a body prefix to win.
   ========================================================================== */

.bgr-brochure-card .bgr-card-media img {
  aspect-ratio: 1 / 1;
}

.bgr-brochure-card[hidden] {
  display: none;
}

/* --- single: layout --------------------------------------------------------

   Desktop:  cover + points | head + form
   Phone:    head, form, cover                                               */

.bgr-brochure-hero.bgr-brochure-hero {
  padding-block: var(--bgr-s5) var(--bgr-s7);
}

.bgr-brochure-hero .bgr-crumbs {
  margin-bottom: var(--bgr-s4);
}

.bgr-brochure-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "cover head"
    "cover form";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: var(--bgr-s4);
  align-items: start;
}

.bgr-brochure-head     { grid-area: head; }
.bgr-brochure-cover    { grid-area: cover; }
.bgr-brochure-formcard { grid-area: form; }

@media (max-width: 1024px) {
  .bgr-brochure-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "form"
      "cover";
    grid-template-rows: auto;
  }

  .bgr-brochure-cover {
    max-width: 520px;
  }
}

/* --- single: heading ------------------------------------------------------ */

.bgr-brochure-eyebrow,
body .bgr-brochure-single .bgr-eyebrow {
  font-family: var(--bgr-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bgr-cedar);
  margin-bottom: var(--bgr-s2);
}

body .bgr-brochure-single .bgr-brochure-title {
  font-family: var(--bgr-font-display);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--bgr-ink);
  margin: 0 0 var(--bgr-s3);
  text-wrap: balance;
}

.bgr-brochure-lede {
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  line-height: 1.7;
  color: var(--bgr-slate);
  max-width: 56ch;
  margin: 0;
}

/* --- single: cover -------------------------------------------------------- */

.bgr-brochure-cover figure {
  margin: 0;
  border: 1px solid var(--bgr-rule);
  border-radius: var(--bgr-radius);
  overflow: hidden;
  background: var(--bgr-surface-2);
  line-height: 0;
  box-shadow: 0 2px 4px rgba(25, 29, 27, 0.05), 0 30px 60px -30px rgba(25, 29, 27, 0.3);
}

.bgr-brochure-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.bgr-brochure-points {
  list-style: none;
  margin: var(--bgr-s4) 0 0;
  padding: 0;
  border-top: 1px solid var(--bgr-rule);
}

.bgr-brochure-points li {
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bgr-ink);
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--bgr-rule);
}

.bgr-brochure-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--bgr-cedar);
  border-bottom: 2px solid var(--bgr-cedar);
  transform: rotate(-45deg);
}

/* --- single: form card ---------------------------------------------------- */

body .bgr-brochure-formcard .bgr-brochure-formtitle {
  font-family: var(--bgr-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--bgr-ink);
  margin: 0 0 8px;
}

.bgr-brochure-formnote {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bgr-slate);
  margin: 0 0 var(--bgr-s3);
  padding-bottom: var(--bgr-s3);
  border-bottom: 1px solid var(--bgr-rule);
}

/* GHL draws its own white panel with padding; let it sit flush in the card. */
.bgr-brochure-formcard .bgr-spec-embed iframe {
  display: block;
  min-height: 560px;
}

/* --- single: more brochures ----------------------------------------------- */

body .bgr-brochure-single .bgr-sec-head .bgr-display {
  font-family: var(--bgr-font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 300;
  line-height: 1.14;
  color: var(--bgr-ink);
  margin: 0;
}

/* ==========================================================================
   34. Not found, and search results

   Both replace Hello Elementor's bare templates. `bgr-btn-ghost` is white, for
   use over photographs, so these pages use an outlined dark button instead.
   ========================================================================== */

a.bgr-btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bgr-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  color: var(--bgr-ink);
  background: transparent;
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  padding: 16px 26px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

a.bgr-btn-line:hover {
  color: var(--bgr-cedar);
  border-color: var(--bgr-cedar);
  background: rgba(164, 99, 47, 0.06);
}

.bgr-notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--bgr-s6);
}

.bgr-notfound-search h2,
body .bgr-notfound-search h2 {
  font-family: var(--bgr-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--bgr-ink);
  margin: 0 0 var(--bgr-s3);
}

.bgr-results-form {
  margin-bottom: var(--bgr-s5);
}

/* --- the search form ------------------------------------------------------ */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 540px;
}

.search-form label {
  flex: 1 1 220px;
  margin: 0;
}

.search-form .search-field {
  font-family: var(--bgr-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--bgr-ink);
  background: var(--bgr-paper);
  border: 1px solid var(--bgr-rule);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
}

.search-form .search-field:focus {
  border-color: var(--bgr-cedar);
  outline: none;
}

body .search-form .search-submit {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  font-family: var(--bgr-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: var(--bgr-cedar);
  border: 1px solid var(--bgr-cedar);
  border-radius: 2px;
  padding: 15px 24px;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

body .search-form .search-submit:hover {
  background: var(--bgr-cedar-deep);
  border-color: var(--bgr-cedar-deep);
}

/* --- results -------------------------------------------------------------- */

.bgr-results .bgr-post-date {
  color: var(--bgr-cedar);
}

/* ==========================================================================
   35. GoHighLevel forms on brochure pages

   The forms are styled in GoHighLevel and load in an iframe, so the site
   cannot restyle their fields. It only sizes the frame they sit in.
   ========================================================================== */

.bgr-brochure-formcard .bgr-spec-embed {
  width: 100%;
  line-height: 0;
}

.bgr-brochure-formcard iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* --- GHL form loading placeholder ------------------------------------------ */

.bgr-spec-embed[data-ghl-embed] {
  position: relative;
}

/* Hidden unless bgr-ui.js adds is-loading, so no-JS visitors see the form. */
.bgr-ghl-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--bgr-paper);
  border-radius: var(--bgr-radius);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.bgr-spec-embed.is-loading .bgr-ghl-loading {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.bgr-ghl-bar {
  display: block;
  height: 46px;
  border-radius: 3px;
  background: linear-gradient(90deg, #EBEEE8 0%, #F6F7F4 50%, #EBEEE8 100%);
  background-size: 200% 100%;
  animation: bgr-ghl-shimmer 1.4s ease-in-out infinite;
}

.bgr-ghl-bar--button {
  height: 54px;
  margin-top: 8px;
  background: linear-gradient(90deg, #E2D2C3 0%, #EFE4DA 50%, #E2D2C3 100%);
  background-size: 200% 100%;
}

.bgr-ghl-loading-text {
  font-family: var(--bgr-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bgr-slate);
  text-align: center;
  margin-top: 4px;
}

@keyframes bgr-ghl-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bgr-ghl-bar { animation: none; }
}