/* ==========================================================================
   The Keepers — main stylesheet
   Palette: warm near-black on warm off-white. No blues.
     #141414  buttons, CTAs, icons, accents
     #1c1c1a  dark section backgrounds, decorative blocks
     #f7f6f3  light backgrounds
   Typeface: DM Sans.
   ========================================================================== */

:root {
	/* Palette */
	--accent: #141414;      /* buttons, CTAs, icons, accents */
	--accent-dark: #000000; /* accent hover */
	--dark: #1c1c1a;        /* dark section backgrounds + decorative blocks */
	--tint: #f7f6f3;        /* light backgrounds */

	/* Neutrals — warm, to sit with the off-white above */
	--ink: #141414;
	--body: #55534e;
	--muted: #8a877f;
	--line: #e4e1da;
	--white: #ffffff;

	/* Legacy aliases: the palette moved from blue to near-black, but the
	   --blue* names are still referenced widely. Kept so one edit here
	   re-themes the whole site. */
	--blue: var(--accent);
	--blue-dark: var(--accent-dark);
	--blue-tint: var(--tint);
	--charcoal: var(--dark);

	--radius: 14px;
	--radius-sm: 8px;
	--shadow: 0 18px 40px rgba(0, 0, 0, 0.13);
	--shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.09);
	--container: 1140px;
	--font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Right edge of the centered content column (aligns with the Book now button). */
	--content-edge: max(24px, calc((100% - var(--container)) / 2 + 24px));
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 20px;
	line-height: 1.6;
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Focal points ------------------------------------------------------------
   Any cropped image can carry --focus-d (desktop) and --focus-m (mobile)
   inline, set per image in the admin, to choose which part of the photo
   survives the crop. Mobile falls back to the desktop choice, and that falls
   back to --focus-default, which individual rules below set to whatever crop
   suits that slot. Rules must set --focus-default rather than
   object-position, or they'd win over the editor's choice. */
img {
	object-position: var(--focus-d, var(--focus-default, 50% 50%));
}

@media (max-width: 860px) {
	img {
		object-position: var(--focus-m, var(--focus-d, var(--focus-default, 50% 50%)));
	}
}

a { color: var(--blue); text-decoration: none; }

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	color: var(--ink);
	font-weight: 500;
	line-height: 1.15;
}

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

svg { display: block; width: 100%; height: 100%; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	background: var(--white);
	padding: 8px 16px;
	z-index: 999;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 34px;
	border-radius: 999px;
	font-family: var(--font);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

/* Recurring shine sweep on primary (Book) buttons. */
.btn-primary {
	position: relative;
	overflow: hidden;
}

.btn-primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-22deg);
	animation: keepers-shine 3.8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes keepers-shine {
	0%       { left: -80%; }
	22%      { left: 130%; }
	100%     { left: 130%; }
}

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); color: var(--white); }

.btn-light { background: var(--white); color: var(--blue); }
.btn-light:hover { background: var(--blue-tint); color: var(--blue-dark); }

.btn-outline-light {
	background: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline-light:hover { background: var(--white); color: var(--blue); }

.btn-sm { padding: 12px 30px; font-size: 16px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--white);
	transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 82px;
}

.site-logo-img { width: auto; height: 52px; }

.site-nav { display: flex; align-items: center; gap: 30px; }

.nav-menu {
	display: flex;
	align-items: center;
	gap: 28px;
}

.nav-menu > li { position: relative; }

.nav-menu a {
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	transition: color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-parent > a,
.nav-menu .current-menu-ancestor > a { color: var(--blue); }

/* Dropdown ---------------------------------------------------------- */

.nav-menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nav-menu .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
}

.nav-menu .menu-item-has-children:hover > a::after,
.nav-menu .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}

.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 120;
	min-width: 268px;
	margin-top: 14px;
	padding: 10px;
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Bridges the gap so the menu doesn't close as the pointer travels down. */
.nav-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.nav-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 6px;
	font-size: 15px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-menu .sub-menu a:hover { background: var(--blue-tint); color: var(--blue); }

.nav-ico {
	width: 34px;
	height: 34px;
	flex: none;
	padding: 8px;
	border-radius: 50%;
	background: var(--blue-tint);
	color: var(--blue);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-menu .sub-menu a:hover .nav-ico { background: var(--blue); color: var(--white); }

.btn-book { margin-left: 4px; }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
}

.nav-toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--ink);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --------------------------------------------------------------------------
   Hero (shared by both hero bands)
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	z-index: 2; /* floating size tags overhang onto the next section */
	min-height: 580px;
	display: flex;
	align-items: center;
}

.hero-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
}

.hero-media { position: absolute; inset: -12% 0; }

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

.hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(16, 16, 15, 0.55) 0%, rgba(16, 16, 15, 0.18) 55%, rgba(16, 16, 15, 0.05) 100%);
}

.hero-inner { width: 100%; }

.hero-content { max-width: 640px; padding: 100px 0; }

.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: var(--white);
	font-size: 14px;
	letter-spacing: 0.02em;
	margin-bottom: 20px;
	background: rgba(20, 20, 20, 0.25);
	backdrop-filter: blur(3px);
}

.hero-title {
	color: var(--white);
	font-size: clamp(48px, 6.25vw, 68px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin-bottom: 30px;
}

/* Floating size tags — square, centered content, right edge aligned with
   the content column (same edge as the header's Book now button). */

.hero-tags {
	position: absolute;
	right: var(--content-edge);
	bottom: -62px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 22px;
	z-index: 5;
}

.size-tag {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	width: 158px;
	height: 158px;
}

/* Bottom tag steps inward to the left, like the original design. */
.size-tag + .size-tag { margin-right: 58px; }

.size-tag-dark {
	background: rgba(28, 28, 26, 0.94);
	color: var(--white);
}

.size-tag-light {
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--shadow-soft);
}

/* Partner to .size-tag-dark in the stacked pair. It used to be the brand
   blue; with the palette down to near-blacks the pair needs its contrast
   from light-vs-dark instead, or the two squares read as one block. */
.size-tag-tint {
	background: var(--tint);
	color: var(--ink);
	box-shadow: var(--shadow-soft);
}

.size-tag-icon { width: 30px; height: 30px; opacity: 0.9; }

.size-tag-label {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

.hero-secondary { min-height: 640px; }

/* --------------------------------------------------------------------------
   Eyebrow + section headings
   -------------------------------------------------------------------------- */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 14px;
}

