/*
Theme Name: Barnyard Rentals
Theme URI: https://barnyardrentals.ca
Author: Barnyard Rentals
Author URI: https://barnyardrentals.ca
Description: Custom WordPress theme for Barnyard Rentals — luxury restroom trailer rentals in Saskatoon, SK. Independent theme, no parent/framework dependency. Visual structure and navigation patterns modeled on the client-selected Lorenty demo (mint/deep-teal palette, off-canvas menu, horizontal rental carousel, step-driven quote panel) — implemented as original code, not copied from the Lorenty theme.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barnyard-rentals
*/

/* =========================================================
   0. Design tokens (Barnyard Rentals brand guide — Lorenty-inspired)
   ========================================================= */
:root{
	/* Core palette -- client's brand board (earthy, premium: dark gray,
	   olive green, light beige/oyster, slate). Variable NAMES are kept
	   from the earlier Lorenty-mint pass so every rule that already
	   references them recolors automatically; only the values changed. */
	--bnr-mint:        #DDD6C8; /* Light Beige -- soft section backgrounds (was pale mint) */
	--bnr-mint-deep:   #CBC2AE; /* deeper beige -- hover/accent on beige surfaces */
	--bnr-teal-deep:   #33343C; /* Dark Gray -- header/footer/panel/strong-contrast surfaces */
	--bnr-teal-darker: #26272D; /* darkest -- pills/buttons on light bg */
	--bnr-teal-dim:    #7C8489; /* muted/inactive text on dark bg (Slate, lightened for legibility) */
	--bnr-teal-bright: #DDD6C8; /* bright accent text on dark bg (Light Beige) */
	--bnr-coral:       #6E7051; /* Olive Green -- card banner/CTA accent (was bright coral) */
	--bnr-coral-dark:  #565841;
	--bnr-aqua:        #6E7051; /* Olive Green -- calendar/time-slot selected state (was turquoise) */
	--bnr-aqua-dark:   #FFFFFF; /* white text on the olive fill -- better contrast margin (5.1:1) than oyster (4.15:1) */
	--bnr-white:       #EAE7E2; /* Oyster -- main page background */
	--bnr-ink:         #33343C; /* Dark Gray -- primary headings/body copy on light backgrounds */
	--bnr-ink-muted:   #637074; /* Slate -- supporting muted text/details */
	--bnr-border:      #D3CDBD; /* light beige-based border/divider */

	/* Legacy tokens kept as aliases so nothing that still references them breaks */
	--bnr-dark:        var(--bnr-teal-deep);
	--bnr-dark-gray:   var(--bnr-teal-deep);
	--bnr-olive:       var(--bnr-coral);
	--bnr-olive-dark:  var(--bnr-coral-dark);
	--bnr-light-beige: var(--bnr-mint);
	--bnr-oyster:      #EAE7E2;
	--bnr-slate:       var(--bnr-ink-muted);
	--bnr-text:        var(--bnr-ink);
	--bnr-text-muted:  var(--bnr-ink-muted);

	--bnr-font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--bnr-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	--bnr-radius: 14px;
	--bnr-radius-sm: 8px;
	--bnr-container: 1240px;
	--bnr-gap: 28px;
}

/* =========================================================
   1. Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{
	margin:0;
	font-family:var(--bnr-font-body);
	font-size:17px;
	line-height:1.65;
	color:var(--bnr-ink);
	background:var(--bnr-white);
	overflow-x:hidden;
}
body.bnr-panel-open{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,h4,h5,h6{
	font-family:var(--bnr-font-heading);
	font-weight:600;
	line-height:1.15;
	margin:0 0 .5em;
	color:var(--bnr-teal-deep);
}
.screen-reader-text{
	position:absolute !important;
	width:1px; height:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
	white-space:nowrap;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
	outline:3px solid var(--bnr-coral);
	outline-offset:2px;
}
.bnr-container{ max-width:var(--bnr-container); margin:0 auto; padding:0 24px; }
.bnr-section{ padding:100px 0; }
.bnr-section-sm{ padding:60px 0; }
.bnr-bg-dark{ background:var(--bnr-teal-deep); color:#fff; }
.bnr-bg-dark h1,.bnr-bg-dark h2,.bnr-bg-dark h3,.bnr-bg-dark h4{ color:#fff; }
.bnr-bg-mint{ background:var(--bnr-mint); }
.bnr-bg-oyster{ background:var(--bnr-oyster); }
.bnr-bg-beige{ background:var(--bnr-mint); }
.bnr-bg-olive{ background:var(--bnr-coral); color:#fff; }
.bnr-bg-olive h1,.bnr-bg-olive h2,.bnr-bg-olive h3{ color:#fff; }
.bnr-center{ text-align:center; }
.bnr-eyebrow{
	display:inline-block;
	text-transform:uppercase;
	letter-spacing:.16em;
	font-size:13px;
	font-weight:700;
	color:var(--bnr-coral);
	margin-bottom:14px;
}
.bnr-bg-dark .bnr-eyebrow,.bnr-bg-olive .bnr-eyebrow{ color:var(--bnr-teal-bright); }
.bnr-lede{ font-size:18px; color:var(--bnr-ink-muted); max-width:680px; }
.bnr-center .bnr-lede{ margin-left:auto; margin-right:auto; }

/* =========================================================
   2. Buttons
   ========================================================= */
