/*
Theme Name: Easy Lot Cayman
Theme URI: https://github.com/o0reyandre0o/easylot-cayman
Author: Toc Toc Marketing
Author URI: https://toctoc.ky/
Description: Editorial WordPress theme for Easy Lot Cayman — teaches visitors how to buy land in the Cayman Islands with Direct Owner Financing. Hand-written CSS (no CDN framework), SEO/AEO structured data, self-hosted video guides and a floating video player.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.8
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: easylot
Tags: real-estate, land-for-sale, cayman-islands, owner-financing, editorial, video
*/

/* ==========================================================================
   DESIGN NOTE — "The Ledger"
   --------------------------------------------------------------------------
   Same four brand colours as the old site (#FB3122 red, #fff8f5 paper,
   #1d1b1a ink, #55633f olive) but a deliberately different language:

   - Ink is a primary surface, not an accent. The hero, page headers, nav and
     footer are dark; paper is the relief between them. The old site was cream
     from top to bottom.
   - Structure is drawn with 1px hairlines and square corners, like a land
     register. No 40px pillow cards, no drop shadows on flat UI.
   - Type carries the design: oversized Noto Serif with tight negative tracking
     against wide-tracked Manrope small caps. Red is a marker, not a fill.
   - Everything is indexed with a small numeral, which is what makes a long
     explanatory page navigable.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--red: #fb3122;
	--red-deep: #bc0002;
	--red-soft: #ff6b6b;
	--olive: #55633f;
	--olive-soft: #d8e9bb;

	--ink: #1d1b1a;
	--ink-2: #262322;

	--ink-72: rgba(29, 27, 26, .72);
	--ink-55: rgba(29, 27, 26, .55);
	--ink-38: rgba(29, 27, 26, .38);
	--rule: rgba(29, 27, 26, .14);
	--rule-soft: rgba(29, 27, 26, .07);

	--paper: #fff8f5;
	--paper-2: #f9f2ef;
	--paper-3: #f2eae6;
	--white: #ffffff;

	/* on dark */
	--d-text: rgba(255, 248, 245, .96);
	--d-mute: rgba(255, 248, 245, .60);
	--d-faint: rgba(255, 248, 245, .34);
	--d-rule: rgba(255, 248, 245, .16);
	--d-rule-soft: rgba(255, 248, 245, .09);

	/* Square by design. Media gets the only real curve. */
	--r: 2px;
	--r-media: 6px;

	--serif: "Noto Serif", "Iowan Old Style", Georgia, serif;
	--sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1240px;
	--wrap-narrow: 780px;
	--nav-h: 72px;
	--gutter: 26px;

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.62;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -.045em;
	margin: 0 0 .45em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.8vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -.03em; }
h4 { font-size: 1.05rem; letter-spacing: -.02em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

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

/* ==========================================================================
   3. Layout
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding: clamp(66px, 8.5vw, 124px) 0; position: relative; }
.section--tight { padding: clamp(44px, 5.5vw, 76px) 0; }

.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }
.section--paper-3 { background: var(--paper-3); }
.section--white { background: var(--white); }

/* Adjacent light sections get a hairline, not just a tone change. */
.section--paper + .section--paper-2,
.section--paper-2 + .section--paper,
.section--paper + .section--white,
.section--white + .section--paper,
.section--paper-2 + .section--paper-3,
.section--paper-3 + .section--paper { border-top: 1px solid var(--rule-soft); }

.section--ink { background: var(--ink); color: var(--d-text); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--d-text); }

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

@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Video grids keep real gaps — they are media, not hairline table cells.
   The :has() rule covers grids written by hand in a template; .grid--media is
   what easylot_video_grid() emits and works everywhere. */
.grid--media { gap: 18px; }
.grid:has(> .vcard) { gap: 18px; }

