/* Hallmark · macrostructure: bespoke (Field Journal photographic-editorial + Photographic/Feature-Stack/Narrative-Workflow primitives)
 * theme: custom (brand-locked tokens, not vibe-derived) · paper: #F7F0E2 / #021F2C · accent: #DCA500
 * display: Fraunces (roman only) · body: Manrope · axes: dual-band / roman-serif / chromatic-terracotta(gold)
 * studied: no · context: explicit · consolidated 2026-07-18 from tropical-theme.css + cinematic-v3.css (retired)
 */
/**
 * Two Little Monkeys — site experience layer (single active public-site
 * CSS entry; consolidated from the former tropical-theme.css +
 * cinematic-v3.css, which are retired). Contains: brand tokens, global
 * element styles, the header/footer/navigation system, every homepage
 * section's composition, and the site's one motion/reveal vocabulary.
 *
 * Structural redesign history: the original implementation had converged
 * on a technically-correct but visually mechanical rhythm — centered
 * heading, alternating left/right rows, a card, a grid, a card, repeat.
 * That macrostructure was discarded in favor of a "field journal"
 * narrative: an immersive full-bleed opening scene, a continuous run of
 * structurally distinct chapters, a stamped dossier rather than a SaaS
 * card, a restrained magazine spread instead of a uniform mosaic, and a
 * photography-first family scene. Business content, brand tokens, and
 * Gutenberg editability are unchanged; the visual fingerprint is not.
 *
 * Reescribe unicamente variables CSS y clases propias del child theme.
 * No modifica archivos de Blocksy: las variables --theme-palette-color-*
 * son las mismas que usa Blocksy en todo su markup (botones, enlaces,
 * bordes), por lo que sobreescribirlas aqui reviste toda la UI heredada
 * sin tocar el theme padre.
 */

:root {
	/* Paleta base del sitio, reutilizada por Blocksy en botones/enlaces.
	   !important is required here: Blocksy prints its own Customizer-driven
	   palette as an inline <style id="ct-main-styles-inline-css"> block
	   that loads AFTER this stylesheet in <head>, and redeclares these
	   same custom properties at :root with its own defaults. Without
	   !important, that later declaration wins and silently reverts every
	   native Blocksy use of --theme-palette-color-1..5 (focus rings,
	   WooCommerce pagination, blockquote borders) back to Blocksy's stock
	   colors. */
	--theme-palette-color-1: #DCA500 !important; /* Gold — acento principal / CTA */
	--theme-palette-color-2: #315D47 !important; /* Green — acento secundario */
	--theme-palette-color-3: #063247 !important; /* Navy — texto / enlaces heredados */
	--theme-palette-color-4: #F7F0E2 !important; /* Cream — fondos claros */
	--theme-palette-color-5: #0C4661 !important; /* Navy Soft — bordes / detalles */

	/* Canonical brand tokens (constitution-mandated, single source of truth;
	   see .specify/memory/constitution.md "Canonical Design Tokens" —
	   amended to this tropical-cacao palette so the whole site, not just
	   the homepage's own former --tlm5-* tokens, shares one identity). */
	--tlm-navy: #063247;
	--tlm-navy-dark: #021F2C;
	--tlm-navy-soft: #0C4661;

	--tlm-cream: #F7F0E2;
	--tlm-cream-soft: #F1E6D2;
	--tlm-surface: #FFFFFF;
	--tlm-paper: #FFFDF8;

	--tlm-text: #2E2E32;
	--tlm-text-muted: #6F6B64;

	--tlm-gold: #DCA500;
	/* Text-safe gold: --tlm-gold measures under WCAG AA's 4.5:1 for normal
	   text on cream/cream-soft — short gold labels (kickers, numerals)
	   sitting directly on a light surface use this darker variant instead.
	   --tlm-gold itself stays unchanged for decorative use (dividers,
	   icons, buttons) and for gold-on-dark text, which doesn't need it. */
	--tlm-gold-ink: #8C6000;
	--tlm-gold-soft: #F1C95F;
	--tlm-green: #315D47;
	--tlm-cacao: #67402F;
	--tlm-red: #C9473D;
	--tlm-purple: #9141AC;

	--tlm-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--tlm-font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

	--tlm-radius-organico: 4px;
	--tlm-radius-organico-sm: 3px;

	--tlm-container-wide: min(84rem, 94vw);
	--tlm-container-text: min(38rem, 92vw);
	--tlm-container-header: min(1290px, 92vw);
	/* One content edge for the whole site. 1280px of content plus the
	   standard gutter on each side, capped to the viewport — the same
	   result the Home v5 sections already produce, so a heading in the
	   header, hero, body sections and footer all start on the same x. */
	--tlm-content-max: 1280px;
	--tlm-content-box: min(calc(var(--tlm-content-max) + 2 * var(--tlm-section-px)), 100%);
	--tlm-section-py: clamp(4rem, 7vw, 7rem);
	--tlm-section-px: clamp(1.25rem, 5vw, 4rem);

	--tlm-space-group: 1.25rem;
	--tlm-space-action: 1.75rem;
	--tlm-section-quiet: clamp(3rem, 5vw, 5rem);
	--tlm-measure: 58ch;
	--tlm-border: 1px solid rgb(6 50 71 / 18%);
	--tlm-gap-sm: clamp(0.5rem, 0.3rem + 0.5vw, 0.85rem);
	--tlm-gap-md: clamp(1rem, 0.7rem + 1vw, 1.75rem);
	--tlm-gap-lg: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}

/* Standard WordPress visually-hidden utility — not shipped by Blocksy or
   this child theme's own stylesheet, needed wherever a control's visible
   state (an icon, a bar) needs a text equivalent for assistive tech. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ----------------------------------------------------------------
 * Base tipografica y textura de fondo "papel artesanal"
 * ---------------------------------------------------------------- */
html,
body {
	overflow-x: clip; /* gate 34: clip, never hidden — preserves position:sticky on the header */
}

/* Sitewide readability bump: Scaled root font-size gives a generous,
   highly legible text scale across desktop and mobile devices.
   118.75% of 16px = 19px base desktop; 106.25% = 17px base on mobile. */
html {
	font-size: 118.75%;
}

@media (max-width: 600px) {
	html {
		font-size: 106.25%;
	}
}

/* Constrained-group sections (their block comment sets contentSize to the
   old wide token, so they sat ~5px inside the shared content edge). One
   rule gives every one of them the same width as the rest of the site. */
.entry-content.is-layout-constrained > :is(.tlm-xp-overview, .tlm-xp-guests, .tlm-xp-family, .tlm-xp-trust, .tlm-founders, .tlm-story-mosaic-section) {
	/* The page wrapper already insets these by the standard gutter, so the
	   section only needs the 1280px content width — no extra padding. */
	max-width: var(--tlm-content-max);
}

/* A plain div that is a direct child of a constrained group gets the group
   layout classes injected, which centre each of ITS children at its own
   width — so eyebrow, heading and paragraph each started on a different x.
   Left-align every child of these text wrappers on one edge. */
.tlm-xp-overview .tlm-xp-overview__header > *,
.tlm-xp-guests .tlm-xp-guests__text > *,
.tlm-xp-family .tlm-xp-family__body > * {
	margin-inline: 0 !important;
}

/* Blocksy adds 60px of bottom padding to the content wrapper, which showed
   as a cream strip between a page's last full-width section and the
   footer. Pages whose last section is one of ours end flush on the footer. */
.ct-container-full:has(.entry-content > [class*="tlm-"]:last-child) {
	padding-bottom: 0;
}

/* WordPress puts a 24px block-gap margin between the direct children of a
   constrained layout. Every full-width section here manages its own
   vertical padding, so that gap only showed up as thin slivers of page
   background between two sections. */
.entry-content.is-layout-constrained > * {
	margin-block: 0;
}

/* Captions inherited a system sans from the parent theme, so every image
   caption on the site read as a different typeface from the body copy. */
figcaption,
.wp-element-caption {
	font-family: var(--tlm-font-body);
}

p {
	font-size: 1.05rem;
	line-height: 1.68;
}

body {
	font-family: var(--tlm-font-body);
	color: var(--tlm-text);
	background-color: var(--tlm-cream);
	background-image: radial-gradient(circle at 1px 1px, rgba(0, 56, 95, 0.035) 1px, transparent 0);
	background-size: 22px 22px;
}

/* `body` prefix, not !important: Blocksy's main.min.css defines h1..h6
   as separate bare-tag rules (not grouped), each with color: var(
   --theme-headings-color) — a global cream default, correct for this
   site's many dark hero/footer/final-scene sections. At equal (0,0,1)
   specificity, Blocksy wins by loading after this file, which is why
   product titles and other light-background headings kept surfacing as
   cream-on-cream. `body h1` etc. is (0,0,2) — enough to always beat
   Blocksy's bare tag rules regardless of load order, but still lower
   specificity than any class-based dark-section override elsewhere in
   this file (e.g. .tlm-v3-hero__title, .tlm-final-scene .wp-block-
   heading), which must keep winning normally. !important would have
   broken those instead of fixing this.

   .wp-block-heading deliberately keeps its plain (0,1,0) specificity,
   NOT the `body` prefix: Blocksy has no competing .wp-block-heading
   rule (only bare h1..h6), so it doesn't need the boost — and boosting
   it would itself outrank legitimate single-class dark-section
   overrides like .tlm-v3-hero__title, since every heading also carries
   this class. (Caught by testing the hero title after this fix,
   exactly the kind of check that's the point of verifying live.) */
body h1, body h2, body h3, body h4, body h5, body h6,
.wp-block-heading {
	font-family: var(--tlm-font-display);
	color: var(--tlm-navy);
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
	min-width: 0;
}

body h1,
.wp-block-heading.has-h-1-font-size,
h1.entry-title {
	font-size: clamp(2.35rem, 1.6rem + 2.8vw, 3.85rem);
	line-height: 1.08;
	letter-spacing: -0.012em;
	font-weight: 600;
}

body h2,
.wp-block-heading.has-h-2-font-size {
	font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.65rem);
	line-height: 1.15;
	letter-spacing: -0.008em;
	font-weight: 600;
}

body h3,
.wp-block-heading.has-h-3-font-size {
	font-size: clamp(1.3rem, 1.12rem + 0.75vw, 1.65rem);
	line-height: 1.25;
	font-weight: 600;
}

body h4 {
	font-size: clamp(1.12rem, 1.02rem + 0.35vw, 1.3rem);
	line-height: 1.35;
	font-weight: 600;
}

body p {
	font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.12rem);
	line-height: 1.72;
}

body.home h1 {
	font-size: clamp(3rem, 1rem + 7vw, 6.5rem);
	line-height: 0.98;
	letter-spacing: -0.01em;
}

body.home h2 {
	font-size: clamp(1.85rem, 1.5rem + 1.6vw, 2.65rem);
	line-height: 1.14;
	letter-spacing: -0.005em;
}

body.home h3 {
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
	line-height: 1.28;
}

/* ----------------------------------------------------------------
 * Header sticky
 * ---------------------------------------------------------------- */
.ct-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(247, 242, 232, 0.92);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid rgba(0, 56, 95, 0.1);
}

/* WordPress core's #wpadminbar is position:fixed at z-index:99999 (higher
   than this header's own z-index:100), 32px tall on desktop / 46px between
   601-782px — with no offset here, the sticky (and, on hero pages, fixed —
   see the position:fixed !important rule further down) header sits at
   top:0 same as the admin bar and the two overlap, hiding the header's top
   ~32px behind it whenever an editor is logged in. Below 601px WP core
   itself switches the admin bar to position:absolute (it scrolls away
   with the page), so no offset is needed on mobile. */
body.admin-bar .ct-header {
	top: 32px;
}

@media screen and (max-width: 782px) and (min-width: 601px) {
	body.admin-bar .ct-header {
		top: 46px;
	}
}

@media (min-width: 1000px) {
	/* !important: Blocksy's Customizer generates its own inline
	   `[data-header*="type-1"] .ct-header [data-row*="middle"] { --height:120px; }`
	   in a <style> block that loads after this file — at equal
	   selector specificity, source order lets it win regardless of
	   what's declared here. 84px (was 78px): a touch more breathing room
	   for the larger wordmark below, without pushing into "oversized". */
	[data-header] .ct-header [data-row*="middle"] {
		--height: 84px !important;
	}
}

@media (max-width: 999px) {
	/* Same Blocksy-inline-CSS-wins issue as the desktop rule above, at
	   Blocksy's own mobile default (measured live at 70px). 70px (was
	   66px), matching the slightly larger mobile compact mark below. */
	[data-header] .ct-header [data-row*="middle"] {
		--height: 70px !important;
	}
}

/* Wordmark scale, bumped again (2.75rem → 3.25rem max — noticeably more
   present, still comfortable against an 84px header row). !important for
   the same reason as the [data-row] --height rules above: Blocksy's
   Customizer-generated inline <style> sets its own height/max-height on
   `.site-logo-container img` (equal specificity, loads after this file),
   so without !important this rule was silently losing and the logo
   rendered at Blocksy's own smaller default regardless of what was
   declared here. */
.ct-header img.default-logo {
	height: clamp(3.2rem, 2.4rem + 1.8vw, 4.2rem) !important;
	width: auto !important;
	max-width: 360px !important;
}

/* Attachment 52 (the real horizontal wordmark) backs both the dark and
   light header logo roles (see tlm_child_logo_roles() in functions.php) —
   the light variant is derived from the same file via a CSS filter rather
   than a second uploaded/recolored asset, since the project's Media
   Library has no dedicated light horizontal wordmark (see research.md §3).
   The dark/grey wordmark is Blocksy's normal in-flow logo and sizes the
   link's clickable box; the filtered-white wordmark is an absolutely-
   positioned overlay added via tlm_child_add_light_header_logo(), shown
   only while the header sits transparent over a hero photo. */
.ct-header .site-logo-container {
	position: relative;
}

.ct-header img.tlm-v3-header-logo-light {
	position: absolute;
	inset: 0;
	/* !important: matches img.default-logo above — same Blocksy inline-style
	   override issue applies to every image inside .site-logo-container. */
	height: clamp(3.2rem, 2.4rem + 1.8vw, 4.2rem) !important;
	width: auto !important;
	max-width: 360px !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tlm-v3-dur-short, 220ms) var(--tlm-v3-ease-out, ease-out);
}

/* Compact mark (attachment 100) — mobile-only alternative to the light
   wordmark, at icon scale rather than a wordmark stretched down. Hidden by
   default; shown only under the mobile media query below. Bumped to match
   the slightly taller mobile header row (70px, was 66px). */
.ct-header img.tlm-v3-header-logo-compact {
	position: absolute;
	inset: 0;
	/* !important: same Blocksy inline-style override issue as above. */
	height: clamp(2.6rem, 2.2rem + 1vw, 3rem) !important;
	width: auto !important;
	max-width: 220px !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tlm-v3-dur-short, 220ms) var(--tlm-v3-ease-out, ease-out);
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) img.default-logo {
	opacity: 0;
	transition: opacity var(--tlm-v3-dur-short, 220ms) var(--tlm-v3-ease-out, ease-out);
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) img.tlm-v3-header-logo-light {
	opacity: 1;
}

@media (max-width: 480px) {
	.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) img.tlm-v3-header-logo-light {
		opacity: 0;
	}

	.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) img.tlm-v3-header-logo-compact {
		opacity: 1;
	}
}

/* Blocksy renders the image logo AND a text site-title side by side;
   the wordmark already carries the brand name, so the duplicate text
   label is hidden rather than shown twice. */
.ct-header .site-title-container {
	display: none;
}

.ct-header nav .ct-menu-link {
	font-family: var(--tlm-font-body);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tlm-navy);
}

.ct-header nav ul.menu > li {
	/* Tightened from clamp(2.125rem, 1.31rem + 1.3vw, 2.875rem) (34-46px):
	   with the CTA, EN/ES language items, and Cart now all living in this
	   same list (10 items total), the wider gap pushed the row past
	   Blocksy's measured nav width and tripped its "More" overflow
	   collapse well before 1440px. 14-22px keeps the row visually
	   balanced while actually fitting. */
	margin-inline-end: clamp(0.5rem, 0.3rem + 0.3vw, 0.75rem);
}

.ct-header nav ul.menu > li:last-child {
	margin-inline-end: 0;
}

/* Trimmed from Blocksy's default ~12.5px each side — recovers width for
   the CTA + language switcher now sharing this row, without the links
   reading as cramped (uppercase, letter-spaced 12px labels). */
.ct-header nav ul.menu > li:not(.tlm-header-cta):not(.tlm-lang-switch) > .ct-menu-link {
	padding-inline: 0.3rem;
}

.ct-header nav .menu-item:not(.tlm-header-cta) > .ct-menu-link {
	position: relative;
}

.ct-header nav .menu-item:not(.tlm-header-cta) > .ct-menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35rem;
	height: 2px;
	background: var(--tlm-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.ct-header nav .menu-item:not(.tlm-header-cta) > .ct-menu-link:hover::after,
.ct-header nav .menu-item:not(.tlm-header-cta) > .ct-menu-link:focus-visible::after {
	transform: scaleX(1);
}

/* Active-page indicator — WordPress already classes the current nav
   item .current-menu-item / .current_page_item natively; this was
   simply never styled. Reuses the same underline the hover state
   draws, just permanently drawn for the page you're actually on.

   Excludes .tlm-lang-en/.tlm-lang-es: the language pill's URL points at
   the current language's home page, so WordPress also tags IT as
   "current" whenever that happens to be the page you're on (typically
   the front page) — without this exclusion, this rule's gold text
   fought the language pill's own .is-active rule (gold pill, navy
   text) at equal-or-higher specificity and won, producing invisible
   gold-on-gold "EN" text. */
.ct-header nav .menu-item.current-menu-item:not(.tlm-lang-switch) > .ct-menu-link,
.ct-header nav .menu-item.current_page_item:not(.tlm-lang-switch) > .ct-menu-link {
	/* Gold-ink on the light header: bright gold on cream is ~2:1. */
	color: var(--tlm-gold-ink);
}

.ct-header nav .menu-item.current-menu-item:not(.tlm-header-cta) > .ct-menu-link::after,
.ct-header nav .menu-item.current_page_item:not(.tlm-header-cta) > .ct-menu-link::after {
	transform: scaleX(1);
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) nav .menu-item.current-menu-item:not(.tlm-lang-switch) > .ct-menu-link,
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) nav .menu-item.current_page_item:not(.tlm-lang-switch) > .ct-menu-link {
	color: var(--tlm-gold);
}

/* Header search — the site has five destinations and a booking CTA, not
   a content library; a search trigger adds chrome without a real use
   case here. Hidden rather than removed from the header builder config,
   so re-enabling it is a one-line revert if that changes. */
.ct-header [data-id="search"] {
	display: none;
}

/* Cart icon removed site-wide (catalog-only mode — see
   inc/catalog-mode.php; the tlm-header-cart menu item itself was
   deleted, both languages). */

/* ---------------- Language switcher ----------------
   One control (.tlm-lang-switch): a single link holding both codes, the
   current one lit as a small pressed gold chip (same 3D-shadow language as
   the site's identity buttons — vb-btn in tlm-vibrant.css), the other as
   quiet ghost text beside it. It points at the other language. All shape
   lives on the fixed-height anchor, never the <li>, which stretches to the
   full header row height like every other nav item.

   The pill's own background/border is set explicitly for both header
   states (transparent-over-hero vs. the solid cream header) rather than a
   single translucent-white value — that value read fine over a photo but
   was almost invisible on the solid cream header (near-white border on
   near-white background). */