.bnr-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.6em;
	padding:16px 34px;
	background:var(--bnr-teal-darker);
	color:#fff;
	border:1px solid var(--bnr-teal-darker);
	border-radius:100px;
	font-family:var(--bnr-font-heading);
	font-weight:600;
	font-size:14px;
	letter-spacing:.03em;
	text-transform:uppercase;
	text-decoration:none;
	cursor:pointer;
	transition:background .25s ease,color .25s ease,border-color .25s ease,transform .15s ease;
}
.bnr-btn:hover{ background:var(--bnr-coral); border-color:var(--bnr-coral); color:#fff; transform:translateY(-1px); }
.bnr-btn-outline{ background:transparent; color:var(--bnr-teal-darker); }
.bnr-btn-outline:hover{ background:var(--bnr-teal-darker); color:#fff; }
.bnr-bg-dark .bnr-btn-outline,.bnr-bg-olive .bnr-btn-outline{ color:#fff; border-color:rgba(255,255,255,.6); }
.bnr-bg-dark .bnr-btn-outline:hover,.bnr-bg-olive .bnr-btn-outline:hover{ background:#fff; color:var(--bnr-teal-deep); }
.bnr-btn-mint{ background:var(--bnr-mint); color:var(--bnr-teal-darker); border-color:var(--bnr-mint); }
.bnr-btn-mint:hover{ background:var(--bnr-mint-deep); border-color:var(--bnr-mint-deep); color:var(--bnr-teal-darker); }
.bnr-btn-light{ background:#fff; color:var(--bnr-teal-deep); border-color:#fff; }
.bnr-btn-light:hover{ background:var(--bnr-mint); border-color:var(--bnr-mint); color:var(--bnr-teal-deep); }
.bnr-btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.bnr-center .bnr-btn-row{ justify-content:center; }
.bnr-btn-circle{
	display:inline-flex; align-items:center; justify-content:center;
	width:48px; height:48px; border-radius:50%;
	border:1.5px solid var(--bnr-teal-deep); background:transparent; color:var(--bnr-teal-deep);
	cursor:pointer; transition:background .2s ease,color .2s ease,opacity .2s ease;
	flex-shrink:0;
}
.bnr-btn-circle:hover{ background:var(--bnr-teal-deep); color:#fff; }
.bnr-btn-circle:disabled{ opacity:.35; cursor:default; pointer-events:none; }
.bnr-btn-circle svg{ width:18px; height:18px; }

/* =========================================================
   3. Header / off-canvas navigation (Lorenty-style)
   ========================================================= */
.bnr-header{
	position:sticky; top:0; left:0; right:0; z-index:100;
}
.bnr-header::before{
	content:"";
	position:absolute; inset:0; z-index:0;
	background:rgba(234,231,226,.97);
	border-bottom:1px solid var(--bnr-border);
	backdrop-filter:saturate(180%) blur(6px);
}
.bnr-header-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--bnr-container); margin:0 auto; gap:24px; }
.bnr-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.bnr-logo img{ max-height:48px; width:auto; }
.bnr-logo-text{ font-family:var(--bnr-font-heading); font-weight:700; font-size:20px; color:var(--bnr-teal-deep); letter-spacing:.02em; }

/* Lorenty-style left cluster: logo, "Menu" trigger, dark CTA pill --
   the menu trigger and the CTA live NEXT TO the logo on every breakpoint,
   not tucked away on the far right. */
.bnr-header-left{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.bnr-header-right{ display:flex; align-items:center; gap:28px; }

/* Compact desktop nav row -- plain text links, right-aligned, replaced by
   the phone/social cluster the instant the menu opens (Lorenty behavior). */
.bnr-nav-primary > ul{ display:flex; align-items:center; gap:30px; list-style:none; }
.bnr-nav-primary > ul > li > a{
	text-decoration:none;
	font-family:var(--bnr-font-heading);
	font-weight:600;
	font-size:14px;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--bnr-teal-deep);
	padding:6px 2px;
	border-bottom:2px solid transparent;
	transition:border-color .2s ease, color .2s ease;
}
.bnr-nav-primary > ul > li > a:hover,
.bnr-nav-primary .current-menu-item > a{ border-color:var(--bnr-coral); color:var(--bnr-coral); }

.bnr-header-contact{ display:none; align-items:center; gap:18px; flex-shrink:0; }
.bnr-header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; color:var(--bnr-teal-deep); font-size:15px; white-space:nowrap; }
.bnr-header-phone svg{ width:17px; height:17px; }
.bnr-header-social{ display:flex; color:var(--bnr-teal-deep); }
.bnr-header-social svg{ width:19px; height:19px; }
/* When the menu is open, swap the nav links for phone + socials, exactly
   like the Lorenty header does. */
.bnr-header.is-menu-open .bnr-nav-primary{ display:none; }
.bnr-header.is-menu-open .bnr-header-contact{ display:flex; }

.bnr-header-cta-btn{ flex-shrink:0; }

/* "Menu" trigger with a text label + thin hamburger lines, Lorenty-style */
.bnr-menu-toggle{
	display:flex; align-items:center; gap:10px;
	background:none; border:0; cursor:pointer; padding:0;
	position:relative; flex-shrink:0;
	font-family:var(--bnr-font-heading); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
	color:var(--bnr-teal-deep);
}
.bnr-menu-toggle .bnr-burger{ width:22px; height:16px; position:relative; flex-shrink:0; }
.bnr-menu-toggle .bnr-burger span{
	position:absolute; left:0; width:100%; height:2px; background:var(--bnr-teal-deep);
	transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.bnr-menu-toggle .bnr-burger span:nth-child(1){ top:0; }
.bnr-menu-toggle .bnr-burger span:nth-child(2){ top:7px; }
.bnr-menu-toggle .bnr-burger span:nth-child(3){ top:14px; }
.bnr-menu-toggle[aria-expanded="true"] .bnr-burger span:nth-child(1){ top:7px; transform:rotate(45deg); }
.bnr-menu-toggle[aria-expanded="true"] .bnr-burger span:nth-child(2){ opacity:0; }
.bnr-menu-toggle[aria-expanded="true"] .bnr-burger span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* Off-canvas drawer: full-height panel, white, mint corner decorations,
   sectioned links with dividers, an expandable "Our Rentals" group with
   nested links to the real rental units, and a pill CTA at the top —
   the Lorenty-style navigation the client asked to recreate. */
.bnr-nav-drawer{
	position:fixed; inset:0; top:0;
	background:var(--bnr-white);
	transform:translateX(100%);
	transition:transform .35s cubic-bezier(.4,0,.2,1);
	z-index:200;
	overflow-y:auto;
	visibility:hidden;
}
.bnr-nav-drawer.is-open{ transform:translateX(0); visibility:visible; }
.bnr-nav-drawer::before,
.bnr-nav-drawer::after{
	content:""; position:absolute; width:120px; height:120px; border-radius:50%;
	background:var(--bnr-mint); z-index:0;
}
.bnr-nav-drawer::before{ top:-60px; left:-60px; }
.bnr-nav-drawer::after{ top:-60px; right:-60px; }
.bnr-drawer-inner{ position:relative; z-index:1; padding:0 28px 60px; max-width:440px; margin:0 auto; }
.bnr-drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:20px 0 24px; }
.bnr-drawer-header .bnr-logo img{ max-height:none; width:150px; height:auto; }
.bnr-drawer-close{
	display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:50%; border:0; background:none; cursor:pointer; color:var(--bnr-teal-deep);
}
.bnr-drawer-close svg{ width:22px; height:22px; }
.bnr-drawer-cta{ margin-bottom:30px; }
.bnr-drawer-cta .bnr-btn{ width:100%; }
.bnr-drawer-section-label{
	text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:700;
	color:var(--bnr-teal-dim); margin:26px 0 10px;
}
.bnr-drawer-col + .bnr-drawer-col{ margin-top:8px; }
.bnr-drawer-col-rentals > .bnr-drawer-group-toggle{ margin-top:26px; }
.bnr-drawer-nav{ list-style:none; }
.bnr-drawer-nav > li{ border-bottom:1px solid var(--bnr-border); }
.bnr-drawer-nav > li > a,
.bnr-drawer-group-toggle{
	display:flex; align-items:center; justify-content:space-between;
	width:100%; background:none; border:0; text-align:left; cursor:pointer;
	padding:16px 2px; font-family:var(--bnr-font-heading); font-weight:600; font-size:16px;
	color:var(--bnr-teal-deep); text-decoration:none;
}
.bnr-drawer-group-toggle svg{ width:16px; height:16px; transition:transform .25s ease; flex-shrink:0; }
.bnr-drawer-group-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.bnr-drawer-subnav{
	list-style:none; max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.bnr-drawer-subnav.is-open{ max-height:400px; }
.bnr-drawer-subnav li{ padding:0 0 0 18px; }
.bnr-drawer-subnav a{
	display:block; padding:11px 2px; font-size:15px; color:var(--bnr-ink-muted); text-decoration:none;
	border-top:1px solid var(--bnr-border);
}
.bnr-drawer-subnav li:first-child a{ border-top:0; }
.bnr-drawer-subnav a:hover{ color:var(--bnr-coral); }
.bnr-drawer-contact{ margin-top:30px; padding-top:20px; border-top:1px solid var(--bnr-border); font-size:15px; color:var(--bnr-ink-muted); }
.bnr-drawer-contact a{ display:block; color:var(--bnr-teal-deep); text-decoration:none; font-weight:600; margin-bottom:8px; }
.bnr-drawer-overlay{
	position:fixed; inset:0; background:rgba(51,52,60,.45); z-index:190;
	opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.bnr-drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

@media (min-width:1024px){
	/* Lorenty-style desktop behavior: the same "Menu" trigger opens a
	   full-width dropdown panel anchored directly under the header,
	   instead of the full-height slide-in drawer used on mobile/tablet.
	   The rentals sub-list is always expanded here (flat columns, no
	   accordion), matching the reference's multi-column mega menu. */
	.bnr-nav-drawer{
		position:fixed; inset:auto 0 auto 0; top:var(--bnr-header-h,90px);
		height:auto; max-height:calc(100vh - var(--bnr-header-h,90px));
		overflow-y:auto;
		transform:translateY(-12px);
		opacity:0;
		transition:opacity .25s ease, transform .25s ease;
		box-shadow:0 24px 48px rgba(51,52,60,.18);
		border-top:1px solid var(--bnr-border);
	}
	.bnr-nav-drawer::before,
	.bnr-nav-drawer::after{ display:none; }
	.bnr-nav-drawer.is-open{ transform:translateY(0); opacity:1; }
	.bnr-drawer-inner{ max-width:var(--bnr-container); padding:44px 24px 56px; }
	.bnr-drawer-header{ display:none; }
	.bnr-drawer-cta{ display:none; }
	/* Grouped columns -- Menu / Rentals / Company, each with its own
	   uppercase label, instead of a flat list auto-wrapping into 3 across. */
	.bnr-drawer-menu{ display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:0 48px; align-items:start; }
	.bnr-drawer-col + .bnr-drawer-col{ margin-top:0; }
	.bnr-drawer-col-rentals > .bnr-drawer-group-toggle{
		margin-top:0; padding:0 0 18px; pointer-events:none; cursor:default;
		font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bnr-teal-dim);
	}
	.bnr-drawer-nav > li{ border-bottom:0; }
	.bnr-drawer-nav > li > a{ padding:10px 2px; font-size:15px; }
	.bnr-drawer-group-toggle svg{ display:none; }
	.bnr-drawer-subnav{ max-height:none !important; overflow:visible; }
	.bnr-drawer-subnav a{ font-size:15px; }
	.bnr-drawer-contact{
		margin-top:26px; padding-top:20px; border-top:1px solid var(--bnr-border);
		display:flex; flex-direction:column; gap:4px;
	}
	.bnr-drawer-overlay{ display:none; }
}
@media (max-width:1023px){
	.bnr-header-right{ display:none !important; }
}
@media (max-width:1023px) and (min-width:641px){
	/* Tablet: the logo can be noticeably bigger than the compact desktop
	   nav row size, without crowding the hamburger. */
	.bnr-logo img{ max-height:none; width:180px; height:auto; }
}
@media (max-width:1023px){
	/* Tablet + mobile: keep the compact icon-only "Menu" trigger and hide
	   the CTA pill from the header row (it lives in the drawer instead),
	   per the already-approved mobile header. */
	.bnr-header-left{ gap:10px; width:100%; justify-content:space-between; }
	.bnr-menu-toggle-label{ display:none; }
	.bnr-header-cta-btn{ display:none; }
}
@media (max-width:640px){
	/* Lorenty-style mobile header: [ LARGE LOGO ]  [ MENU ]. The
	   "Request a Quote" button and phone link move into the drawer
	   (see .bnr-drawer-cta / .bnr-drawer-contact) so the header itself
	   stays light and the logo has room to be the visually dominant
	   element between the left edge and the hamburger. */
	.bnr-header-inner{ padding:12px 16px; gap:10px; min-height:0; }
	.bnr-logo{ flex-shrink:1; min-width:0; }
	.bnr-logo img{ max-height:none; width:170px; max-width:100%; height:auto; }
	.bnr-menu-toggle{ width:44px; height:44px; margin-right:-6px; flex-shrink:0; }
	.bnr-drawer-inner{ padding:0 20px 50px; }
}
@media (max-width:340px){
	/* Very narrow phones: keep the logo from crowding the hamburger. */
	.bnr-logo img{ width:135px; }
}

/* =========================================================
   4. Hero — flat mint field, editorial composition (Lorenty-style)
   ========================================================= */
.bnr-hero{
	position:relative;
	padding:72px 0 0;
	background:var(--bnr-mint);
	color:var(--bnr-teal-deep);
	overflow:hidden;
}
/* Lorenty editorial composition: big heading on the left, description +
   controls on the right, both bottom-aligned to the same baseline. Stacks
   to a single column on narrower screens (the already-approved mobile
   layout is unchanged below 900px). */
.bnr-hero-inner{
	display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px 40px;
	max-width:var(--bnr-container); margin:0 auto; padding:0 24px 56px;
}
.bnr-hero-main{ max-width:640px; flex:1 1 420px; }
.bnr-hero-side{ max-width:360px; flex:0 1 360px; }
.bnr-hero .bnr-eyebrow{ color:var(--bnr-coral); }
.bnr-hero h1{
	color:var(--bnr-teal-deep);
	font-size:clamp(34px,5.2vw,64px);
	letter-spacing:-.01em;
	margin-bottom:0;
}
.bnr-hero p{ font-size:17px; color:var(--bnr-ink-muted); margin-bottom:24px; }
.bnr-hero-controls{ display:flex; align-items:center; gap:14px; }
@media (max-width:900px){
	.bnr-hero-inner{ display:block; }
	.bnr-hero-main{ max-width:640px; margin-bottom:22px; }
	.bnr-hero h1{ margin-bottom:22px; }
	.bnr-hero-side{ max-width:480px; }
}

/* =========================================================
   5. Rental carousel (Lorenty-style horizontal scroller)
   ========================================================= */
.bnr-carousel-section{ background:var(--bnr-mint); padding-bottom:90px; }
/* Lorenty-style bleed carousel: the first card aligns with the container's
   left edge (same as the hero/header content above it), but the track
   itself runs to the true right edge of the viewport so trailing cards
   visibly peek off-screen, uncontained by the site's max-width. */
.bnr-carousel{
	display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
	padding:4px max(24px,calc((100vw - var(--bnr-container))/2 + 24px)) 26px max(24px,calc((100vw - var(--bnr-container))/2));
	scrollbar-width:none; -ms-overflow-style:none;
}
.bnr-carousel::-webkit-scrollbar{ display:none; }
.bnr-carousel-track-wrap{ max-width:none; margin:0; position:relative; }
.bnr-carousel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; max-width:var(--bnr-container); margin:0 auto; padding:64px 24px 0; flex-wrap:wrap; }
.bnr-carousel-head-text{ max-width:640px; }
.bnr-carousel-arrows{ display:flex; gap:12px; flex-shrink:0; }
.bnr-carousel .bnr-rental-card{
	scroll-snap-align:start;
	flex:0 0 78%;
}
@media (min-width:640px){ .bnr-carousel .bnr-rental-card{ flex-basis:52%; } }
@media (min-width:960px){ .bnr-carousel .bnr-rental-card{ flex-basis:34%; } }
@media (min-width:1280px){ .bnr-carousel .bnr-rental-card{ flex-basis:27%; } }
@media (min-width:1600px){ .bnr-carousel .bnr-rental-card{ flex-basis:22%; } }

.bnr-rental-card{
	background:#fff;
	border-radius:var(--bnr-radius);
	overflow:hidden;
	display:flex; flex-direction:column;
	box-shadow:0 10px 30px rgba(51,52,60,.10);
	position:relative;
}
.bnr-rental-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:24px 24px 0; }
.bnr-rental-card-top h3{ font-size:22px; line-height:1.2; margin:0; }
.bnr-rental-card-top h3 a{ text-decoration:none; color:inherit; }
.bnr-rental-card-tag{
	flex-shrink:0; font-family:var(--bnr-font-heading); font-weight:700; font-size:13px;
	color:var(--bnr-coral); white-space:nowrap; padding-top:4px;
}
.bnr-rental-card-media{ position:relative; aspect-ratio:4/3.1; margin:18px 0 0; overflow:hidden; }
.bnr-rental-card-media img{ width:100%; height:100%; object-fit:cover; }
/* Coral animated accent -- an organic vertical banner attached to the
   card's left edge (Lorenty-style), not a stray decorative circle. It
   reveals itself with a gentle grow-in, then keeps a slow vertical
   float/pulse loop, never covering the photo's subject or any text, and
   respects prefers-reduced-motion below. */
.bnr-rental-card-accent{
	position:absolute; top:0; left:0; width:22px; height:74%;
	background:var(--bnr-coral);
	border-radius:0 40px 40px 0;
	box-shadow:4px 0 18px rgba(110,112,81,.35);
	z-index:2; pointer-events:none;
	transform-origin:top left;
	animation:bnr-accent-reveal .6s cubic-bezier(.22,1,.36,1) both,
		bnr-accent-pulse 4.5s ease-in-out .6s infinite;
}
@keyframes bnr-accent-reveal{
	from{ transform:scaleY(0); opacity:0; }
	to{ transform:scaleY(1); opacity:1; }
}
@keyframes bnr-accent-pulse{
	0%, 100%{ transform:translateY(0) scaleX(1); }
	50%{ transform:translateY(-6px) scaleX(1.08); }
}
@media (prefers-reduced-motion: reduce){
	.bnr-rental-card-accent{ animation:none; opacity:.95; }
}
/* CTA banner/blob -- fully hidden below the fold of the card media until
   the visitor interacts with it: hover/keyboard-focus on desktop, or a
   tap on the photo on touch devices (handled in main.js, which toggles
   the .is-revealed class below). Transform-only for smoothness. */
.bnr-rental-card-blob{
	position:absolute; right:0; bottom:0; width:58%; height:58%;
	background:var(--bnr-coral); border-radius:70% 0 0 0;
	display:flex; align-items:flex-end; justify-content:center; padding:0 0 20px;
	transform:translateY(100%);
	transition:transform .6s cubic-bezier(.22,1,.36,1);
	will-change:transform;
}
.bnr-rental-card:hover .bnr-rental-card-blob,
.bnr-rental-card:focus-within .bnr-rental-card-blob,
.bnr-rental-card.is-revealed .bnr-rental-card-blob{
	transform:translateY(0);
}
.bnr-rental-card-blob a{
	color:#fff; text-decoration:underline; text-underline-offset:3px;
	font-family:var(--bnr-font-heading); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
	text-align:center;
}
@media (prefers-reduced-motion: reduce){
	.bnr-rental-card-blob{ transition:none; }
}
.bnr-rental-card-body{ padding:18px 24px 26px; }
.bnr-rental-card-body p{ color:var(--bnr-ink-muted); font-size:15px; margin:0 0 14px; }
.bnr-card-features{ list-style:none; margin:0 0 16px; padding:0; color:var(--bnr-ink-muted); font-size:14px; }
.bnr-card-features li{ padding:3px 0 3px 22px; position:relative; }
.bnr-card-features li::before{ content:"\2713"; position:absolute; left:0; color:var(--bnr-coral); font-weight:700; }

/* Grid fallback used on the standalone Rentals listing page (all units, no carousel constraints) */
.bnr-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bnr-gap); }
.bnr-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--bnr-gap); }
@media (max-width:1023px){ .bnr-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .bnr-grid-3, .bnr-grid-2{ grid-template-columns:1fr; } }