.center { text-align: center; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   4. Typographic components
   ========================================================================== */

/* Wide-tracked small caps with a red square marker. Replaces the old pill. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-family: var(--sans);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 1.4rem;
}
.eyebrow::before {
	content: "";
	width: 7px; height: 7px;
	background: var(--red);
	flex: none;
}
.eyebrow--center { justify-content: center; }
.section--ink .eyebrow, .page-hero .eyebrow, .hero .eyebrow, .cta-band .eyebrow { color: var(--d-text); }

.lede {
	font-size: clamp(1.06rem, 1.5vw, 1.24rem);
	font-weight: 300;
	line-height: 1.6;
	color: var(--ink-72);
	max-width: 60ch;
}
.section--ink .lede, .page-hero .lede, .hero .lede { color: var(--d-mute); }

.accent { font-style: italic; letter-spacing: -.02em; color: var(--red); }
.section--ink .accent, .hero .accent, .page-hero .accent { color: var(--red-soft); }

.underline-mark {
	background-image: linear-gradient(transparent 64%, rgba(251, 49, 34, .24) 64%);
	background-repeat: no-repeat;
}

.section-head {
	max-width: 760px;
	margin-bottom: clamp(40px, 5vw, 68px);
	padding-bottom: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--rule);
}
.section--ink .section-head { border-color: var(--d-rule); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

/* ==========================================================================
   5. Buttons — square, small caps, fill slides in from the left
   ========================================================================== */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	padding: 16px 30px;
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.15;
	cursor: pointer;
	border: 1px solid transparent;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary::before { background: var(--ink); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::before { background: var(--red); }
.btn--ink:hover { color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.section--ink .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost, .cta-band .btn--ghost {
	color: var(--d-text); border-color: var(--d-rule);
}
.section--ink .btn--ghost::before, .hero .btn--ghost::before,
.page-hero .btn--ghost::before, .cta-band .btn--ghost::before { background: var(--paper); }
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover,
.page-hero .btn--ghost:hover, .cta-band .btn--ghost:hover { color: var(--ink); border-color: var(--paper); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light::before { background: var(--red); }
.btn--light:hover { color: #fff; }

.btn--wide { width: 100%; }
.btn--lg { padding: 19px 36px; font-size: .8rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* ==========================================================================
   6. Navigation — dark bar
   ========================================================================== */

.site-nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9000;
	background: rgba(255, 248, 245, .92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--rule-soft);
	color: var(--ink);
	transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-nav.is-stuck {
	background: rgba(255, 248, 245, .98);
	border-bottom-color: var(--rule);
	box-shadow: 0 6px 24px rgba(29, 27, 26, .06);
}

.site-nav__bar {
	height: var(--nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

/* Full-colour mark with a dark wordmark: never recolour or invert it. The bar
   is paper now, so it needs no plaque here — the footer, still ink, does. */
.site-nav__logo { display: inline-flex; align-items: center; }
.site-nav__logo img { height: 34px; width: auto; object-fit: contain; display: block; }

/* Typographic mark, used when no logo image can load (see easylot_logo_img). */
.logo-text {
	font-family: var(--serif);
	font-weight: 800;
	font-size: 1.45rem;
	letter-spacing: -.04em;
	color: var(--ink);
	white-space: nowrap;
}
.logo-text em { font-style: normal; color: var(--red); }

.site-nav__links { display: flex; align-items: center; gap: 2px; }

.navlink {
	position: relative;
	font-family: var(--sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ink-55);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	cursor: pointer;
	transition: color .25s var(--ease);
}
.navlink:hover, .navlink[aria-current="page"] { color: var(--ink); }
.navlink::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 1px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ease);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink__chev { width: 13px; height: 13px; transition: transform .3s var(--ease); opacity: .7; }

.has-menu { position: relative; }
.dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 272px;
	padding: 8px;
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	box-shadow: 0 26px 54px rgba(29, 27, 26, .16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.has-menu:hover > .dropdown,
.has-menu:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.has-menu:hover .navlink__chev { transform: rotate(180deg); }
.dropdown--wide { min-width: 400px; }

.dropitem {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 14px;
	border-radius: var(--r);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.dropitem + .dropitem { border-top: 1px solid var(--rule-soft); }
.dropitem:hover { background: var(--paper-2); color: var(--red); }
.dropitem__thumb {
	width: 48px; height: 48px; flex: none;
	border-radius: var(--r); overflow: hidden; background: var(--paper-3);
	display: grid; place-items: center;
	font-size: 0; /* a broken image must not spill its alt text out of the box */
	color: var(--red);
}
.dropitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dropitem__thumb svg { width: 20px; height: 20px; }
.dropitem__t { display: block; font-weight: 800; font-size: .92rem; letter-spacing: -.01em; }
.dropitem__d { display: block; font-size: .76rem; color: var(--ink-55); }

.dropdown__foot {
	margin-top: 4px;
	padding: 14px;
	border-top: 1px solid var(--rule);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.dropdown__foot svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.dropdown__foot:hover svg { transform: translateX(4px); }

.site-nav__cta { display: flex; align-items: center; gap: 10px; }
.site-nav__cta .btn--primary { padding: 13px 22px; }

.burger {
	display: none;
	width: 42px; height: 42px;
	align-items: center; justify-content: center;
	border-radius: var(--r);
	border: 1px solid var(--rule);
	color: var(--ink);
	cursor: pointer;
	background: transparent;
}
.burger svg { width: 20px; height: 20px; }

@media (max-width: 1120px) {
	.site-nav__links, .site-nav__cta .btn { display: none; }
	.burger { display: inline-flex; }
}

.read-progress {
	position: absolute;
	left: 0; bottom: -1px;
	height: 2px; width: 0;
	background: var(--red);
	transition: width .1s linear;
}

/* Mobile drawer — dark, matching the bar it comes from. */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 9500;
	background: var(--paper);
	color: var(--ink);
	transform: translateX(100%);
	transition: transform .42s var(--ease);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px var(--gutter);
	border-bottom: 1px solid var(--rule-soft);
	position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.drawer__head img { height: 28px; width: auto; display: block; }
.drawer__body { padding: 26px var(--gutter) 56px; }
.drawer__link {
	display: block;
	font-family: var(--serif);
	font-size: clamp(1.6rem, 7vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -.04em;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.drawer__link:hover { color: var(--red); }
.drawer__sub {
	display: block;
	font-family: var(--sans);
	font-size: .92rem;
	font-weight: 600;
	color: var(--ink-55);
	padding: 9px 0 9px 16px;
	border-left: 1px solid var(--rule);
}
.drawer__sub:hover { color: var(--red); border-color: var(--red); }
.drawer__group { padding: 8px 0 16px; }
.drawer__label {
	font-size: .66rem; font-weight: 800; letter-spacing: .24em;
	text-transform: uppercase; color: var(--red); padding: 20px 0 10px;
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   7. Hero — dark, asymmetric
   ========================================================================== */

/* The nav is fixed. Dark openers (.hero, .page-hero) extend up underneath it
   so ink meets ink with no cream seam; a template that starts with a light
   section (the 404) is pushed below the bar instead. */
.site-main { padding-top: 0; }
.site-main > .section:first-child { margin-top: var(--nav-h); }

/* Keep the fixed bar below the WP admin bar when logged in. */
body.admin-bar .site-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-nav { top: 46px; } }

.hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--d-text);
	padding: calc(var(--nav-h) + clamp(46px, 6vw, 92px)) 0 clamp(56px, 7vw, 104px);
}

/* Site background video, behind everything, with a shade for legibility. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg video {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.8) contrast(1.05);
}
.hero__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(21, 19, 18, .78) 0%, rgba(21, 19, 18, .62) 45%, rgba(21, 19, 18, .92) 100%),
		radial-gradient(circle at 78% 8%, rgba(251, 49, 34, .2), transparent 58%);
}

/* Centred variant: one column, everything stacked on the axis. */
.hero--center .hero__inner {
	position: relative;
	z-index: 2;
	max-width: 940px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hero--center .lede { margin-inline: auto; }
.hero--center .eyebrow { justify-content: center; }
.hero__cta { margin-top: clamp(28px, 3.5vw, 40px); }

/* "Prefer to watch first?" strip — a quiet outline, not another red block. */
.hero__watch {
	margin-top: clamp(34px, 4.5vw, 52px);
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 14px 26px 14px 16px;
	border: 1px solid var(--d-rule);
	border-radius: 999px;
	background: rgba(21, 19, 18, .42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	text-align: left;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.hero__watch:hover { border-color: var(--red); background: rgba(21, 19, 18, .66); }
.hero__watch-play {
	width: 42px; height: 42px; flex: none;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	display: grid; place-items: center;
	transition: transform .3s var(--ease);
}
.hero__watch:hover .hero__watch-play { transform: scale(1.08); }
.hero__watch-play svg { width: 16px; height: 16px; margin-left: 2px; }
.hero__watch-text {
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.015em;
	color: var(--d-text);
}
.hero__watch-text span {
	display: block;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--red-soft);
	margin-bottom: 3px;
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(34px, 5vw, 76px);
	align-items: center;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .32em; }

.hero__points {
	list-style: none;
	padding: 0;
	margin: 30px 0 34px;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--d-rule-soft);
}
.hero__points li {
	display: flex; align-items: flex-start; gap: 13px;
	font-size: .97rem; color: var(--d-mute);
	margin: 0; padding: 13px 0;
	border-bottom: 1px solid var(--d-rule-soft);
}
.hero__points strong { color: var(--d-text); font-weight: 700; }
.hero__points svg { width: 19px; height: 19px; flex: none; color: var(--red-soft); margin-top: 3px; }

.hero__media {
	position: relative;
	border-radius: var(--r-media);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--ink-2);
	border: 1px solid var(--d-rule);
}
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }

/* Figure block clamped to the corner of the media. */
.hero__badge {
	position: absolute;
	right: -1px; top: -1px;
	z-index: 3;
	background: var(--red);
	color: #fff;
	padding: 16px 24px 18px;
	min-width: 176px;
}
.hero__badge b {
	display: block;
	font-family: var(--serif);
	font-size: 2.3rem;
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
}
.hero__badge span {
	display: block; margin-top: 6px;
	font-size: .62rem; font-weight: 800; letter-spacing: .22em;
	text-transform: uppercase; color: rgba(255, 255, 255, .84);
}
@media (max-width: 1000px) { .hero__badge { right: 0; } }

/* ==========================================================================
   8. Figure ledger — the four numbers under the hero
   Vertical hairlines, an index above each figure, and units set as a smaller
   mark so "5%" and "5 min" keep the same visual weight as "0" and "4".
   ========================================================================== */

.trust { background: var(--ink); border-top: 1px solid var(--d-rule-soft); }
.trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	counter-reset: fig;
}
.trust__cell {
	position: relative;
	padding: clamp(26px, 3.4vw, 42px) clamp(16px, 2.2vw, 32px);
	text-align: left;
	counter-increment: fig;
	min-width: 0;
}
.trust__cell + .trust__cell { border-left: 1px solid var(--d-rule-soft); }
.trust__cell::before {
	content: "0" counter(fig);
	display: block;
	font-family: var(--sans);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .22em;
	color: var(--red-soft);
	margin-bottom: 16px;
}
.trust__cell b {
	display: block;
	font-family: var(--serif);
	font-size: clamp(2rem, 4.2vw, 3.3rem);
	font-weight: 800;
	letter-spacing: -.055em;
	line-height: .92;
	color: var(--d-text);
	white-space: nowrap;
}
/* Units and words inside a figure step down, so the numeral stays dominant. */
.trust__cell b .u {
	display: inline;
	margin: 0;
	font-size: .44em;
	font-weight: 700;
	letter-spacing: .01em;
	margin-left: .14em;
	color: var(--d-mute);
}
.trust__cell > span {
	display: block;
	margin-top: 14px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--d-faint);
	line-height: 1.45;
}

@media (max-width: 880px) {
	.trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust__cell:nth-child(odd) { border-left: 0; }
	.trust__cell:nth-child(n + 3) { border-top: 1px solid var(--d-rule-soft); }
}
@media (max-width: 400px) {
	.trust__cell b { font-size: 1.9rem; }
	.trust__cell span { font-size: .6rem; letter-spacing: .13em; }
}

/* ==========================================================================
   9. Cards — hairline grid, no shadow, red rule grows on hover
   ========================================================================== */

.card {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	padding: clamp(26px, 3vw, 38px);
	transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.card::before {
	content: "";
	position: absolute;
	left: -1px; top: -1px; height: 2px; width: 0;
	background: var(--red);
	transition: width .45s var(--ease);
}
.card:hover { background: var(--white); border-color: var(--ink-38); }
.card:hover::before { width: calc(100% + 2px); }

.section--white .card { background: var(--white); }
.section--white .card:hover { background: var(--paper); }
.section--paper-3 .card { background: var(--paper-2); }

.section--ink .card { background: var(--ink); border-color: var(--d-rule-soft); }
.section--ink .card:hover { background: var(--ink-2); border-color: var(--d-rule); }

.card__icon {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	color: var(--red);
	margin-bottom: 22px;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.card:hover .card__icon { background: var(--red); color: #fff; border-color: var(--red); }
.card__icon svg { width: 21px; height: 21px; }
.section--ink .card__icon { border-color: var(--d-rule); color: var(--red-soft); }

.card h2, .card h3 { font-size: 1.26rem; margin-bottom: .42em; }
.card p { color: var(--ink-72); font-size: .95rem; margin-bottom: 0; }
.section--ink .card p { color: var(--d-mute); }

/* Numbered step block */
.step {
	position: relative;
	padding: clamp(26px, 3vw, 36px);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r);
}
.step__n {
	font-family: var(--serif);
	font-size: 3.4rem;
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.06em;
	color: var(--red);
	display: block;
	margin-bottom: 18px;
}
.step h3 { font-size: 1.2rem; }
.step p { color: var(--ink-72); font-size: .95rem; margin-bottom: 0; }

.step__meta {
	margin-top: 20px; padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-size: .67rem; font-weight: 800; letter-spacing: .17em;
	text-transform: uppercase; color: var(--olive);
	display: flex; align-items: center; gap: 9px;
}
.step__meta svg { width: 14px; height: 14px; flex: none; }
.section--ink .step__meta { color: var(--olive-soft); border-color: var(--d-rule); }

/* Document tiles */
.doc {
	display: flex; align-items: center; gap: 16px;
	padding: 24px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.doc:hover { background: var(--white); border-color: var(--red); }
.section--white .doc { background: var(--white); }
.section--white .doc:hover { background: var(--paper); }
.doc__ic {
	width: 42px; height: 42px; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	color: var(--red);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}
.doc:hover .doc__ic { background: var(--red); color: #fff; }
.doc__ic svg { width: 20px; height: 20px; }
.doc b { display: block; font-size: .97rem; font-weight: 800; letter-spacing: -.015em; }
.doc span { display: block; font-size: .79rem; color: var(--ink-55); }

/* ==========================================================================
   10. Comparison table — reads like a register
   ========================================================================== */

.compare { border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 20px 24px; text-align: left; vertical-align: top; }

.compare thead th {
	font-family: var(--sans);
	font-size: .65rem; font-weight: 800; letter-spacing: .2em;
	text-transform: uppercase; color: var(--ink-55);
	border-bottom: 1px solid var(--rule);
	white-space: nowrap;
}
.compare thead th:last-child { color: var(--red); }
.compare tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.compare tbody td:first-child { font-weight: 700; width: 28%; letter-spacing: -.01em; }
.compare tbody td:nth-child(2) { color: var(--ink-55); }
.compare tbody td:last-child {
	background: var(--paper);
	font-weight: 600;
	border-left: 1px solid var(--rule);
}
.compare .yes, .compare .no { display: inline-flex; align-items: flex-start; gap: 9px; }
.compare .yes { color: var(--olive); }
.compare .no { color: var(--ink-38); }
.compare .yes svg, .compare .no svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ==========================================================================
   11. Calculator
   ========================================================================== */

.calc {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--white);
}
@media (max-width: 940px) { .calc { grid-template-columns: 1fr; } }

.calc__inputs { padding: clamp(28px, 3.6vw, 48px); }
.calc__out {
	padding: clamp(28px, 3.6vw, 48px);
	background: var(--ink);
	color: var(--d-text);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.calc__out .eyebrow { color: var(--d-text); }

.field { margin-bottom: 32px; }
.field:last-child { margin-bottom: 0; }
.field__top {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px; margin-bottom: 6px;
	padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft);
}
.field__label {
	font-size: .67rem; font-weight: 800; letter-spacing: .2em;
	text-transform: uppercase; color: var(--ink-55);
}
.field__val {
	font-family: var(--serif); font-weight: 700; font-size: 1.22rem;
	letter-spacing: -.03em; color: var(--ink); white-space: nowrap;
}

input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: var(--rule);
	outline: none;
	margin: 16px 0 0;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px; height: 18px;
	border-radius: 0;
	background: var(--red);
	border: 0;
	cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 0;
	background: var(--red);
	border: 0;
	cursor: pointer;
}
.field__scale {
	display: flex; justify-content: space-between;
	margin-top: 12px; font-size: .69rem; color: var(--ink-38);
	font-weight: 800; letter-spacing: .1em;
}

.calc__figure {
	font-family: var(--serif);
	font-size: clamp(3rem, 7vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -.06em;
	line-height: .9;
	color: var(--red-soft);
	margin: 10px 0 6px;
	white-space: nowrap;
}
.calc__figure small { font-size: .25em; letter-spacing: .06em; font-weight: 800; color: var(--d-faint); }

.calc__rows { margin: 28px 0 32px; display: grid; gap: 0; border-top: 1px solid var(--d-rule-soft); }
.calc__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 13px 0; border-bottom: 1px solid var(--d-rule-soft);
	font-size: .89rem;
}
.calc__row span { color: var(--d-faint); }
.calc__row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__note { font-size: .75rem; line-height: 1.55; color: var(--d-faint); margin-top: 20px; }

/* ==========================================================================
   12. Video
   ========================================================================== */

.vcard {
	position: relative;
	border-radius: var(--r-media);
	overflow: hidden;
	background: var(--ink);
	cursor: pointer;
	aspect-ratio: 9 / 16;
	display: block;
	width: 100%;
	border: 1px solid var(--d-rule-soft);
	padding: 0;
	transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.vcard--landscape { aspect-ratio: 16 / 9; }
.vcard--hero { aspect-ratio: 4 / 5; }
.vcard:hover { transform: translateY(-4px); border-color: var(--red); }
.vcard video, .vcard img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--ease);
}
.vcard:hover video, .vcard:hover img { transform: scale(1.04); }

.vcard__veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(21, 19, 18, .94) 2%, rgba(21, 19, 18, .32) 46%, rgba(21, 19, 18, .08) 100%);
}
.vcard__body { position: absolute; inset: auto 0 0 0; padding: 20px; text-align: left; color: #fff; }
.vcard--hero .vcard__body { padding: 28px; }
.vcard__q {
	font-family: var(--serif);
	font-size: 1.02rem; font-weight: 700; line-height: 1.24;
	letter-spacing: -.03em; margin: 0 0 6px; color: #fff;
}
.vcard--hero .vcard__q { font-size: 1.4rem; }
.vcard__a {
	font-size: .8rem; line-height: 1.48; color: rgba(255, 255, 255, .68); margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcard__tag {
	position: absolute; top: 0; left: 0;
	background: var(--red); color: #fff;
	font-size: .59rem; font-weight: 800; letter-spacing: .2em;
	text-transform: uppercase;
	padding: 7px 12px;
}
.vcard__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 58px; height: 58px;
	border-radius: 50%;
	background: rgba(255, 248, 245, .12);
	border: 1px solid rgba(255, 248, 245, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	display: grid; place-items: center;
	transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.vcard:hover .vcard__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--red); border-color: var(--red);
}
.vcard__play svg { width: 22px; height: 22px; margin-left: 3px; }

/* Filter pills — a tab rail, not lozenges */
.pills {
	display: flex; flex-wrap: wrap; gap: 0;
	justify-content: center; margin-bottom: 46px;
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.pill {
	padding: 16px 22px;
	border: 0;
	background: transparent;
	color: var(--ink-55);
	font-size: .69rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: color .25s var(--ease);
}
.pill + .pill { border-left: 1px solid var(--rule-soft); }
.pill::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transition: transform .3s var(--ease);
}
.pill:hover { color: var(--ink); }
.pill.is-active { color: var(--red); }
.pill.is-active::after { transform: scaleX(1); }

/* Lightbox */
.vbox {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(15, 13, 12, .95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: grid; place-items: center;
	padding: 22px;
	opacity: 0; visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s;
}
.vbox.is-open { opacity: 1; visibility: visible; }
.vbox__inner {
	position: relative;
	width: min(100%, 440px);
	border-radius: var(--r-media);
	overflow: hidden;
	background: #000;
	transform: scale(.96);
	transition: transform .35s var(--ease);
}
.vbox.is-open .vbox__inner { transform: scale(1); }
.vbox__inner--landscape { width: min(100%, 1000px); }
.vbox video, .vbox iframe { width: 100%; height: auto; display: block; border: 0; aspect-ratio: 9 / 16; }
.vbox__inner--landscape video, .vbox__inner--landscape iframe { aspect-ratio: 16 / 9; }
.vbox__close {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	width: 40px; height: 40px; border-radius: var(--r);
	background: rgba(0, 0, 0, .55);
	color: #fff;
	display: grid; place-items: center;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .24);
	transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.vbox__close:hover { background: var(--red); border-color: var(--red); }
.vbox__close svg { width: 18px; height: 18px; }
.vbox__cap {
	padding: 18px 22px;
	background: var(--ink);
	color: var(--d-text);
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -.03em;
}

/* Floating mini player, bottom-left */
.miniplayer {
	position: fixed;
	left: 22px; bottom: 22px;
	z-index: 8800;
	width: 186px;
	border-radius: var(--r-media);
	overflow: hidden;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
	cursor: pointer;
	transform: translateY(24px) scale(.95);
	opacity: 0;
	pointer-events: none;
	transition: transform .5s var(--ease), opacity .5s var(--ease), border-color .3s var(--ease);
}
.miniplayer.is-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.miniplayer.is-dismissed { display: none; }
.miniplayer:hover { border-color: var(--red); }

.miniplayer video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.miniplayer__veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(21, 19, 18, .9), transparent 54%);
	pointer-events: none;
}
.miniplayer__play {
	position: absolute;
	top: 45%; left: 50%;
	transform: translate(-50%, -50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255, 248, 245, .14);
	border: 1px solid rgba(255, 248, 245, .6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	display: grid; place-items: center;
	transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
	pointer-events: none;
}
.miniplayer:hover .miniplayer__play {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--red); border-color: var(--red);
}
.miniplayer__play svg { width: 20px; height: 20px; margin-left: 3px; }

.miniplayer__label {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 12px 14px;
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	pointer-events: none;
}
.miniplayer__label span {
	display: block;
	font-size: .55rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--red-soft);
	margin-bottom: 4px;
}

.miniplayer__x {
	position: absolute; top: 7px; right: 7px; z-index: 3;
	width: 26px; height: 26px; border-radius: var(--r);
	background: rgba(0, 0, 0, .55);
	color: #fff;
	display: grid; place-items: center;
	border: 1px solid rgba(255, 255, 255, .24);
	transition: background-color .2s var(--ease);
}
.miniplayer__x:hover { background: var(--red); }
.miniplayer__x svg { width: 13px; height: 13px; }

.miniplayer__mute {
	position: absolute; top: 7px; left: 7px; z-index: 3;
	padding: 4px 8px; border-radius: var(--r);
	background: rgba(0, 0, 0, .55);
	border: 1px solid rgba(255, 255, 255, .24);
	color: #fff;
	font-size: .53rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	pointer-events: none;
}

@media (max-width: 640px) {
	.miniplayer { width: 124px; left: 12px; bottom: 92px; }
	.miniplayer__play { width: 40px; height: 40px; }
	.miniplayer__play svg { width: 15px; height: 15px; }
	.miniplayer__label { padding: 8px 10px; font-size: .65rem; }
	.miniplayer__label span { font-size: .48rem; letter-spacing: .14em; }
}

/* ==========================================================================
   13. Developments
   ========================================================================== */

.lot {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	display: flex;
	flex-direction: column;
	transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.lot:hover { background: var(--white); border-color: var(--ink-38); }
.lot__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); display: block; }
.lot__img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .9s var(--ease), filter .5s var(--ease);
	filter: saturate(.86) contrast(1.05);
}
.lot:hover .lot__img img { transform: scale(1.05); filter: none; }
.lot__flag {
	position: absolute; top: 0; left: 0;
	background: var(--red); color: #fff;
	font-size: .59rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
	padding: 8px 14px;
}
.lot__flag--olive { background: var(--olive); }

.lot__body { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; flex: 1; }
.lot__where {
	font-size: .63rem; font-weight: 800; letter-spacing: .22em;
	text-transform: uppercase; color: var(--olive); margin-bottom: 12px;
	display: flex; align-items: center; gap: 8px;
}
.lot__where svg { width: 13px; height: 13px; flex: none; }
.lot h2, .lot h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: .35em; }
.lot p { color: var(--ink-72); font-size: .92rem; flex: 1; }

.lot__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 20px; }
.lot__fact {
	font-size: .63rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	padding: 6px 10px; border: 1px solid var(--rule); color: var(--ink-55);
}

.lot__price {
	display: flex; align-items: baseline; gap: 10px;
	padding-top: 18px; border-top: 1px solid var(--rule); margin-bottom: 20px;
}
.lot__price b {
	font-family: var(--serif); font-size: 1.7rem; font-weight: 800;
	letter-spacing: -.05em; color: var(--ink);
}
.lot__price span {
	font-size: .61rem; color: var(--ink-38); font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
	width: 100%;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
	padding: 28px 0;
	cursor: pointer;
	font-family: var(--serif);
	font-size: clamp(1.04rem, 1.7vw, 1.28rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.3;
	color: var(--ink);
	text-align: left;
	transition: color .25s var(--ease);
	user-select: none;
}
.faq__q:hover { color: var(--red); }
.faq__ic {
	width: 30px; height: 30px; flex: none;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	display: grid; place-items: center;
	color: var(--red);
	transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.faq__ic svg { width: 15px; height: 15px; }
.faq__item.is-open .faq__ic { transform: rotate(45deg); background: var(--red); color: #fff; border-color: var(--red); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a > div { padding: 0 62px 30px 0; color: var(--ink-72); font-size: 1rem; line-height: 1.72; }

.section--ink .faq, .section--ink .faq__item { border-color: var(--d-rule); }
.section--ink .faq__q { color: var(--d-text); }
.section--ink .faq__ic { border-color: var(--d-rule); color: var(--red-soft); }
.section--ink .faq__a > div { color: var(--d-mute); }

@media (max-width: 640px) { .faq__a > div { padding-right: 0; } }

/* ==========================================================================
   15. Testimonials
   ========================================================================== */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
@media (max-width: 1000px) { .quotes { grid-template-columns: 1fr; } }
.quote {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	padding: clamp(28px, 3vw, 38px);
	display: flex; flex-direction: column;
	transition: background-color .35s var(--ease);
}
.quote:hover { background: var(--white); }
.section--paper-3 .quote { background: var(--paper-2); }
.section--paper-3 .quote:hover { background: var(--white); }
.quote__stars { display: flex; gap: 2px; color: var(--red); margin-bottom: 20px; }
.quote__stars svg { width: 15px; height: 15px; }
.quote p {
	font-family: var(--serif);
	font-size: 1.06rem;
	line-height: 1.5;
	letter-spacing: -.025em;
	flex: 1;
}
.quote__who {
	margin-top: 24px; padding-top: 18px;
	border-top: 1px solid var(--rule);
	font-size: .78rem;
}
.quote__who b { display: block; font-weight: 800; letter-spacing: .02em; }
.quote__who span { color: var(--ink-38); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }

/* ==========================================================================
   16. CTA band
   ========================================================================== */

.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--d-text);
	border-radius: var(--r);
	padding: clamp(42px, 6vw, 84px) clamp(26px, 5vw, 72px);
	text-align: center;
}
.cta-band::before {
	content: "";
	position: absolute;
	inset: auto -10% -60% auto;
	width: 70%; height: 150%;
	background: radial-gradient(closest-side, rgba(251, 49, 34, .3), transparent 70%);
	pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--d-text); }
.cta-band p { color: var(--d-mute); max-width: 58ch; margin-inline: auto; }
.cta-band .eyebrow { justify-content: center; }

/* ==========================================================================
   17. Page headers & editorial content
   ========================================================================== */

.page-hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--d-text);
	padding: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) 0 clamp(40px, 5vw, 72px);
}
.page-hero::after {
	content: "";
	position: absolute;
	right: -20%; top: -60%;
	width: 62%; height: 200%;
	background: radial-gradient(closest-side, rgba(251, 49, 34, .18), transparent 70%);
	pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: var(--d-text); margin-bottom: .28em; }