.ct-header .menu-item.tlm-lang-switch > .ct-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 32px;
	margin-inline-start: 0.6rem;
	padding: 4px;
	background: rgba(255, 253, 248, 0.12);
	border: 1px solid rgba(255, 253, 248, 0.4);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.tlm-v3-page .ct-header.tlm-v3-header--solid .menu-item.tlm-lang-switch > .ct-menu-link,
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .menu-item.tlm-lang-switch > .ct-menu-link {
	background: rgba(6, 50, 71, 0.05);
	border-color: rgba(6, 50, 71, 0.18);
}

.ct-header .menu-item.tlm-lang-switch .tlm-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 60, "WONK" 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	color: inherit;
	opacity: 0.62;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ct-header .menu-item.tlm-lang-switch .tlm-lang__opt.is-current {
	opacity: 1;
	background: linear-gradient(160deg, var(--vb-sun, #ffc94d), var(--vb-tangerine, #f59a3b));
	color: var(--vb-night, var(--tlm-navy-dark, #0b1f2a));
	box-shadow: 0 2px 0 rgba(27, 18, 48, 0.28);
}

.ct-header .menu-item.tlm-lang-switch > .ct-menu-link:hover {
	border-color: var(--vb-sun, var(--tlm-gold, #dca500));
	transform: translateY(-1px);
}

.ct-header .menu-item.tlm-lang-switch > .ct-menu-link:hover .tlm-lang__opt:not(.is-current) {
	opacity: 1;
}

.ct-header .menu-item.tlm-lang-switch > .ct-menu-link:active {
	transform: translateY(0);
}

.ct-header .menu-item.tlm-lang-switch > .ct-menu-link:active .tlm-lang__opt.is-current {
	box-shadow: 0 1px 0 rgba(27, 18, 48, 0.28);
	transform: translateY(1px);
}

.ct-header .menu-item.tlm-lang-switch > .ct-menu-link:focus-visible {
	outline: 2px solid var(--vb-sun, var(--tlm-gold-soft, #f0d78a));
	outline-offset: 2px;
}

/* The underline hover/active indicator is for plain text nav links only —
   the CTA and language switch are self-contained controls. */
.ct-header nav .menu-item.tlm-lang-switch > .ct-menu-link::after {
	content: none;
}

.ct-header .tlm-header-cta {
	margin-inline-start: 0.75rem;
	display: flex;
	align-items: center;
}

/* Restrained outline treatment (spec FR-003 / SC-002) — replaces the former
   solid-gold-filled block. Base rule is the solid/cream-header voice (navy
   outline on cream); the transparent-over-hero override below swaps it to a
   cream outline, since gold is an accent only, never a background fill.
   height/min-height/max-height !important: Blocksy's own main.min.css sets
   `.ct-menu-link { height: var(--menu-item-height, 100%); }` — this CTA link
   carries that same Blocksy class, and at equal (0,1,0) specificity loaded
   after this file, Blocksy's 100% was winning the cascade and stretching
   the button to the full ~78px header row height instead of a compact
   44-48px pill. */
.ct-header .tlm-header-cta > a {
	height: auto !important;
	min-height: 2.85rem;
	max-height: 3.2rem;
	align-self: center;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	color: var(--tlm-navy);
	border: 1.5px solid var(--tlm-navy);
	border-radius: 12px;
	padding: 0.6em 1.15em;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* The "small gold accent" the spec asks for — a short underline segment,
   never a fill. */
.ct-header .tlm-header-cta > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 1.1rem;
	height: 2px;
	background: var(--tlm-gold);
	transform: translateX(-50%);
}

.ct-header .tlm-header-cta > a:hover {
	background-color: var(--tlm-navy);
	color: var(--tlm-cream);
	border-color: var(--tlm-navy);
}

.ct-header .tlm-header-cta > a:focus-visible {
	background-color: var(--tlm-navy);
	color: var(--tlm-cream);
	border-color: var(--tlm-navy);
	outline: 2px solid var(--tlm-gold);
	outline-offset: 2px;
}

.ct-header .tlm-header-cta > a:active {
	background-color: var(--tlm-navy-dark);
	border-color: var(--tlm-navy-dark);
}

.ct-header .tlm-header-cta > a[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	color: var(--tlm-text-muted);
	border-color: var(--tlm-text-muted);
}

.ct-header .tlm-header-cta > a[aria-disabled="true"]::after {
	background: var(--tlm-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.ct-header .tlm-header-cta > a:hover {
		transform: translateY(-1px);
	}
}

/* Transparent-over-hero state: cream outline instead of navy, so the CTA
   reads against the photograph rather than disappearing into it. */
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) .tlm-header-cta > a {
	color: var(--tlm-cream);
	border-color: var(--tlm-cream);
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) .tlm-header-cta > a:hover,
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) .tlm-header-cta > a:focus-visible {
	background-color: var(--tlm-cream);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-cream);
	outline-color: var(--tlm-gold);
}

.ct-header .ct-header-search {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.ct-header .ct-header-search:hover {
	opacity: 1;
}

@media (max-width: 999px) {
	.ct-header .tlm-header-cta > a {
		padding: 0.6em 1.1em;
		font-size: 0.82rem;
		white-space: nowrap;
	}

	.ct-header img.default-logo {
		height: clamp(1.75rem, 1.4rem + 1vw, 2rem);
	}
}

/* ----------------------------------------------------------------
 * Botones y CTAs — sistema unificado
 * ---------------------------------------------------------------- */
.wp-block-button__link,
a.ct-button,
button:not(.wc-block-components-quantity-selector__button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	border-radius: var(--tlm-radius-organico);
	padding: 0.85em 1.85em;
	font-family: var(--tlm-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover,
	a.ct-button:hover {
		transform: translateY(-2px);
	}
}

.wp-block-button__link:hover,
a.ct-button:hover {
	box-shadow: 0 10px 22px rgba(201, 138, 0, 0.2);
}

.tlm-cta-primary .wp-block-button__link {
	background-color: var(--tlm-gold);
	color: var(--tlm-navy-dark);
	border: 2px solid transparent;
}

.tlm-cta-primary .wp-block-button__link:hover {
	background-color: var(--tlm-navy);
	color: var(--tlm-cream);
}

.tlm-cta-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--tlm-navy);
	border: 2px solid var(--tlm-navy);
}

.tlm-cta-secondary .wp-block-button__link:hover {
	background-color: var(--tlm-navy);
	color: var(--tlm-cream);
}

.tlm-on-dark .tlm-cta-secondary .wp-block-button__link,
.tlm-hero-scene .tlm-cta-secondary .wp-block-button__link {
	color: var(--tlm-cream);
	border-color: rgba(247, 242, 232, 0.6);
}

.tlm-on-dark .tlm-cta-secondary .wp-block-button__link:hover,
.tlm-hero-scene .tlm-cta-secondary .wp-block-button__link:hover {
	background-color: var(--tlm-cream);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-cream);
	box-shadow: none;
}

.tlm-on-dark .tlm-cta-primary .wp-block-button__link:hover,
.tlm-hero-scene .tlm-cta-primary .wp-block-button__link:hover,
.tlm-final-scene .tlm-cta-primary .wp-block-button__link:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------------------------
 * Separadores con forma organica
 * ---------------------------------------------------------------- */
.wp-block-separator {
	border: none;
	height: 14px;
	width: 120px;
	margin-inline: auto;
	background: var(--tlm-gold);
	-webkit-mask-image: radial-gradient(circle at 10px 7px, black 6px, transparent 7px);
	mask-image: radial-gradient(circle at 10px 7px, black 6px, transparent 7px);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 20px 14px;
	mask-size: 20px 14px;
}

/* ----------------------------------------------------------------
 * Shared honesty/status labels
 * ---------------------------------------------------------------- */
.tlm-source-note {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--tlm-text-muted);
	font-style: italic;
}

.tlm-manifest-list {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.95rem;
}

.tlm-manifest-list li {
	position: relative;
	padding-inline-start: 1.1rem;
}

.tlm-manifest-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tlm-gold);
}

.tlm-family-roles {
	margin-top: 1rem;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--tlm-text-muted);
}

.tlm-story-today__invitation {
	margin-top: 1.25rem;
	font-family: var(--tlm-font-display);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--tlm-navy);
}

/* ==================================================================
 * 1 — HERO SCENE — immersive full-bleed opening, bottom-left anchored
 * ================================================================== */
.tlm-hero-scene.wp-block-cover {
	/* The sticky header sits above this section rather than floating
	   over it, so the hero's own target height is trimmed below a full
	   viewport to keep the primary CTA close to the fold — a literal
	   100vh hero stacked below a ~92px header pushes the CTA well past
	   the first screen. */
	min-height: min(84svh, 46rem) !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	margin: 0 !important;
	border-radius: 0;
}

.tlm-hero-scene__scrim {
	background:
		linear-gradient(0deg, rgba(0, 42, 71, 0.92) 0%, rgba(0, 42, 71, 0.6) 32%, rgba(0, 42, 71, 0.08) 58%, transparent 72%),
		linear-gradient(90deg, rgba(0, 42, 71, 0.55) 0%, rgba(0, 42, 71, 0.05) 42%, transparent 65%) !important;
}

.tlm-hero-scene__content {
	position: relative;
	z-index: 2;
	max-width: 46rem;
	width: 100%;
	padding: clamp(1.5rem, 5vw, 3.5rem);
	margin: 0;
	text-align: left;
}

.tlm-hero-scene__marker {
	font-family: var(--tlm-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tlm-gold);
	margin: 0 0 var(--tlm-gap-sm);
}

.tlm-hero-scene__title {
	color: var(--tlm-cream);
	margin: 0;
	font-size: clamp(2.35rem, 1rem + 4.2vw, 4rem);
	line-height: 1.05;
}

.tlm-hero-scene__lede {
	color: var(--tlm-cream-soft);
	max-width: 30rem;
	font-size: 1.1rem;
	line-height: 1.55;
	margin: var(--tlm-gap-sm) 0 0;
}

.tlm-hero-scene__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: var(--tlm-gap-sm) 0 var(--tlm-gap-md);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tlm-cream-soft);
}

.tlm-hero-scene__facts li {
	position: relative;
	padding-inline: 0 1.1rem;
	margin-inline-end: 1.1rem;
	border-right: 1px solid rgba(247, 242, 232, 0.25);
}

.tlm-hero-scene__facts li:last-child {
	padding-inline-end: 0;
	margin-inline-end: 0;
	border-right: none;
}

.tlm-hero-scene__ctas {
	display: flex;
	align-items: center;
	gap: var(--tlm-gap-md);
	flex-wrap: wrap;
}

.tlm-hero-scene .tlm-cta-secondary .wp-block-button__link {
	border: none;
	padding: 0.5em 0;
	min-height: 0;
	text-decoration: underline;
	text-decoration-color: rgba(247, 242, 232, 0.45);
	text-underline-offset: 4px;
	font-weight: 600;
}

.tlm-hero-scene .tlm-cta-secondary .wp-block-button__link:hover {
	background: none;
	color: var(--tlm-gold);
	text-decoration-color: var(--tlm-gold);
	box-shadow: none;
	transform: none;
}

@media (max-width: 767px) {
	.tlm-hero-scene.wp-block-cover {
		min-height: min(88svh, 42rem) !important;
	}

	.tlm-hero-scene__content {
		padding: 1.5rem;
	}

	.tlm-hero-scene__facts {
		flex-direction: column;
		gap: 0.4rem;
	}

	.tlm-hero-scene__facts li {
		border-right: none;
		padding-inline-end: 0;
		margin-inline-end: 0;
	}
}

/* ==================================================================
 * 2 — FACT RAIL — a field-note strip pulled up over the hero's edge
 * ================================================================== */
.tlm-fact-rail-section {
	position: relative;
	z-index: 3;
	margin-top: clamp(-3.5rem, -5vw, -2rem);
	padding-inline: var(--tlm-section-px);
}

.tlm-fact-rail {
	max-width: 58rem;
	margin-inline: auto;
	background: var(--tlm-surface);
	border-radius: var(--tlm-radius-organico-sm);
	box-shadow: 0 18px 40px rgba(0, 56, 95, 0.18);
	padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.tlm-fact-rail__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tlm-navy-soft);
}

.tlm-fact-rail__list li {
	padding-inline: 1.25rem;
	border-right: 1px solid rgba(0, 56, 95, 0.15);
}

.tlm-fact-rail__list li:first-child {
	padding-inline-start: 0;
}

.tlm-fact-rail__list li:last-child {
	padding-inline-end: 0;
	border-right: none;
}

@media (max-width: 640px) {
	.tlm-fact-rail-section {
		margin-top: -1.5rem;
	}

	.tlm-fact-rail__list {
		justify-content: flex-start;
		gap: 0.6rem 0;
	}

	.tlm-fact-rail__list li {
		padding-inline: 0 1rem;
		border-right: none;
		flex: 0 0 50%;
	}
}

/* ==================================================================
 * 3 — EDITORIAL MANIFESTO — asymmetric statement + copy + breakout detail
 * ================================================================== */
.tlm-manifesto {
	padding-block: var(--tlm-section-py);
}

.tlm-manifesto__grid {
	align-items: start;
	column-gap: clamp(2rem, 6vw, 5rem);
}

.tlm-manifesto__statement h2 {
	text-wrap: balance;
	max-width: 16ch;
}

.tlm-manifesto__detail {
	margin-top: var(--tlm-gap-lg);
	max-width: 20rem;
}

.tlm-manifesto__detail img {
	border-radius: var(--tlm-radius-organico);
	box-shadow: 0 18px 34px rgba(0, 56, 95, 0.14);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.tlm-manifesto__copy {
	padding-top: clamp(0.5rem, 2vw, 1rem);
}

.tlm-manifesto__copy p:first-child {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--tlm-text-muted);
	margin: 0;
}

.tlm-manifesto__note {
	margin-top: var(--tlm-gap-md);
	font-family: var(--tlm-font-display);
	font-style: italic;
	color: var(--tlm-navy);
	border-left: 2px solid var(--tlm-gold);
	padding-inline-start: 0.9rem;
}

@media (max-width: 767px) {
	.tlm-manifesto__copy {
		margin-top: var(--tlm-gap-md);
	}
}

/* ==================================================================
 * 4 — FIELD JOURNAL — five structurally distinct chapters
 * ================================================================== */
.tlm-journal {
	padding-block: var(--tlm-section-py);
	background: var(--tlm-surface);
}

.tlm-journal__kicker {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold);
	margin: 0 0 var(--tlm-gap-sm);
}

.tlm-journal > .wp-block-heading {
	max-width: 20ch;
}

.tlm-journal__lede {
	max-width: 40ch;
	margin-top: 0.75rem;
	color: var(--tlm-text-muted);
	font-size: 1.05rem;
}

.tlm-journal__capstone {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid rgba(0, 56, 95, 0.14);
	max-width: 34rem;
	font-family: var(--tlm-font-display);
	font-size: 1.2rem;
	color: var(--tlm-navy);
}

.tlm-journal__chapters {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 5rem);
}

.tlm-chapter {
	position: relative;
}

.tlm-chapter__stage {
	margin-bottom: 0.85rem;
}

.tlm-chapter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 2px solid var(--tlm-gold);
	font-family: var(--tlm-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--tlm-gold);
	background: var(--tlm-surface);
	box-shadow: 0 6px 16px rgba(201, 138, 0, 0.18);
}

.tlm-chapter__number {
	font-family: var(--tlm-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tlm-text-muted);
	margin: 0 0 0.4rem;
}

.tlm-chapter img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--tlm-radius-organico);
	box-shadow: 0 18px 34px rgba(0, 56, 95, 0.14);
}

/* Chapter 01 — opening: full-bleed landscape, caption runs beneath full width */
.tlm-chapter--opening {
	display: flex;
	flex-direction: column;
	gap: var(--tlm-gap-md);
}

