:root, .tenant {
	--t-paper: var(--background, #ffffff);
	--t-ink: var(--foreground, #111111);
	--t-brand: var(--primary, #111111);
	--t-brand-ink: var(--primary-foreground, #ffffff);
	--t-support: var(--secondary, #333333);
	--t-support-ink: var(--secondary-foreground, #ffffff);
	--t-link: var(--link, var(--primary, #2563eb));
	--t-link-hover: var(--link-hover, var(--link, var(--primary, #2563eb)));
	--t-line: color-mix(in srgb, var(--foreground, #111111) 14%, transparent);
	--t-font-heading: var(--font-heading, 'Bricolage Grotesque', system-ui, sans-serif);
	--t-font-body: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
	--t-font-mono: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
}

/* Reset — blocks assume border-box + zeroed margins */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* The [hidden] attribute must always win: toggle traits hide an element by setting
   hidden="true", but a block's own display:flex/grid on that element would otherwise
   beat the UA [hidden]{display:none} rule, so the toggle would do nothing. */
[hidden] { display: none !important; }

/* Tenant base typography */
.tenant {
	font-family: var(--t-font-body, system-ui, sans-serif);
	color: var(--t-ink, #17181C);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.tenant h1, .tenant h2, .tenant h3 {
	font-family: var(--t-font-heading, system-ui, sans-serif);
	letter-spacing: -0.02em;
	line-height: 1.08;
	font-weight: 800;
}
.tenant p { margin: 0; }
.tenant a { color: inherit; }
/* Brand link colours — CLASSLESS anchors only (inline text links, incl. those the RTE
   inserts). Anchors with a class (buttons, nav, card links) keep their block styling.
   Specificity is deliberately mid-tier: beats the inherit reset above, loses to any
   block rule (.tenant.x .y a) and to per-element Style-panel overrides (#id). */
.tenant a:not([class]) { color: var(--t-link); }
.tenant a:not([class]):hover { color: var(--t-link-hover); }

/* Tables authored inline via the rich-text editor (also shipped to published). */
.tenant table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.tenant :is(td, th) { border: 1px solid var(--t-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.tenant th { background: color-mix(in srgb, var(--t-ink) 6%, transparent); font-weight: 700; }

/* Lists authored inline via the rich-text editor. Tailwind Preflight on the CFW host resets
   ol/ul to list-style:none with zero margin/padding, which strips RTE list markers — restore
   them here (this sheet ships to published). The .tenant prefix out-specifies element-level
   Preflight, and markers inherit the surface ink colour. */
.tenant :is(ol, ul) { margin: 12px 0; padding-left: 1.5em; }
.tenant ol { list-style: decimal; }
.tenant ul { list-style: disc; }
.tenant ul ul { list-style: circle; }
.tenant ul ul ul { list-style: square; }
.tenant :is(ol, ul) :is(ol, ul) { margin: 4px 0; }
.tenant li { margin: 4px 0; }
.tenant li::marker { color: inherit; }

/* Images fit their container by default (the standalone Image block + block imagery). */
.tenant img { max-width: 100%; height: auto; }


/* Eyebrow label + driving-school "L plate" accent */
.tenant .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.tenant .eyebrow .l-plate {
	display: inline-grid;
	place-items: center;
	width: 22px; height: 22px;
	background: var(--t-brand);
	color: var(--t-brand-ink);
	font-family: var(--t-font-heading, sans-serif);
	font-weight: 800;
	font-size: 13px;
	border-radius: 4px;
}
.tenant .stars { color: var(--t-brand); letter-spacing: 2px; font-size: 15px; }
.tenant p.lead { font-size: 17px; color: color-mix(in srgb, var(--t-ink) 78%, transparent); }

/* Section head — eyebrow + heading + intro, shared by sectioned blocks */
.tenant .section-head { max-width: 720px; }
.tenant .section-head.centre { margin-left: auto; margin-right: auto; text-align: center; }
.tenant .section-head h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: 10px; }
.tenant .section-head .intro { margin-top: 12px; font-size: 16.5px; color: color-mix(in srgb, var(--t-ink) 72%, transparent); }

/* CTA pair — primary + optional secondary */
.tenant .cta-pair { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tenant .cta, .tenant.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 700 15px var(--t-font-body, sans-serif);
	background: var(--t-brand);
	color: var(--t-brand-ink);
	padding: 13px 24px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease;
}
.tenant .cta:hover, .tenant.cta:hover { transform: translateY(-1px); }
.tenant .cta-secondary, .tenant.cta-secondary {
	background: transparent;
	color: var(--t-ink);
	border: 1.5px solid var(--t-line);
}
.on-dark .cta-secondary { color: var(--t-paper); border-color: color-mix(in srgb, var(--t-paper) 30%, transparent); }

/* Suburb selector widget — the standard hero conversion element */
.suburb-widget { width: 100%; max-width: 560px; }
.sw-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Always a light pill — re-establish light-surface tokens locally so the input
	   text stays dark even when the section is Surface:Dark (which would otherwise
	   flip --t-ink to light and make the input invisible on the white bar). */
	--t-ink: #17181c;
	--t-line: color-mix(in srgb, #17181c 12%, transparent);
	background: #fff;
	border: 1.5px solid var(--t-line);
	border-radius: 999px;
	padding: 6px 6px 6px 20px;
	box-shadow: 0 14px 34px -18px rgba(23, 24, 28, 0.4);
}
.sw-bar:focus-within { border-color: var(--t-ink); }
.sw-bar .sw-icon { flex: none; width: 20px; height: 20px; color: #8A8B90; }
.sw-bar input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font: 500 16px var(--t-font-body, sans-serif);
	color: var(--t-ink);
}
.sw-bar input::placeholder { color: #9A9BA0; }
.sw-btn {
	flex: none;
	border: none;
	cursor: pointer;
	font: 700 15px var(--t-font-body, sans-serif);
	background: var(--t-brand);
	color: var(--t-brand-ink);
	padding: 13px 24px;
	border-radius: 999px;
	transition: transform 0.15s ease;
}
.sw-btn:hover { transform: translateY(-1px); }
.sw-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--t-brand);
	text-decoration: none;
}
.sw-link:hover { text-decoration: underline; }
.on-dark .sw-bar { border-color: color-mix(in srgb, var(--t-paper) 25%, transparent); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65); }
.on-dark .sw-link { color: var(--t-brand); }
.sw-center { margin-left: auto; margin-right: auto; }
.sw-center .sw-link { justify-content: center; width: 100%; }
/* Canvas-only badge: the widget is inert here, live on the published site.
   In protectedCss, so it never ships in exported page CSS. */
.suburb-widget { position: relative; }
.suburb-widget[data-obk-widget]::after {
	content: "\26A1 Live search \2014 active on your published site";
	position: absolute;
	top: -11px;
	left: 12px;
	font-family: var(--t-font-mono, monospace);
	font-size: 10px;
	letter-spacing: 0.04em;
	background: var(--t-support, #2E5E4E);
	color: var(--t-support-ink, #fff);
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
}

/* ===== The 6 canonical section surfaces (universal Surface trait) =====
   Each surface remaps the local --t-* tokens (paper=bg, ink=text, line=hairline,
   plus the brand accent) so ALL nested token-based block content adapts — then
   paints bg/color from them.

   Dark-mode rule (per product): LIGHT surfaces are adaptive (light in light mode,
   dark in dark mode) — achieved by mixing the brand INTO var(--background), which
   flips with the theme. DARK surfaces are fixed (dark in BOTH modes) — achieved by
   mixing the brand INTO black, which can't flip. So the behaviour is guaranteed by
   construction and never depends on how CFW treats the shade ramps in dark mode.
   Hue always follows --primary/--secondary, so surfaces re-brand with no republish. */

/* Light trio — adaptive (base tokens flip with the theme) */
.tenant.obk-surf-page {
	--t-paper: var(--background, #ffffff);
	--t-ink: var(--foreground, #17181C);
	--t-line: color-mix(in srgb, var(--foreground, #17181C) 14%, transparent);
}
.tenant.obk-surf-primary {
	/* ~shade 100: a very light brand tint, mixed into --background so it flips in dark mode */
	--t-paper: color-mix(in srgb, var(--primary, #187fd3) 8%, var(--background, #ffffff));
	--t-ink: var(--foreground, #17181C);
	--t-line: color-mix(in srgb, var(--primary, #187fd3) 24%, transparent);
}
.tenant.obk-surf-secondary {
	--t-paper: color-mix(in srgb, var(--secondary, #d26319) 8%, var(--background, #ffffff));
	--t-ink: var(--foreground, #17181C);
	--t-line: color-mix(in srgb, var(--secondary, #d26319) 24%, transparent);
}

/* Dark trio — fixed (mixed into black; never flips). Light text + lightened accent. */
.tenant.obk-surf-page-dark {
	--t-paper: color-mix(in srgb, var(--primary, #187fd3) 6%, #0d1013);
	--t-ink: #f4f6f8;
	--t-line: color-mix(in srgb, #f4f6f8 15%, transparent);
}
.tenant.obk-surf-primary-dark {
	--t-paper: color-mix(in srgb, var(--primary, #187fd3) 42%, #05070a);
	--t-ink: color-mix(in srgb, var(--primary, #187fd3) 12%, #ffffff);
	--t-line: color-mix(in srgb, #ffffff 18%, transparent);
	/* The surface IS a dark brand band, so the brand accent must lighten to stay legible
	   as text (eyebrows) — and its ink darken so brand buttons (accent bg) keep contrast. */
	--t-brand: color-mix(in srgb, var(--primary, #187fd3) 42%, #ffffff);
	--t-brand-ink: color-mix(in srgb, var(--primary, #187fd3) 30%, #05070a);
}
.tenant.obk-surf-secondary-dark {
	--t-paper: color-mix(in srgb, var(--secondary, #d26319) 42%, #05070a);
	--t-ink: color-mix(in srgb, var(--secondary, #d26319) 12%, #ffffff);
	--t-line: color-mix(in srgb, #ffffff 18%, transparent);
	--t-brand: color-mix(in srgb, var(--secondary, #d26319) 42%, #ffffff);
	--t-brand-ink: color-mix(in srgb, var(--secondary, #d26319) 30%, #05070a);
}

.tenant.obk-surf-page, .tenant.obk-surf-page-dark,
.tenant.obk-surf-primary, .tenant.obk-surf-primary-dark,
.tenant.obk-surf-secondary, .tenant.obk-surf-secondary-dark {
	background: var(--t-paper);
	color: var(--t-ink);
}
.tenant.obk-surf-page-dark :is(h1, h2, h3, h4, h5, h6),
.tenant.obk-surf-primary-dark :is(h1, h2, h3, h4, h5, h6),
.tenant.obk-surf-secondary-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--t-ink); }


/* Overlay scrim + Ken Burns for image/video heroes */
.scrim { position: absolute; inset: 0; z-index: -1; }
.kenburns { animation: obk-kb 22s ease-in-out infinite alternate; }
@keyframes obk-kb { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, -1%); } }

/* Media slot label (canvas affordance for empty media areas) */
.media-slot-label {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 3;
	font-family: var(--t-font-mono, monospace);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(0, 0, 0, 0.5);
	padding: 4px 8px;
	border-radius: 4px;
}

/* Structure drop-slots — Section/Container/Columns ship empty layout containers
   marked .obk-slot. While one is empty the canvas shows a dashed "drop here"
   target; the moment a block is dropped inside, :empty stops matching and the
   affordance vanishes with no leftover element. Editor-only: lives in
   protectedCss, so this never ships to the published page. */
.tenant .obk-slot:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 24px;
	border: 1.5px dashed color-mix(in srgb, currentColor 26%, transparent);
	border-radius: 12px;
}
.tenant .obk-slot:empty::before {
	content: "+ Drop a block here";
	font-family: var(--t-font-mono, monospace);
	font-size: 13px;
	letter-spacing: 0.02em;
	opacity: 0.55;
	pointer-events: none;
}

/* Read-only header/footer context injected into the page canvas (canvas-only) */
[data-obk-chrome] { position: relative; }
[data-obk-chrome]::after {
	content: attr(data-obk-chrome) " \00B7 read-only";
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 6;
	font-family: var(--t-font-mono, monospace);
	font-size: 10px;
	text-transform: capitalize;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 2px 7px;
	border-radius: 4px;
	pointer-events: none;
}

/* ===== Entrance animation system — data-effect + IntersectionObserver =====
   Content is fully visible without JS: hidden states apply only under html.js
   (the lesson from the Google verification rejection). Motion respects
   prefers-reduced-motion. Per-element stagger via the --d custom property. */
html.js [data-effect] { opacity: 0; transition-delay: var(--d, 0s); }
html.js [data-effect].in-view { opacity: 1; }

/* Speed = --dur (default 0.7s), stagger/delay = --d. Direction = the way the
   element travels as it appears. Transition-based effects share one transition. */
html.js [data-effect^="fade"],
html.js [data-effect^="slide"],
html.js [data-effect^="zoom"],
html.js [data-effect^="flip"],
html.js [data-effect="rise-soft"],
html.js [data-effect="rotate"] {
	transition: opacity var(--dur, 0.7s) ease, transform var(--dur, 0.7s) cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--d, 0s);
}
html.js [data-effect^="fade"].in-view,
html.js [data-effect^="slide"].in-view,
html.js [data-effect^="zoom"].in-view,
html.js [data-effect^="flip"].in-view,
html.js [data-effect="rise-soft"].in-view,
html.js [data-effect="rotate"].in-view { transform: none; }

html.js [data-effect="fade-in"] { transition: opacity var(--dur, 1s) ease; transition-delay: var(--d, 0s); }
html.js [data-effect="fade-up"] { transform: translateY(24px); }
html.js [data-effect="fade-down"] { transform: translateY(-24px); }
html.js [data-effect="fade-left"] { transform: translateX(24px); }
html.js [data-effect="fade-right"] { transform: translateX(-24px); }
html.js [data-effect="rise-soft"] { transform: translateY(14px); }
html.js [data-effect="slide-up"] { transform: translateY(64px); }
html.js [data-effect="slide-down"] { transform: translateY(-64px); }
html.js [data-effect="slide-left"] { transform: translateX(64px); }
html.js [data-effect="slide-right"] { transform: translateX(-64px); }
html.js [data-effect="zoom-in"] { transform: scale(0.88); }
html.js [data-effect="zoom-out"] { transform: scale(1.12); }
html.js [data-effect="flip-up"] { transform: perspective(1000px) rotateX(32deg); transform-origin: center bottom; }
html.js [data-effect="flip-down"] { transform: perspective(1000px) rotateX(-32deg); transform-origin: center top; }
html.js [data-effect="flip-left"] { transform: perspective(1000px) rotateY(-32deg); transform-origin: left center; }
html.js [data-effect="flip-right"] { transform: perspective(1000px) rotateY(32deg); transform-origin: right center; }
html.js [data-effect="rotate"] { transform: rotate(-6deg) scale(0.94); }

html.js [data-effect="bounce"].in-view { animation: obk-bounce-in var(--dur, 0.8s) both; animation-delay: var(--d, 0s); }
@keyframes obk-bounce-in {
	0% { opacity: 0; transform: scale(0.3); }
	40% { opacity: 1; transform: scale(1.05); }
	65% { transform: scale(0.94); }
	82% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-effect] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
	.kenburns { animation: none !important; }
}

/* ===== Scroll-linked effects — pure CSS, no runtime =====
   Driven by CSS scroll-driven animations, so unlike the data-effect entrance system
   these need NO JavaScript and survive the shared runtime failing to load.

   Safety contract (same lesson as data-effect above): the element's NORMAL state is its
   final, correct state. All motion is layered on inside @supports, so a browser without
   scroll-driven animation support renders a correct static page — never a blank one.
   Motion is additionally gated on prefers-reduced-motion: no-preference.

   These animate the independent translate/rotate/scale properties rather than transform,
   so they compose with the Style panel's Transform section instead of overwriting it.
   Intensity comes in unitless via per-effect vars (--obk-scroll-parallax etc. — per-effect
   so a value tuned for one effect can never be misread by another); the unit maths lives
   here so the panel only ever stores a number.

   view() measures against the NEAREST ancestor scroll container — and overflow:hidden
   creates one that never scrolls, silently freezing every timeline inside it. That is why
   block CSS clips with "overflow: hidden; overflow: clip;" (clip does not create a scroll
   container; older browsers keep hidden and have no scroll animations anyway) and why the
   Style panel warns when an author re-introduces a clipping ancestor.

   Default ranges are per effect: reveal effects (fade/scale/rotate) complete on ENTRY so
   an element near the bottom of the page — which can never fully cross the viewport —
   still reaches its final state; travel effects (parallax/drift) span the full crossing. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-scroll]:not([data-scroll=""]) {
			animation-timing-function: linear;
			animation-fill-mode: both;
		}

		/* View-timeline effects: progress = this element's pass through the viewport. */
		[data-scroll="parallax"],
		[data-scroll="drift"],
		[data-scroll="scale"],
		[data-scroll="rotate"],
		[data-scroll="fade"] {
			animation-timeline: view();
		}
		[data-scroll="parallax"],
		[data-scroll="drift"],
		[data-scroll="rotate"] { animation-range: cover 0% cover 100%; }
		[data-scroll="scale"],
		[data-scroll="fade"] { animation-range: entry 0% entry 100%; }
		[data-scroll][data-scroll-range="entry"] { animation-range: entry 0% entry 100%; }
		[data-scroll][data-scroll-range="cover"] { animation-range: cover 0% cover 100%; }
		[data-scroll][data-scroll-range="exit"] { animation-range: exit 0% exit 100%; }

		[data-scroll="parallax"] { animation-name: obk-scroll-parallax; }
		[data-scroll="drift"] { animation-name: obk-scroll-drift; }
		[data-scroll="scale"] { animation-name: obk-scroll-scale; }
		[data-scroll="rotate"] { animation-name: obk-scroll-rotate; }
		[data-scroll="fade"] { animation-name: obk-scroll-fade; }

		/* Page-timeline effects: progress = how far down the document you are. */
		[data-scroll="progress"] {
			animation-timeline: scroll(root block);
			animation-name: obk-scroll-progress;
		}
		[data-scroll="shrink"] {
			animation-timeline: scroll(root block);
			animation-name: obk-scroll-shrink;
			animation-range: 0 calc(var(--obk-scroll-distance, 240) * 1px);
		}
	}
}

@keyframes obk-scroll-parallax {
	from { translate: 0 calc(var(--obk-scroll-parallax, 40) * 1px); }
	to { translate: 0 calc(var(--obk-scroll-parallax, 40) * -1px); }
}
@keyframes obk-scroll-drift {
	from { translate: calc(var(--obk-scroll-drift, 40) * 1px) 0; }
	to { translate: calc(var(--obk-scroll-drift, 40) * -1px) 0; }
}
@keyframes obk-scroll-scale {
	from { scale: calc(1 - var(--obk-scroll-scale, 12) / 100); }
	to { scale: 1; }
}
/* A continuous spin: the angle tracks scroll progress across the whole crossing —
   0deg entering, the chosen angle (up to ±360) leaving. Sign = direction. */
@keyframes obk-scroll-rotate {
	from { rotate: 0deg; }
	to { rotate: calc(var(--obk-scroll-rotate, 90) * 1deg); }
}
@keyframes obk-scroll-fade {
	from { opacity: calc(var(--obk-scroll-fade, 0) / 100); }
	to { opacity: 1; }
}
@keyframes obk-scroll-progress {
	from { width: 0%; }
	to { width: 100%; }
}
@keyframes obk-scroll-shrink {
	to { scale: calc(1 - var(--obk-scroll-shrink, 8) / 100); }
}

/* Smooth in-page anchor navigation. Paired with the per-element scroll offset
   (scroll-margin-top) so a target never lands underneath a sticky header. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Root/Inner content-width system (piloting on why-03 + the Div block).
   The block ROOT stays full-bleed (backgrounds edge-to-edge) and owns a Content
   width trait; the .obk-inner directly under it is the single width authority all
   content lives in — centred, boxed by default. Full lifts the cap; Custom also
   lifts it so the author sizes the Inner directly (Style → Size → max-width). */
.tenant .obk-inner { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
.tenant.obk-w-full > .obk-inner { max-width: none; }
.tenant.obk-w-custom > .obk-inner { max-width: none; }

/* Raw Div block (structure/struct-box). Relative by default so authors can nudge it
   with +/- margins / offsets and anchor absolutely-positioned children. */
.obk-box { position: relative; }
/* Div block width options: a raw div is full-width by default; Boxed centres it at
   the standard content width; Custom is a marker — the author sets max-width. */
.tenant.obk-box.obk-w-boxed { max-width: 1140px; margin-left: auto; margin-right: auto; }

/* Section shape divider (blocks/dividers). Solid fill = currentColor (set via the Style
   pane Colour control, brand swatches); the opposite side is transparent. Relative by
   default so it can be pulled over the adjacent section with a negative margin.
   --sd-h height, --sd-w long-axis stretch (>100% overflows the clipped box → wider/fewer
   repeats = variation), --sd-p 0..1 position offset picking which stretched slice shows.
   Side/Flip via data attrs. */
.obk-shape-divider { position: relative; display: block; width: 100%; line-height: 0; overflow: hidden; overflow: clip; --sd-h: 80px; --sd-w: 100%; --sd-p: 0.5; color: var(--t-ink); }
.obk-shape-divider > .obk-sd-svg { display: block; height: var(--sd-h); width: var(--sd-w); margin-left: calc((100% - var(--sd-w)) * var(--sd-p)); }
.obk-shape-divider[data-obk-pos="top"] > .obk-sd-svg { transform: scaleY(-1); }
.obk-shape-divider[data-obk-flip="true"] > .obk-sd-svg { transform: scaleX(-1); }
.obk-shape-divider[data-obk-pos="top"][data-obk-flip="true"] > .obk-sd-svg { transform: scale(-1, -1); }

/* Image masking (data-obk-mask + data-obk-mask-*). Alpha masks; -webkit- + standard set.
   Base is a single attribute selector (0,1,0) — NOT :not([…=""]) (0,2,0) — so the
   size/position/repeat overrides below (also 0,1,0, and later in source) actually win.
   Harmless on an empty data-obk-mask: mask-* are set but no shape image resolves. */
[data-obk-mask] { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
[data-obk-mask="circle"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'50'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'50'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="rounded"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Crect%20width%3D'100'%20height%3D'100'%20rx%3D'26'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Crect%20width%3D'100'%20height%3D'100'%20rx%3D'26'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="pill"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Crect%20y%3D'22'%20width%3D'100'%20height%3D'56'%20rx%3D'28'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Crect%20y%3D'22'%20width%3D'100'%20height%3D'56'%20rx%3D'28'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="hexagon"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C2%2095%2C26%2095%2C74%2050%2C98%205%2C74%205%2C26'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C2%2095%2C26%2095%2C74%2050%2C98%205%2C74%205%2C26'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="diamond"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C1%2099%2C50%2050%2C99%201%2C50'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C1%2099%2C50%2050%2C99%201%2C50'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="triangle"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C4%2096%2C96%204%2C96'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C4%2096%2C96%204%2C96'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="star"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C2%2062%2C37%2099%2C38%2069%2C60%2080%2C97%2050%2C75%2020%2C97%2031%2C60%201%2C38%2038%2C37'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D'50%2C2%2062%2C37%2099%2C38%2069%2C60%2080%2C97%2050%2C75%2020%2C97%2031%2C60%201%2C38%2038%2C37'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="heart"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M50%2C90%20C12%2C60%203%2C36%2021%2C20%20C36%2C7%2050%2C20%2050%2C31%20C50%2C20%2064%2C7%2079%2C20%20C97%2C36%2088%2C60%2050%2C90%20Z'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M50%2C90%20C12%2C60%203%2C36%2021%2C20%20C36%2C7%2050%2C20%2050%2C31%20C50%2C20%2064%2C7%2079%2C20%20C97%2C36%2088%2C60%2050%2C90%20Z'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="blob"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M54%2C4%20C76%2C1%2097%2C16%2098%2C39%20C99%2C58%2087%2C67%2083%2C80%20C78%2C96%2059%2C99%2041%2C96%20C21%2C93%204%2C85%203%2C63%20C2%2C41%209%2C27%2021%2C17%20C32%2C8%2041%2C6%2054%2C4%20Z'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M54%2C4%20C76%2C1%2097%2C16%2098%2C39%20C99%2C58%2087%2C67%2083%2C80%20C78%2C96%2059%2C99%2041%2C96%20C21%2C93%204%2C85%203%2C63%20C2%2C41%209%2C27%2021%2C17%20C32%2C8%2041%2C6%2054%2C4%20Z'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="arch"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M5%2C98%20L5%2C48%20A45%2C45%200%200%201%2095%2C48%20L95%2C98%20Z'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M5%2C98%20L5%2C48%20A45%2C45%200%200%201%2095%2C48%20L95%2C98%20Z'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask="leaf"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M95%2C5%20L95%2C55%20A45%2C45%200%201%201%2045%2C5%20Z'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D'M95%2C5%20L95%2C55%20A45%2C45%200%201%201%2045%2C5%20Z'%2F%3E%3C%2Fsvg%3E"); }
[data-obk-mask-size="contain"] { -webkit-mask-size: contain; mask-size: contain; }
[data-obk-mask-size="cover"] { -webkit-mask-size: cover; mask-size: cover; }
[data-obk-mask-size="stretch"] { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
[data-obk-mask-pos="left top"] { -webkit-mask-position: left top; mask-position: left top; }
[data-obk-mask-pos="center top"] { -webkit-mask-position: center top; mask-position: center top; }
[data-obk-mask-pos="right top"] { -webkit-mask-position: right top; mask-position: right top; }
[data-obk-mask-pos="left center"] { -webkit-mask-position: left center; mask-position: left center; }
[data-obk-mask-pos="center center"] { -webkit-mask-position: center center; mask-position: center center; }
[data-obk-mask-pos="right center"] { -webkit-mask-position: right center; mask-position: right center; }
[data-obk-mask-pos="left bottom"] { -webkit-mask-position: left bottom; mask-position: left bottom; }
[data-obk-mask-pos="center bottom"] { -webkit-mask-position: center bottom; mask-position: center bottom; }
[data-obk-mask-pos="right bottom"] { -webkit-mask-position: right bottom; mask-position: right bottom; }
[data-obk-mask-repeat="no-repeat"] { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
[data-obk-mask-repeat="repeat"] { -webkit-mask-repeat: repeat; mask-repeat: repeat; }
[data-obk-mask-repeat="repeat-x"] { -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
[data-obk-mask-repeat="repeat-y"] { -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; }

.tenant.sec { width: 100%; }
.tenant.sec.pad-s { padding-top: 24px; padding-bottom: 24px; }
.tenant.sec.pad-m { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.tenant.sec.pad-l { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.tenant.sec .sec-inner { padding: 0 32px; }
#ixay{text-align:center;font-size:56px;}#iatc{text-align:center;}#i0zqj{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#itc9f{display:flex;align-items:center;gap:15px;}#i8rys-2{padding-top:20px;padding-right:0px;padding-bottom:20px;padding-left:0px;}#ilbsd{display:flex;align-items:center;gap:15px;}#i4dav{display:flex;align-items:center;gap:15px;}#i9a81{display:flex;align-items:center;gap:15px;}#i46su-2{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-2{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-2{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#iokrh{display:flex;align-items:center;gap:15px;}#i46su-2-3{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-3{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#ioq1j{display:flex;align-items:center;gap:15px;}#i46su-2-4{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-4{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#il67f{display:flex;align-items:center;gap:15px;}#i46su-2-5{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-5{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#imee6{display:flex;align-items:center;gap:15px;}#i46su-2-6{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-6{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#iov8b{display:flex;align-items:center;gap:15px;}#i46su-2-7{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-7{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#ifwsd{display:flex;align-items:center;gap:15px;}#i3xel{padding-top:20px;padding-right:0px;padding-bottom:20px;padding-left:20px;border-color:var(--t-brand);border-style:solid;background-color:color-mix(in srgb, var(--primary) 8%, var(--background));border-width:3px;margin-top:10px;margin-right:0px;margin-bottom:10px;margin-left:0px;}#i46su-2-2-2{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-2-2{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#iqm5p{display:flex;align-items:center;gap:15px;}#i46su-2-2-3{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i46su-2-2-3{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#ioofh{display:flex;align-items:center;gap:15px;}#i8rys-2{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#i97r9{background-color:var(--t-brand);align-self:center;text-align:center;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding-top:3px;padding-right:10px;padding-bottom:3px;padding-left:10px;font-size:1.2em;}#ij7b6{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ilnab{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ilxyp{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#i1cqq{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ioygl{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ijf7u{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iqeee{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#in0la{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#i42ue{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ilrei{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#itnikh{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ig8i4{margin-top:10px;margin-right:0px;margin-bottom:0px;margin-left:0px;}