.crumbs {
	font-size: .67rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
	color: var(--d-faint);
	display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
	margin-bottom: 24px;
}
.crumbs a { transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--red-soft); }
.crumbs svg { width: 11px; height: 11px; transform: rotate(-90deg); opacity: .5; }

.entry-content { font-size: 1.05rem; line-height: 1.75; }
.entry-content > * { max-width: var(--wrap-narrow); margin-inline: auto; }
.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--red-deep); }
.entry-content img, .entry-content figure { max-width: 100%; border-radius: var(--r-media); }
.entry-content blockquote {
	margin: 2em 0; padding: 4px 0 4px 26px;
	border-left: 2px solid var(--red);
	font-family: var(--serif); font-size: 1.16rem; font-style: italic; color: var(--ink-72);
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: 12px 14px; border: 1px solid var(--rule); text-align: left; }

/* Elementor and third-party embeds (the developments lot map is one of these)
   size themselves — never clip or constrain them. */
.entry-content iframe,
.entry-content .elementor,
.entry-content .elementor-widget-container { max-width: none; width: 100%; }
.entry-content--full > * { max-width: none; }

/* ==========================================================================
   18. Step rows
   ========================================================================== */

.steprow {
	display: grid;
	grid-template-columns: 1fr minmax(0, 286px);
	gap: clamp(26px, 5vw, 72px);
	align-items: center;
	padding: clamp(34px, 4.5vw, 56px) 0;
	border-top: 1px solid var(--rule);
}
.steprow:first-of-type { border-top: 0; padding-top: 0; }
.steprow--flip { grid-template-columns: minmax(0, 286px) 1fr; }
.steprow--flip .steprow__text { order: 2; }
.steprow--flip .steprow__media { order: 1; }
.section--ink .steprow { border-color: var(--d-rule); }