.eyebrow-line {
	display: inline-block;
	width: 26px;
	height: 1.5px;
	background: currentColor;
	opacity: 0.7;
}

.eyebrow-light { color: var(--white); }

.section-heading {
	font-size: clamp(33px, 4vw, 43px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 38px;
}

/* --------------------------------------------------------------------------
   Intro + map — map bleeds to the right page edge; the copy sits in a
   white block overlapping the map on the left.
   -------------------------------------------------------------------------- */

.intro {
	position: relative;
	padding: 100px 0 0;
	min-height: 780px;
	overflow: hidden;
}

/* Map fills the entire section, flush left, right and bottom (touching the
   top of the next "Flexible storage" band). */
.intro-map-bleed { position: absolute; inset: 0; }

/* The iframe is extended past the right edge so the map's centre — i.e. the
   facility itself — lands clear of the white copy block, at ~72% across. */
.map-frame { position: absolute; top: 0; bottom: 0; left: 0; right: -44%; }

/* Marker sits at the frame's centre, which is the facility on every
   breakpoint — no per-breakpoint maths needed. */
.map-marker {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -100%);
	width: 52px;
	height: 52px;
	color: var(--blue);
	z-index: 2;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

.map-marker-img { width: 100%; height: auto; }

.map-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(0.92) brightness(1.06);
	pointer-events: none;
}

/* White gradient hides most of the left side of the map on desktop. */
.map-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--white) 0%,
		rgba(255, 255, 255, 0.98) 32%,
		rgba(255, 255, 255, 0.82) 46%,
		rgba(255, 255, 255, 0) 68%
	);
	pointer-events: none;
}

.map-card {
	position: absolute;
	right: 7%;
	top: 12%;
	width: 240px;
	background: var(--charcoal);
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow);
	z-index: 2;
}

.map-card-img { width: 100%; height: 164px; object-fit: cover; }

.map-card-label {
	display: block;
	color: var(--white);
	text-align: center;
	font-size: 16px;
	padding: 12px 14px 14px;
}

.intro .container { position: relative; z-index: 3; width: 100%; }

.intro-copy {
	max-width: 700px;
	background: var(--white);
	border-radius: var(--radius-sm);
	padding: 48px 52px;
	box-shadow: var(--shadow-soft);
}

.intro-heading {
	font-size: clamp(25px, 2.75vw, 30px);
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: 20px;
}

.intro-text { font-size: 18px; max-width: 48ch; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Storage options
   -------------------------------------------------------------------------- */

.options { padding: 88px 0 76px; }

.options-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.option-card {
	position: relative;
	margin: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 0.74;
	background: var(--blue-tint);
}

.option-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.option-card:hover .option-img { transform: scale(1.06); }

.option-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 16, 15, 0) 45%, rgba(16, 16, 15, 0.62) 100%);
}

.option-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	right: 16px;
	z-index: 2;
	color: var(--white);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Choose your unit (pricing) — photo fills the top; cards overhang the
   photo's bottom edge into white space.
   -------------------------------------------------------------------------- */

.choose {
	position: relative;
	padding: 70px 0 90px;
	isolation: isolate;
	background: var(--white);
}

/* Wider content column for this section only (fits the price cards). */
.choose .container { max-width: 1288px; }

.choose-clip {
	position: absolute;
	inset: 0 0 auto 0;
	height: 640px; /* photo covers only the top; cards hang into the white */
	overflow: hidden;
	z-index: -1;
}

.choose-media { position: absolute; inset: 0; }

.choose-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	--focus-default: top center; /* unfiltered, aligned to the top */
}

.choose-heading {
	color: var(--white);
	text-align: center;
	font-size: clamp(35px, 4.25vw, 48px);
	font-weight: 700;
	margin: 260px 0 28px; /* sits just above the cards; photo shows above */
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.unit-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 26px;
	margin: 0 auto;
}

/* Unit card — light-blue shell, white size panel top-right, white
   price/features panel, checklist + button on the shell. */

.unit-card {
	position: relative;
	background: var(--blue-tint);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	padding: 20px 20px 26px;
}

.unit-top {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin: 0 0 20px;
}

/* Title + badge vertically centered against the size panel. */
.unit-title-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.unit-type {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	color: var(--white);
	background: var(--blue);
	margin-bottom: 8px;
}

.unit-type-dry { background: var(--charcoal); }

.unit-name {
	font-size: 26px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.12;
	margin: 0;
}

/* White panel flush with the card's top-right corner; illustration + size. */
.unit-size-panel {
	background: var(--white);
	margin: -20px -20px 0 0;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.unit-illo { width: 56px; flex: none; }

.unit-illo-img { width: 100%; height: auto; }

.unit-size-icon {
	width: 46px;
	height: 46px;
	flex: none;
	color: var(--white);
	background: var(--blue);
	border-radius: 50%;
	padding: 11px;
}

.unit-size-text { color: var(--blue); text-align: center; }
.unit-size-text strong { font-size: 22px; font-weight: 700; line-height: 1; display: block; }
.unit-size-text small { display: block; font-size: 12px; font-weight: 500; margin-top: 3px; white-space: nowrap; }

.unit-panel {
	background: var(--white);
	border-radius: 6px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

/* Price + "per month" stacked in the left column; length note on the right. */
.unit-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 14px;
}

.unit-price-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.unit-price-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.unit-price-ico {
	width: 26px; height: 26px;
	color: var(--blue);
	flex: none;
}

.unit-dims-ico { width: 20px; height: 20px; color: var(--blue); flex: none; }

.unit-price {
	font-size: 30px;
	font-weight: 700;
	color: #111;
	line-height: 1;
}

/* "/ month + VAT · CAM included" — supporting detail, not a headline. */
.unit-period {
	font-size: 11.5px;
	color: var(--body);
	font-weight: 500;
	line-height: 1.35;
	margin-left: 34px; /* aligns under the price, past the tag icon */
	max-width: 22ch;
}

.unit-dims {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: #222;
}

/* Single-column list — one line per feature, so the text can run longer. */
.unit-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.unit-features li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.25;
	color: #1c1c1c;
}

.feat-text {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	white-space: nowrap;
}

.feat-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.12);
	color: var(--blue);
	font-family: var(--font);
	font-size: 9.5px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	cursor: help;
	vertical-align: 1px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.feat-info:hover,
.feat-info:focus-visible {
	background: var(--blue);
	color: var(--white);
	outline: none;
}