.tlm-chapter--opening .tlm-chapter__media {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.tlm-chapter--opening .tlm-chapter__media img {
	aspect-ratio: 21 / 9;
	border-radius: 0;
	box-shadow: none;
}

.tlm-chapter--opening .tlm-chapter__text {
	max-width: 34rem;
}

/* Chapter 02 — detail: small offset image, text takes most of the width */
.tlm-chapter--detail {
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.tlm-chapter--detail .tlm-chapter__media img {
	aspect-ratio: 1 / 1;
}

/* Chapter 03 — diptych: two images side by side, text below spanning both */
.tlm-chapter--diptych .tlm-chapter__media--diptych {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--tlm-gap-md);
}

.tlm-chapter--diptych .tlm-chapter__media--diptych img {
	aspect-ratio: 4 / 3;
}

.tlm-chapter--diptych .tlm-chapter__text {
	margin-top: var(--tlm-gap-md);
	max-width: 34rem;
}

/* Chapter 04 — offset: image right with a layered offset panel, text left */
.tlm-chapter--offset {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.tlm-chapter--offset .tlm-chapter__media {
	order: 2;
	position: relative;
}

.tlm-chapter--offset .tlm-chapter__media::before {
	content: "";
	position: absolute;
	top: 18px;
	left: -18px;
	right: 18px;
	bottom: -18px;
	background: var(--tlm-cream-soft);
	border-radius: var(--tlm-radius-organico);
	z-index: -1;
}

.tlm-chapter--offset .tlm-chapter__media img {
	aspect-ratio: 4 / 5;
}

.tlm-chapter--offset .tlm-chapter__text {
	order: 1;
}

/* Chapter 05 — closing: wide letterboxed conclusion with a gold rule */
.tlm-chapter--closing .tlm-chapter__media img {
	aspect-ratio: 21 / 8;
}

.tlm-chapter--closing .tlm-chapter__text {
	margin-top: var(--tlm-gap-md);
	padding-top: var(--tlm-gap-md);
	border-top: 2px solid var(--tlm-gold);
	max-width: 30rem;
}

@media (max-width: 767px) {
	.tlm-chapter--detail,
	.tlm-chapter--offset {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-chapter--offset .tlm-chapter__media,
	.tlm-chapter--offset .tlm-chapter__text {
		order: initial;
	}

	.tlm-chapter--diptych .tlm-chapter__media--diptych {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-chapter--opening .tlm-chapter__media img {
		aspect-ratio: 4 / 3;
	}

	.tlm-chapter--closing .tlm-chapter__media img {
		aspect-ratio: 4 / 3;
	}
}

/* ==================================================================
 * 5 — TOUR DOSSIER — the focused booking moment
 * A navy field with the essentials on the left and what is included on
 * the right, divided by one hairline. No seal, no photo veil, no chips.
 * ================================================================== */
.tlm-dossier-section {
	position: relative;
	background: var(--tlm-navy-dark);
	padding-block: var(--tlm-section-py);
}

.tlm-dossier {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(2.5rem, 5vw, 5rem);
}

.tlm-dossier__stub {
	padding-right: clamp(1.5rem, 3vw, 2.5rem);
	border-right: 1px solid rgba(247, 242, 232, 0.22);
}

.tlm-dossier__stub .wp-block-heading,
.tlm-dossier__stub p {
	color: var(--tlm-cream);
}

.tlm-dossier__label,
.tlm-dossier__heading {
	margin: 0 0 var(--tlm-gap-sm);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--tlm-gold);
}

.tlm-dossier__stub .wp-block-heading {
	margin: 0 0 var(--tlm-space-group);
}

.tlm-dossier__price {
	margin: var(--tlm-gap-md) 0 var(--tlm-gap-sm);
	font-family: var(--tlm-font-display);
	font-size: 1.25rem;
}

.tlm-dossier__times {
	margin: 0 0 var(--tlm-gap-md);
	padding-top: var(--tlm-gap-sm);
	border-top: 1px solid rgba(247, 242, 232, 0.22);
	font-size: 0.95rem;
	color: var(--tlm-cream-soft);
}

.tlm-dossier__manifest {
	color: var(--tlm-cream-soft);
}

.tlm-dossier__manifest .tlm-manifest-list {
	color: var(--tlm-cream-soft);
	column-count: 2;
	column-gap: clamp(1.5rem, 3vw, 3rem);
}

.tlm-dossier__manifest .tlm-manifest-list li::before {
	background: var(--tlm-gold);
}

.tlm-dossier__heading--bring {
	margin-top: var(--tlm-gap-lg);
	padding-top: var(--tlm-gap-md);
	border-top: 1px solid rgba(247, 242, 232, 0.22);
}

.tlm-dossier__bring {
	max-width: 46ch;
	margin: 0;
	color: var(--tlm-cream-soft);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.tlm-dossier {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-dossier__stub {
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid rgba(247, 242, 232, 0.22);
		padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
	}

	.tlm-dossier__manifest .tlm-manifest-list {
		column-count: 1;
	}
}

/* ==================================================================
 * 6 — PHOTOGRAPHIC INTERLUDE — restrained magazine spread
 * ================================================================== */
.tlm-interlude {
	padding-block: var(--tlm-section-py);
}

.tlm-interlude__kicker {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold-ink); /* --tlm-gold measures ~2.6:1 on cream; see :root comment */
	text-align: center;
	margin: 0 0 var(--tlm-gap-lg);
}

.tlm-interlude__spread {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: minmax(160px, 26vw) minmax(160px, 26vw);
	gap: var(--tlm-gap-md);
}

.tlm-interlude__spread img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--tlm-radius-organico-sm);
	display: block;
}

.tlm-interlude__dominant {
	grid-column: 1 / 4;
	grid-row: 1 / 3;
}

.tlm-interlude__dominant img {
	border-radius: var(--tlm-radius-organico);
	box-shadow: 0 24px 48px rgba(0, 56, 95, 0.2);
}

.tlm-interlude__caption {
	grid-column: 4 / 7;
	grid-row: 1 / 2;
	align-self: end;
	margin: 0;
	font-family: var(--tlm-font-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--tlm-navy);
	line-height: 1.4;
}

.tlm-interlude__wide {
	grid-column: 4 / 6;
	grid-row: 2 / 3;
}

.tlm-interlude__tall {
	grid-column: 6 / 7;
	grid-row: 2 / 3;
}

.tlm-interlude__small {
	display: none;
}

/* Wider canvas: give the right-hand cluster its own 2x2 rhythm instead
   of stretching the caption across the full remaining width — this is
   also what fixes an overlap the narrower layout doesn't have room for
   (the caption and the "tall" image no longer contest the same cell). */
@media (min-width: 1100px) {
	.tlm-interlude__spread {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.tlm-interlude__dominant {
		grid-column: 1 / 5;
	}

	.tlm-interlude__caption {
		grid-column: 5 / 7;
		grid-row: 1 / 2;
		align-self: center;
	}

	.tlm-interlude__small {
		display: block;
		grid-column: 7 / 9;
		grid-row: 1 / 2;
	}

	.tlm-interlude__wide {
		grid-column: 5 / 7;
		grid-row: 2 / 3;
	}

	.tlm-interlude__tall {
		grid-column: 7 / 9;
		grid-row: 2 / 3;
	}
}

@media (max-width: 767px) {
	.tlm-interlude__spread {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 0.75rem;
	}

	.tlm-interlude__dominant {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.tlm-interlude__dominant img {
		aspect-ratio: 4 / 3;
	}

	.tlm-interlude__caption {
		grid-column: 1 / 3;
		padding: 0.25rem 0 0.5rem;
	}

	.tlm-interlude__wide,
	.tlm-interlude__tall {
		grid-column: span 1;
		grid-row: auto;
	}

	.tlm-interlude__wide img,
	.tlm-interlude__tall img {
		aspect-ratio: 1 / 1;
	}
}

/* ==================================================================
 * 7 — FAMILY SCENE — authored documentary composition (spec FR-021/022)
 * ================================================================== */
/* Family scene — a navy field with the founders' photograph shown at its
   natural 3:2 shape so every face stays inside the frame (the previous
   half-viewport tall crop sliced through the people at the edge). The
   text column keeps a readable measure; both sit on the shared content
   edge like every other section. */
.tlm-family-scene {
	background: var(--tlm-navy-dark);
	padding-block: var(--tlm-section-py);
}

.tlm-family-scene__inner {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.tlm-family-scene__photo {
	margin: 0;
	position: sticky;
	top: calc(var(--tlm-v3-header-h, 5.5rem) + 2rem);
}

.tlm-family-scene__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 2px;
}

.tlm-family-scene__body {
	max-width: 34rem;
}

.tlm-family-scene__body .wp-block-heading {
	margin: 0 0 var(--tlm-space-group);
}

.tlm-family-scene__body .wp-block-heading,
.tlm-family-scene__body p {
	color: var(--tlm-cream);
}

.tlm-family-scene__lede {
	font-family: var(--tlm-font-display);
	font-size: 1.3rem;
	line-height: 1.45;
}

.tlm-family-roles {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tlm-cream-soft) !important;
}

.tlm-family-scene__body .wp-block-buttons {
	margin-top: var(--tlm-space-action);
}

.tlm-family-scene__note {
	margin-top: var(--tlm-gap-lg);
	padding-top: var(--tlm-gap-md);
	border-top: 1px solid rgba(247, 242, 232, 0.2);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.9rem;
}

.tlm-family-scene__note p {
	color: var(--tlm-cream-soft) !important;
}

@media (max-width: 900px) {
	.tlm-family-scene__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-family-scene__body {
		max-width: none;
	}

	.tlm-family-scene__photo {
		position: static;
	}
}

/* ==================================================================
 * 8 — PLAN YOUR VISIT — practical facts + native FAQ
 * Open typography, no containers: the facts are a definition list
 * divided by hairlines and the questions are a hairline accordion.
 * ================================================================== */
.tlm-plan-visit {
	padding-block: var(--tlm-section-py);
}

.tlm-plan-visit__container {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
}

.tlm-plan-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.tlm-plan-visit__facts {
	position: sticky;
	top: calc(var(--tlm-v3-header-h, 5.5rem) + 2rem);
}

.tlm-plan-visit__title {
	margin: 0 0 var(--tlm-space-group);
	font-size: clamp(2rem, 3.2vw, 3rem);
	line-height: 1.12;
}

.tlm-plan-visit__intro {
	max-width: 42ch;
	margin: 0;
	color: var(--tlm-text-muted);
}

.tlm-plan-visit__questions details {
	margin: 0;
	padding: 0;
	border-top: var(--tlm-border);
}

.tlm-plan-visit__questions details:last-child {
	border-bottom: var(--tlm-border);
}

.tlm-plan-visit__questions summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-block: 1.4rem;
	font-family: var(--tlm-font-display);
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--tlm-navy);
	cursor: pointer;
	list-style: none;
}

.tlm-plan-visit__questions summary::-webkit-details-marker {
	display: none;
}

.tlm-plan-visit__questions summary::after {
	content: "+";
	flex-shrink: 0;
	width: 2rem;
	text-align: center;
	font-family: var(--tlm-font-body);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--tlm-gold-ink);
}

.tlm-plan-visit__questions details[open] summary::after {
	content: "\2212";
}

.tlm-plan-visit__questions summary:hover {
	color: var(--tlm-gold-ink);
}

.tlm-plan-visit__questions .tlm-faq-answer {
	max-width: 60ch;
	margin: 0 0 1.4rem;
	color: var(--tlm-text);
	font-size: 1rem;
	line-height: 1.7;
}

@media (max-width: 900px) {
	.tlm-plan-visit__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-plan-visit__facts {
		position: static;
	}
}

/* ==================================================================
 * 9 — CHOCOLATE TEASER — restrained secondary section
 * ================================================================== */
.tlm-teaser {
	padding-block: calc(var(--tlm-section-py) * 0.85);
	background: var(--tlm-cream-soft);
}

/* Hand-authored grid (was wp:columns) so the photo can break the content
   container's left edge the same way .tlm-family-scene's portrait does —
   a boxed 38/62 wp:columns row was exactly the "half-image/half-text
   card" structure the spec asks to retire. */
.tlm-teaser__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: stretch;
}

.tlm-teaser__photo {
	margin: 0;
	min-height: 22rem;
}

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

.tlm-teaser__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 4vw, 3rem);
	padding-inline-start: clamp(2.5rem, 5vw, 4rem);
	padding-inline-end: max(calc((100vw - var(--tlm-container-wide)) / 2), var(--tlm-section-px));
}

@media (max-width: 767px) {
	.tlm-teaser__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-teaser__photo {
		min-height: 18rem;
	}

	.tlm-teaser__copy {
		padding-inline-start: clamp(1.5rem, 5vw, 2.5rem);
	}
}

/* Draw-once progress line under the numbered sequence (spec: "visible
   progress animation") — same technique as the filmstrip/footer/contact
   route reveals: final state (full width) is the base CSS state; JS only
   adds the delayed grow-from-zero under prefers-reduced-motion:
   no-preference. */
.tlm-teaser__line {
	margin: 0.25rem 0 var(--tlm-gap-md);
	height: 2px;
	max-width: 12rem;
	background: rgba(0, 56, 95, 0.12);
	overflow: hidden;
}

.tlm-teaser__line-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--tlm-gold);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-teaser__line-fill {
		transform: scaleX(0);
		transition: transform 900ms var(--tlm-v3-ease-out);
	}

	.tlm-teaser__line.is-in .tlm-teaser__line-fill {
		transform: scaleX(1);
	}
}

.tlm-teaser__kicker {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-navy-soft);
	margin: 0 0 var(--tlm-gap-sm);
}

/* Visible process sequence (spec FR-023) — five stages tied to the
   photograph, not just descriptive prose. */
.tlm-teaser__sequence {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(0.75rem, 2vw, 1.5rem);
	list-style: none;
	margin: var(--tlm-gap-md) 0;
	padding: 0;
	border-top: 1px solid rgba(0, 56, 95, 0.15);
	border-bottom: 1px solid rgba(0, 56, 95, 0.15);
	padding-block: 0.85rem;
}

.tlm-teaser__sequence li {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tlm-navy-soft);
}

.tlm-teaser__sequence-num {
	font-family: var(--tlm-font-display);
	font-weight: 700;
	color: var(--tlm-gold-ink); /* --tlm-gold measures ~2.5:1 on cream-soft; see :root comment */
}

.tlm-teaser__copy .wp-block-heading {
	color: var(--tlm-navy-soft);
}

.tlm-teaser__copy .tlm-cta-secondary .wp-block-button__link {
	color: var(--tlm-navy-soft);
	border-color: var(--tlm-navy-soft);
}

.tlm-teaser__empty {
	padding: 1.25rem clamp(1.25rem, 4vw, 2rem);
	background: var(--tlm-surface);
	border-radius: var(--tlm-radius-organico-sm);
	color: var(--tlm-text-muted);
	font-size: 0.92rem;
	margin-bottom: var(--tlm-gap-md);
}

.tlm-teaser ul.products {
	margin-bottom: var(--tlm-gap-md) !important;
}

.tlm-teaser ul.products li.product {
	box-shadow: none;
}

/* ==================================================================
 * 10 — FINAL SCENE — mounted-photograph closing, centered composition
 * ================================================================== */
.tlm-final-scene {
	padding-block: var(--tlm-section-py);
}

.tlm-final-scene__frame {
	max-width: var(--tlm-container-wide);
	margin-inline: auto;
	padding: clamp(0.5rem, 1.5vw, 1rem);
	background: var(--tlm-surface);
	border-radius: var(--tlm-radius-organico);
	box-shadow: 0 24px 60px rgba(0, 56, 95, 0.16);
}

.tlm-final-scene__cover.wp-block-cover {
	min-height: clamp(22rem, 46vw, 32rem);
	align-items: center !important;
	justify-content: center !important;
	border-radius: calc(var(--tlm-radius-organico) - 6px);
	overflow: hidden;
}

.tlm-final-scene__wash {
	background: radial-gradient(ellipse at center, rgba(0, 42, 71, 0.35) 0%, rgba(0, 42, 71, 0.78) 100%) !important;
}

.tlm-final-scene__cover .wp-block-cover__inner-container {
	max-width: 30rem;
	text-align: center;
}

.tlm-final-scene__marker {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tlm-gold);
	margin: 0 0 var(--tlm-gap-sm);
}

.tlm-final-scene .wp-block-heading {
	color: var(--tlm-cream);
}

.tlm-final-scene__sub {
	color: var(--tlm-cream-soft);
	margin-bottom: var(--tlm-gap-lg);
}

/* ==================================================================
 * Footer — two-band editorial close (full macrostructure replacement;
 * the former 3-column-grid-inside-a-navy-rectangle footer no longer
 * renders anywhere below). Band 1: brand-closing statement (60%) +
 * compact booking action (40%). Band 2: one compact rail — copyright,
 * flat unnumbered nav, social + back-to-top. See tlm_child_footer_
 * brand_markup() / _action_markup() / _rail_markup() in functions.php.
 * ================================================================== */
.ct-footer {
	background: var(--tlm-navy-dark) !important; /* !important: overrides Blocksy's own [data-footer*="type-1"] .ct-footer rule using --theme-palette-color-6, a slot outside this theme's override set */
	color: rgba(247, 242, 232, 0.88);
	border-top: 2px solid var(--tlm-gold);
	position: relative;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * BAND 1 — brand closing (LEFT ~60%) + action (RIGHT ~40%)
 * ------------------------------------------------------------------ */
.ct-footer [data-row="top"] > .ct-container {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	max-width: 1280px;
	padding-inline: clamp(2rem, 4vw, 3.5rem);
	/* Asymmetric, both still close to the spec's 48px floor — the hard
	   310-390px total-height acceptance target takes priority over the
	   padding sub-range once both can't be satisfied simultaneously. */
	padding-top: 2.75rem;
	padding-bottom: 2rem;
}

.tlm-footer-close {
	position: relative;
}

/* The one restrained original visual detail (spec: "no more than ~15%
   of the footer") — a thin hand-drawn cacao-vine line (pod -> bean ->
   bar, three marks) sitting above the brand statement as a quiet
   flourish, not a standalone graphic with its own caption. Low-opacity
   gold on navy; never overlaps the statement's own text glyphs, so
   contrast is unaffected. */
.tlm-footer-vine {
	display: block;
	height: 1.5rem;
	width: auto;
	margin-bottom: 0.6rem;
	color: var(--tlm-gold);
	opacity: 0.55;
}

.tlm-footer-close__logo {
	/* 260-320px desktop per spec. */
	width: clamp(16.25rem, 20vw, 20rem);
	height: auto;
	margin-bottom: 0.6rem;
	/* Same real horizontal wordmark file as the header (attachment 52,
	   naturally dark/grey) rendered white via CSS filter — the same
	   technique the header's transparent-over-hero state already uses,
	   not a second uploaded/recolored asset. */
	filter: brightness(0) invert(1);
}

.tlm-footer-close__statement {
	margin: 0 0 0.4rem;
	/* No max-width cap below the column's own width — an earlier pass
	   capped this at 34rem while the column itself renders ~40rem wide,
	   which forced an unnecessary 3rd wrapped line. */
	max-width: 100%;
	font-family: var(--tlm-font-display);
	font-style: normal;
	font-weight: 700;
	/* 32-46px desktop per spec, kept toward the floor so the sentence
	   wraps to 2 lines in the ~60%-wide column instead of 3-4. */
	font-size: clamp(2rem, 1.6rem + 1vw, 2.25rem);
	line-height: 1.16;
	color: var(--tlm-cream);
}

.tlm-footer-close__support {
	margin: 0;
	max-width: 34rem;
	font-size: 0.98rem;
	color: rgba(247, 242, 232, 0.78);
}

.tlm-footer-action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding-top: 0;
}

.tlm-footer-action__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tlm-gold);
	color: var(--tlm-navy-dark);
	border: 1.5px solid var(--tlm-gold);
	border-radius: 10px;
	/* 44-48px per spec, never full-width on desktop. */
	min-height: 2.75rem;
	width: fit-content;
	padding: 0.6em 1.5em;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tlm-footer-action__cta:hover,
.tlm-footer-action__cta:focus-visible {
	background: var(--tlm-cream);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-cream);
}

.tlm-footer-action__cta:focus-visible {
	outline: 2px solid var(--tlm-cream);
	outline-offset: 3px;
}

.tlm-footer-action__whatsapp {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--tlm-cream);
	text-decoration: none;
	border-bottom: 1px solid rgba(247, 242, 232, 0.35);
	padding-bottom: 0.1em;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tlm-footer-action__whatsapp:hover,
.tlm-footer-action__whatsapp:focus-visible {
	color: var(--tlm-gold);
	border-color: var(--tlm-gold);
}

.tlm-footer-action__contact {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	list-style: none;
	padding: 0;
	margin: 0.15rem 0 0;
}

.tlm-footer-action__contact a {
	font-size: 0.92rem;
	color: rgba(247, 242, 232, 0.85);
	text-decoration: none;
	border-bottom: 1px solid rgba(247, 242, 232, 0.22);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tlm-footer-action__contact a:hover,
.tlm-footer-action__contact a:focus-visible {
	color: var(--tlm-gold);
	border-color: var(--tlm-gold);
}

.tlm-footer-action__location {
	margin: 0.1rem 0 0;
	font-size: 0.85rem;
	color: rgba(247, 242, 232, 0.7);
}

/* Hidden-until-revealed state lives here, not as an unconditional base
   rule — with JS disabled (and no reduced-motion preference) .is-in never
   arrives, so the drawn line and statement must default to fully visible;
   only this enhancement layer is allowed to start them hidden. */
@media (prefers-reduced-motion: no-preference) {
	.tlm-footer-vine__path {
		stroke-dasharray: 480;
		stroke-dashoffset: 480;
		transition: stroke-dashoffset 1s var(--tlm-v3-ease-out, ease-out);
	}

	.tlm-footer-vine__mark {
		opacity: 0;
		transition: opacity 0.3s ease-out;
		transition-delay: 0.8s;
	}

	.tlm-footer-vine.is-in .tlm-footer-vine__path {
		stroke-dashoffset: 0;
	}

	.tlm-footer-vine.is-in .tlm-footer-vine__mark {
		opacity: 1;
	}

	.tlm-footer-close__logo,
	.tlm-footer-close__statement {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.55s var(--tlm-v3-ease-out, ease-out), transform 0.55s var(--tlm-v3-ease-out, ease-out);
	}

	.tlm-footer-close__logo.is-in,
	.tlm-footer-close__statement.is-in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tlm-footer-vine__path {
		stroke-dashoffset: 0;
	}

	.tlm-footer-vine__mark {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------
 * BAND 2 — compact bottom rail: copyright (left) / flat nav (center) /
 * social + back-to-top (right). Three physical footer_placements
 * bottom-row columns (copyright, menu, widget-area-3).
 * ------------------------------------------------------------------ */
.ct-footer [data-row="bottom"] {
	border-top: 1px solid rgba(247, 242, 232, 0.16);
}

/* Grid, not flex+wrap: copyright / nav / social are DOM order 1/2/3 —
   grid columns place them left / true-center / right and never reflow
   into extra rows the way a wrapped flex row did (that wrap was what
   pushed the rail past its 60-72px target). */
.ct-footer [data-row="bottom"] > .ct-container {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1.5rem;
	max-width: 1280px;
	padding-inline: clamp(2rem, 4vw, 3.5rem);
	/* 60-72px total rail height per spec. */
	padding-block: 1rem;
}

/* !important: Blocksy's own main.min.css also targets .ct-footer-copyright
   with color: var(--theme-text-color) (dark navy) and loads after this
   stylesheet, winning the cascade at equal specificity. */
.ct-footer-copyright {
	padding-block: 0;
	font-size: 0.8rem;
	white-space: nowrap;
	color: rgba(247, 242, 232, 0.68) !important;
}

.ct-footer-copyright a {
	color: rgba(247, 242, 232, 0.85) !important;
}

/* Flat, unnumbered, single horizontal row — no "Your Visit, In Order"
   label, no counter-based 01-06 numbering. Truly centered in the rail's
   middle grid column. */
.ct-footer #footer-menu {
	justify-self: center;
	min-width: 0;
}

.ct-footer #footer-menu .menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.65rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* The nav menu's own "Reserve Your Tour" item stays in the DOM (its URL
   keeps syncing via tlm_child_sync_header_cta_url()) but is no longer
   shown here — Band 1's action zone carries the one visible reservation
   action, so the footer doesn't show it twice. !important: Blocksy's own
   menu CSS sets display:flex on every .menu-item at equal specificity,
   loaded after this file, and otherwise wins the tie. */
.ct-footer .tlm-footer-cta {
	display: none !important;
}

.ct-footer #footer-menu .ct-menu-link {
	position: relative;
	display: inline-flex;
	white-space: nowrap;
	color: rgba(247, 242, 232, 0.85);
	font-family: var(--tlm-font-body);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ct-footer #footer-menu .ct-menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.25rem;
	height: 2px;
	background: var(--tlm-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.ct-footer #footer-menu .ct-menu-link:hover,
.ct-footer #footer-menu .ct-menu-link:focus-visible {
	color: var(--tlm-gold);
}

.ct-footer #footer-menu .ct-menu-link:hover::after,
.ct-footer #footer-menu .ct-menu-link:focus-visible::after {
	transform: scaleX(1);
}