@media (max-width: 900px) {
	.steprow, .steprow--flip { grid-template-columns: 1fr; }
	.steprow--flip .steprow__text, .steprow--flip .steprow__media { order: initial; }
}

.steprow__n {
	display: block;
	font-family: var(--serif);
	font-size: clamp(3rem, 6vw, 4.4rem);
	font-weight: 800;
	line-height: .82;
	letter-spacing: -.07em;
	color: var(--red);
	margin-bottom: 18px;
}
.steprow__text h2, .steprow__text h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .42em; }
.steprow__text p { color: var(--ink-72); max-width: 58ch; }
.section--ink .steprow__text p { color: var(--d-mute); }
.steprow__text .step__meta { display: inline-flex; border-top: 0; padding-top: 0; margin-top: 22px; }
.steprow__media .vcard { max-width: 286px; margin-inline: auto; }

/* ==========================================================================
   19. Guide page: step index, tick lists
   ========================================================================== */

.grid-5-toc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; }
@media (max-width: 940px) { .grid-5-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid-5-toc { grid-template-columns: 1fr; } }

.toc-chip {
	display: block;
	padding: 24px 22px 22px;
	background: var(--paper);
	border: 1px solid var(--rule);
	position: relative;
	transition: background-color .3s var(--ease);
}
.toc-chip::before {
	content: "";
	position: absolute; left: -1px; top: -1px; height: 2px; width: 0;
	background: var(--red);
	transition: width .4s var(--ease);
}
.toc-chip:hover { background: var(--white); }
.toc-chip:hover::before { width: calc(100% + 2px); }
.toc-chip__n {
	display: block;
	font-family: var(--sans);
	font-size: .62rem; font-weight: 800; letter-spacing: .22em;
	color: var(--red); margin-bottom: 14px;
}
.toc-chip__t { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.02rem; letter-spacing: -.03em; }
.toc-chip__d { display: block; margin-top: 6px; font-size: .66rem; color: var(--ink-38); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section--paper-3 .toc-chip { background: var(--paper-2); }
.section--paper-3 .toc-chip:hover { background: var(--white); }

.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ticks li {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0; padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
	font-size: .93rem; color: var(--ink-72);
}
.ticks svg { width: 17px; height: 17px; flex: none; color: var(--olive); margin-top: 3px; }
.section--ink .ticks { border-color: var(--d-rule); }
.section--ink .ticks li { color: var(--d-mute); border-color: var(--d-rule-soft); }
.section--ink .ticks svg { color: var(--olive-soft); }

/* The two-column intro layout reused outside the hero */
.section .hero__grid { align-items: start; }
.section .hero__grid .vcard { max-width: 320px; margin-inline: auto; }

/* ==========================================================================
   20. Small components
   ========================================================================== */

.info-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.info-list__row {
	display: grid; grid-template-columns: 200px 1fr; gap: 24px;
	padding: 20px 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 640px) { .info-list__row { grid-template-columns: 1fr; gap: 6px; } }
.info-list__k { font-weight: 800; font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.info-list__v { color: var(--ink-72); }
.info-list__v a { text-decoration: underline; text-underline-offset: 3px; }

.person {
	background: var(--paper);
	border: 1px solid var(--rule);
	padding: 30px 26px;
}
.person img {
	width: 100%; aspect-ratio: 1; height: auto;
	border-radius: var(--r-media); object-fit: cover;
	margin-bottom: 20px; background: var(--paper-3);
	filter: saturate(.9) contrast(1.03);
	transition: filter .4s var(--ease);
}
.person:hover img { filter: none; }
.person__badge {
	display: inline-block;
	background: var(--red); color: #fff;
	font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
	padding: 5px 10px; margin-bottom: 10px;
}
.person__name, .person h3 { font-size: 1.14rem; margin-bottom: .25em; }
.person span { font-size: .63rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); display: block; }
.person p { margin-top: 14px; color: var(--ink-72); font-size: .9rem; }
.person { transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.person:hover { background: var(--white); border-color: var(--ink-38); }

.map-embed {
	border: 1px solid var(--rule);
	border-radius: var(--r);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--paper-3);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .map-embed { aspect-ratio: 4 / 3; } }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	border: 1px solid var(--rule);
	font-weight: 800; font-size: .76rem; letter-spacing: .1em;
	transition: all .2s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }

.search-form { display: flex; gap: 0; border: 1px solid var(--rule); background: var(--white); }
.search-form input[type="search"] {
	flex: 1; padding: 15px 18px; border: 0; background: transparent;
	font-family: var(--sans); font-size: .97rem; color: var(--ink);
}
.search-form input[type="search"]:focus { outline: none; }
.search-form .search-submit {
	padding: 15px 24px; border: 0; background: var(--red); color: #fff;
	font-family: var(--sans); font-weight: 800; font-size: .71rem;
	letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}

/* ==========================================================================
   21. Footer — dark, closing the frame the nav opens
   ========================================================================== */

.site-footer { background: var(--ink); color: var(--d-mute); }
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
	gap: 40px;
	padding: clamp(56px, 7vw, 96px) 0 48px;
}
@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } }

.site-footer__logo { display: block; margin-bottom: 22px; }
.site-footer__logo { background: var(--paper); padding: 7px 12px; border-radius: var(--r); display: inline-flex; align-items: center; margin-bottom: 22px; }
.site-footer__logo img { height: 30px; width: auto; display: block; }
.site-footer p { font-size: .91rem; color: var(--d-mute); }

.foot-label {
	font-size: .63rem; font-weight: 800; letter-spacing: .24em;
	text-transform: uppercase; color: var(--red-soft);
	margin-bottom: 20px; padding-bottom: 12px;
	border-bottom: 1px solid var(--d-rule-soft);
}
.foot-links { display: grid; gap: 11px; }
.foot-links a { font-size: .87rem; font-weight: 500; color: var(--d-mute); transition: color .2s var(--ease); }
.foot-links a:hover { color: var(--d-text); }