.feat-tip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	z-index: 40;
	width: 218px;
	transform: translate(-50%, 5px);
	padding: 11px 13px;
	border-radius: var(--radius-sm);
	background: var(--charcoal);
	color: var(--white);
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	text-align: left;
	/* Don't inherit nowrap from .feat-text — the tip must wrap in its box. */
	white-space: normal;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.feat-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--charcoal);
}

.feat-info:hover .feat-tip,
.feat-info:focus-visible .feat-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Anchor the tip to the row's left edge (always on-screen and 218px fits
   inside the card), so a tip on the rightmost card can't push the page wide.
   The arrow sits near the left where the icon is. */
.unit-features .feat-tip { left: 0; transform: translate(0, 5px); }
.unit-features .feat-info:hover .feat-tip,
.unit-features .feat-info:focus-visible .feat-tip { transform: translate(0, 0); }
.unit-features .feat-tip::after { left: 16px; margin-left: 0; }

.feat-ico {
	width: 32px; height: 32px;
	flex: none;
	color: var(--white);
	background: var(--blue);
	border-radius: 50%;
	padding: 7px;
}

.unit-checklist {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	margin-bottom: 20px;
}

.unit-checklist li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: #111;
}

.check-ico { width: 15px; height: 15px; color: #111; flex: none; }

.unit-availability {
	text-align: center;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 14px;
}

.unit-card .btn { align-self: center; margin-top: auto; font-size: 17px; padding: 14px 38px; }

/* --------------------------------------------------------------------------
   Photo band
   -------------------------------------------------------------------------- */

.photo-band { position: relative; height: 520px; overflow: hidden; }

.band-media { position: absolute; inset: -14% 0; }

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

/* --------------------------------------------------------------------------
   Why choose — white
   -------------------------------------------------------------------------- */

.why-white { padding: 92px 0; }

.why-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 52px;
	align-items: start;
}

.why-media {
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	align-self: start;
}

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

.why-list { margin-bottom: 30px; }

.why-list li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 17px;
	color: var(--ink);
	padding: 5px 0;
}

.why-ico { width: 18px; height: 18px; color: var(--blue); flex: none; }

.why-list .is-highlight { font-weight: 700; }
.why-list .is-highlight .why-ico { color: #d43a3a; }

/* --------------------------------------------------------------------------
   Why choose — blue (steps)
   -------------------------------------------------------------------------- */

.why-blue {
	background: var(--dark);
	padding: 92px 0 80px;
	color: var(--white);
}

.why-blue .section-heading { color: var(--white); }

.steps-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: 48px;
}

.step-card {
	background: var(--white);
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.step-media { aspect-ratio: 1.55; overflow: hidden; }

.step-img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

.step-body { padding: 20px 22px 24px; }

.step-title { font-size: 21px; font-weight: 700; margin-bottom: 8px; }

.step-text { font-size: 16px; color: var(--body); margin: 0; }

.why-blue-cta { text-align: center; }

/* --------------------------------------------------------------------------
   Our Belief (about) page
   -------------------------------------------------------------------------- */

.belief-hero { min-height: 520px; }

.belief-hero .hero-content { padding: 80px 0; }

.hero-sub {
	color: rgba(255, 255, 255, 0.92);
	font-size: 20px;
	max-width: 44ch;
	margin: -6px 0 0;
}

/* Decorative background elements (dot grids / outline rings) */

.bg-dots {
	position: absolute;
	width: 200px;
	height: 300px;
	background-image: radial-gradient(circle, rgba(20, 20, 20, 0.22) 2px, transparent 2.6px);
	background-size: 20px 20px;
	pointer-events: none;
	/* Dot fill clipped to a keyhole silhouette: round bow, narrow neck,
	   stem flaring wide at the base. */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'><circle cx='100' cy='80' r='72'/><path d='M70 140 L15 292 H185 L130 140 Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'><circle cx='100' cy='80' r='72'/><path d='M70 140 L15 292 H185 L130 140 Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.bg-dots-light {
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 2px, transparent 2.6px);
}

.bg-dots-tl { top: 46px; left: 4%; }
.bg-dots-tr { top: 46px; right: 4%; }
.bg-dots-br { bottom: 46px; right: 6%; }

.bg-ring {
	position: absolute;
	width: 340px;
	height: 340px;
	border: 2px solid rgba(20, 20, 20, 0.1);
	border-radius: 50%;
	left: -140px;
	bottom: -140px;
	pointer-events: none;
}

.bg-ring-light { border-color: rgba(255, 255, 255, 0.14); left: auto; right: -140px; }

/* Offset accent square + overlapping square tag on photos */

.media-frame { position: relative; }

.media-frame::after {
	content: "";
	position: absolute;
	right: -22px;
	bottom: -22px;
	width: 170px;
	height: 170px;
	background: var(--dark);
	z-index: -1;
}

.media-frame > img { position: relative; }

.media-tag {
	position: absolute;
	left: -26px;
	bottom: -26px;
	z-index: 3;
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.25));
}

.media-tag-right { left: auto; right: -26px; }

.media-tag .size-tag {
	width: 128px;
	height: 128px;
	gap: 8px;
	padding: 10px 12px;
}

/* Longer labels ("Business Storage") wrap rather than spill out of the square. */
.media-tag .size-tag-label {
	font-size: 17px;
	white-space: normal;
	line-height: 1.2;
	max-width: 100%;
}

.media-tag .size-tag-icon { width: 26px; height: 26px; }

/* Statement: white block on tint, homepage map-section style */

.belief-statement {
	position: relative;
	background: var(--blue-tint);
	padding: 110px 0 90px;
	text-align: center;
	overflow: hidden;
}

.belief-statement-card {
	position: relative;
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	padding: 56px 60px 50px;
	max-width: 920px;
	margin: 0 auto;
}

.belief-statement .eyebrow { justify-content: center; }

.belief-statement-heading {
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 700;
	line-height: 1.25;
	max-width: 24ch;
	margin: 0 auto 22px;
}

.belief-statement-text {
	font-size: 19px;
	max-width: 62ch;
	margin: 0 auto;
}

/* Story: photo top-aligned, hanging over the values section below */

.belief-story {
	position: relative;
	z-index: 2;
	padding: 90px 0 0;
}

.belief-story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: start;
}

.belief-story-media {
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	margin-bottom: -110px; /* overhangs into the values section */
}