.tlm-footer-rail-social {
	order: 3;
	display: flex;
	align-items: center;
	white-space: nowrap;
	gap: 1rem;
}

.tlm-footer-rail-social a {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(247, 242, 232, 0.8);
	text-decoration: none;
	border-bottom: 1px solid rgba(247, 242, 232, 0.25);
	padding-bottom: 0.15em;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tlm-footer-rail-social a:hover,
.tlm-footer-rail-social a:focus-visible {
	color: var(--tlm-gold);
	border-color: var(--tlm-gold);
}

.tlm-footer-back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

@media (max-width: 767px) {
	/* Mobile order per spec: logo -> statement -> support -> booking ->
	   whatsapp/email -> nav -> social -> copyright/back-to-top rail.
	   Intentional left alignment throughout, not centered. Target
	   520-620px total footer height. */
	.ct-footer [data-row="top"] > .ct-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.1rem;
		padding-inline: 1.25rem;
		padding-block: 1.5rem;
	}

	.tlm-footer-vine {
		height: 1.15rem;
		width: auto;
		margin-bottom: 0.6rem;
	}

	.tlm-footer-close__logo {
		/* 200-240px per spec. */
		width: 12.5rem;
		margin-bottom: 0.6rem;
	}

	.tlm-footer-close__statement {
		font-size: clamp(1.3rem, 1.05rem + 1.6vw, 1.5rem);
		line-height: 1.2;
		max-width: 100%;
	}

	.tlm-footer-close__support {
		font-size: 0.92rem;
	}

	.tlm-footer-action {
		padding-top: 0;
		gap: 0.6rem;
	}

	.tlm-footer-action__contact {
		gap: 0.2rem;
	}

	.tlm-footer-action__cta {
		width: 100%;
	}

	.ct-footer [data-row="bottom"] > .ct-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.65rem;
		padding-inline: 1.25rem;
		padding-block: 1rem;
	}

	.ct-footer #footer-menu {
		justify-self: unset;
	}

	.ct-footer #footer-menu .menu {
		justify-content: flex-start;
		gap: 0.4rem 1.1rem;
	}

	.tlm-footer-rail-social {
		width: 100%;
		justify-content: space-between;
	}
}

/* ----------------------------------------------------------------
 * WooCommerce — global tokens (buttons, price color, notices) used
 * across the shop archive, single product pages, cart, checkout, and
 * my-account — kept here rather than in tlm-shop.css since tlm-shop.css
 * only loads on the Shop archive / category pages.
 * ---------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce .price {
	color: var(--tlm-navy);
	font-family: var(--tlm-font-body);
	font-weight: 700;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--tlm-navy);
	color: var(--tlm-cream);
	border-radius: 10px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--tlm-navy-dark);
	color: var(--tlm-cream);
}

.woocommerce-info {
	border-top-color: var(--tlm-gold);
	border-radius: 8px;
}

/* ----------------------------------------------------------------
 * WooCommerce — forms, tables & account screens (cart, checkout,
 * my-account). Restrained editorial treatment: the tokens already
 * used for buttons/prices above, extended to inputs, focus states,
 * and the plain HTML tables Woo renders for cart/order contents —
 * WooCommerce markup only, no template overrides.
 * ---------------------------------------------------------------- */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	font-family: var(--tlm-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tlm-navy);
}

.woocommerce .woocommerce-Input,
.woocommerce-page .woocommerce-Input,
.woocommerce table.shop_table td select,
.woocommerce-page table.shop_table td select {
	font-family: var(--tlm-font-body);
	border: 1px solid rgba(0, 56, 95, 0.25);
	border-radius: 8px;
	background: var(--tlm-surface);
	color: var(--tlm-text);
	padding: 0.65em 0.85em;
}

.woocommerce .woocommerce-Input:focus-visible,
.woocommerce-page .woocommerce-Input:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 1px;
	border-color: var(--tlm-navy);
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: 1px solid rgba(0, 56, 95, 0.14);
	border-radius: 10px;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
	font-family: var(--tlm-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tlm-navy);
	background: var(--tlm-cream-soft);
}

.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
	border-top-color: rgba(0, 56, 95, 0.1);
}

.woocommerce-checkout #payment,
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--tlm-cream-soft);
	border: 1px solid rgba(0, 56, 95, 0.14);
	border-radius: 10px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* The payment-methods list and its "no gateway configured yet" notice —
   plain default WooCommerce chrome (bare <ul><li>, unstyled info box)
   given the same restrained editorial treatment as the rest of checkout,
   not a working payment method invented in its place. */
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
}

.woocommerce-checkout #payment .woocommerce-info {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem 1.15rem;
	background: var(--tlm-surface);
	border: 1px solid rgba(0, 56, 95, 0.14);
	border-top: 3px solid var(--tlm-gold);
	border-radius: 8px;
	font-size: 0.92rem;
	color: var(--tlm-text-muted);
	list-style: none;
}

.woocommerce-checkout #payment .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin: 1.25rem 0;
	font-size: 0.82rem;
	color: var(--tlm-text-muted);
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: var(--tlm-navy);
	text-decoration: underline;
}

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 44px;
	font-size: 0.95rem;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(0, 56, 95, 0.12);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.65em 0;
	font-family: var(--tlm-font-body);
	font-weight: 600;
	color: var(--tlm-navy);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--tlm-gold);
}

/* Blocksy's own generic archive/page-title band (.hero-section) — only
   renders on the WooCommerce utility screens that have no custom Gutenberg
   hero pattern of their own (shop archive, cart, checkout, my-account;
   every content page's -hero-v3 pattern suppresses it), so restyling it
   here is scoped to exactly those four screens without touching the
   custom-hero pages. Was still Blocksy's flat light-grey default. */
.hero-section {
	background: var(--tlm-cream-soft);
	border-bottom: 1px solid rgba(0, 56, 95, 0.1);
}

.hero-section .page-title {
	font-family: var(--tlm-font-display);
	color: var(--tlm-navy);
}

.ct-breadcrumbs,
.ct-breadcrumbs a {
	color: var(--tlm-text-muted);
}

.ct-breadcrumbs a:hover {
	color: var(--tlm-gold);
}

/* Single product gallery — warm cacao atelier studio stage with clean shadow
   and gold trim, avoiding dirty multiply blend artifacts. */
.single-product .woocommerce-product-gallery {
	background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #fcf9f2 65%, #f4ece0 100%) !important;
	border-radius: 22px;
	border: 1.5px solid rgba(220, 165, 0, 0.35);
	box-shadow: inset 0 0 30px rgba(220, 165, 0, 0.08), 0 16px 40px rgba(6, 50, 71, 0.08);
	padding: clamp(2rem, 4vw, 3rem);
	position: relative;
	overflow: hidden;
	min-height: 520px;
}

.single-product .woocommerce-product-gallery::before {
	display: none !important;
	content: none !important;
}

.single-product .woocommerce-product-gallery img.wp-post-image,
.single-product .woocommerce-product-gallery .ct-media-container > img {
	mix-blend-mode: normal !important;
	max-height: 480px;
	width: auto;
	max-width: 92%;
	object-fit: contain;
	filter: drop-shadow(0 20px 35px rgba(6, 50, 71, 0.22));
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
	cursor: zoom-in;
}

.single-product .woocommerce-product-gallery:hover img.wp-post-image,
.single-product .woocommerce-product-gallery:hover .ct-media-container > img {
	transform: scale(1.08) translateY(-4px);
	filter: drop-shadow(0 28px 45px rgba(6, 50, 71, 0.3));
}

/* ==================================================================
 * Internal pages — shared page-hero band
 * ================================================================== */
.tlm-page-hero {
	margin-top: -1px;
}

.tlm-page-hero .wp-block-cover__inner-container {
	max-width: var(--tlm-container-header);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	width: 100%;
}

.tlm-page-hero__kicker {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold);
	margin: 0 0 0.6rem;
}

.tlm-page-hero h1 {
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
	line-height: 1.06;
	max-width: 18ch;
	color: var(--tlm-cream);
}

.tlm-page-hero__sub {
	max-width: 34ch;
	margin-top: 0.9rem;
	font-size: 1.05rem;
	color: rgba(247, 242, 232, 0.85);
}

/* ==================================================================
 * Our Story — founders, timeline, philosophy
 * ================================================================== */
.tlm-founders {
	padding-block: var(--tlm-section-py);
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 5.5rem);
}

/* Both founders in one photographic band; captions sit beneath the
   photographs, never over the faces. */
.tlm-founders__diptych {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: end;
}

.tlm-founders__diptych-photo {
	margin: 0;
}

.tlm-founders__diptych-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 2px;
}

.tlm-founders__diptych-photo:last-child img {
	aspect-ratio: 1 / 1;
	object-position: 50% 25%;
}

.tlm-founders__diptych-photo figcaption {
	text-align: left;
	margin-top: 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--tlm-text-muted);
}

/* The two stories run side by side under one hairline each. */
.tlm-founders__paths {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 5rem);
}

.tlm-founders__path {
	padding-top: 1.5rem;
	border-top: var(--tlm-border);
}

.tlm-founders__path > * {
	margin-inline: 0 !important;
}

.tlm-founders__label {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--tlm-gold-ink);
}

.tlm-founders__path h2 {
	margin: 0 0 var(--tlm-space-group);
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	line-height: 1.2;
	color: var(--tlm-navy);
}

.tlm-founders__path p:not(.tlm-founders__label) {
	max-width: var(--tlm-measure);
	margin: 0;
	color: var(--tlm-text);
	line-height: 1.7;
}

.tlm-founders__convergence {
	max-width: 30ch;
	margin-inline: auto;
	text-align: center;
}

.tlm-founders__quote {
	margin: 0;
	font-family: var(--tlm-font-display);
	font-size: clamp(1.5rem, 2.3vw, 2.1rem);
	line-height: 1.35;
	color: var(--tlm-navy);
}

/* Timeline: five hairline-topped columns; the year is plain display
   type above its milestone, not a numbered badge. */
.tlm-story-timeline__head .tlm5-eyebrow,
.tlm-sustainability__header .tlm5-eyebrow {
	margin: 0;
	font-family: var(--tlm-font-body);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--tlm-gold-ink);
}

.tlm-story-timeline__head {
	max-width: 40rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: left;
}

.tlm-story-timeline__head h2 {
	margin: 0.4rem 0 0;
	font-size: clamp(1.8rem, 2.8vw, 2.6rem);
	line-height: 1.15;
	color: var(--tlm-navy);
}

.tlm-story-timeline-track {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.tlm-story-milestone {
	padding-top: 1rem;
	border-top: 2px solid var(--tlm-gold);
	text-align: left;
}

.tlm-story-milestone__dot {
	margin-bottom: 0.75rem;
}

.tlm-story-milestone__dot span {
	font-family: var(--tlm-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	color: var(--tlm-gold-ink);
}

.tlm-story-milestone--current {
	border-top-color: var(--tlm-navy);
}

.tlm-story-milestone--current .tlm-story-milestone__dot span {
	color: var(--tlm-navy);
}

.tlm-story-milestone__body h3 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--tlm-navy);
}

.tlm-story-milestone__body p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--tlm-text-muted);
}

/* Philosophy: heading left, three divided rows right — the same open
   two-column structure as "What makes it special". */