.socials { display: flex; gap: 8px; margin-top: 26px; }
.socials a {
	width: 40px; height: 40px;
	border: 1px solid var(--d-rule);
	color: var(--d-mute);
	display: grid; place-items: center;
	transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.socials svg { width: 18px; height: 18px; }

.site-footer__bar {
	border-top: 1px solid var(--d-rule-soft);
	padding: 24px 0 32px;
	display: flex; flex-wrap: wrap; gap: 14px;
	align-items: center; justify-content: space-between;
	font-size: .71rem; font-weight: 600; letter-spacing: .08em;
	color: var(--d-faint);
}
.site-footer__bar a { color: var(--d-mute); }
.site-footer__bar a:hover { color: var(--red-soft); }

.wa {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 8700;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: #25d366;
	display: grid; place-items: center;
	box-shadow: 0 12px 30px rgba(37, 211, 102, .34);
	transition: transform .3s var(--ease);
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 28px; height: 28px; color: #fff; }

/* ==========================================================================
   22. Reveal
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .65s var(--ease), transform .65s var(--ease);
	will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   23. Print
   ========================================================================== */

@media print {
	.site-nav, .site-footer, .wa, .miniplayer, .vbox, .btn { display: none !important; }
	body { background: #fff; color: #000; }
	.site-main { padding-top: 0; }
	.hero, .page-hero, .section--ink, .cta-band, .trust { background: #fff !important; color: #000 !important; }
	.hero h1, .page-hero h1, .section--ink h2, .trust__cell b { color: #000 !important; }
}

/* ==========================================================================
   24. Phones
   The first pass stacked full-width red blocks (both CTAs, the corner badge,
   the "Watch first" tag) directly on top of each other, which read as one
   solid slab of red, and the sections had desktop-tight rhythm. On a phone
   only ONE element is allowed to be a red fill: the primary CTA.
   ========================================================================== */

@media (max-width: 700px) {

	:root {
		--gutter: 20px;
		--nav-h: 64px;
	}

	body { font-size: 16px; }

	/* Give every band room to breathe. */
	.section { padding: 58px 0; }
	.section--tight { padding: 42px 0; }
	.section-head { margin-bottom: 34px; padding-bottom: 22px; }

	h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.06; }
	h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
	.lede { font-size: 1rem; line-height: 1.62; }

	.hero { padding: calc(var(--nav-h) + 42px) 0 52px; }
	.hero__shade {
		background: linear-gradient(180deg, rgba(21, 19, 18, .74) 0%, rgba(21, 19, 18, .66) 40%, rgba(21, 19, 18, .95) 100%);
	}

	/* Only the primary CTA is a red fill; the second is an outline. Stacked
	   full-width they no longer form a block of red. */
	.hero__cta { flex-direction: column; width: 100%; gap: 10px; }
	.hero__cta .btn { width: 100%; }
	.hero__cta .btn--lg { padding: 17px 24px; font-size: .74rem; }

	.hero__watch {
		margin-top: 30px;
		width: 100%;
		padding: 12px 18px 12px 12px;
		border-radius: 14px;
	}
	.hero__watch-play { width: 36px; height: 36px; }
	.hero__watch-text { font-size: .85rem; }

	/* Buttons elsewhere: full width, one per row, never two reds side by side. */
	.btn-row { flex-direction: column; align-items: stretch; }
	.btn-row .btn { width: 100%; }
	.btn--lg { padding: 16px 24px; font-size: .74rem; }

	/* Figure ledger: 2x2 with real padding instead of four squeezed columns. */
	.trust__cell { padding: 24px 18px; }
	.trust__cell::before { margin-bottom: 10px; }
	.trust__cell b { font-size: 2.1rem; }
	.trust__cell > span { margin-top: 10px; }

	/* Step rows: number, text, then the video — never a squeezed column. */
	.steprow { padding: 34px 0; gap: 24px; }
	.steprow__n { font-size: 2.6rem; margin-bottom: 12px; }
	.steprow__media .vcard { max-width: 260px; }

	/* Cards and quotes get their own breathing room. */
	.card, .quote, .lot__body, .toc-chip { padding: 24px 20px; }
	.doc { padding: 18px 16px; }

	.calc__inputs, .calc__out { padding: 26px 20px; }
	.calc__figure { font-size: 3rem; }

	.faq__q { padding: 22px 0; font-size: 1.02rem; gap: 16px; }
	.faq__a > div { padding-bottom: 24px; }

	.cta-band { padding: 38px 22px; }

	/* One red tag per video card is enough; the play button carries the rest. */
	.vcard__tag { font-size: .55rem; padding: 6px 9px; }

	.site-footer__grid { padding: 48px 0 36px; }
	.site-footer__bar { justify-content: flex-start; gap: 8px; font-size: .68rem; }
}

/* The floating player and the WhatsApp bubble are both fixed and both round —
   keep them off each other on small screens. */
@media (max-width: 700px) {
	.wa { width: 48px; height: 48px; right: 14px; bottom: 14px; }
	.wa svg { width: 25px; height: 25px; }
}

/* ==========================================================================
   24. Elementor
   The nav is fixed and normally cleared by .site-main's padding. Elementor
   Canvas renders no .site-main at all, so the page would slide under the bar.
   ========================================================================== */

body.elementor-template-canvas { padding-top: var(--nav-h); }

/* Elementor sizes its own sections; never let the prose measure clip them. */
.entry-content .elementor,
.entry-content .elementor-section,
.entry-content .e-con,
.entry-content .elementor-widget-container { max-width: none; width: 100%; }

/* ==========================================================================
   25. Optional page body
   About / Team / Directions / Contact print the_content() as an extra block,
   set apart from the designed sections around it.
   ========================================================================== */

.page-body {
	border-top: 1px solid var(--rule);
	padding-top: clamp(28px, 4vw, 44px);
	margin-top: clamp(28px, 4vw, 44px);
}
.page-body > .entry-content > *:first-child { margin-top: 0; }

/* Numbered "what happens next" rail */
.rail { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .rail { grid-template-columns: 1fr; } }
.rail__step {
	background: var(--paper);
	border: 1px solid var(--rule);
	padding: clamp(24px, 3vw, 34px);
	position: relative;
}
.section--white .rail__step { background: var(--white); }
.section--paper-3 .rail__step { background: var(--paper-2); }
.rail__n {
	display: block;
	font-family: var(--sans);
	font-size: .62rem; font-weight: 800; letter-spacing: .24em;
	color: var(--red); margin-bottom: 16px;
}
.rail__step h3 { font-size: 1.14rem; margin-bottom: .4em; }
.rail__step p { color: var(--ink-72); font-size: .93rem; margin: 0; }