.belief-story-img {
	width: 100%;
	aspect-ratio: 0.92;
	object-fit: cover;
	--focus-default: top;
	border-radius: var(--radius-sm);
}

.belief-story-text { font-size: 17px; }

.belief-values {
	position: relative;
	background: var(--blue-tint);
	padding: 190px 0 90px;
	overflow: hidden;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.value-card {
	background: var(--white);
	border-radius: var(--radius-sm);
	padding: 30px 26px 32px;
	box-shadow: var(--shadow-soft);
}

.value-ico {
	display: inline-flex;
	width: 52px;
	height: 52px;
	padding: 13px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
	margin-bottom: 18px;
}

.value-title { font-size: 21px; font-weight: 700; margin-bottom: 8px; }

.value-text { font-size: 15.5px; margin: 0; }

.belief-stats {
	position: relative;
	background: var(--dark);
	padding: 72px 0;
	overflow: hidden;
}

/* Faint photo faded into the blue band */
.stats-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.stats-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.12;
	filter: grayscale(100%);
}

.stats-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0) 50%, rgba(20, 20, 20, 0.55) 100%);
}

.belief-stats .container { position: relative; z-index: 2; }

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	text-align: center;
}

.stat-number {
	display: block;
	color: var(--white);
	font-size: clamp(38px, 4.5vw, 54px);
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
	white-space: nowrap;
}

.stat-label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
}

.belief-quote { padding: 96px 0 110px; }

.belief-quote-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.belief-quote-block {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.belief-quote-block p {
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
	margin-bottom: 14px;
}

.belief-quote-block cite {
	font-style: normal;
	font-size: 16px;
	color: var(--blue);
	font-weight: 500;
}

.belief-quote-text { font-size: 17px; margin: 0; }

.belief-quote-media {
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
}

.belief-quote-img {
	width: 100%;
	aspect-ratio: 0.8;
	object-fit: cover;
	--focus-default: top; /* keep faces in frame on portrait shots */
	border-radius: var(--radius-sm);
}

.belief-cta {
	position: relative;
	background: var(--dark);
	padding: 84px 0;
	text-align: center;
	overflow: hidden;
}

.belief-cta-heading {
	color: var(--white);
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 700;
	margin-bottom: 12px;
}

.belief-cta-text {
	color: rgba(255, 255, 255, 0.88);
	font-size: 18px;
	margin: 0 auto 28px;
	max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Units page
   -------------------------------------------------------------------------- */

/* "Learn more" under each price card's Book button */
.unit-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.unit-card .unit-actions .btn { margin-top: 0; }

.unit-learn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--blue);
	text-align: center;
	transition: gap 0.2s ease, color 0.2s ease;
}

.unit-learn:hover { gap: 11px; color: var(--blue-dark); }

.unit-learn-arrow { width: 14px; height: 14px; flex: none; }

/* Units & Pricing: no photo behind the cards — they sit high on white, and
   the heading is a plain section heading rather than an overlay. */
.units-choose { padding: 64px 0 80px; }

/* The hero's size tags hang 62px past its bottom edge, so where this section
   sits directly under a hero it needs clearance or the squares crowd the
   heading. (The tags are hidden under 860px, hence the smaller value there.) */
.units-hero + .units-choose { padding-top: 150px; }

.units-choose .choose-clip { display: none; }

.units-choose .choose-heading {
	color: var(--blue);
	margin: 0 0 34px;
	text-shadow: none;
}

.units-choose .unit-cards { margin-top: 0; }

/* Cold / dry type rows */

.units-types {
	position: relative;
	padding: 90px 0 70px;
	overflow: hidden;
}

.type-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 60px;
	align-items: start;
	margin-top: 56px;
}

.type-row-dry .type-media { order: 2; }

.type-media { border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }

/* Squarer crop, centred — most of the photography is portrait and a wide
   top-crop cuts the subject out entirely. */
.type-img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	--focus-default: center;
	border-radius: var(--radius-sm);
}

.type-copy .unit-type { position: static; margin-bottom: 14px; }

.type-heading { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; margin-bottom: 14px; }

.type-text { font-size: 17px; margin-bottom: 20px; }

.type-points { margin-bottom: 26px; }

.type-points li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 16px;
	color: var(--ink);
	padding: 5px 0;
}

/* Expanded storage options */

.units-options { position: relative; overflow: hidden; }

.units-options-lede {
	font-size: 18px;
	max-width: 60ch;
	margin: -18px 0 34px;
}

.options-grid-expanded { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.option-card-expanded {
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	background: var(--white);
	box-shadow: var(--shadow-soft);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.option-card-expanded::after { content: none; }

.option-card-expanded .option-media { aspect-ratio: 1.3; overflow: hidden; }

.option-card-expanded .option-body { padding: 20px 22px 24px; }

.option-title { font-size: 19px; font-weight: 700; margin-bottom: 8px; }

.option-text { font-size: 14.5px; margin: 0; }

/* Cold-ready clarification — must never be missed. */
.units-notice,
.st-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
	background: var(--blue-tint);
	border-left: 4px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	margin: 26px auto 0;
	max-width: 74ch;
	font-size: 15px;
	line-height: 1.55;
}

.units-notice strong,
.st-notice strong { color: var(--ink); }

.units-notice-ico {
	width: 34px;
	height: 34px;
	flex: none;
	padding: 8px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
}

/* Buttons need air after a callout, list or paragraph above them. */
.units-notice + .btn,
.st-notice + .btn,
.type-points + .btn,
.book-aside-card p + .btn,
.book-aside-card .btn { margin-top: 22px; }

.type-copy .btn { margin-top: 26px; }

.st-notice { margin-top: 20px; max-width: none; }

/* --------------------------------------------------------------------------
   Lease terms (Units & Pricing)
   -------------------------------------------------------------------------- */

.terms-highlights {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.term-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.term-media { aspect-ratio: 1.4; overflow: hidden; }

.term-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

.term-body { padding: 20px 22px 24px; }

.term-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }

.term-text { font-size: 14.5px; margin: 0; }

.terms-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 40px;
}

.terms-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--body);
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.terms-list .why-ico { margin-top: 4px; }

.terms-list strong { color: var(--ink); }

.terms-cta { margin-top: 34px; }

/* --------------------------------------------------------------------------
   Storage type landing pages (cold / dry)
   -------------------------------------------------------------------------- */

.st-crumbs {
	background: var(--blue-tint);
	padding: 14px 0;
	font-size: 13px;
}