.tlm-sustainability-section {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.tlm-sustainability__header {
	position: sticky;
	top: calc(var(--tlm-v3-header-h, 5.5rem) + 2rem);
}

.tlm-sustainability__header h2 {
	margin: 0.4rem 0 var(--tlm-space-group);
	max-width: 16ch;
	font-size: clamp(1.9rem, 3vw, 2.8rem);
	line-height: 1.15;
	color: var(--tlm-navy);
}

.tlm-sustainability__lead {
	max-width: 40ch;
	margin: 0;
	color: var(--tlm-text-muted);
	line-height: 1.65;
}

.tlm-sustainability__grid {
	display: block;
}

.tlm-sustainability__card {
	padding: var(--tlm-space-action) 0;
	border-top: var(--tlm-border);
}

.tlm-sustainability__card:last-child {
	border-bottom: var(--tlm-border);
}

.tlm-sustainability__icon {
	display: none;
}

.tlm-sustainability__card h3 {
	margin: 0 0 var(--tlm-space-group);
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	color: var(--tlm-navy);
}

.tlm-sustainability__card p {
	max-width: var(--tlm-measure);
	margin: 0;
	line-height: 1.7;
}

@media (max-width: 1000px) {
	.tlm-story-timeline-track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.tlm-founders__diptych,
	.tlm-founders__paths,
	.tlm-sustainability-section {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-sustainability__header {
		position: static;
	}
}

@media (max-width: 560px) {
	.tlm-story-timeline-track {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==================================================================
 * Our Story — closing "today" band: a quiet navy field with the promise
 * in type. No photograph (the story page already carries four), no scrim.
 * ================================================================== */
.tlm-story-today {
	background: var(--tlm-navy-dark);
	padding-block: var(--tlm-section-py);
	color: var(--tlm-cream);
}

.tlm-story-today__body {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.tlm-story-today__lead > *,
.tlm-story-today__detail > * {
	margin-inline: 0 !important;
}

.tlm-story-today .tlm-timeline-marker {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: var(--tlm-space-group);
}

.tlm-story-today .tlm-timeline-marker__year {
	font-family: var(--tlm-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--tlm-gold);
}

.tlm-story-today .tlm-timeline-marker__label {
	font-size: 0.95rem;
	color: rgba(247, 240, 226, 0.75);
}

.tlm-story-today h2 {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 3.1rem);
	line-height: 1.13;
	color: var(--tlm-cream);
}

.tlm-story-today__detail p {
	max-width: var(--tlm-measure);
	color: var(--tlm-cream);
}

.tlm-story-today .tlm-family-roles {
	color: rgba(247, 240, 226, 0.75) !important;
}

.tlm-story-today__invitation {
	font-family: var(--tlm-font-display);
	font-size: 1.3rem;
	line-height: 1.4;
}

.tlm-story-today .wp-block-buttons {
	margin-top: var(--tlm-space-action);
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 900px) {
	.tlm-story-today__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==================================================================
 * The Experience — "What makes it special" + guests photo band.
 * The heading stays put on the left while the three divided rows on the
 * right scroll past it; no cards, no icons.
 * ================================================================== */
.tlm-xp-overview--grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
	padding-block: var(--tlm-section-py);
}

.tlm-xp-overview__header {
	position: sticky;
	top: calc(var(--tlm-v3-header-h, 5.5rem) + 2rem);
	margin: 0;
	text-align: left;
}

.tlm-xp-overview__header .tlm-xp-overview__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--tlm-font-body);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--tlm-gold-ink);
}

.tlm-xp-overview__header h2 {
	margin: 0 0 var(--tlm-space-group);
	max-width: 16ch;
	font-family: var(--tlm-font-display);
	font-size: clamp(2rem, 3.2vw, 3rem);
	line-height: 1.13;
	color: var(--tlm-navy);
}

.tlm-xp-overview__sub {
	max-width: 40ch;
	margin: 0;
	color: var(--tlm-text-muted);
	line-height: 1.65;
}

.tlm-xp-overview .tlm-editorial-list {
	width: 100%;
	margin: 0;
}

.tlm-xp-overview .tlm-editorial-list__row {
	display: block;
	text-align: left;
}

.tlm-xp-overview .tlm-editorial-list__row p {
	margin-top: var(--tlm-space-group);
}

@media (max-width: 900px) {
	.tlm-xp-overview--grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-xp-overview__header {
		position: static;
	}
}

.tlm-xp-guests {
	padding-block: var(--tlm-section-py);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.tlm-xp-guests__media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, clamp(150px, 17vw, 250px));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.tlm-xp-guests__media figure {
	margin: 0;
	height: 100%;
}

.tlm-xp-guests__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

.tlm-xp-guests__tall {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.tlm-xp-guests__top {
	grid-column: 2;
	grid-row: 1;
}

.tlm-xp-guests__bottom {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 767px) {
	.tlm-xp-guests {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-xp-guests__media {
		grid-template-rows: repeat(2, 9rem);
	}
}

/* ==================================================================
 * The Experience — family/brand story band
 * ================================================================== */
.tlm-xp-family {
	padding-block: var(--tlm-section-py);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.tlm-xp-family__photo {
	margin: 0;
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.tlm-xp-family__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tlm-xp-family__body > * {
	margin-inline: 0;
	text-align: left;
}

.tlm-xp-family__body h2 {
	color: var(--tlm-navy);
	margin: 0 0 0.85rem;
}

.tlm-xp-family__body p {
	max-width: 42ch;
	color: var(--tlm-text-muted);
	font-size: 1.05rem;
	margin: 0 0 1.25rem;
}

.tlm-xp-family__link {
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--tlm-navy);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid rgba(6, 50, 71, 0.35);
	padding-bottom: 0.2em;
	transition: color 0.2s ease, border-color 0.2s ease, gap 0.25s var(--tlm-v3-ease-out, ease);
}

.tlm-xp-family__link:hover,
.tlm-xp-family__link:focus-visible {
	color: var(--tlm-gold-ink, var(--tlm-gold));
	border-color: var(--tlm-gold);
	gap: 0.85rem;
}

.tlm-xp-family__link:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.tlm-xp-family {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==================================================================
 * The Experience — Tripadvisor trust band
 * ================================================================== */
.tlm-xp-trust {
	padding-block: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.tlm-xp-trust__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--tlm-navy);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tlm-xp-trust__link:hover,
.tlm-xp-trust__link:focus-visible {
	color: var(--tlm-gold-ink, var(--tlm-gold));
}

.tlm-xp-trust__icon {
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	color: var(--tlm-gold);
}

/* ==================================================================
 * Gallery — curated collage as a contact sheet (CSS Grid dense
 * auto-flow, span-based — never manual line numbers, so items cannot
 * overlap regardless of order or viewport width; see the homepage
 * interlude's history of overlap bugs from line-number placement for
 * why this matters). Flat hairline frames + printed frame-number/
 * category captions replace the earlier rounded-card + drop-shadow
 * treatment — a contact sheet has mats and grease-pencil notes, not
 * elevation shadows.
 * ================================================================== */
.tlm-collage-section {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--tlm-section-py);
}

/* Category filter — hidden entirely until JS confirms it can act on
   clicks (see cinematic-v3.js); the full unfiltered contact sheet
   below is always complete and visible either way. */
.tlm-collage-filters {
	display: none;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.tlm-v3-page .tlm-collage-filters {
	display: flex;
}

.tlm-collage-filters__btn {
	font-family: var(--tlm-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tlm-text-muted);
	background: transparent;
	border: 1px solid rgba(0, 56, 95, 0.2);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tlm-collage-filters__btn:hover,
.tlm-collage-filters__btn:focus-visible {
	border-color: var(--tlm-navy);
	color: var(--tlm-navy);
}

.tlm-collage-filters__btn.is-active {
	background: var(--tlm-navy);
	border-color: var(--tlm-navy);
	color: var(--tlm-cream);
}

.tlm-collage__item.is-filtered-out {
	display: none;
}

.tlm-collage {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 12.5rem;
	grid-auto-flow: dense;
	gap: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.1rem);
}

.tlm-collage__item {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.tlm-collage__frame {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border: 1px solid rgba(0, 56, 95, 0.2);
	background: var(--tlm-surface);
	padding: 4px;
}

.tlm-collage__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-collage__frame:hover img,
	.tlm-collage__frame:focus-visible img {
		transform: scale(1.05);
	}
}

.tlm-collage__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.4rem;
}

.tlm-collage__caption-number {
	font-family: var(--tlm-font-body);
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
	color: var(--tlm-text-muted);
}

.tlm-collage__caption-label {
	font-family: var(--tlm-font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold);
}

.tlm-collage__item--wide {
	grid-column: span 2;
}

.tlm-collage__item--tall {
	grid-row: span 2;
}

.tlm-collage__item--big {
	grid-column: span 2;
	grid-row: span 2;
}

.tlm-collage-section__cta {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 900px) {
	.tlm-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tlm-collage__item--big {
		grid-column: span 2;
	}
}

@media (max-width: 480px) {
	.tlm-collage {
		grid-auto-rows: 10.5rem;
	}
}

/* ==================================================================
 * Chocolate page — shop showcase intro
 * ================================================================== */
.tlm-chocolate-shop {
	padding-block: var(--tlm-section-py);
}

.tlm-chocolate-shop__intro {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tlm-chocolate-shop__thumb {
	flex: 0 0 auto;
	/* !important: WP core block-library CSS ships
	   `.wp-block-image:not(#individual-image){width:100%}` — the
	   `:not(#individual-image)` trick gives that rule ID-level
	   specificity, which beats any single custom class no matter
	   where it loads in the cascade. */
	width: clamp(6rem, 10vw, 8rem) !important;
	margin: 0;
}

.tlm-chocolate-shop__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--tlm-radius-organico-sm);
}

.tlm-chocolate-shop__collection .wp-block-post-title {
	font-family: var(--tlm-font-display);
	font-size: 1.15rem;
	margin-block: 0.75rem 0.25rem;
}

.tlm-chocolate-shop__collection .wc-block-components-product-price {
	color: var(--tlm-navy);
	font-weight: 700;
}

.tlm-chocolate-shop__collection .wc-block-components-product-button__button {
	background-color: var(--tlm-navy);
	color: var(--tlm-cream);
	border-radius: 10px;
	font-size: 0.82rem;
	font-weight: 700;
	padding: 0.6em 1.2em;
	transition: background-color 0.2s ease;
}

.tlm-chocolate-shop__collection .wc-block-components-product-button__button:hover {
	background-color: var(--tlm-navy-dark);
}

.tlm-chocolate-shop__tour-note {
	max-width: 40rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	text-align: center;
	color: var(--tlm-text-muted);
	font-style: italic;
}

.tlm-chocolate-shop .wp-block-buttons {
	justify-content: center;
	margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

@media (max-width: 600px) {
	.tlm-chocolate-shop__intro {
		flex-direction: column;
		text-align: center;
	}
}


/* ----------------------------------------------------------------
 * Accesibilidad: foco visible acorde a la paleta
 * ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--tlm-gold);
	outline-offset: 2px;
}

/* ==================================================================
 * Product carousel — native WooCommerce Product Collection block
 * Dark chocolate-inspired scene (spec: "NOT four generic white cards" —
 * large photography, horizontal rail with partial next-product
 * visibility, minimal metadata, restrained gold progress). The section
 * itself is full-bleed (see the full-bleed override list above); these
 * rules re-constrain its content to the usual reading width.
 * ================================================================== */
.tlm-product-carousel {
	background: var(--tlm-navy-dark);
	padding-block: clamp(3rem, 3vw + 1.5rem, 5rem);
}

.tlm-product-carousel__head,
.tlm-product-carousel__viewport,
.tlm-product-carousel__controls {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
}

.tlm-product-carousel__head {
	max-width: calc(var(--tlm-container-wide) - 2 * var(--tlm-section-px));
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tlm-product-carousel__head .tlm-journal__kicker {
	color: var(--tlm-gold);
}

.tlm-product-carousel__head .wp-block-heading {
	color: var(--tlm-cream);
}

.tlm-product-carousel__head p:not(.tlm-journal__kicker) {
	color: rgba(247, 242, 232, 0.85);
}

/* The actual scrollable row is WooCommerce's own inner element
   (.is-product-collection-layout-carousel); the non-executing Script
   Module (see cinematic-v3.js comment) never applied overflow/scroll-snap
   to it, so it does here instead — this is what makes touch swipe and the
   prev/next controls actually move the row (spec FR-026). Negative margin
   + matching padding lets the row bleed into the section's own full-bleed
   edges while items still start at the same left position as the head
   text above it. */
.tlm-product-carousel__collection .is-product-collection-layout-carousel {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

/* Visible focus style (spec) for the region's own tabindex=0 — this is
   a keyboard user's entry point into the carousel, not just its buttons. */
.tlm-product-carousel__collection .is-product-collection-layout-carousel:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 3px;
}

.tlm-product-carousel__collection .is-product-collection-layout-carousel::-webkit-scrollbar {
	display: none;
}

.tlm-product-carousel__collection .wc-block-product {
	padding-inline-end: clamp(1rem, 2.5vw, 1.75rem);
	scroll-snap-align: start;
}

/* Horizontal rail with partial next-product visibility (spec) — card
   width is tuned per breakpoint against the real measured track width
   (not just viewport width, which ignores side padding) so each tier
   hits its own visible-card target: mobile ~1 card + 10-18% peek,
   tablet ~2 cards, desktop ~3 cards + a peek of the 4th. !important is
   required: WooCommerce's own product-template-style.css (enqueued after
   this file, see functions.php) sets `flex: 1 1 0%` on `.wc-block-product`
   at equal-or-higher specificity, which otherwise wins the cascade and
   collapses every card back to an identical, small width. */
.tlm-product-carousel__collection .wc-block-product {
	width: min(23rem, 72vw) !important;
	flex: 0 0 auto !important;
}

@media (max-width: 599px) {
	.tlm-product-carousel__collection .wc-block-product {
		width: 82% !important;
	}
}

@media (min-width: 600px) and (max-width: 999px) {
	.tlm-product-carousel__collection .wc-block-product {
		width: 46% !important;
	}
}

.tlm-product-carousel__collection .wc-block-product .wc-block-components-product-image {
	margin-bottom: 1rem;
}

.tlm-product-carousel__collection .wc-block-product img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 4px;
}

/* Hover, precise pointers only (spec: "on precise-pointer devices only";
   no 3D tilt) — coarse/touch pointers get no hover state since there's
   nothing to reveal it. */
@media (hover: hover) and (pointer: fine) {
	.tlm-product-carousel__collection .wc-block-product img {
		transition: transform 0.3s ease-out;
	}

	.tlm-product-carousel__collection .wc-block-product:hover img {
		transform: scale(1.025);
	}

	.tlm-product-carousel__collection .wc-block-product .wp-block-post-title a {
		display: inline-block;
		transition: transform 0.2s ease-out;
	}

	.tlm-product-carousel__collection .wc-block-product:hover .wp-block-post-title a {
		transform: translateX(4px);
	}
}

/* Active-slide feedback (spec: "subtle image scale transition when the
   active slide changes", "optional metadata reveal") — JS toggles
   .is-active on whichever card has the most overlap with the visible
   track width; base state is fully visible (progressive enhancement —
   nothing here hides content, it only adds a settle-in accent). */
@media (prefers-reduced-motion: no-preference) {
	.tlm-product-carousel__collection .wc-block-product img {
		transition: transform 0.4s var(--tlm-v3-ease-out, ease-out);
	}

	.tlm-product-carousel__collection .wc-block-product.is-active img {
		transform: scale(1.015);
	}

	.tlm-product-carousel__collection .wc-block-product .wp-block-post-title,
	.tlm-product-carousel__collection .wc-block-product .wc-block-components-product-price {
		transition: opacity 0.35s ease-out, transform 0.35s ease-out;
	}

	.tlm-product-carousel__collection .wc-block-product:not(.is-active) .wp-block-post-title,
	.tlm-product-carousel__collection .wc-block-product:not(.is-active) .wc-block-components-product-price {
		opacity: 0.7;
		transform: translateY(2px);
	}
}

/* Minimal metadata (spec) — title and price only by default; the add-to-
   cart action is present (spec requires it) but restrained to a small
   text-link rather than a second solid button competing with the photo. */
.tlm-product-carousel__collection .wp-block-post-title {
	font-family: var(--tlm-font-display);
	font-size: 1.3rem;
	color: var(--tlm-cream);
	margin-block: 0 0.25rem;
}

.tlm-product-carousel__collection .wp-block-post-title a {
	color: inherit;
}

.tlm-product-carousel__collection .wc-block-components-product-price {
	color: var(--tlm-gold);
	font-weight: 700;
	font-size: 0.95rem;
}

.tlm-product-carousel__collection .wp-block-woocommerce-product-button {
	margin-top: 0.6rem;
}

.tlm-product-carousel__collection .wc-block-components-product-button__button {
	background: transparent;
	color: rgba(247, 242, 232, 0.85);
	border: none;
	border-bottom: 1px solid rgba(247, 242, 232, 0.4);
	border-radius: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0 0 0.15em;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tlm-product-carousel__collection .wc-block-components-product-button__button:hover,
.tlm-product-carousel__collection .wc-block-components-product-button__button:focus-visible {
	color: var(--tlm-gold);
	border-color: var(--tlm-gold);
}

.tlm-product-carousel__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: var(--tlm-gap-md);
}

.tlm-product-carousel__arrow {
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(247, 242, 232, 0.85);
	border: 1.5px solid rgba(247, 242, 232, 0.35);
	border-radius: 999px;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.tlm-product-carousel__arrow:hover:not(:disabled) {
	background: var(--tlm-gold);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-gold);
}

.tlm-product-carousel__arrow:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 2px;
}

.tlm-product-carousel__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Deliberate zero-product state (spec FR-029) — a real photograph, not a
   blank container or a broken loop. Only ever seen if the catalog is
   temporarily empty. */
.tlm-product-carousel__empty {
	position: relative;
	min-height: 20rem;
	display: flex;
	align-items: flex-end;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	overflow: hidden;
}

.tlm-product-carousel__empty::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 42, 71, 0.15) 0%, rgba(0, 42, 71, 0.75) 100%);
}

.tlm-product-carousel__empty p {
	position: relative;
	z-index: 1;
	color: var(--tlm-cream);
	font-family: var(--tlm-font-display);
	font-size: 1.1rem;
	max-width: 32rem;
	margin: 0;
}

/* Restrained gold progress bar (spec: "restrained gold progress"), not a
   plain "1 / 5" text readout — width is set by JS as a percentage of
   items viewed; the visually-hidden text span still announces position
   to screen readers via the container's role="status"/aria-live. */
.tlm-product-carousel__progress {
	flex: 1 1 8rem;
	min-width: 6rem;
	max-width: 12rem;
}

.tlm-product-carousel__progress-track {
	display: block;
	height: 2px;
	background: rgba(247, 242, 232, 0.15);
	overflow: hidden;
}

.tlm-product-carousel__progress-fill {
	display: block;
	height: 100%;
	width: 20%;
	background: var(--tlm-gold);
	transition: width 0.25s ease-out;
}

.tlm-product-carousel__shop-all {
	margin-top: 0;
	margin-inline-start: auto;
}

@media (max-width: 767px) {
	.tlm-product-carousel__controls {
		gap: 1rem;
	}

	.tlm-product-carousel__shop-all {
		margin-inline-start: 0;
		width: 100%;
		order: 4;
	}
}

/* Blocksy's password-visibility toggle button paints its eye icon via a
   CSS mask-image with mask-repeat left at its default (repeat). That
   was invisible at Blocksy's own intended button height, but this file's
   form-control sizing makes the button taller (a real touch-target,
   worth keeping) than the icon's natural size, so the mask tiled into
   two/three stacked eye glyphs. Fixing the mask, not shrinking the
   target. */
.woocommerce .show-password-input {
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: 18px;
	-webkit-mask-size: 18px;
}

/* ==================================================================
 * Consolidated from former cinematic-v3.css (homepage/editorial-page
 * motion + composition layer, conditionally enqueued) — now part of
 * this single site-experience.css entry.
 * ================================================================== */

/* ==================================================================
 * V3 tokens — additive layer on top of tropical-theme.css. Never
 * redeclares the brand palette; only adds what V3 needs.
 * ================================================================== */
/* tropical-theme.css sets `overflow-x: clip` on both html and body for
   gate-34 (no horizontal scroll). Per the CSS overflow spec, a non-visible
   overflow-x forces overflow-y away from `visible` too — on <html>
   specifically this breaks position:sticky containing-block resolution
   for sticky descendants (verified: the seed-to-bar stage never engaged,
   sitting at its static offset for the entire scroll range). Clipping on
   <body> alone is sufficient to prevent horizontal scroll; only the
   <html>-level rule is removed here, scoped to V3 pages. */
html.tlm-v3-page {
	overflow-x: visible;
}

:root {
	--tlm-v3-ink: #051A26;
	--tlm-v3-ink-soft: rgba(5, 26, 38, 0.86);
	--tlm-v3-header-h: 4.5rem;
	--tlm-v3-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--tlm-v3-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
	--tlm-v3-dur-micro: 120ms;
	--tlm-v3-dur-short: 220ms;
	--tlm-v3-dur-medium: 300ms; /* fills the gap between short/long; matches the ~0.3s value most hand-written transitions already converged on */
	--tlm-v3-dur-long: 500ms;
}

/* tropical-theme.css's dark-background CTA treatment is scoped to
   .tlm-on-dark / .tlm-hero-scene / .tlm-final-scene — extend the same
   light-on-dark outline styling to the V3 dark/photo scenes so the
   secondary button doesn't render as low-contrast navy-on-navy. */
.tlm-v3-hero .tlm-cta-secondary .wp-block-button__link,
.tlm-v3-final .tlm-cta-secondary .wp-block-button__link,
.tlm-v3-story .tlm-cta-secondary .wp-block-button__link {
	color: var(--tlm-cream);
	border-color: rgba(247, 242, 232, 0.6);
}

.tlm-v3-hero .tlm-cta-secondary .wp-block-button__link:hover,
.tlm-v3-final .tlm-cta-secondary .wp-block-button__link:hover,
.tlm-v3-story .tlm-cta-secondary .wp-block-button__link:hover {
	background-color: var(--tlm-cream);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-cream);
}

/* Scoped under .tlm-v3-page (added to <html> by site-experience.js as soon
   as it runs, before any reveal fires) rather than applied unconditionally —
   this is the progressive-enhancement gate: with JS, .tlm-v3-page is present
   almost immediately and these hidden-until-revealed states apply; with JS
   disabled (class never added) or before it runs, [data-tlm-reveal] content
   stays fully visible instead of being stuck at opacity:0 forever. Do not
   unscope this — it was previously mistaken for dead code because a grep
   for `tlm-v3-page` across the PHP patterns doesn't find it (it only exists
   as a runtime JS-added class), but it is load-bearing. */
.tlm-v3-page [data-tlm-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-page [data-tlm-reveal] {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity var(--tlm-v3-dur-long) var(--tlm-v3-ease-out), transform var(--tlm-v3-dur-long) var(--tlm-v3-ease-out);
	}

	.tlm-v3-page [data-tlm-reveal].is-in {
		opacity: 1;
		transform: none;
	}
}

/* [data-tlm-parallax] — restrained desktop-only vertical drift, driven by
   rAF in JS (translateY via a CSS custom property, never a layout
   property). Disabled on touch and reduced-motion; JS never sets the
   property in those cases, so the transform stays at its 0 default. */
.tlm-v3-page [data-tlm-parallax] {
	--tlm-parallax-y: 0px;
}

@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
	.tlm-v3-page [data-tlm-parallax] {
		transform: translateY(var(--tlm-parallax-y));
		will-change: transform;
	}
}

/* ==================================================================
 * Full-bleed breakout — every cinematic scene must reach the true
 * viewport edge regardless of the Gutenberg content-width wrapper it
 * renders inside (none of these patterns declared "align":"full" on
 * their block comment, so without this they sit boxed at
 * --tlm-container-wide with visible side margins — a real bug, found
 * by measuring the rendered hero against the viewport directly, not
 * assumed). `margin-inline: calc(50% - 50vw)` breaks out to the true
 * viewport width without the `100vw` scrollbar-overflow risk Hallmark
 * flags — `width` itself is never set to a vw unit.
 *
 * !important: WordPress core's block-layout support outputs
 * `.is-layout-constrained > *` (max-width + margin-inline:auto) as
 * part of global styles, which loads after this stylesheet — at equal
 * class-selector specificity, source order alone would let core win
 * and silently re-box every "full-bleed" V3 section. The extra
 * `.entry-content.is-layout-constrained >` prefix raises specificity
 * so this doesn't depend on load order, and !important removes any
 * remaining doubt.
 * ================================================================== */
/* Blocksy's own "content area" top spacing (a Customizer setting,
   independent of anything built here) padded .ct-container-full by
   60px — invisible on normal pages, but it held the cinematic hero
   60px below the true viewport top, leaving a plain body-background
   strip behind the transparent header. Only neutralized on pages that
   actually open with a full-bleed hero. */
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-container-full {
	padding-top: 0;
}

/* Same Blocksy Customizer rule, bottom side: a 60px .ct-container-full
   padding-bottom left a plain white seam between the full-bleed final
   scene and the footer's gold border — the opposite of the "organic
   transition into the footer" the closing scene is meant to read as. */
.tlm-v3-page:has(.tlm-v3-final) .ct-container-full {
	padding-bottom: 0;
}