/* =========================================================
   6. How It Works — dark teal, numbered vertical steps
   ========================================================= */
.bnr-how{ background:var(--bnr-teal-deep); color:#fff; padding:100px 0; }
.bnr-how h2{ color:var(--bnr-teal-bright); font-size:clamp(30px,4vw,44px); margin-bottom:56px; }
.bnr-how-steps{ max-width:640px; }
.bnr-step{
	display:grid; grid-template-columns:34px 1fr; column-gap:22px;
	position:relative; padding-bottom:48px; transition:color .3s ease;
}
.bnr-step:last-child{ padding-bottom:0; }
/* Hierarchy between active/inactive steps is carried by color contrast,
   not opacity -- every line stays comfortably readable on the dark teal
   background even when a step hasn't scrolled into focus yet. */
.bnr-step-num{
	font-family:var(--bnr-font-heading); font-weight:700; font-size:16px; color:rgba(179,218,216,.75);
	grid-row:1; grid-column:1; transition:color .3s ease;
}
.bnr-step.is-active .bnr-step-num{ color:var(--bnr-teal-bright); }
.bnr-step-line{
	grid-row:2; grid-column:1; display:flex; justify-content:center;
	position:relative;
}
.bnr-step-line::before{
	content:""; position:absolute; top:0; bottom:-48px; width:1px; background:rgba(179,218,216,.3);
}
.bnr-step:last-child .bnr-step-line::before{ display:none; }
.bnr-step-icon{ grid-row:1; grid-column:2; margin-bottom:14px; color:rgba(179,218,216,.8); transition:color .3s ease; }
.bnr-step.is-active .bnr-step-icon{ color:var(--bnr-teal-bright); }
.bnr-step-icon svg{ width:34px; height:34px; }
.bnr-step-body{ grid-row:2; grid-column:2; }
.bnr-step-body h3{ color:#fff; font-size:20px; margin-bottom:8px; }
.bnr-step-body p{ color:rgba(255,255,255,.72); margin:0; font-size:15px; }
.bnr-step.is-active .bnr-step-body p{ color:#EDEBE4; }

/* Two-column composition on wider screens: steps on the left, a photo with
   overlapping decorative squares on the right (Lorenty-style). Stacks to a
   single column below 960px. */
.bnr-how-layout{ display:flex; align-items:center; gap:64px; }
.bnr-how-main{ flex:1 1 480px; min-width:0; }
.bnr-how-media{ position:relative; flex:1 1 420px; max-width:460px; margin-left:auto; }
.bnr-how-media-frame{ position:relative; z-index:1; border-radius:var(--bnr-radius); overflow:hidden; aspect-ratio:4/5; }
.bnr-how-media-frame img{ width:100%; height:100%; object-fit:cover; }
.bnr-how-media-shape{ position:absolute; border-radius:20px; }
.bnr-how-media-shape-outline{ top:-24px; right:36px; width:90px; height:90px; border:2px solid rgba(179,218,216,.6); z-index:0; }
.bnr-how-media-shape-fill{ bottom:-22px; left:-22px; width:70px; height:70px; background:var(--bnr-coral); z-index:2; }
@media (max-width:960px){
	.bnr-how-layout{ display:block; }
	.bnr-how-media{ display:none; }
}

/* =========================================================
   7. Occasions (editorial, image-led)
   ========================================================= */
.bnr-occasions{ background:var(--bnr-white); padding:100px 0; }
/* Side-by-side editorial layout -- text column + a photo with the same
   overlapping-square accent used in How It Works, matching Lorenty's
   image-block sections (image width/whitespace balance, decorative
   overlap, section rhythm) using only real Barnyard photography. */
.bnr-occasions-layout{ display:flex; align-items:center; gap:64px; }
.bnr-occasions-main{ flex:1 1 440px; min-width:0; }
.bnr-occasions-media{ position:relative; flex:1 1 440px; max-width:520px; margin-left:auto; margin-top:0; }
.bnr-occasions-media-frame{ position:relative; z-index:1; border-radius:var(--bnr-radius); overflow:hidden; }
.bnr-occasions-media-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.bnr-occasions-media-frame::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(0deg, rgba(51,52,60,.5) 0%, rgba(51,52,60,0) 45%);
}
.bnr-occasions-tags{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.bnr-occasions-tags span{
	display:inline-flex; align-items:center; padding:11px 22px; border-radius:100px;
	background:var(--bnr-mint); color:var(--bnr-teal-deep); font-weight:600; font-size:14px;
}
@media (max-width:960px){
	.bnr-occasions-layout{ display:block; }
	.bnr-occasions-media{ max-width:100%; margin-top:32px; }
}

/* =========================================================
   8. Gallery (native WP gallery block styling)
   ========================================================= */
.bnr-gallery-wrap .wp-block-gallery{ margin-top:40px; }
.wp-block-gallery figure img{ border-radius:var(--bnr-radius-sm); }
.wp-block-gallery .blocks-gallery-item, .wp-block-gallery figure{ margin:0; }

/* =========================================================
   9. Content / entry styling (About, Services, generic pages)
   ========================================================= */
.bnr-entry{ padding:80px 0; }
.bnr-entry .bnr-container{ max-width:900px; }
.bnr-entry h1{ font-size:38px; margin-bottom:24px; }
.bnr-entry h2{ font-size:28px; margin-top:2em; }
.bnr-entry h3{ font-size:21px; }
.bnr-entry p{ color:var(--bnr-ink-muted); }
.bnr-entry ul, .bnr-entry ol{ color:var(--bnr-ink-muted); padding-left:22px; margin-bottom:1.5em; }
.bnr-entry .wp-block-image{ margin:2em 0; }
.bnr-entry .wp-block-image img{ border-radius:var(--bnr-radius); }
.bnr-entry .wp-block-button__link{
	display:inline-flex; padding:16px 32px; background:var(--bnr-teal-darker); color:#fff !important;
	border-radius:100px; text-decoration:none; font-weight:600; text-transform:uppercase; font-size:13px; letter-spacing:.04em;
}
.bnr-entry .wp-block-button__link:hover{ background:var(--bnr-coral); }
.bnr-entry .wp-block-columns{ gap:32px; }

/* =========================================================
   10. FAQ / accordion (pure CSS, no JS dependency required)
   ========================================================= */
.bnr-faq-item{ border-bottom:1px solid var(--bnr-border); padding:22px 0; }
.bnr-faq-item h3{ font-size:19px; margin:0 0 10px; }
.bnr-faq-item p{ color:var(--bnr-ink-muted); margin:0; }

/* =========================================================
   11. Contact
   ========================================================= */
.bnr-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:36px; align-items:start; }
.bnr-contact-item{ margin-bottom:26px; }
.bnr-contact-item .bnr-contact-label{ display:block; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--bnr-coral); margin-bottom:6px; font-weight:700; }
.bnr-contact-item a, .bnr-contact-item p{ font-size:19px; color:var(--bnr-teal-deep); text-decoration:none; margin:0; }
.bnr-contact-item a:hover{ color:var(--bnr-coral); }
.bnr-form p{ margin:0 0 18px; }
.bnr-form label{ display:block; font-weight:600; margin-bottom:6px; font-size:14px; }
.bnr-form input[type=text], .bnr-form input[type=email], .bnr-form input[type=tel], .bnr-form input[type=date], .bnr-form select, .bnr-form textarea{
	width:100%; padding:14px 16px; border:1px solid var(--bnr-border); border-radius:var(--bnr-radius-sm); font-family:inherit; font-size:15px; background:#fff;
}
.bnr-form textarea{ min-height:140px; resize:vertical; }
.bnr-form button{ border:none; }
.bnr-form-notice{ padding:16px 18px; border-radius:var(--bnr-radius-sm); margin-bottom:20px; font-size:15px; }
.bnr-form-notice.success{ background:#E1F3EC; color:#0F4A3B; }
.bnr-form-notice.error{ background:#FBE9EA; color:#79261f; }
/* honeypot field, hidden from real users */
.bnr-hp-field{ position:absolute !important; left:-9999px !important; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   12. Booking panel — full-screen, dark teal, Lorenty-style discrete
   screens (not a SaaS wizard): no progress dots, a bare thin close X,
   and a soft fade/translate crossfade between screens.
   ========================================================= */
.bnr-quote-overlay{
	position:fixed; inset:0; z-index:300;
	background:var(--bnr-teal-deep); color:#fff;
	opacity:0; visibility:hidden; transform:translateY(16px);
	transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
	overflow-y:auto;
}
.bnr-quote-overlay.is-open{
	opacity:1; visibility:visible; transform:translateY(0);
	transition:opacity .3s ease, transform .3s ease;
}
.bnr-quote-inner{ max-width:480px; margin:0 9% 0 9%; padding:26px 0 60px; min-height:100%; display:flex; flex-direction:column; }
@media (min-width:640px){ .bnr-quote-inner{ margin:0 auto; padding-left:24px; padding-right:24px; } }
.bnr-quote-head{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:38px; }
.bnr-quote-close{
	display:flex; align-items:center; justify-content:center;
	width:36px; height:36px; border:0; background:none; cursor:pointer; color:#fff;
	padding:0; opacity:.9;
}
.bnr-quote-close svg{ width:30px; height:30px; stroke-width:1.4; }
.bnr-quote-back{
	display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
	color:var(--bnr-teal-bright); font-size:14px; font-weight:600; padding:0; margin-bottom:18px;
}
.bnr-quote-back:hover{ color:#fff; }

/* Screens fade + translate in/out instead of a wizard-style hard cut. */
.bnr-quote-step{ display:none; flex:1; opacity:0; transform:translateY(10px); }
.bnr-quote-step.is-active{
	display:flex; flex-direction:column;
	animation:bnr-step-in .32s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes bnr-step-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
	.bnr-quote-step.is-active{ animation:none; opacity:1; transform:none; }
}

.bnr-quote-step h2{
	color:var(--bnr-teal-bright); font-weight:300; letter-spacing:-.01em;
	font-size:clamp(28px,7vw,34px); margin-bottom:30px;
}
.bnr-quote-field{ margin-bottom:22px; max-width:400px; }
.bnr-quote-field label{ display:block; font-size:14px; color:var(--bnr-teal-bright); margin-bottom:10px; font-weight:600; }
.bnr-quote-field input, .bnr-quote-field select, .bnr-quote-field textarea{
	width:100%; padding:18px 20px; border-radius:6px; border:1px solid transparent;
	background:#fff; color:var(--bnr-ink); font-family:inherit; font-size:15px;
}
.bnr-quote-field select{
	appearance:none; -webkit-appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333343C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 18px center; background-size:18px;
	padding-right:48px;
}
.bnr-quote-field textarea{ min-height:110px; resize:vertical; border-radius:var(--bnr-radius-sm); }
.bnr-quote-field input:focus, .bnr-quote-field select:focus, .bnr-quote-field textarea:focus{
	outline:none; border-color:var(--bnr-aqua); box-shadow:0 0 0 3px rgba(110,112,81,.3);
}
.bnr-quote-field-row{ display:flex; gap:14px; max-width:400px; }
.bnr-quote-field-row .bnr-quote-field{ flex:1; max-width:none; }

.bnr-quote-actions{ display:flex; gap:14px; margin-top:auto; padding-top:24px; }
.bnr-quote-actions.bnr-quote-actions-start{ margin-top:8px; justify-content:flex-start; }
/* Low-key alternative-contact line -- a way out for someone who'd rather
   message than fill in a form, without competing with the pill CTA. */
.bnr-quote-altcontact{ margin:18px 0 0; font-size:13.5px; color:var(--bnr-teal-bright); }
.bnr-quote-altcontact a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px; margin-left:4px; }
.bnr-quote-altcontact a:hover{ color:var(--bnr-aqua); }
/* Lorenty's pale-mint pill "NEXT" -- deliberately not full width, not coral. */
.bnr-btn-pill{
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--bnr-mint); color:var(--bnr-teal-darker);
	border:0; border-radius:999px; padding:0 32px; height:64px;
	font-family:var(--bnr-font-heading); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
	cursor:pointer; width:auto; min-width:44%;
}
.bnr-btn-pill:hover{ background:var(--bnr-mint-deep); }
.bnr-quote-actions .bnr-btn{ flex:1; }
.bnr-quote-actions-review{ flex-direction:column; align-items:stretch; }
.bnr-quote-actions-review .bnr-btn-pill{ width:100%; min-width:0; }

.bnr-quote-summary{ background:rgba(255,255,255,.06); border-radius:var(--bnr-radius-sm); padding:18px 20px; margin-bottom:24px; font-size:14px; color:var(--bnr-teal-bright); }
.bnr-quote-summary strong{ color:#fff; }
.bnr-quote-summary p{ margin:0 0 8px; }
.bnr-quote-summary p:last-child{ margin-bottom:0; }
.bnr-quote-form-error{ color:#ffb4a8; font-size:14px; margin:0 0 12px; display:none; }
.bnr-quote-form-error.is-visible{ display:block; }
.bnr-quote-success{ text-align:center; padding:40px 0; }
.bnr-quote-success svg{ width:56px; height:56px; color:var(--bnr-aqua); margin-bottom:20px; }
.bnr-quote-success h2{ margin-bottom:12px; }
.bnr-quote-success p{ color:var(--bnr-teal-bright); }

/* ---------------------------------------------------------
   Inline booking calendar -- Lorenty-style: white card, mint month
   header, tall week rows with subtle dividers, aqua selected-date
   circle, struck-through disabled past dates. Vanilla JS renders the
   month/weekday/day grid into these containers.
   --------------------------------------------------------- */
.bnr-calendar{
	background:#fff; border-radius:5px; overflow:hidden;
	color:var(--bnr-teal-deep); margin-bottom:20px; max-width:400px;
}
.bnr-calendar-head{
	display:flex; align-items:center; justify-content:space-between;
	background:var(--bnr-mint); padding:18px 20px;
}
.bnr-calendar-month{ font-family:var(--bnr-font-heading); font-weight:700; font-size:clamp(20px,5vw,26px); color:var(--bnr-teal-deep); flex:1; text-align:center; }
.bnr-calendar-nav{
	width:30px; height:30px; border:0; background:none; color:var(--bnr-teal-deep);
	display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; cursor:pointer; padding:0;
}
.bnr-calendar-nav:disabled{ opacity:.25; cursor:not-allowed; }
.bnr-calendar-weekdays{
	display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
	font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--bnr-teal-deep);
	padding:14px 8px 8px;
}
.bnr-calendar-row{
	display:grid; grid-template-columns:repeat(7,1fr); align-items:center;
	border-top:1px solid var(--bnr-border); padding:6px 4px;
}
.bnr-calendar-day{
	aspect-ratio:1; max-height:52px; border:none; background:none; border-radius:50%;
	font-size:15px; color:var(--bnr-teal-deep); cursor:pointer; margin:0 auto;
	display:flex; align-items:center; justify-content:center; padding:0; width:100%; max-width:48px;
}
.bnr-calendar-day:hover:not(:disabled){ background:rgba(110,112,81,.18); }
.bnr-calendar-day:focus-visible{ outline:2px solid var(--bnr-teal-deep); outline-offset:2px; }
.bnr-calendar-day.is-selected{ background:var(--bnr-aqua); color:var(--bnr-aqua-dark); font-weight:700; }
.bnr-calendar-day:disabled{ color:rgba(51,52,60,.3); cursor:not-allowed; background:none; text-decoration:line-through; }
.bnr-calendar-day.is-empty{ visibility:hidden; cursor:default; }
.bnr-calendar-selected{ font-size:14px; color:var(--bnr-teal-bright); margin:0 0 16px; }

/* ---------------------------------------------------------
   Time slots -- two-column pill grid under the calendar, Lorenty-style.
   --------------------------------------------------------- */
.bnr-time-slots{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:400px; margin-bottom:8px; }
.bnr-time-slot{
	display:flex; align-items:center; justify-content:center; text-align:center;
	border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
	border-radius:999px; padding:10px 12px; min-height:58px; font-size:13.5px; font-weight:600;
	cursor:pointer; line-height:1.25;
}
.bnr-time-slot:hover{ border-color:var(--bnr-aqua); }
.bnr-time-slot.is-selected{ background:var(--bnr-aqua); color:var(--bnr-aqua-dark); border-color:var(--bnr-aqua); }

/* ---------------------------------------------------------
   Booking panel -- desktop: a true side-drawer, not a centered
   modal. The overlay becomes a dim scrim over the page; the panel
   itself is a fixed-width dark column pinned to the right edge that
   slides in with a transform (Lorenty-style), full viewport height.
   Interior spacing/typography is scaled up for the wider panel.
   --------------------------------------------------------- */
@media (min-width:1024px){
	.bnr-quote-overlay{
		background:rgba(26,27,32,.55);
		-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
	}
	.bnr-quote-inner{
		position:fixed; top:0; right:0; height:100vh; width:min(42%,620px); max-width:620px;
		margin:0; padding:56px 60px 64px;
		background:var(--bnr-teal-deep); color:#fff;
		box-shadow:-30px 0 70px rgba(15,16,20,.35);
		transform:translateX(100%);
		transition:transform .4s cubic-bezier(.22,1,.36,1);
		overflow-y:auto;
	}
	.bnr-quote-overlay.is-open .bnr-quote-inner{ transform:translateX(0); }
	.bnr-quote-head{ margin-bottom:44px; }
	.bnr-quote-close{ width:40px; height:40px; }
	.bnr-quote-close svg{ width:26px; height:26px; }
	.bnr-quote-step h2{ font-size:38px; margin-bottom:36px; }
	.bnr-quote-field, .bnr-quote-field-row{ max-width:460px; }
	.bnr-calendar, .bnr-time-slots{ max-width:460px; }
	.bnr-calendar-day{ max-height:56px; }
	.bnr-time-slot{ min-height:60px; font-size:14px; }
	.bnr-btn-pill{ height:60px; padding:0 36px; }
	.bnr-quote-summary{ max-width:460px; }
}

/* =========================================================
   13. Footer
   ========================================================= */
.bnr-footer{ background:var(--bnr-teal-deep); color:#D3CDBD; padding:70px 0 28px; }
.bnr-footer a{ color:#D3CDBD; text-decoration:none; }
.bnr-footer a:hover{ color:#fff; }
.bnr-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.bnr-footer-logo{
	display:inline-block; background:var(--bnr-white); border-radius:var(--bnr-radius-sm);
	padding:10px 16px; margin-bottom:16px;
}
/* The source logo file is a flat, opaque PNG (no transparency), so it
   can't be recolored white via a CSS filter without losing the mark
   entirely -- showing it at full color on a light chip keeps it
   genuinely visible against the dark footer instead of a blank box. */
.bnr-footer-logo img{ max-height:36px; display:block; margin:0; }
.bnr-footer h5{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; }
.bnr-footer ul{ list-style:none; margin:0; padding:0; }
.bnr-footer li{ margin-bottom:10px; }
.bnr-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:24px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#8B9296; }

/* Contact column -- icon + text rows separated by hairline dividers,
   Lorenty-style ("Welcome" panel), instead of a plain bulleted list. */
.bnr-footer-contact-list{ border-top:1px solid rgba(255,255,255,.14); }
.bnr-footer-contact-list li{
	display:flex; align-items:center; gap:14px; margin:0;
	padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14);
	font-size:14.5px;
}
.bnr-footer-icon{ display:flex; flex-shrink:0; color:var(--bnr-mint); }
.bnr-footer-icon svg{ width:18px; height:18px; }

/* =========================================================
   14. Single Rental
   ========================================================= */
.bnr-rental-hero{ padding:60px 0 0; }
.bnr-rental-media-main img{ width:100%; border-radius:var(--bnr-radius); }
.bnr-rental-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; padding:56px 0 100px; align-items:start; }
.bnr-rental-layout .bnr-entry-content{ color:var(--bnr-ink-muted); }
.bnr-rental-sidebar{ background:var(--bnr-mint); border-radius:var(--bnr-radius); padding:32px; position:sticky; top:110px; }
.bnr-rental-sidebar h4{ font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.bnr-rental-sidebar .bnr-btn{ width:100%; margin-top:10px; }

/* =========================================================
   15. Responsive
   ========================================================= */
@media (max-width:1023px){
	.bnr-footer-grid{ grid-template-columns:1fr 1fr; }
	.bnr-rental-layout{ grid-template-columns:1fr; }
	.bnr-rental-sidebar{ position:static; }
}
@media (max-width:640px){
	.bnr-section{ padding:56px 0; }
	.bnr-entry{ padding:38px 0; }
	.bnr-footer-grid, .bnr-contact-grid{ grid-template-columns:1fr; }
	.bnr-how, .bnr-occasions{ padding:52px 0; }

	/* Hero: let content set the height instead of generous fixed padding
	   -- no vh-based sizing, just tighter spacing between the grouped
	   eyebrow/headline/body/CTA and the section that follows. */
	.bnr-hero{ padding:24px 0 0; }
	.bnr-hero-inner{ padding:0 20px 20px; }
	.bnr-hero h1{ margin-bottom:14px; }
	.bnr-hero p{ margin-bottom:22px; }

	/* Carousel head: stack the arrows under the heading on their own
	   row so they never collide with multi-line headings, and tighten
	   the surrounding whitespace. */
	.bnr-carousel-head{ padding:36px 20px 0; }
	.bnr-carousel-arrows{ width:100%; justify-content:flex-start; margin-top:6px; }
	.bnr-carousel-section{ padding-bottom:48px; }
	.bnr-carousel{ gap:14px; padding:4px 20px 22px; margin:0 -20px; }

	/* Rental cards: image is a clear ~45% of the card, content below is
	   compact -- not a tall empty box with a sliver of text at the
	   bottom. */
	.bnr-carousel .bnr-rental-card{ flex-basis:83%; }
	.bnr-rental-card-top{ padding:18px 18px 0; }
	.bnr-rental-card-top h3{ font-size:19px; }
	.bnr-rental-card-media{ margin-top:14px; aspect-ratio:4/3; }
	.bnr-rental-card-body{ padding:14px 18px 20px; }
	.bnr-rental-card-body p{ font-size:14px; margin-bottom:10px; }
	.bnr-card-features li{ padding:2px 0 2px 20px; }

	/* Occasions: tighter gaps between image, tags, and the next section. */
	.bnr-occasions-media{ margin-top:24px; }
	.bnr-occasions-tags{ margin-top:18px; gap:10px; }
	.bnr-occasions-tags span{ padding:9px 16px; font-size:13px; }

	/* Bottom CTA + footer: buttons stack full-width with safe side
	   margins, nothing crowds the edges, and vertical padding is trimmed. */
	.bnr-btn-row{ flex-direction:column; align-items:stretch; }
	.bnr-btn-row .bnr-btn{ width:100%; }
	.bnr-footer{ padding:44px 0 22px; }
	.bnr-footer-grid{ gap:32px; margin-bottom:32px; }

	/* Rental card coral accent -- slightly smaller so it never crowds a
	   narrow 375-390px card. */
	.bnr-rental-card-accent{ width:16px; height:64%; }

	/* Booking panel: content sits ~9% from the left edge (Lorenty
	   proportions) and stays full-screen on a phone with no horizontal
	   scroll; the calendar and time-slot grid stay comfortably inside
	   375-390px. */
	.bnr-quote-inner{ margin:0 9%; padding:22px 0 48px; }
	.bnr-quote-step h2{ margin-bottom:24px; }
	.bnr-calendar-day{ font-size:14px; }
	.bnr-time-slots{ gap:10px; }
	.bnr-time-slot{ font-size:12.5px; padding:8px 8px; min-height:54px; }
	.bnr-btn-pill{ min-width:48%; padding:0 22px; height:60px; }
}