.st-crumbs .container { display: flex; gap: 8px; align-items: center; }

.st-crumbs a { color: var(--body); }
.st-crumbs a:hover { color: var(--blue); }
.st-crumbs span[aria-hidden] { color: var(--muted); }
.st-crumbs-current { color: var(--ink); font-weight: 500; }

.st-why {
	position: relative;
	padding: 90px 0;
	overflow: hidden;
}

.st-why-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.st-why-card {
	background: var(--blue-tint);
	border-radius: var(--radius-sm);
	padding: 34px 32px 36px;
}

.st-def { padding: 20px 0 90px; }

.st-def-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 60px;
	align-items: start;
}

.st-def-media { border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }

.st-def-img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	--focus-default: center;
	border-radius: var(--radius-sm);
}

.st-def-text { font-size: 17px; }

.st-items {
	position: relative;
	background: var(--blue-tint);
	padding: 90px 0;
	overflow: hidden;
}

.st-items-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.st-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--white);
	border-radius: var(--radius-sm);
	padding: 24px 24px 26px;
	box-shadow: var(--shadow-soft);
}

.st-item-ico {
	width: 44px;
	height: 44px;
	flex: none;
	padding: 11px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
}

.st-item-title { font-size: 18px; font-weight: 700; margin-bottom: 5px; }

.st-item-text { font-size: 14.5px; margin: 0; }

.st-solutions {
	position: relative;
	background: var(--dark);
	padding: 90px 0;
	overflow: hidden;
}

.st-solutions .section-heading { color: var(--white); }

.st-sol-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.st-sol {
	border-top: 2px solid rgba(255, 255, 255, 0.28);
	padding-top: 18px;
}

.st-sol-title { color: var(--white); font-size: 19px; font-weight: 700; margin-bottom: 8px; }

.st-sol-text { color: rgba(255, 255, 255, 0.85); font-size: 14.5px; margin: 0; }

.st-tips { padding: 90px 0; }

.st-tips-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.st-tip {
	border-left: 3px solid var(--blue);
	padding: 4px 0 4px 20px;
}

.st-tip-num {
	display: block;
	color: var(--blue);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
}

.st-tip-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }

.st-tip-text { font-size: 15px; margin: 0; }

.st-faq {
	position: relative;
	background: var(--blue-tint);
	padding: 90px 0;
	overflow: hidden;
}

.st-faq-inner { max-width: 880px; }

.st-faq-list {
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.st-faq-item + .st-faq-item { border-top: 1px solid var(--line); }

.st-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

.st-faq-item summary::-webkit-details-marker { display: none; }
.st-faq-item summary:hover { color: var(--blue); }

/* +/- marker */
.st-faq-mark {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
}

.st-faq-mark::before,
.st-faq-mark::after {
	content: "";
	position: absolute;
	background: var(--blue);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.st-faq-mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.st-faq-mark::after { left: 7px; top: 0; width: 2px; height: 16px; }

.st-faq-item[open] .st-faq-mark::after { transform: rotate(90deg); opacity: 0; }

.st-faq-answer { padding: 0 26px 24px; }
.st-faq-answer p { font-size: 15.5px; margin: 0; max-width: 76ch; }

.st-cross { padding: 70px 0; }

.st-cross-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	background: var(--blue-tint);
	border-radius: var(--radius-sm);
	padding: 36px 40px;
}

.st-cross-heading { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.st-cross-text { font-size: 16px; margin: 0; }

/* --------------------------------------------------------------------------
   Option cards as links
   -------------------------------------------------------------------------- */

.option-card-link { display: block; color: inherit; }

.option-card-expanded.option-card-link {
	display: flex;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option-card-expanded.option-card-link:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.option-card-expanded .unit-learn { margin-top: 12px; }

/* --------------------------------------------------------------------------
   How to book
   -------------------------------------------------------------------------- */

.htb-steps-section {
	position: relative;
	padding: 90px 0;
	overflow: hidden;
}

.htb-steps { display: grid; gap: 26px; }

.htb-step {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	background: var(--blue-tint);
	border-radius: var(--radius-sm);
	padding: 32px 34px;
}

.htb-step-mark { text-align: center; }

.htb-step-num {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--blue);
	margin-bottom: 10px;
}

.htb-step-ico {
	display: inline-flex;
	width: 62px;
	height: 62px;
	padding: 16px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
}

.htb-step-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }

.htb-step-text { font-size: 16.5px; margin: 0; }

.htb-cta { text-align: center; margin-top: 44px; }

/* --------------------------------------------------------------------------
   Book / contact forms
   -------------------------------------------------------------------------- */

.book-section {
	position: relative;
	padding: 90px 0;
	overflow: hidden;
}

.book-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.book-form-wrap {
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	padding: 42px 44px 46px;
}

.book-heading { font-size: 30px; font-weight: 700; margin-bottom: 10px; }

.book-intro { font-size: 16px; margin-bottom: 28px; max-width: 60ch; }

.book-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 22px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }

.field label {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

.req { color: var(--blue); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
	width: 100%;
	font-family: var(--font);
	font-size: 16px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 13px 15px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.12);
}

/* Unit picker */

.unit-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.unit-choice { cursor: pointer; }

.unit-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.unit-choice-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	border: 2px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 16px 18px;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.unit-choice:hover .unit-choice-box { border-color: rgba(20, 20, 20, 0.4); transform: translateY(-2px); }

.unit-choice input:checked + .unit-choice-box {
	border-color: var(--blue);
	background: var(--blue-tint);
}

.unit-choice input:focus-visible + .unit-choice-box {
	box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.2);
}

.unit-choice-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.unit-choice-name { font-size: 16px; font-weight: 700; color: var(--blue); line-height: 1.2; }

.unit-choice .unit-type { margin: 0; font-size: 9px; }

.unit-choice-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.unit-choice-size { font-size: 14px; color: var(--body); }

.unit-choice-price { font-size: 20px; font-weight: 700; color: var(--ink); }
.unit-choice-price small { font-size: 12px; font-weight: 500; color: var(--muted); }

.unit-choice-avail { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Formidable forms, dressed to match the theme
   -------------------------------------------------------------------------- */

.keepers-frm .frm_form_fields > fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.keepers-frm .frm_fields_container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 22px;
}

/* Full-width rows: the unit picker, long text, radios and the submit. */
.keepers-frm .frm_form_field {
	grid-column: span 1;
	margin: 0;
}