.entry-content.is-layout-constrained > .tlm-v3-hero,
.entry-content.is-layout-constrained > .tlm-v3-page-hero,
.entry-content.is-layout-constrained > .tlm-xp-hero-full,
.entry-content.is-layout-constrained > .tlm-story-hero-split,
.entry-content.is-layout-constrained > .tlm-gallery-motion-hero,
.entry-content.is-layout-constrained > .tlm-gallery-hero-curated,
.entry-content.is-layout-constrained > .tlm-gallery-editorial-header,
.entry-content.is-layout-constrained > .tlm-v3-facts,
.entry-content.is-layout-constrained > .tlm-v3-story,
.entry-content.is-layout-constrained > .tlm-showcase-section,
.entry-content.is-layout-constrained > #seed-to-bar,
.entry-content.is-layout-constrained > .tlm-v3-final,
.entry-content.is-layout-constrained > .tlm-v3-filmstrip,
.entry-content.is-layout-constrained > .tlm-dossier-section,
.entry-content.is-layout-constrained > .tlm-family-scene,
.entry-content.is-layout-constrained > .tlm-plan-visit,
.entry-content.is-layout-constrained > .tlm-product-carousel,
.entry-content.is-layout-constrained > .tlm-teaser {
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
}

/* ==================================================================
 * Scene 01 — cinematic hero
 * ================================================================== */
.tlm-v3-hero {
	position: relative;
	min-height: clamp(500px, 68vh, 640px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin: 0;
	color: var(--tlm-cream);
}

.tlm-v3-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tlm-v3-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-hero__media img {
		transform: scale(1.06);
		transition: transform 1.6s var(--tlm-v3-ease-out);
	}

	.tlm-v3-page.is-loaded .tlm-v3-hero__media img {
		transform: scale(1);
	}
}

.tlm-v3-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(5, 26, 38, 0.35) 0%, rgba(5, 26, 38, 0.05) 22%, rgba(5, 26, 38, 0.05) 55%, rgba(5, 26, 38, 0.88) 100%),
		linear-gradient(90deg, rgba(5, 26, 38, 0.55) 0%, rgba(5, 26, 38, 0.3) 38%, rgba(5, 26, 38, 0) 62%);
}

.tlm-v3-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding: calc(var(--tlm-v3-header-h) + 1rem) var(--tlm-section-px) clamp(2rem, 4vw, 3rem);
}

.tlm-v3-hero__meta {
	font-family: var(--tlm-font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tlm-gold);
	margin: 0 0 0.75rem;
}

.tlm-v3-hero__title {
	font-family: var(--tlm-font-display);
	font-weight: 600;
	font-style: normal;
	color: var(--tlm-cream);
	font-size: clamp(2.2rem, 1.8rem + 2.2vw, 3.8rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	max-width: 14ch;
	overflow-wrap: anywhere;
	min-width: 0;
	text-shadow: 0 2px 24px rgba(5, 26, 38, 0.4);
}

.tlm-v3-hero__title span {
	display: block;
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-hero__title span > * {
		display: inline-block;
		transform: translateY(110%);
		opacity: 0;
		transition: transform 0.7s var(--tlm-v3-ease-out), opacity 0.7s var(--tlm-v3-ease-out);
	}

	.tlm-v3-page.is-loaded .tlm-v3-hero__title span:nth-child(1) > * {
		transition-delay: 0.15s;
	}

	.tlm-v3-page.is-loaded .tlm-v3-hero__title span:nth-child(2) > * {
		transition-delay: 0.28s;
	}

	.tlm-v3-page.is-loaded .tlm-v3-hero__title span > * {
		transform: translateY(0);
		opacity: 1;
	}
}

.tlm-v3-hero__lede {
	font-family: var(--tlm-font-body);
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
	line-height: 1.5;
	max-width: 36ch;
	color: rgba(247, 242, 232, 0.92);
	margin: 0 0 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-hero__lede,
	.tlm-v3-hero__ctas {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.6s var(--tlm-v3-ease-out), transform 0.6s var(--tlm-v3-ease-out);
		transition-delay: 0.45s;
	}

	.tlm-v3-page.is-loaded .tlm-v3-hero__lede,
	.tlm-v3-page.is-loaded .tlm-v3-hero__ctas {
		opacity: 1;
		transform: none;
	}

	.tlm-v3-hero__ctas {
		transition-delay: 0.58s;
	}
}

.tlm-v3-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
}

.tlm-v3-hero__scroll-cue {
	position: absolute;
	z-index: 2;
	bottom: 1.25rem;
	right: clamp(1.25rem, 5vw, 4rem);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--tlm-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247, 242, 232, 0.75);
	transition: opacity var(--tlm-v3-dur-short) var(--tlm-v3-ease-out);
}

.tlm-v3-hero__scroll-cue::after {
	content: "";
	width: 1px;
	height: 1.8rem;
	background: linear-gradient(180deg, var(--tlm-gold), transparent);
}

.tlm-v3-hero__scroll-cue.is-hidden {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 480px) {
	.tlm-v3-hero__scroll-cue {
		display: none;
	}
}

/* ==================================================================
 * Pre-existing bug, surfaced while enabling V3 on WooCommerce pages:
 * Blocksy's global Customizer "Headings Color" resolves to cream
 * (#F7F0E2) via --theme-headings-color, and Blocksy's own .page-title
 * template (My Account, Cart, Checkout — anywhere without a Gutenberg
 * .wp-block-heading to catch our navy override) sits on a transparent
 * .hero-section background, producing cream-on-cream. Not introduced
 * by this session's changes, but real and worth fixing now that it's
 * actually visible.
 * ================================================================== */
.tlm-v3-page .hero-section .page-title {
	color: var(--tlm-navy);
}

/* ==================================================================
 * Internal pages — cinematic page hero (shorter, no scroll cue,
 * deliberately distinct from Home's full-viewport hero markup)
 * ================================================================== */
.tlm-v3-page-hero {
	position: relative;
	min-height: clamp(360px, 46vh, 460px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin: 0;
	color: var(--tlm-cream);
}

.tlm-v3-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tlm-v3-page-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-page-hero__media img {
		transform: scale(1.06);
		transition: transform 1.6s var(--tlm-v3-ease-out);
	}

	.tlm-v3-page.is-loaded .tlm-v3-page-hero__media img {
		transform: scale(1);
	}

	.tlm-v3-page-hero__seal,
	.tlm-v3-page-hero__kicker,
	.tlm-v3-page-hero__title,
	.tlm-v3-page-hero__sub,
	.tlm-v3-page-hero__actions {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--tlm-v3-dur-long) var(--tlm-v3-ease-out), transform var(--tlm-v3-dur-long) var(--tlm-v3-ease-out);
	}

	.tlm-v3-page-hero__seal {
		transition-delay: 0.12s;
	}

	.tlm-v3-page-hero__kicker {
		transition-delay: 0.25s;
	}

	.tlm-v3-page-hero__title {
		transition-delay: 0.38s;
	}

	.tlm-v3-page-hero__sub {
		transition-delay: 0.52s;
	}

	.tlm-v3-page-hero__actions {
		transition-delay: 0.64s;
	}

	.tlm-v3-page.is-loaded .tlm-v3-page-hero__seal,
	.tlm-v3-page.is-loaded .tlm-v3-page-hero__kicker,
	.tlm-v3-page.is-loaded .tlm-v3-page-hero__title,
	.tlm-v3-page.is-loaded .tlm-v3-page-hero__sub,
	.tlm-v3-page.is-loaded .tlm-v3-page-hero__actions {
		opacity: 1;
		transform: none;
	}
}

.tlm-v3-page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(5, 26, 38, 0.2) 0%, rgba(5, 26, 38, 0.15) 45%, rgba(5, 26, 38, 0.86) 100%);
}

.tlm-v3-page-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding: calc(var(--tlm-v3-header-h) + 1.25rem) var(--tlm-section-px) clamp(1.75rem, 3.5vw, 2.75rem);
}

.tlm-v3-page-hero__kicker {
	font-family: var(--tlm-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold);
	margin: 0 0 0.5rem;
}

.tlm-v3-page-hero__title {
	font-family: var(--tlm-font-display);
	font-weight: 600;
	color: var(--tlm-cream);
	font-size: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
	line-height: 1.05;
	max-width: 18ch;
	margin: 0 0 0.75rem;
	overflow-wrap: anywhere;
	min-width: 0;
}

.tlm-v3-page-hero__sub {
	font-family: var(--tlm-font-body);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	max-width: 46ch;
	color: rgba(247, 242, 232, 0.9);
	margin: 0;
}

/* Restrained white brand seal above the kicker — one small mark, never
   competing with the H1. White (brand-asset variant "round_seal") because
   it sits on the hero's dark scrim, not a light/bright surface. */
.tlm-v3-page-hero__seal {
	display: block;
	width: 64px;
	height: 38px;
	object-fit: contain;
	margin: 0 0 1.1rem;
}

.tlm-v3-page-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

.tlm-v3-page-hero__secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--tlm-cream);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(247, 242, 232, 0.4);
	padding-bottom: 0.2em;
	transition: border-color 0.2s ease, gap 0.25s var(--tlm-v3-ease-out, ease);
}

.tlm-v3-page-hero__secondary:hover,
.tlm-v3-page-hero__secondary:focus-visible {
	border-color: var(--tlm-gold);
	gap: 0.75rem;
}

.tlm-v3-page-hero__secondary:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 4px;
}

.tlm-v3-page-hero__secondary svg {
	flex-shrink: 0;
}

/* ==================================================================
 * The Experience — Full-Height Cinematic Hero (.tlm-xp-hero-full)
 * ================================================================== */
.tlm-xp-hero-full {
	position: relative;
	min-height: clamp(380px, 50vh, 480px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--tlm-cream, #f7f2e8);
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	padding-top: calc(var(--tlm-v3-header-h, 72px) + 1rem);
}

.tlm-xp-hero-full__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tlm-xp-hero-full__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
}

/* Multi-stop Scrim for Top Contrast & Text Legibility */
.tlm-xp-hero-full__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(7, 18, 15, 0.75) 0%, rgba(7, 18, 15, 0.3) 22%, transparent 45%),
		linear-gradient(to top, rgba(7, 18, 15, 0.95) 0%, rgba(7, 18, 15, 0.65) 45%, transparent 85%),
		linear-gradient(to right, rgba(7, 18, 15, 0.88) 0%, rgba(7, 18, 15, 0.5) 55%, transparent 85%);
	pointer-events: none;
}

.tlm-xp-hero-full__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tlm-xp-hero-full__content {
	max-width: 58ch;
}

.tlm-xp-hero-full__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.85rem;
	background: rgba(11, 20, 18, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(224, 169, 74, 0.4);
	border-radius: 9999px;
	font-family: var(--tlm-font-body, 'Manrope', sans-serif);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold, #e0a94a);
	margin-bottom: 0.65rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.tlm-xp-hero-badge-icon {
	color: var(--tlm-gold, #e0a94a);
	font-size: 0.8rem;
}

.tlm-xp-hero-full__title {
	font-family: var(--tlm-font-display, 'Fraunces', Georgia, serif);
	font-size: clamp(1.85rem, 1.45rem + 1.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.12;
	color: #ffffff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
	margin: 0 0 0.65rem;
	max-width: 18ch;
}

.tlm-xp-hero-full__lede {
	font-family: var(--tlm-font-body, 'Manrope', sans-serif);
	font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1.05rem);
	line-height: 1.55;
	color: rgba(247, 242, 232, 0.92);
	margin: 0 0 1rem;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.tlm-xp-hero-full__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.tlm-xp-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.4rem;
	border-radius: 2px;
	font-family: var(--tlm-font-body, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
}

.tlm-xp-hero-btn--primary {
	background: var(--tlm-gold, #e0a94a);
	color: #0b1412;
	border: 1px solid var(--tlm-gold, #e0a94a);
}

.tlm-xp-hero-btn--primary:hover {
	background: #efbb26;
	color: #0b1412;
}

.tlm-xp-hero-btn--secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #ffffff;
}

.tlm-xp-hero-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

/* Integrated Bottom Facts Rail */
.tlm-xp-hero-full__rail {
	padding-top: 1.25rem;
	border-top: 1px solid rgba(247, 242, 232, 0.18);
}

.tlm-xp-hero-full__facts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.tlm-xp-hero-full__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--tlm-font-body, 'Manrope', sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	color: rgba(247, 242, 232, 0.85);
	letter-spacing: 0.02em;
}

.tlm-xp-rail-bullet {
	color: var(--tlm-gold, #e0a94a);
	font-size: 0.75rem;
}

@media (max-width: 768px) {
	.tlm-xp-hero-full {
		min-height: clamp(340px, 45vh, 420px);
	}
	.tlm-xp-hero-full__actions {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
	.tlm-xp-hero-btn {
		width: 100%;
		justify-content: center;
	}
	.tlm-xp-hero-full__facts {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.65rem;
	}
}

/* ==================================================================
 * Our Story — Editorial Split Hero (.tlm-story-hero-split)
 * ================================================================== */
.tlm-story-hero-split {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 85% 20%, rgba(224, 169, 74, 0.18) 0%, transparent 55%),
		radial-gradient(circle at 15% 85%, rgba(13, 35, 29, 0.95) 0%, transparent 65%),
		linear-gradient(145deg, #071511 0%, #0c201a 60%, #06110e 100%);
	color: var(--tlm-cream, #f7f2e8);
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	padding-top: calc(var(--tlm-v3-header-h, 72px) + 1rem);
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
	border-bottom: 1px solid rgba(224, 169, 74, 0.2);
}

.tlm-story-hero-split__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.tlm-story-hero-split__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.85rem;
	background: rgba(11, 20, 18, 0.75);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(224, 169, 74, 0.4);
	border-radius: 9999px;
	font-family: var(--tlm-font-body, 'Manrope', sans-serif);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold, #e0a94a);
	margin-bottom: 0.65rem;
}

.tlm-story-hero-split__title {
	font-family: var(--tlm-font-display, 'Fraunces', Georgia, serif);
	font-size: clamp(1.85rem, 1.45rem + 1.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.12;
	color: #ffffff;
	margin: 0 0 0.65rem;
}

.tlm-story-hero-split__quote {
	font-family: var(--tlm-font-display, 'Fraunces', Georgia, serif);
	font-size: 0.98rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--tlm-gold, #e0a94a);
	padding-left: 0.85rem;
	border-left: 3px solid var(--tlm-gold, #e0a94a);
	margin: 0 0 0.65rem;
}

.tlm-story-hero-split__desc {
	font-family: var(--tlm-font-body, 'Manrope', sans-serif);
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(247, 242, 232, 0.85);
	margin: 0 0 1rem;
	max-width: 50ch;
}

.tlm-story-hero-split__meta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.tlm-story-hero-split__founder {
	display: flex;
	flex-direction: column;
}

.tlm-story-hero-split__founder-name {
	font-family: var(--tlm-font-display, 'Fraunces', Georgia, serif);
	font-size: 1.05rem;
	color: #ffffff;
}

.tlm-story-hero-split__founder-role {
	font-size: 0.78rem;
	color: rgba(247, 242, 232, 0.65);
}

.tlm-story-hero-split__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.35rem;
	border-radius: 2px;
	background: var(--tlm-gold, #e0a94a);
	color: #0b1412;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.tlm-story-hero-split__btn:hover {
	background: #efbb26;
	color: #0b1412;
}

.tlm-story-hero-split__visual {
	position: relative;
}

.tlm-story-hero-split__frame {
	position: relative;
	border-radius: 120px 120px 20px 20px;
	overflow: hidden;
	border: 2px solid rgba(224, 169, 74, 0.4);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	aspect-ratio: 4 / 3.8;
	max-height: 290px;
	margin: 0 auto;
}

.tlm-story-hero-split__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.tlm-story-hero-split__frame-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(7, 21, 17, 0.8) 100%);
}

.tlm-story-hero-split__seal {
	position: absolute;
	bottom: 0.85rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	padding: 0.55rem 0.85rem;
	background: rgba(11, 20, 18, 0.85);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(224, 169, 74, 0.35);
	border-radius: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.tlm-story-hero-split__seal-star {
	color: var(--tlm-gold, #e0a94a);
	font-size: 0.72rem;
}

.tlm-story-hero-split__seal-text {
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffffff;
}

.tlm-story-hero-split__seal-sub {
	font-size: 0.72rem;
	color: var(--tlm-gold, #e0a94a);
}

@media (max-width: 900px) {
	.tlm-story-hero-split__container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.tlm-story-hero-split__visual {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ==================================================================
 * Gallery — Visual Discovery Header (.tlm-gallery-hero-curated)
 * ================================================================== */
.tlm-gallery-hero-curated {
	position: relative;
	min-height: clamp(340px, 42vh, 420px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--tlm-cream, #f7f2e8);
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	padding-top: calc(var(--tlm-v3-header-h, 72px) + 1rem);
	padding-bottom: 1.5rem;
	text-align: center;
}

.tlm-gallery-hero-curated__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tlm-gallery-hero-curated__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}

.tlm-gallery-hero-curated__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 50%, rgba(7, 18, 15, 0.75) 0%, rgba(7, 18, 15, 0.95) 100%),
		linear-gradient(180deg, rgba(7, 18, 15, 0.8) 0%, rgba(7, 18, 15, 0.98) 100%);
}

.tlm-gallery-hero-curated__container {
	position: relative;
	z-index: 2;
	max-width: 44rem;
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
}

.tlm-gallery-hero-curated__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.85rem;
	background: rgba(11, 20, 18, 0.75);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(224, 169, 74, 0.4);
	border-radius: 9999px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold, #e0a94a);
	margin-bottom: 0.65rem;
}

.tlm-gallery-hero-curated__title {
	font-family: var(--tlm-font-display, 'Fraunces', Georgia, serif);
	font-size: clamp(1.85rem, 1.45rem + 1.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	color: #ffffff;
	margin: 0 0 0.65rem;
}

.tlm-gallery-hero-curated__lede {
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(247, 242, 232, 0.88);
	margin: 0 auto 1rem;
	max-width: 38rem;
}

.tlm-gallery-hero-curated__tags {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.tlm-gallery-tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.85rem;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(224, 169, 74, 0.3);
	border-radius: 9999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tlm-gold, #e0a94a);
}

/* Compact hero modifier — shared by Gallery and Contact (each adds its own
 * exact height target on top via .tlm-v3-page-hero--gallery /
 * .tlm-v3-page-hero--contact in their own page CSS). A shorter, more
 * consistently readable hero than the full .tlm-v3-page-hero used by
 * Our Story / Chocolate / Experience, which this does not touch. */
.tlm-v3-page-hero--compact {
	min-height: clamp(420px, 55vh, 600px);
	align-items: center;
}

.tlm-v3-page-hero--compact .tlm-v3-page-hero__scrim {
	background: linear-gradient(180deg, rgba(5, 26, 38, 0.5) 0%, rgba(5, 26, 38, 0.32) 42%, rgba(5, 26, 38, 0.78) 100%);
}

.tlm-v3-page-hero--compact .tlm-v3-page-hero__content {
	padding-block: clamp(1.25rem, 4vw, 2rem);
}

/* ==================================================================
 * Scene 02 — kinetic fact rail
 * ================================================================== */
.tlm-v3-facts {
	background: var(--tlm-v3-ink);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.tlm-v3-facts__row {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0;
	list-style: none;
}

.tlm-v3-facts__row li {
	font-family: var(--tlm-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: rgba(247, 242, 232, 0.92);
	padding-inline: 1.25rem;
	border-inline-start: 1px solid rgba(201, 138, 0, 0.5);
}

.tlm-v3-facts__row li:first-child {
	padding-inline-start: 0;
	border-inline-start: none;
}

@media (max-width: 640px) {
	.tlm-v3-facts__row li {
		border-inline-start: none;
		padding-inline: 0;
		width: 100%;
	}
}

/* ==================================================================
 * Scene 03 — editorial manifesto
 * ================================================================== */
.tlm-v3-manifesto {
	/* Deliberately tighter than the storytelling sections around it — a
	   short statement doesn't need the same generous breathing room as
	   a full scene; identical padding on every section site-wide is one
	   of the flagged "assembled from blocks" tells. */
	padding-block: clamp(2.75rem, 4vw, 4.75rem);
	background: var(--tlm-cream);
}

.tlm-v3-manifesto__grid {
	/* Narrower than the wide sections either side of it — a statement
	   reads more intentional at a tighter measure than the site's
	   default wide container, which every other section here shares. */
	max-width: min(64rem, 90vw);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.tlm-v3-manifesto__statement {
	font-family: var(--tlm-font-display);
	font-weight: 600;
	font-size: clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
	line-height: 1.08;
	color: var(--tlm-navy);
	margin: 0;
}

.tlm-v3-manifesto__body {
	margin-top: 1.5rem;
	max-width: 46ch;
	color: var(--tlm-text-muted);
}

/* Layered two-photo composition, not a single flat rectangle: the main
   cacao close-up plus a smaller "meet your guide" inset overlapping its
   bottom-left corner, offset outside the main frame — a real diptych,
   not a stacked pair. */
.tlm-v3-manifesto__media {
	position: relative;
	justify-self: end;
	width: min(100%, 26rem);
	padding-block-end: 3.5rem;
	padding-inline-start: 2.5rem;
}

.tlm-v3-manifesto__media-main {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin: 0;
}

.tlm-v3-manifesto__media-main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tlm-v3-manifesto__media-inset {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 11rem;
	margin: 0;
	border: 4px solid var(--tlm-cream);
	box-shadow: 0 12px 28px rgba(0, 42, 71, 0.22);
}

.tlm-v3-manifesto__media-inset img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

.tlm-v3-manifesto__media-inset figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.5rem 0.6rem;
	background: linear-gradient(to top, rgba(0, 42, 71, 0.82), transparent);
	color: var(--tlm-cream);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-manifesto__media-main img {
		will-change: transform;
	}
}

@media (max-width: 900px) {
	.tlm-v3-manifesto__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tlm-v3-manifesto__media {
		justify-self: stretch;
		width: 100%;
		max-width: 22rem;
		margin-inline: auto;
		order: -1;
		padding-block-end: 3rem;
		padding-inline-start: 2rem;
	}

	.tlm-v3-manifesto__media-inset {
		width: 8.5rem;
	}
}

/* ==================================================================
 * Stage showcase (Seed to Bar) — shared by Home and Experience.
 * One stage at a time: a hairline tab row, one photograph, one panel of
 * text. No glass bar, no badge laid over the photo, no callout box —
 * the photograph and the sentence beside it carry the stage.
 * ================================================================== */
.tlm-showcase-section,
.tlm5-journey-showcase {
	position: relative;
	padding-block: var(--tlm-section-py);
	color: var(--tlm-navy-dark);
}

.tlm-showcase-inner {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
}

.tlm-showcase-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: var(--tlm-gap-lg);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.tlm-showcase-kicker {
	grid-column: 1 / -1;
	margin: 0 0 -0.75rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--tlm-gold-ink);
}

.tlm-showcase-title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--tlm-font-display);
	font-size: clamp(2rem, 3.4vw, 3.25rem);
	font-weight: 500;
	line-height: 1.12;
	color: var(--tlm-navy-dark);
}

.tlm-showcase-lede {
	margin: 0;
	max-width: 46ch;
	color: var(--tlm-text-muted);
	line-height: 1.65;
}

/* Stage tabs — a hairline row like the shop and gallery filters. */
.tlm-showcase-nav-wrap {
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.tlm-showcase-nav {
	display: flex;
	gap: clamp(1rem, 3vw, 2.5rem);
	border-bottom: var(--tlm-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.tlm-showcase-nav::-webkit-scrollbar {
	display: none;
}

.tlm-showcase-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: -1px;
	padding: 0.9rem 0 !important; /* Blocksy's global button padding wins ties otherwise */
	min-height: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--tlm-text-muted);
	font-family: var(--tlm-font-body);
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--tlm-v3-dur-short) var(--tlm-v3-ease-out), border-color var(--tlm-v3-dur-short) var(--tlm-v3-ease-out);
}

.tlm-showcase-tab:hover {
	color: var(--tlm-navy-dark);
}

.tlm-showcase-tab:focus-visible {
	outline: 3px solid var(--tlm-gold-ink);
	outline-offset: 2px;
}

.tlm-showcase-tab__num {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var(--tlm-gold-ink);
}

.tlm-showcase-tab.is-active {
	color: var(--tlm-navy-dark);
	border-bottom-color: var(--tlm-gold);
}

/* One photograph beside one panel of text. */
.tlm-showcase-display {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.tlm-showcase-media-column {
	position: relative;
}

.tlm-showcase-media-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	background: var(--tlm-cream-soft);
}

.tlm-showcase-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--tlm-v3-dur-long) var(--tlm-v3-ease-out), visibility var(--tlm-v3-dur-long);
}

.tlm-showcase-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.tlm-showcase-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tlm-showcase-content-column {
	position: relative;
	max-width: 34rem;
}

.tlm-showcase-panel {
	display: flex;
	flex-direction: column;
}

.tlm-showcase-panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-showcase-panel:not([hidden]) {
		animation: tlmShowcaseFade var(--tlm-v3-dur-long) var(--tlm-v3-ease-out) both;
	}
}

@keyframes tlmShowcaseFade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.tlm-showcase-panel__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--tlm-gold-ink);
}

.tlm-showcase-panel__title {
	margin: 0 0 var(--tlm-space-group);
	font-family: var(--tlm-font-display);
	font-size: clamp(1.7rem, 2.4vw, 2.4rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--tlm-navy-dark);
}

.tlm-showcase-panel__desc {
	margin: 0 0 var(--tlm-space-action);
	max-width: var(--tlm-measure);
	line-height: 1.7;
	color: var(--tlm-text);
}

.tlm-showcase-controls {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-top: 1.25rem;
	border-top: var(--tlm-border);
}

.tlm-showcase-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0 !important;
	min-height: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	color: var(--tlm-navy-dark);
	font-family: var(--tlm-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: color var(--tlm-v3-dur-short) var(--tlm-v3-ease-out);
}

.tlm-showcase-nav-btn:hover:not(:disabled) {
	color: var(--tlm-gold-ink);
}

.tlm-showcase-nav-btn:focus-visible {
	outline: 3px solid var(--tlm-gold-ink);
	outline-offset: 3px;
}

.tlm-showcase-nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
	border-bottom-color: transparent;
}

.tlm-showcase-counter {
	flex: none;
	white-space: nowrap;
	font-size: 0.95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tlm-text-muted);
}