.keepers-frm .frm_form_field.frm_full,
.keepers-frm .frm_form_field[class*="frm_first"],
.keepers-frm .frm_form_field:has(textarea),
.keepers-frm .frm_form_field:has(.frm_radio),
.keepers-frm .frm_form_field:has(select),
.keepers-frm .frm_submit { grid-column: 1 / -1; }

.keepers-frm .frm_primary_label {
	display: block;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	padding: 0 0 8px;
}

.keepers-frm .frm_required { color: var(--blue); }

.keepers-frm input[type="text"],
.keepers-frm input[type="email"],
.keepers-frm input[type="tel"],
.keepers-frm input[type="url"],
.keepers-frm input[type="number"],
.keepers-frm select,
.keepers-frm textarea {
	width: 100%;
	font-family: var(--font);
	font-size: 16px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 13px 15px;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.keepers-frm textarea { resize: vertical; min-height: 110px; }

.keepers-frm input:focus,
.keepers-frm select:focus,
.keepers-frm textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.12);
}

.keepers-frm .frm_description {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 6px;
}

/* Personal / Business as pills.
   Two Formidable quirks to work around:
   1. It nests the input *inside* the label, so the checked state must be read
      from the wrapper with :has() — input:checked + label never matches.
   2. Its own rules (.with_frm_style .vertical_radio .frm_radio label) outrank
      a plain .keepers-frm selector, so these are scoped through
      .with_frm_style to win on specificity rather than load order. */
.with_frm_style .keepers-frm .frm_opt_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.with_frm_style .keepers-frm .frm_radio,
.with_frm_style .keepers-frm .vertical_radio .frm_radio {
	display: inline-block;
	width: auto;
	margin: 0;
	padding-left: 0;
}

/* Visually hidden, but still focusable and clickable via the label. */
.with_frm_style .keepers-frm .frm_radio label input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* flex, not inline-block: the markup is "<input> Personal", and that leading
   whitespace text node renders as a gap on the left of the pill. Flex drops
   leading whitespace and centres the text. */
.with_frm_style .keepers-frm .frm_radio label,
.with_frm_style .keepers-frm .vertical_radio .frm_radio label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: 10px 22px;
	border: 2px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.with_frm_style .keepers-frm .frm_radio:hover label { border-color: rgba(20, 20, 20, 0.4); }

.with_frm_style .keepers-frm .frm_radio:has(input:checked) label {
	border-color: var(--blue);
	background: var(--blue-tint);
	color: var(--blue);
}

.with_frm_style .keepers-frm .frm_radio:has(input:focus-visible) label {
	box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.2);
}

/* Submit button — reuse the site's primary button. */
.keepers-frm .frm_submit { margin-top: 6px; }

.keepers-frm .frm_submit button,
.keepers-frm input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: 14px 34px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--blue);
	color: var(--white);
	font-family: var(--font);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.keepers-frm .frm_submit button:hover,
.keepers-frm input[type="submit"]:hover {
	background: var(--blue-dark);
	transform: translateY(-2px);
}

/* Validation + success states */
.keepers-frm .frm_error,
.keepers-frm .frm_error_style {
	font-size: 13px;
	color: #8a2020;
	margin-top: 6px;
}

.keepers-frm .frm_blank_field input,
.keepers-frm .frm_blank_field select,
.keepers-frm .frm_blank_field textarea { border-color: #d43a3a; }

.frm_message,
.keepers-frm .frm_message {
	background: var(--blue-tint);
	border-left: 4px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 22px 24px;
	color: var(--ink);
	font-size: 16px;
}

.frm_message p { margin: 0; }

@media (max-width: 860px) {
	.keepers-frm .frm_fields_container { grid-template-columns: 1fr; }
}

/* Honeypot — hidden from people, visible to bots. */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.book-submit {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.book-note { font-size: 13px; color: var(--muted); margin: 0; max-width: 34ch; }

.book-alert {
	border-radius: var(--radius-sm);
	padding: 22px 24px;
	margin-bottom: 24px;
}

.book-alert-ok {
	background: var(--blue-tint);
	border-left: 4px solid var(--blue);
	margin-bottom: 0;
}

.book-alert-ok h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.book-alert-ok p { font-size: 16px; }
.book-alert-ok .btn { margin-top: 8px; }

.book-alert-error {
	background: #fdeded;
	border-left: 4px solid #d43a3a;
	color: #8a2020;
}

.book-alert-error p { margin: 0; font-size: 15px; }

/* Aside */

.book-aside { display: grid; gap: 22px; }

.book-aside-card {
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	padding: 28px 30px 30px;
}

.book-aside-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 14px; }

.book-steps { counter-reset: bookstep; display: grid; gap: 14px; }

.book-steps li {
	display: flex;
	gap: 12px;
	font-size: 14.5px;
	color: var(--body);
}

.book-steps li::before {
	counter-increment: bookstep;
	content: counter(bookstep);
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-cards { padding: 80px 0 20px; }

/* Flex + centre so an odd number of cards (e.g. no phone) stays centred
   rather than left-aligned in a fixed grid. */
.contact-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}

.contact-card {
	flex: 0 1 240px;
	background: var(--blue-tint);
	border-radius: var(--radius-sm);
	padding: 28px 26px 30px;
}

.contact-card .value-text a { color: var(--blue); }

.contact-map {
	position: relative;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	height: 260px;
}

/* Interactive here (unlike the decorative homepage map) — zoom and pan work,
   and OSM's own marker is left in full colour so it's easy to spot. */
.contact-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-aerial {
	margin: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	background: var(--white);
}

.contact-aerial-img {
	width: 100%;
	aspect-ratio: 1.5;
	object-fit: cover;
}

.contact-aerial figcaption {
	font-size: 13px;
	color: var(--muted);
	padding: 12px 16px 14px;
}

/* --------------------------------------------------------------------------
   Availability board (Reserve)
   -------------------------------------------------------------------------- */

.board {
	position: relative;
	padding: 80px 0 70px;
	overflow: hidden;
}

.board-head { margin-bottom: 26px; }

.board-count {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	margin-bottom: 6px;
}

.board-sub { font-size: 14px; color: var(--muted); margin: 0; }

.doors {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 12px;
}

/* Each door mirrors a real roll-up door on site. */
.door {
	position: relative;
	aspect-ratio: 0.78;
	border: 2px solid var(--blue);
	border-radius: var(--radius-sm);
	background: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	cursor: default;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.door:hover,
.door:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	z-index: 20;
	outline: none;
}

/* Available doors are buttons — they pick the unit and jump to the form. */
button.door {
	font-family: var(--font);
	cursor: pointer;
	padding: 0;
}

button.door:focus-visible { outline: 3px solid rgba(20, 20, 20, 0.45); outline-offset: 3px; }

button.door:active { transform: translateY(-1px); }

/* Brief highlight so it's obvious which field the door filled in. */
.field select.is-flash,
.frm_form_field select.is-flash {
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.18);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.door-code {
	font-size: 20px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1;
}

.door-id {
	font-size: 20px;
	font-weight: 700;
	color: var(--body);
	line-height: 1;
	letter-spacing: 0.01em;
}

.door-rented .door-id { color: rgba(255, 255, 255, 0.72); }

.door-dot {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1f7a3d;
}

.door-rented {
	background: var(--charcoal);
	border-color: var(--charcoal);
}

.door-rented .door-code { color: rgba(255, 255, 255, 0.9); }
.door-rented .door-id { color: rgba(255, 255, 255, 0.5); }

.door-held {
	background: var(--blue-tint);
	border-style: dashed;
}

/* Hover card */
.door-tip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translate(-50%, 6px);
	z-index: 30;
	width: 224px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 15px;
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.door-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: var(--white);
}