.tlm-showcase-panel .tlm-cta-primary-link {
	align-self: flex-start;
	margin-top: var(--tlm-space-action);
}

@media (max-width: 900px) {
	.tlm-showcase-header {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tlm-space-group);
	}

	.tlm-showcase-kicker {
		margin-bottom: 0;
	}

	.tlm-showcase-display {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.tlm-showcase-content-column {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.tlm-showcase-controls {
		justify-content: space-between;
		gap: 0.75rem;
	}

	.tlm-showcase-nav-btn {
		flex: none;
		gap: 0.4rem;
		font-size: 0.9rem;
	}

	.tlm-showcase-nav-btn span {
		white-space: nowrap;
	}
}

/* Narrow phones: the stage buttons keep their arrows and aria-labels but
   drop the words, so longer translations ("Etapa siguiente") never clip. */
@media (max-width: 420px) {
	.tlm-showcase-controls {
		justify-content: center;
		gap: 1.5rem;
	}

	.tlm-showcase-nav-btn {
		padding: 0.6rem 0.4rem !important;
		min-width: 2.75rem;
		justify-content: center;
	}

	.tlm-showcase-nav-btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* ==================================================================
 * Scene 10 — final cinematic CTA
 * ================================================================== */
.tlm-v3-final {
	position: relative;
	min-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	color: var(--tlm-cream);
}

.tlm-v3-final__media {
	position: absolute;
	inset: -30px 0;
}

.tlm-v3-final__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tlm-v3-final__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 26, 38, 0.88) 0%, rgba(5, 26, 38, 0.55) 55%, rgba(5, 26, 38, 0.15) 100%);
}

.tlm-v3-final__content {
	position: relative;
	z-index: 1;
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5rem) var(--tlm-section-px);
	width: 100%;
}

.tlm-v3-final__mark {
	display: block;
	width: 52px;
	height: 31px;
	object-fit: contain;
	margin-bottom: 1rem;
}

.tlm-v3-final__title {
	font-family: var(--tlm-font-display);
	font-weight: 600;
	color: var(--tlm-cream);
	font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.75rem);
	line-height: 1.04;
	max-width: 16ch;
	margin: 0 0 1.5rem;
}

.tlm-v3-final__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.25rem;
}

/* ==================================================================
 * Header — sticky transparent-to-solid
 * ================================================================== */
/* Sticky still occupies its box in normal flow at scroll-top, which
   left a cream gap (the page background showing through) above the
   hero image. Fixed removes the header from flow entirely so the
   photo can start at true y:0 and the header floats over it. Keyed on
   the presence of a cinematic hero (Home's full hero or an internal
   page's shorter page-hero) rather than being home-only, so every V3
   page with a dark opening scene gets the same transparent-over-photo
   treatment. Pages with no such hero (none yet) keep the plain solid
   header via the fallback rule below. */
.tlm-v3-page:has([data-tlm-theme="hero"]) body .ct-header {
	/* !important: Blocksy's own #header ID rule (position: relative,
	   used internally for its dropdown positioning context) outranks
	   any class selector on specificity alone, regardless of class count. */
	position: fixed !important;
	width: 100%;
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header,
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header [data-row*="middle"] {
	/* !important: Blocksy's Customizer generates its own inline CSS
	   setting an opaque background on [data-row="middle"] — a CHILD of
	   .ct-header, with its own separate background — not just on
	   .ct-header itself. Neutralizing only the outer element left this
	   inner row painting solid white over the hero photo, which is what
	   actually produced the "white bar over the hero" bug: #header's own
	   background was correctly transparent the whole time. */
	background-color: transparent !important;
	background-image: none !important;
	border-bottom-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transition: background-color var(--tlm-v3-dur-short) var(--tlm-v3-ease-out), border-color var(--tlm-v3-dur-short) var(--tlm-v3-ease-out);
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header .ct-menu-link,
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header .site-title,
.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header .ct-icon svg {
	color: var(--tlm-cream);
}

.tlm-v3-page:has([data-tlm-theme="hero"]) .ct-header:not(.tlm-v3-header--solid) .ct-header-trigger {
	color: var(--tlm-cream, #f7f2e8) !important;
}

.tlm-v3-page .ct-header.tlm-v3-header--solid .ct-header-trigger,
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .ct-header-trigger {
	color: var(--tlm-navy, #063247) !important;
}

@media (min-width: 1000px) {
	.ct-header [data-row*="middle"] {
		min-height: 88px !important;
	}

	.ct-header [data-row*="middle"] .ct-container {
		/* Blocksy sizes this box from its own container setting (viewport
		   minus a fixed margin) and the gutter was then added on top, so
		   the logo sat a full gutter further in than every section below.
		   width:100% + the shared content box aligns it with the page. */
		width: 100% !important;
		max-width: var(--tlm-content-box) !important;
		margin-inline: auto !important;
		padding-inline: var(--tlm-section-px, 1.5rem) !important;
	}

	.ct-header .site-logo-container {
		height: 56px !important;
		display: flex !important;
		align-items: center !important;
	}

	.ct-header img.default-logo,
	.ct-header img.tlm-v3-header-logo-light {
		height: 52px !important;
		width: auto !important;
		max-width: 320px !important;
	}

	.ct-header nav ul.menu > li:not(.tlm-header-cta) > .ct-menu-link {
		font-size: 0.94rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.05em !important;
		padding: 0.5rem 0.85rem !important;
	}
}

@media (max-width: 999px) {
	.ct-header [data-row*="middle"] {
		min-height: 74px !important;
	}

	.ct-header .site-logo-container {
		height: 42px !important;
		display: flex !important;
		align-items: center !important;
	}

	.ct-header img.default-logo,
	.ct-header img.tlm-v3-header-logo-light,
	.ct-header img.tlm-v3-header-logo-compact {
		height: 38px !important;
		width: auto !important;
		max-width: 220px !important;
	}

	.ct-header .ct-header-trigger {
		width: 44px !important;
		height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.ct-header .ct-header-trigger .ct-icon {
		width: 24px !important;
		height: 18px !important;
		fill: currentColor !important;
	}
}

.tlm-v3-page .ct-header.tlm-v3-header--solid,
.tlm-v3-page .ct-header.tlm-v3-header--solid [data-row*="middle"] {
	background-color: rgba(247, 242, 232, 0.94) !important;
	-webkit-backdrop-filter: saturate(160%) blur(10px) !important;
	backdrop-filter: saturate(160%) blur(10px) !important;
	border-bottom-color: rgba(0, 56, 95, 0.1) !important;
}

.tlm-v3-page .ct-header.tlm-v3-header--solid .ct-menu-link {
	color: var(--tlm-navy);
}

/* Fallback: a V3 page with no cinematic hero keeps the plain solid header always */
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header {
	background-color: rgba(247, 242, 232, 0.94) !important;
	-webkit-backdrop-filter: saturate(160%) blur(10px) !important;
	backdrop-filter: saturate(160%) blur(10px) !important;
}

.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .ct-menu-link {
	color: var(--tlm-navy);
}

/* ==================================================================
 * Mobile offcanvas — theme Blocksy's existing accessible panel
 * (inert-managed focus containment, native Escape-to-close) rather
 * than replacing a working mechanism with a bespoke one.
 * ================================================================== */
/* The outer #offcanvas element is the full viewport width but has a
   transparent background — Blocksy paints the visible panel on a
   CHILD, .ct-panel-inner, which is itself inset ~39px from the left
   edge and carries its own hardcoded dark-grey background
   (rgba(18,21,25,.98), not this theme's navy-black). Left as found,
   that 39px gap is genuinely transparent — the page behind the drawer
   (hero photo, headline text) shows through raw, which is what
   produced the stray glyph fragments on the left edge. Painting the
   outer element solid closes that gap; overriding the inner element's
   background brings the visible panel to the brand's actual ink tone
   instead of Blocksy's default. Found by measuring both elements'
   rects and computed backgrounds directly, not assumed. */
.tlm-v3-page #offcanvas.ct-panel {
	/* !important: same recurring pattern as elsewhere in this file —
	   Blocksy's own CSS sets this transparent on the .active state with
	   specificity/order this plain ID+class selector doesn't beat. */
	background: var(--tlm-v3-ink) !important;
}

.tlm-v3-page #offcanvas .ct-panel-inner {
	background-color: var(--tlm-v3-ink) !important;
}

.tlm-v3-page #offcanvas .ct-toggle-close {
	color: var(--tlm-cream);
}

/* Note: the mobile nav's <ul> renders with class="" (empty) — unlike
   the desktop menu's <ul class="menu">, Blocksy doesn't add a .menu
   class here. A selector requiring .menu as an ancestor silently never
   matches on mobile; found by inspecting the actual served markup, not
   assumed from the desktop structure. */
.tlm-v3-page #offcanvas .ct-menu-link {
	font-family: var(--tlm-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--tlm-cream);
	padding-block: 0.6rem;
}

.tlm-v3-page #offcanvas .ct-menu-link:hover,
.tlm-v3-page #offcanvas .ct-menu-link:focus-visible {
	color: var(--tlm-gold);
}

/* Restrained cream-outline treatment (spec FR-003) — the drawer sits on a
   navy surface, so this mirrors the transparent-over-hero header state
   rather than the solid/cream one. Overrides tropical-theme.css's base
   .tlm-header-cta > a rule here because #offcanvas is a higher-specificity
   ID selector loaded after it; see the enqueue order note in functions.php. */
.tlm-v3-page #offcanvas .tlm-header-cta > a {
	position: relative;
	background-color: transparent;
	color: var(--tlm-cream);
	border: 1.5px solid var(--tlm-cream);
	border-radius: 10px;
	min-height: 2.75rem;
	padding: 0.6em 1.4em;
	font-family: var(--tlm-font-body);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tlm-v3-page #offcanvas .tlm-header-cta > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 1.1rem;
	height: 2px;
	background: var(--tlm-gold);
	transform: translateX(-50%);
}

.tlm-v3-page #offcanvas .tlm-header-cta > a:hover,
.tlm-v3-page #offcanvas .tlm-header-cta > a:focus-visible {
	background-color: var(--tlm-cream);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-cream);
}

.tlm-v3-page #offcanvas .tlm-header-cta > a:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 2px;
}

/* ==================================================================
 * Home — photographic filmstrip (dominant + one supporting crop)
 * ================================================================== */
.tlm-v3-filmstrip {
	padding-block: var(--tlm-section-py);
	background: var(--tlm-cream);
}

.tlm-v3-filmstrip__head {
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	align-items: flex-start;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.tlm-v3-filmstrip__numeral {
	font-family: var(--tlm-font-display);
	font-weight: 600;
	font-size: clamp(3rem, 2.4rem + 3vw, 5.5rem);
	line-height: 1;
	color: var(--tlm-gold-ink); /* --tlm-gold measures ~2.6:1 on cream; see :root comment */
	flex-shrink: 0;
}

.tlm-v3-filmstrip__head-text {
	flex: 1;
	min-width: 0;
}

/* Draw-once progress line (spec: "visible process line/progress marker"),
   same technique as the footer route SVG — a single reveal, not a
   scroll-scrubbed animation. Final state (full width) is always the base
   CSS state; JS only adds the delayed grow-from-zero under
   prefers-reduced-motion: no-preference. */
.tlm-v3-filmstrip__line {
	margin-top: clamp(1rem, 3vw, 1.75rem);
	height: 2px;
	max-width: 14rem;
	background: rgba(11, 43, 66, 0.12);
	overflow: hidden;
}

.tlm-v3-filmstrip__line-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--tlm-gold);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-filmstrip__line-fill {
		transform: scaleX(0);
		transition: transform 900ms var(--tlm-v3-ease-out);
	}

	.tlm-v3-filmstrip__line.is-in .tlm-v3-filmstrip__line-fill {
		transform: scaleX(1);
	}
}

.tlm-v3-filmstrip__kicker {
	font-family: var(--tlm-font-body);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tlm-gold-ink); /* --tlm-gold measures ~2.6:1 on cream; see :root comment */
	margin-bottom: 0.5rem;
}

.tlm-v3-filmstrip__lede {
	max-width: 32rem;
	font-family: var(--tlm-font-display);
	font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
	color: var(--tlm-navy);
}

/* Composition (spec FR-016 + structural-reconstruction "section 04"):
   dominant photograph occupies ~65-70% of the visual field and, at desktop
   widths, breaks the normal content container to bleed to the true
   viewport edge; the supporting photograph overlaps its lower-right corner
   as an absolutely-positioned inset rather than a second grid column — a
   grid track can never reach the viewport edge while the grid itself stays
   centered/constrained, so the two-image spread has to be a single
   full-bleed image with a smaller image layered on top of it, not two
   images side by side. Mobile stacks both in normal flow (spec FR-039). */
.tlm-v3-filmstrip__grid {
	position: relative;
	max-width: var(--tlm-content-box);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px);
}

.tlm-v3-filmstrip__dominant,
.tlm-v3-filmstrip__supporting {
	margin: 0;
	overflow: hidden;
}

.tlm-v3-filmstrip__dominant img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tlm-v3-filmstrip__supporting {
	margin-top: clamp(2.5rem, 7vw, 5rem);
	margin-left: clamp(-3rem, -4vw, -1.5rem);
	position: relative;
	z-index: 1;
	border: 6px solid var(--tlm-cream);
}

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