.door:hover .door-tip,
.door:focus-visible .door-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Keep the first/last columns' tips inside the viewport. */
.doors > .door:nth-child(8n + 1) .door-tip { left: 0; transform: translate(0, 6px); }
.doors > .door:nth-child(8n + 1):hover .door-tip,
.doors > .door:nth-child(8n + 1):focus-visible .door-tip { transform: translate(0, 0); }
.doors > .door:nth-child(8n + 1) .door-tip::after { left: 26px; }

.doors > .door:nth-child(8n) .door-tip { left: auto; right: 0; transform: translate(0, 6px); }
.doors > .door:nth-child(8n):hover .door-tip,
.doors > .door:nth-child(8n):focus-visible .door-tip { transform: translate(0, 0); }
.doors > .door:nth-child(8n) .door-tip::after { left: auto; right: 19px; }

.tip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tip-name { font-size: 15px; font-weight: 700; color: var(--blue); }

.tip-status {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: #e6f3ea;
	color: #1f7a3d;
}

.tip-status-rented { background: #f0eeec; color: var(--charcoal); }
.tip-status-held { background: var(--blue-tint); color: var(--blue); }

.tip-door,
.tip-spec { font-size: 12px; color: var(--body); line-height: 1.4; }

.tip-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 8px;
	margin-top: 2px;
	border-top: 1px solid var(--line);
}

.tip-env {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--blue);
	color: var(--white);
}

.tip-env-dry { background: var(--charcoal); }

.tip-price { font-size: 16px; font-weight: 700; color: var(--ink); }
.tip-price small { font-size: 10px; font-weight: 500; color: var(--muted); }

.legend {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 22px;
	font-size: 13px;
	color: var(--body);
}

.legend span { display: inline-flex; align-items: center; gap: 8px; }

.swatch {
	width: 14px;
	height: 14px;
	border: 2px solid var(--blue);
	border-radius: 3px;
	background: var(--white);
}

.swatch.held { background: var(--blue-tint); border-style: dashed; }
.swatch.rented { background: var(--charcoal); border-color: var(--charcoal); }

/* Live availability line on the unit cards */
.unit-availability-live {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #1f7a3d;
}

.avail-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.unit-availability-live.is-none { color: var(--muted); }

/* --------------------------------------------------------------------------
   Reserve form extras
   -------------------------------------------------------------------------- */

.field-legend {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

.field-help { font-size: 12.5px; color: var(--muted); }

.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }

.radio-pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.radio-pill span {
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.radio-pill:hover span { border-color: rgba(20, 20, 20, 0.4); }

.radio-pill input:checked + span {
	border-color: var(--blue);
	background: var(--blue-tint);
	color: var(--blue);
}

.radio-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.2); }

.book-steps li strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   FAQ page
   -------------------------------------------------------------------------- */

.faq-page .faq-group + .faq-group { margin-top: 48px; }

.faq-group-intro { font-size: 16px; margin-bottom: 18px; max-width: 70ch; }

.faq-page .st-faq-list { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 90;
	width: 50px;
	height: 50px;
	padding: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.2s ease;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.to-top:hover { background: var(--blue-dark); }

.to-top:focus-visible { outline: 3px solid rgba(20, 20, 20, 0.4); outline-offset: 3px; }

.to-top-ico { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Generic pages
   -------------------------------------------------------------------------- */

.page-hero {
	background: var(--blue-tint);
	padding: 76px 0 60px;
}

.page-title { font-size: clamp(38px, 5vw, 53px); font-weight: 700; }

.page-content { padding: 60px 0 92px; }

.entry-content { max-width: 800px; }

.entry-content h2 { font-weight: 700; margin-top: 1.4em; }

/* --------------------------------------------------------------------------
   Footer (font sizes intentionally NOT scaled up)
   -------------------------------------------------------------------------- */

.site-footer {
	background: #f7f9fc;
	border-top: 1px solid var(--line);
	margin-top: 0;
	font-size: 16px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1.3fr 1.1fr 1fr;
	gap: 44px;
	padding: 64px 0 48px;
}

.footer-logo img { height: 74px; width: auto; margin-bottom: 16px; }

.footer-about { font-size: 13px; max-width: 34ch; }

.footer-social { display: flex; gap: 12px; margin-top: 14px; }

.footer-social a {
	width: 34px; height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 50%;
	background: var(--white);
	border: 1px solid var(--line);
	color: var(--blue);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-social a:hover { background: var(--blue); color: var(--white); }

.footer-heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 16px;
}

/* Multi-column rather than grid: a link that wraps to two lines takes the
   room it needs without dragging its row-neighbour down with it. */
.footer-menu {
	columns: 2;
	column-gap: 24px;
}

.footer-menu li {
	break-inside: avoid;
	padding: 5px 0;
}

.footer-menu a {
	display: inline-block;
	line-height: 1.35;
}

.footer-menu a,
.footer-contact-list a { color: var(--body); font-size: 13.5px; transition: color 0.2s ease; }

.footer-menu a:hover,
.footer-contact-list a:hover { color: var(--blue); }

.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	font-size: 13.5px;
}

.footer-ico { width: 15px; height: 15px; color: var(--blue); flex: none; margin-top: 4px; }

.footer-cta p { font-size: 13px; max-width: 30ch; }

.footer-cta .btn {
	background: var(--blue);
	color: var(--white);
	margin-top: 4px;
	font-size: 14px;
	padding: 12px 30px;
}

.footer-cta .btn:hover { background: var(--blue-dark); }

.footer-bar {
	border-top: 1px solid var(--line);
	padding: 18px 0;
	background: var(--white);
}

.footer-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-bar p { margin: 0; font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
	.options-grid-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.terms-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-tips-grid { grid-template-columns: 1fr; }
	.book-grid { grid-template-columns: 1fr; }
	.doors { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
	.steps-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

	/* Intro stacks: copy first, then the photo card, then the map. */
	.intro {
		display: flex;
		flex-direction: column;
		padding: 72px 0 0;
		min-height: 0;
	}

	.intro .container { order: 1; width: 100%; }

	.intro-map-bleed {
		order: 2;
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		margin-top: 32px;
		display: flex;
		flex-direction: column;
	}

	/* Photo sits above the map rather than floating on top of it.
	   flex: none — otherwise these shrink and crop their own contents. */
	.map-card {
		order: 1;
		flex: none;
		position: static;
		width: 100%;
		max-width: 420px;
		margin: 0 auto 18px;
		right: auto;
		top: auto;
	}

	.map-card-img { height: 190px; }

	.map-frame {
		order: 2;
		flex: none;
		position: relative;
		inset: auto;
		right: 0;
		height: 340px;
	}

	.map-fade { display: none; }
	.intro-copy { padding: 32px 28px; max-width: 640px; }

	.choose-heading { margin-top: 140px; }
}

@media (max-width: 860px) {
	.nav-toggle { display: flex; }

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--white);
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 16px 24px 24px;
		box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
		display: none;
	}

	.site-nav.is-open { display: flex; }

	.nav-menu { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }

	.nav-menu a { display: block; padding: 10px 0; font-size: 18px; }

	/* Dropdown expands inline on touch — no hover to rely on. */
	.nav-menu > li { width: 100%; }

	.nav-menu .menu-item-has-children > a::after { display: none; }

	.nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 0 8px;
		padding: 6px 0 6px 4px;
		background: transparent;
		box-shadow: none;
		border-left: 2px solid var(--line);
	}

	/* The desktop dropdown centres itself with translate(-50%). That rule is
	   scoped to :hover/:focus-within, so it outranks the plain `transform: none`
	   above and fires on mobile the moment a submenu link is tapped — sliding
	   the panel half its own width off-screen. Neutralise both states here. */
	.nav-menu .menu-item-has-children:hover > .sub-menu,
	.nav-menu .menu-item-has-children:focus-within > .sub-menu {
		transform: none;
	}

	.nav-menu .sub-menu::before { content: none; }

	.nav-menu .sub-menu a { padding: 9px 10px; font-size: 15.5px; }

	.nav-ico { width: 30px; height: 30px; padding: 7px; }

	.btn-book { margin: 12px 0 0; }

	.why-grid,
	.belief-story-grid,
	.belief-quote-grid,
	.type-row,
	.st-def-grid { grid-template-columns: 1fr; gap: 36px; }

	/* Size tags are hidden at this width, so the clearance isn't needed. */
	.units-hero + .units-choose { padding-top: 64px; }

	.type-row-dry .type-media { order: 0; }
	.st-why-grid { grid-template-columns: 1fr; }
	.st-cross-inner { flex-direction: column; align-items: flex-start; }
	.book-form { grid-template-columns: 1fr; }
	.book-form-wrap { padding: 28px 24px 32px; }
	.htb-step { grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; }
	.htb-step-mark { display: flex; align-items: center; gap: 14px; text-align: left; }
	.htb-step-num { margin-bottom: 0; }

	.belief-quote-media { order: -1; }

	/* No overhang / smaller accents when columns stack */
	.belief-story-media { margin-bottom: 0; }
	.belief-values { padding-top: 90px; }
	.media-frame::after { right: -12px; bottom: -12px; width: 110px; height: 110px; }
	.media-tag { left: 12px; bottom: -22px; }
	.media-tag-right { left: auto; right: 12px; }
	.bg-dots { width: 130px; height: 165px; }

	.hero-tags { display: none; }

	.hero-content { padding: 76px 0; }

	.choose-heading { margin-top: 90px; }

	.choose-clip { inset: 0 0 240px 0; }

	.unit-dims { margin-left: 0; width: 100%; }

	.unit-top { flex-wrap: wrap; }
	.unit-size-panel { margin: 0; padding: 12px 16px; }
}

@media (max-width: 560px) {
	.options-grid { grid-template-columns: 1fr; }
	.values-grid { grid-template-columns: 1fr; }
	.options-grid-expanded { grid-template-columns: 1fr; }
	.terms-highlights { grid-template-columns: 1fr; }
	.terms-list { grid-template-columns: 1fr; }
	.st-items-grid { grid-template-columns: 1fr; }
	.st-sol-grid { grid-template-columns: 1fr; }
	.to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; padding: 12px; }
	.footer-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Four doors per row; tips centre-align since columns shift. */
	.doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.doors > .door:nth-child(8n + 1) .door-tip,
	.doors > .door:nth-child(8n) .door-tip { left: 50%; right: auto; transform: translate(-50%, 6px); }
	.doors > .door:nth-child(8n + 1):hover .door-tip,
	.doors > .door:nth-child(8n):hover .door-tip { transform: translate(-50%, 0); }
	.doors > .door:nth-child(8n + 1) .door-tip::after,
	.doors > .door:nth-child(8n) .door-tip::after { left: 50%; right: auto; }
	.door-tip { width: 190px; }
	.option-card { aspect-ratio: 1.2; }
	.footer-grid { grid-template-columns: 1fr; gap: 30px; }
	.photo-band { height: 320px; }
	.intro-map-bleed { height: 340px; }
}

/* --------------------------------------------------------------------------
   Motion: initial states are applied via JS (.js-anim) so content stays
   visible when JS or GSAP is unavailable, and for reduced-motion users.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.option-img, .step-img, .btn { transition: none; }
	.btn-primary::after { animation: none; display: none; }
	.to-top { transition: opacity 0.01s; }
}