/* Container break: the grid drops its max-width/centering so the dominant
   image's own box spans from the page's usual left edge all the way to
   the true viewport right edge (padding-inline-end: 0); the supporting
   photograph becomes absolutely positioned, inset from that same true
   edge so it doesn't itself bleed, reading as a deliberate inset frame
   over the full-bleed dominant image beneath it. */
@media (min-width: 1000px) {
	.tlm-v3-filmstrip__grid {
		max-width: none;
		margin-inline: 0;
		padding-inline-start: max(calc((100vw - var(--tlm-container-wide)) / 2), var(--tlm-section-px));
		padding-inline-end: 0;
	}

	.tlm-v3-filmstrip__dominant {
		width: 100%;
	}

	.tlm-v3-filmstrip__dominant img {
		aspect-ratio: 21 / 11;
	}

	/* Caption stays inset from the bled right edge for readability even
	   though the image itself runs flush to the viewport border. */
	.tlm-v3-filmstrip__dominant > .tlm-v3-filmstrip__caption {
		padding-inline-end: clamp(1.5rem, 4vw, 3rem);
	}

	.tlm-v3-filmstrip__supporting {
		position: absolute;
		right: clamp(2rem, 6vw, 4.5rem);
		bottom: clamp(-2.5rem, -3vw, -1.5rem);
		width: clamp(15rem, 22vw, 21rem);
		margin: 0;
	}
}

.tlm-v3-filmstrip__caption {
	margin-top: 0.6rem;
	font-family: var(--tlm-font-body);
	font-size: 0.78rem;
	color: var(--tlm-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-v3-filmstrip__dominant img,
	.tlm-v3-filmstrip__supporting img {
		transform: scale(1.05);
		transition: transform 0.8s var(--tlm-v3-ease-out);
	}

	[data-tlm-reveal].is-in .tlm-v3-filmstrip__dominant img,
	.tlm-v3-filmstrip__dominant.is-in img,
	.tlm-v3-filmstrip__supporting.is-in img {
		transform: scale(1);
	}
}

@media (max-width: 999px) {
	.tlm-v3-filmstrip__head {
		flex-direction: column;
		gap: 0.75rem;
	}

	.tlm-v3-filmstrip__numeral {
		font-size: clamp(2.25rem, 1.9rem + 3vw, 3rem);
	}

	/* Overlap simplifies to a plain stack at mobile/tablet widths (spec
	   FR-039) — the negative margin/frame only makes sense once the
	   dominant image is full-bleed at desktop widths. */
	.tlm-v3-filmstrip__supporting {
		margin-top: var(--tlm-gap-md);
		margin-left: 0;
		border: none;
	}
}

/* ==================================================================
 * Gallery lightbox — native <dialog>, showModal() handles focus
 * containment and Escape-to-close; only the visual chrome and
 * counter/caption wiring are custom.
 * ================================================================== */
.tlm-collage__frame {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.tlm-lightbox {
	/* !important: a top-layer, fixed-position dialog must fill the real
	   viewport regardless of the WordPress "constrained layout" content-width
	   rule its parent group applies to direct children (max-width + auto
	   margins) — the .alignfull class on the element opts it out of that
	   selector, this is the belt-and-suspenders guarantee. */
	position: fixed !important;
	inset: 0 !important;
	max-width: 100vw !important;
	max-height: 100dvh !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0;
	border: none;
	background: var(--tlm-v3-ink);
	color: var(--tlm-cream);
}

.tlm-lightbox::backdrop {
	background: rgba(5, 26, 38, 0.92);
}

.tlm-lightbox[open] {
	display: flex;
	flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-lightbox {
		opacity: 0;
		transition: opacity var(--tlm-v3-dur-short) var(--tlm-v3-ease-out),
		            display var(--tlm-v3-dur-short) allow-discrete,
		            overlay var(--tlm-v3-dur-short) allow-discrete;
	}

	.tlm-lightbox[open] {
		opacity: 1;
	}

	@starting-style {
		.tlm-lightbox[open] {
			opacity: 0;
		}
	}

	.tlm-lightbox::backdrop {
		opacity: 0;
		transition: opacity var(--tlm-v3-dur-short) var(--tlm-v3-ease-out),
		            display var(--tlm-v3-dur-short) allow-discrete,
		            overlay var(--tlm-v3-dur-short) allow-discrete;
	}

	.tlm-lightbox[open]::backdrop {
		opacity: 1;
	}

	@starting-style {
		.tlm-lightbox[open]::backdrop {
			opacity: 0;
		}
	}

	.tlm-lightbox__image {
		transition: opacity 180ms ease, transform 180ms ease;
	}

	.tlm-lightbox__image.is-fading {
		opacity: 0;
		transform: scale(0.98);
	}
}

.tlm-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem clamp(1rem, 3vw, 2rem);
	flex: 0 0 auto;
}

.tlm-lightbox__counter {
	font-family: var(--tlm-font-body);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: rgba(247, 242, 232, 0.75);
}

.tlm-lightbox__close {
	background: none !important;
	border: none !important;
	color: var(--tlm-cream);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem !important;
	transition: color var(--tlm-v3-dur-micro) var(--tlm-v3-ease-out), transform var(--tlm-v3-dur-micro) var(--tlm-v3-ease-out);
}

.tlm-lightbox__close:hover {
	color: var(--tlm-gold);
	transform: scale(1.1);
}

.tlm-lightbox__close:focus-visible,
.tlm-lightbox__nav:focus-visible,
.tlm-collage__frame:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 2px;
}

.tlm-lightbox__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 clamp(1rem, 5vw, 4rem);
}

.tlm-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.tlm-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(247, 242, 232, 0.1) !important;
	border: none !important;
	color: var(--tlm-cream);
	font-size: 1.5rem;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	cursor: pointer;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--tlm-v3-dur-micro) var(--tlm-v3-ease-out), transform var(--tlm-v3-dur-micro) var(--tlm-v3-ease-out);
}

.tlm-lightbox__nav--prev {
	left: clamp(0.5rem, 2vw, 1.5rem);
}

.tlm-lightbox__nav--next {
	right: clamp(0.5rem, 2vw, 1.5rem);
}

@media (hover: hover) and (pointer: fine) {
	.tlm-lightbox__nav:hover {
		background: rgba(247, 242, 232, 0.25) !important;
		transform: translateY(-50%) scale(1.06);
	}
}

.tlm-lightbox__caption {
	flex: 0 0 auto;
	text-align: center;
	font-family: var(--tlm-font-body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tlm-gold);
	padding: 1rem clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
	margin: 0;
}

@media (max-width: 640px) {
	.tlm-lightbox__nav {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.25rem;
	}
}

/* ==================================================================
 * Mobile off-canvas — action-area grouping.
 * Desktop and mobile intentionally share one WordPress menu (so both
 * always stay in sync with zero duplication); the off-canvas list is
 * that same menu rendered as a vertical stack. Reserve Your Tour / the
 * language pair / Cart are still plain <li> siblings after the six
 * "Explore" links, so a light rule above each one is enough to read as
 * a separate action area without touching Blocksy's own panel markup.
 * Unscoped by page class (unlike the .tlm-v3-page-only offcanvas rules
 * above) so it applies consistently on every page, not just V3 ones.
 * ================================================================== */
#offcanvas .ct-panel-content li.tlm-header-cta {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 253, 248, 0.16);
}

#offcanvas .ct-panel-content li.tlm-lang-switch {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 253, 248, 0.16);
}

#offcanvas .ct-panel-content li.tlm-lang-switch > a {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: 3px;
	padding: 4px;
	border: 1px solid rgba(255, 253, 248, 0.35);
	border-radius: 999px;
}

#offcanvas .ct-panel-content li.tlm-lang-switch .tlm-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 60, "WONK" 0;
	font-size: 1rem;
	font-weight: 700;
	opacity: 0.62;
	transition: opacity 0.2s ease;
}

#offcanvas .ct-panel-content li.tlm-lang-switch .tlm-lang__opt.is-current {
	opacity: 1;
	background: linear-gradient(160deg, var(--vb-sun, #ffc94d), var(--vb-tangerine, #f59a3b));
	color: var(--vb-night, var(--tlm-navy-dark, #0b1f2a));
	box-shadow: 0 2px 0 rgba(27, 18, 48, 0.28);
}

/* ==================================================================
 * Shared plain-link button variants — for templates like 404.php and
 * search.php that render outside the block editor, so they can't use
 * .wp-block-button__link (the Gutenberg button markup .tlm-cta-primary/
 * secondary style). Same tokens, same visual result.
 * ================================================================== */
.tlm-cta-primary-link,
.tlm-cta-secondary-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.65em 1.5em;
	border-radius: 10px;
	font-family: var(--tlm-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tlm-cta-primary-link {
	background: var(--tlm-gold);
	color: var(--tlm-navy-dark);
}

.tlm-cta-primary-link:hover,
.tlm-cta-primary-link:focus-visible {
	background: var(--tlm-gold-soft);
	transform: translateY(-1px);
}

.tlm-cta-secondary-link {
	background: transparent;
	color: var(--tlm-navy);
	border: 1.5px solid var(--tlm-navy);
}

.tlm-cta-secondary-link:hover,
.tlm-cta-secondary-link:focus-visible {
	background: var(--tlm-navy);
	color: var(--tlm-cream);
}

.tlm-cta-primary-link:focus-visible,
.tlm-cta-secondary-link:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 3px;
}

.tlm-on-dark .tlm-cta-secondary-link {
	color: var(--tlm-cream);
	border-color: rgba(247, 242, 232, 0.55);
}

.tlm-on-dark .tlm-cta-secondary-link:hover,
.tlm-on-dark .tlm-cta-secondary-link:focus-visible {
	background: var(--tlm-cream);
	color: var(--tlm-navy-dark);
	border-color: var(--tlm-cream);
}

/* ==================================================================
 * Search results
 * ================================================================== */
.tlm-search-page {
	background: var(--tlm-cream);
	padding: clamp(3rem, 6vw, 5rem) var(--tlm-section-px);
	min-height: 50vh;
}

.tlm-search-page__inner {
	max-width: var(--tlm-container-text);
	margin-inline: auto;
}

.tlm-search-page__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--tlm-gold-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
}

.tlm-search-page__title {
	margin: 0 0 2rem;
	font-family: var(--tlm-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
	color: var(--tlm-navy);
	line-height: 1.25;
	word-break: break-word;
}

.tlm-search-page__results {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.tlm-search-page__result-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-radius: 10px;
	background: var(--tlm-surface);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tlm-search-page__result-link:hover,
.tlm-search-page__result-link:focus-visible {
	box-shadow: 0 10px 24px rgba(6, 50, 71, 0.1);
	transform: translateY(-1px);
}

.tlm-search-page__result-link:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 2px;
}

.tlm-search-page__result-thumb {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tlm-cream-soft);
}

.tlm-search-page__result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tlm-search-page__result-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.tlm-search-page__result-type {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tlm-gold-ink);
}

.tlm-search-page__result-title {
	font-family: var(--tlm-font-display);
	font-size: 1.15rem;
	color: var(--tlm-navy);
}

.tlm-search-page__result-excerpt {
	font-size: 0.9rem;
	color: var(--tlm-text-muted);
	line-height: 1.5;
}

.tlm-search-page__result-price {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--tlm-navy);
}

.tlm-search-page__empty-text {
	margin: 0 0 2rem;
	color: var(--tlm-text-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

.tlm-search-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2.5rem;
}

.tlm-search-page__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	min-height: 2.4rem;
	padding-inline: 0.5rem;
	margin-inline-end: 0.4rem;
	border-radius: 8px;
	border: 1px solid rgba(6, 50, 71, 0.16);
	color: var(--tlm-navy);
	text-decoration: none;
}

.tlm-search-page__pagination .page-numbers.current {
	background: var(--tlm-navy);
	border-color: var(--tlm-navy);
	color: var(--tlm-cream);
}

.tlm-search-page__form {
	display: flex;
	gap: 0.5rem;
	max-width: 26rem;
}

.tlm-search-page__form input[type="search"] {
	flex: 1;
	min-height: 2.9rem;
	padding-inline: 1rem;
	border: 1.5px solid rgba(6, 50, 71, 0.25);
	border-radius: 10px;
	background: var(--tlm-surface);
	font-size: 1rem;
	color: var(--tlm-navy);
}

.tlm-search-page__form input[type="search"]:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 2px;
}

.tlm-search-page__form button {
	min-height: 2.9rem;
	padding-inline: 1.25rem;
	border: none;
	border-radius: 10px;
	background: var(--tlm-navy);
	color: var(--tlm-cream);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tlm-search-page__form button:hover,
.tlm-search-page__form button:focus-visible {
	background: var(--tlm-navy-dark);
}

@media (max-width: 480px) {
	.tlm-search-page__result-link {
		flex-direction: column;
		align-items: flex-start;
	}

	.tlm-search-page__result-thumb {
		width: 100%;
		height: 10rem;
	}
}

/* ==================================================================
 * Floating WhatsApp button (inc/floating-whatsapp.php) — one
 * site-wide fixed control, bottom-right, above content but below the
 * fixed header (z-index 100) so it never fights header dropdowns.
 * Entrance reuses the generic [data-tlm-reveal] system (site-
 * experience.js); reduced-motion / no-JS visitors see it in its final
 * position immediately (opacity/transform only inside is-in).
 * ================================================================== */
.tlm-floating-whatsapp {
	position: fixed;
	right: clamp(14px, 2vw, 28px);
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.6rem 1rem;
	background: var(--tlm-green);
	color: var(--tlm-cream);
	border-radius: 2px;
	text-decoration: none;
	font-family: var(--tlm-font-body);
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: 0 2px 10px rgba(2, 31, 44, 0.25);
	transition: opacity 0.3s var(--tlm-v3-ease-out, ease), background-color 0.2s ease;
}

/* Tucked away while the footer is on screen. */
.tlm-floating-whatsapp.is-tucked {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
}

.tlm-floating-whatsapp:hover,
.tlm-floating-whatsapp:focus-visible {
	background: #26493a;
	color: var(--tlm-cream);
}

.tlm-floating-whatsapp:focus-visible {
	outline: 2px solid var(--tlm-gold);
	outline-offset: 3px;
}

.tlm-floating-whatsapp__icon {
	width: 1.35rem;
	height: 1.35rem;
	flex-shrink: 0;
	line-height: 0;
}

.tlm-floating-whatsapp__icon svg {
	width: 100%;
	height: 100%;
}

/* Entrance: fades/lifts in once JS confirms the page has loaded and
   motion is allowed; final position/opacity is the default state above
   so the button is fully visible and clickable with JS off. */
@media (prefers-reduced-motion: no-preference) {
	.tlm-floating-whatsapp {
		opacity: 0;
		transform: translateY(12px);
	}

	.tlm-floating-whatsapp.is-in {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.4s var(--tlm-v3-ease-out, ease), transform 0.4s var(--tlm-v3-ease-out, ease);
	}

}

@media print {
	.tlm-floating-whatsapp {
		display: none;
	}
}

/* Mobile: compact circular touch target (~56px) with the label hidden
   visually but kept for assistive tech via the button's aria-label
   already covering it — visible text collapses to icon-only so the
   control never crowds the rest of the mobile viewport. */
@media (max-width: 600px) {
	.tlm-floating-whatsapp {
		width: 48px;
		height: 48px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	.tlm-floating-whatsapp__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ==================================================================
 * Our Story — intro paragraph + family photo mosaic
 * (patterns/our-story-intro.php, patterns/our-story-family-mosaic.php)
 * ================================================================== */
.tlm-story-intro {
	padding: clamp(2rem, 4vw, 3rem) var(--tlm-section-px) 0;
}

.tlm-story-intro p {
	font-family: var(--tlm-font-display);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.55;
	color: var(--tlm-navy);
	margin: 0;
}

.tlm-story-mosaic-section {
	padding-block: var(--tlm-section-py);
}

.tlm-story-mosaic-section .wp-block-heading {
	margin: 0;
	font-family: var(--tlm-font-display);
	font-size: clamp(1.8rem, 2.8vw, 2.6rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--tlm-navy);
}

/* Five photographs on a 12-column grid; captions sit under each image. */
.tlm-story-mosaic {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.tlm-story-mosaic__item {
	margin: 0;
	min-width: 0;
}

.tlm-story-mosaic__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
}

.tlm-story-mosaic__item:nth-child(1) { grid-column: 1 / span 7; }
.tlm-story-mosaic__item:nth-child(1) img { aspect-ratio: 3 / 2; }
.tlm-story-mosaic__item:nth-child(2) { grid-column: 8 / span 5; align-self: end; }
.tlm-story-mosaic__item:nth-child(3) { grid-column: 1 / span 4; }
.tlm-story-mosaic__item:nth-child(4) { grid-column: 5 / span 4; }
.tlm-story-mosaic__item:nth-child(5) { grid-column: 9 / span 4; }

.tlm-story-mosaic__caption {
	text-align: left;
	margin-top: 0.75rem;
	max-width: 44ch;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tlm-text-muted);
}

@media (max-width: 900px) {
	.tlm-story-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tlm-story-mosaic__item:nth-child(n) { grid-column: auto; align-self: start; }
	.tlm-story-mosaic__item:nth-child(1) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.tlm-story-mosaic { grid-template-columns: minmax(0, 1fr); }
	.tlm-story-mosaic__item:nth-child(1) { grid-column: auto; }
}

/* Editorial composition: shared by the home introduction and experience. */
.tlm-editorial-list {
  width: min(1280px, calc(100% - 2 * var(--tlm-section-px)));
  margin: var(--tlm-section-quiet) auto 0;
}
.tlm-editorial-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  gap: var(--tlm-gap-lg);
  padding: var(--tlm-space-action) 0;
  border-top: var(--tlm-border);
}
.tlm-editorial-list__row h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.25; }
.tlm-editorial-list__row p { margin: 0; max-width: var(--tlm-measure); }

/* The family photograph is the opening's principal visual, without arch or seal. */
.tlm-story-hero-split { background: var(--tlm-navy-dark); padding-block: calc(var(--tlm-v3-header-h) + 3rem) var(--tlm-section-quiet); }
.tlm-story-hero-split__container { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); gap: var(--tlm-gap-lg); }
.tlm-story-hero-split__title { font-size: clamp(2.3rem, 4.2vw, 4rem); max-width: 17ch; margin-bottom: var(--tlm-space-group); }
.tlm-story-hero-split__desc { font-size: 1rem; line-height: 1.7; margin-bottom: var(--tlm-space-action); }
.tlm-story-hero-split__visual { width: 100%; max-width: none; }
.tlm-story-hero-split__frame { width: 100%; max-width: none; max-height: none; height: auto; aspect-ratio: 5 / 4; border: 0; border-radius: 3px; box-shadow: none; transform: none; }
.tlm-story-hero-split__img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.tlm-story-hero-split__frame-overlay { display: none; }
.tlm-story-hero-split__badge { padding: 0; border: 0; background: none; backdrop-filter: none; margin-bottom: var(--tlm-space-group); }
.tlm-story-hero-split__badge-icon { display: none; }
.tlm-floating-whatsapp { top: auto; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: none; }
@media (max-width: 900px) {
  .tlm-story-hero-split__container { grid-template-columns: minmax(0, 1fr); }
  .tlm-story-hero-split__title { max-width: 20ch; }
  .tlm-story-hero-split__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .tlm-editorial-list__row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
body { background-color: var(--tlm-cream) !important; background-image: none; }
body :is(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--tlm-gold-ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}
