/*
 * iCAUR RMA — companion stylesheet.
 *
 * Colour, font size and spacing live in theme.json and in each block's attributes, so they
 * stay editable in the editor. Only what block supports cannot express belongs here:
 * grids, :hover (and parent-hover), pseudo-elements, line clamping, scroll-snap, sticky,
 * object-fit, and the two custom blocks' internals.
 *
 * Every colour below references a theme.json preset directly. No hardcoded hex, not even
 * as a var() fallback — see README.md.
 */

:root {
	--icaur-ease-out: cubic-bezier(.16, 1, .3, 1);
	--icaur-ease-std: cubic-bezier(.4, 0, .2, 1);
	--icaur-header-h: 60px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--icaur-header-h);
}

/* Thai has no word spaces: only break headings where we put a space, never mid-word. */
:is(h1, h2, h3, h4, .fact-value, .colour-name) {
	word-break: keep-all;
	overflow-wrap: anywhere;
	line-break: strict;
}
.nw { white-space: nowrap; }

/* ==========================================================================
   Block styles registered in functions.php
   ========================================================================== */
:root body :where(.is-layout-flow) > *, body :where(.wp-site-blocks) > * {
	margin-block-start: 0;
}
body :where(.wp-site-blocks :focus) {
	outline: none;
}

/* Kicker: gold tracked-out label above a heading. */
.is-style-kicker {
	margin-bottom: 12px;
	color: var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	letter-spacing: .14em;
}

/* Arrow link: the site's default CTA. Gold text, no background, arrow slides on hover. */
.wp-block-button.is-style-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 500;
	letter-spacing: .04em;
}
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	transition: transform .35s var(--icaur-ease-out);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover { background: none; }
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after { transform: translateX(5px); }

/* Gold numeral: the 01 / 02 / 03 step numbers and news dates, clipped gradient. */
.is-style-gold-numeral {
	background: var(--wp--preset--gradient--gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 500;
	line-height: 1;
}

/* Gold tick list. */
.is-style-ticks {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-style-ticks li {
	position: relative;
	padding: 14px 0 14px 28px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	line-height: 1.7;
}
.is-style-ticks li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 22px;
	width: 12px;
	height: 6px;
	border: 1.5px solid var(--wp--preset--color--gold);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}
.has-black-background-color .is-style-ticks,
.has-black-background-color .is-style-ticks li { border-color: var(--wp--preset--color--white-70); }

/* Ruled rows: a plain list with hairlines, no bullets. */
.is-style-ruled {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-style-ruled li {
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.has-black-background-color .is-style-ruled,
.has-black-background-color .is-style-ruled li { border-color: var(--wp--preset--color--white-70); }

/* Skip to content — visible only on keyboard focus. Ported from the static build's .skip. */
.skip {
	position: absolute;
	left: -999px;
	top: 8px;
	z-index: 1000;
	padding: 8px 14px;
	background: var(--wp--preset--color--gold-fill);
	color: var(--wp--preset--color--black);
}
.skip:focus { left: 8px; }

/* ==========================================================================
   Header (RMA group chrome)
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: var(--wp--preset--shadow--header); }
.rma-header { flex-wrap: nowrap !important; }
.rma-brand { flex-wrap: nowrap !important; gap: 12px; align-items: center; }
.rma-brand .wp-block-image { margin: 0; }
.rma-brand .icaur-logo img { height: 17px; width: auto; }
.rma-brand .rma-logo img { height: 19px; width: auto; }
/* 1px divider between the two logos. */
.rma-brand .rma-logo { position: relative; padding-left: 13px; }
.rma-brand .rma-logo::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 24px;
	margin-top: -12px;
	background: var(--wp--preset--color--charcoal);
	opacity: .6;
}

.rma-nav .wp-block-navigation-item__content { position: relative; padding: 8px 0; }
.rma-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--icaur-ease-out);
}
.rma-nav .wp-block-navigation-item__content:hover::after,
.rma-nav .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* The nav's last three items are the mobile-menu extras: CTAs + phone. They duplicate the
   header buttons, so they only exist inside the overlay. */
.rma-nav .nav-cta,
.rma-nav .nav-tel { display: none; }
.rma-nav .is-menu-open .nav-cta,
.rma-nav .is-menu-open .nav-tel { display: block; }
.wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border: 1px solid var(--wp--preset--color--charcoal);
}
.wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content::after { content: none; }

@media (max-width: 1023px) {
	.rma-nav { order: 3; }
	.header-cta { display: none !important; }
}
@media (min-width: 1024px) {
	.rma-nav { flex: 1; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.icaur-hero { min-height: calc(100vh - var(--icaur-header-h)); }
@supports (height: 100svh) {
	.icaur-hero { min-height: calc(100svh - var(--icaur-header-h)); }
}
.icaur-hero .wp-block-cover__image-background { animation: icaur-kenburns 18s var(--icaur-ease-std) both; transform-origin: 60% 60%; }
@keyframes icaur-kenburns {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
.hero-title { max-width: 22ch; text-wrap: balance; }
.hero-sub { max-width: 52ch; }
.hero-content { width: 100%; }
@media (max-width: 767px) {
	.icaur-hero .wp-block-cover__image-background { object-position: 50% 70% !important; }
	.hero-content { display: block; }
	.hero-ctas { margin-top: 24px; }
}

/* Scroll cue */
.scroll-cue {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 24px;
	width: 26px;
	height: 42px;
	margin-left: -13px;
	border: 1.5px solid var(--wp--preset--color--white-70);
	border-radius: 14px;
}
.scroll-cue span {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	animation: icaur-cue 1.8s var(--icaur-ease-std) infinite;
}
@keyframes icaur-cue {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(14px); }
}

/* ==========================================================================
   Intro band
   ========================================================================== */

.icaur-intro { min-height: clamp(460px, 55.8vw, 1072px); }
.icaur-intro .intro-text { max-width: min(600px, 44%); margin: 0 !important; }
@media (max-width: 767px) {
	/* Phone: copy on the photo's tan top edge, car below. */
	.icaur-intro { min-height: 0; }
	.icaur-intro .intro-text { max-width: none; }
	.icaur-intro .wp-block-cover__image-background { object-position: 78% 60% !important; }
}

/* ==========================================================================
   Key facts + highlight cards
   ========================================================================== */

.facts { display: grid; grid-template-columns: 1fr; }
.facts .fact { padding: 20px 0; border-top: 1px solid var(--wp--preset--color--line); }
@media (min-width: 640px) {
	.facts { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}
@media (min-width: 1200px) {
	.facts { grid-template-columns: repeat(5, 1fr); }
	.facts .fact {
		padding: 24px 24px 24px 24px;
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--line);
	}
	.facts .fact:first-child { border-left: 0; padding-left: 0; }
}

/* Cards: sideways scroll-snap on phones, 4-up grid on desktop. */
.hl-grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 82%;
	gap: var(--wp--preset--spacing--10);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: var(--wp--preset--spacing--50);
	scroll-padding-inline: var(--wp--preset--spacing--50);
	scrollbar-width: none;
}
.hl-grid::-webkit-scrollbar { display: none; }
.hl-card {
	scroll-snap-align: start;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.hl-card .wp-block-cover__image-background { transition: transform 1.2s var(--icaur-ease-out); }
.hl-card:hover .wp-block-cover__image-background,
.hl-card:focus-within .wp-block-cover__image-background { transform: scale(1.06); }
.hl-num mark { font-size: .42em; margin-left: 6px; font-weight: 400; }
.hl-charge::after {
	content: "";
	position: absolute;
	inset: 0 0 45%;
	background: currentColor;
	color: var(--wp--preset--color--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M36 4 14 36h16l-4 24 24-34H34z' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 34% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M36 4 14 36h16l-4 24 24-34H34z' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 34% no-repeat;
	animation: icaur-pulse 3s var(--icaur-ease-std) infinite;
	pointer-events: none;
}
@keyframes icaur-pulse { 50% { opacity: .55; } }

@media (min-width: 768px) {
	.hl-grid { grid-auto-columns: calc((100% - var(--wp--preset--spacing--10)) / 2.3); }
}
@media (min-width: 1200px) {
	.hl-grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
		padding-inline: 0;
	}
	/* Desktop: the card text stays hidden until hover or keyboard focus. */
	.hl-desc {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height .6s var(--icaur-ease-out), opacity .4s;
	}
	.hl-card:hover .hl-desc,
	.hl-card:focus-within .hl-desc { max-height: 160px; opacity: 1; }
}

/* ==========================================================================
   Grade selector (core Tabs)
   ========================================================================== */

.grade-tabs .wp-block-tab-list {
	gap: clamp(16px, 3vw, 56px);
	border-bottom: 1px solid var(--wp--preset--color--white-70);
	overflow-x: auto;
	scrollbar-width: none;
}
.grade-tabs .wp-block-tab-list::-webkit-scrollbar { display: none; }
.grade-tabs .wp-block-tab-list button {
	position: relative;
	padding: 14px 0 16px;
	min-height: 48px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--white-70);
	font-size: clamp(15px, 1.1vw, 20px);
	font-weight: 500;
	white-space: nowrap;
	transition: color .3s;
}
.grade-tabs .wp-block-tab-list button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transition: transform .4s var(--icaur-ease-out);
}
.grade-tabs .wp-block-tab-list button:hover { color: var(--wp--preset--color--base); }
.grade-tabs .wp-block-tab-list button[aria-selected="true"] { color: var(--wp--preset--color--base); }
.grade-tabs .wp-block-tab-list button[aria-selected="true"]::after { transform: scaleX(1); }

/* Dimension lines over the side view. */
.dim { position: relative; padding: 0 44px 64px 0; margin: 0; }
.dim img { width: 100%; }
.dim-line { position: absolute; color: var(--wp--preset--color--white-70); font-size: 12px; }
.dim-line em { font-style: normal; }
.dim-length {
	left: 0;
	right: 44px;
	bottom: 30px;
	height: 1px;
	background: var(--wp--preset--color--white-70);
	opacity: .35;
}
.dim-length::before, .dim-length::after,
.dim-wb::before, .dim-wb::after {
	content: "";
	position: absolute;
	top: -5px;
	width: 1px;
	height: 11px;
	background: var(--wp--preset--color--white-70);
}
.dim-length::before, .dim-wb::before { left: 0; }
.dim-length::after, .dim-wb::after { right: 0; }
.dim-length span {
	position: absolute;
	left: 50%;
	top: 8px;
	transform: translateX(-50%);
	white-space: nowrap;
	color: var(--wp--preset--color--base);
	opacity: 1;
}
.dim-wb {
	left: 14.5%;
	right: calc(44px + 22%);
	bottom: 58px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	opacity: .6;
}
.dim-wb::before, .dim-wb::after { background: var(--wp--preset--color--gold); }
.dim-wb span {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	white-space: nowrap;
	color: var(--wp--preset--color--gold-soft);
}
.dim-height {
	top: 4%;
	bottom: 64px;
	right: 14px;
	width: 1px;
	background: var(--wp--preset--color--white-70);
	opacity: .35;
}
.dim-height::before, .dim-height::after {
	content: "";
	position: absolute;
	left: -5px;
	width: 11px;
	height: 1px;
	background: var(--wp--preset--color--white-70);
}
.dim-height::before { top: 0; }
.dim-height::after { bottom: 0; }
.dim-height span {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%) rotate(90deg);
	transform-origin: left center;
	white-space: nowrap;
	color: var(--wp--preset--color--base);
}
.dim figcaption {
	position: absolute;
	left: 0;
	bottom: -14px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	font-size: 12px;
	color: var(--wp--preset--color--white-70);
}
.dim figcaption em { font-style: normal; }

/* Spec grid inside each grade panel. Core blocks, not a <dl>, so every figure stays
   editable in the editor: .stat = group, with a label paragraph and a value paragraph. */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 28px 0 20px; border-top: 1px solid var(--wp--preset--color--white-70); }
.stats .stat { padding: 18px 0 16px; border-bottom: 1px solid var(--wp--preset--color--white-70); }
.stats .stat:nth-child(odd) { padding-right: 16px; }
.stats .stat:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--wp--preset--color--white-70); }
.stat-label { font-size: 13px; color: var(--wp--preset--color--white-70); margin-bottom: 4px; }
.stat-value { font-size: 14px; color: var(--wp--preset--color--white-80); }
.stat-value strong {
	display: inline-block;
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--base);
}
@media (min-width: 640px) {
	.stats { grid-template-columns: repeat(3, 1fr); }
	.stats .stat:nth-child(n) { padding: 18px 16px 16px 20px; border-left: 1px solid var(--wp--preset--color--white-70); }
	.stats .stat:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}

.grade-meta { font-size: 14px; color: var(--wp--preset--color--white-70); margin-top: 6px; }
.grade-meta strong { font-weight: 400; color: var(--wp--preset--color--base); }
.grade-price {
	margin: 20px 0 8px;
	padding: 14px 18px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent);
	font-size: 14px;
	color: var(--wp--preset--color--white-70);
}
.grade-price strong { color: var(--wp--preset--color--gold-soft); font-weight: 500; }
.grade-copy { min-height: 5.2em; }

/* ==========================================================================
   Feature viewer (icaur/feature-viewer)
   ========================================================================== */

.viewer { display: grid; gap: 24px 56px; align-items: start; }
@media (min-width: 1024px) { .viewer { grid-template-columns: 1.55fr 1fr; } }

.viewer-stage {
	position: relative;
	aspect-ratio: 1134 / 720;
	overflow: hidden;
	background: var(--wp--preset--color--line);
}
.viewer-stage > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity .6s var(--icaur-ease-std), transform 1.2s var(--icaur-ease-out);
}
.viewer-stage > .is-active { opacity: 1; transform: none; }
.viewer--dark .viewer-stage { background: var(--wp--preset--color--black); }

.viewer-count { font-size: 13px; letter-spacing: .08em; color: var(--wp--preset--color--muted); margin-bottom: 8px; }
.viewer-count b { font-size: 28px; font-weight: 500; color: var(--wp--preset--color--gold); letter-spacing: 0; }
.viewer--dark .viewer-count { color: var(--wp--preset--color--white-70); }

.viewer-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--line); }
.viewer-list li { border-bottom: 1px solid var(--wp--preset--color--line); }
.viewer-list [role="tab"] {
	display: grid;
	gap: 4px;
	width: 100%;
	padding: 14px 0 14px 16px;
	border: 0;
	background: none;
	text-align: left;
	position: relative;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color .3s;
}
.viewer-list [role="tab"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .45s var(--icaur-ease-out);
}
.viewer-list [role="tab"][aria-selected="true"]::before { transform: scaleY(1); }
.vl-title { font-size: clamp(15px, 1.05vw, 18px); font-weight: 500; color: var(--wp--preset--color--ink); line-height: 1.45; }
.vl-text {
	font-size: 14px;
	line-height: 1.65;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s var(--icaur-ease-out), opacity .4s;
}
.viewer-list [role="tab"][aria-selected="true"] .vl-text { max-height: 8em; opacity: 1; }
.viewer-list [role="tab"]:not([aria-selected="true"]):hover .vl-title { color: var(--wp--preset--color--gold); }
.viewer--dark .viewer-list,
.viewer--dark .viewer-list li { border-color: var(--wp--preset--color--white-70); }
.viewer--dark .viewer-list [role="tab"] { color: var(--wp--preset--color--white-70); 
	font-family: 'Mitr', sans-serif;
}
.viewer--dark .vl-title { color: var(--wp--preset--color--base); }

.viewer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.viewer-nav button {
	width: 100%;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--field-line);
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: border-color .25s, color .25s;
}
.viewer-nav button:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
.viewer-nav svg { width: 18px; height: 18px; }
.viewer--dark .viewer-nav button { border-color: var(--wp--preset--color--white-70); color: var(--wp--preset--color--base); }
.viewer--dark .viewer-nav button:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-soft); }

@media (min-width: 768px) {
	.viewer-panel {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "count nav" "list list";
		align-items: center;
		column-gap: 16px;
	}
	.viewer-count { grid-area: count; margin-bottom: 0; }
	.viewer-nav { grid-area: nav; grid-template-columns: repeat(2, 48px); margin-top: 0; }
	.viewer-list { grid-area: list; margin-top: 12px; }
}

/* ==========================================================================
   Colour picker (icaur/colour-picker)
   ========================================================================== */

.colours-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .colours-grid { grid-template-columns: 1fr 1.5fr; gap: 64px; } }
.colour-name { margin-top: 24px; font-size: clamp(24px, 2vw, 36px); font-weight: 500; color: var(--wp--preset--color--ink); }
.colour-int { color: var(--wp--preset--color--muted); font-size: 15px; min-height: 1.7em; }
.swatches { display: flex; gap: 16px; margin-top: 28px; }
.swatches [role="radio"] {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sw);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	cursor: pointer;
	transition: transform .3s var(--icaur-ease-out);
}
.swatches [role="radio"]::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	transition: border-color .3s;
}
.swatches [role="radio"][aria-checked="true"]::after { border-color: var(--wp--preset--color--gold); }
.swatches [role="radio"]:hover { transform: scale(1.08); }
.colour-stage { position: relative; aspect-ratio: 620 / 300; margin: 0; }
.colour-stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity .45s var(--icaur-ease-std), transform .6s var(--icaur-ease-out);
}
.colour-stage img.swap { opacity: 0; transform: translateX(-3%); }

/* ==========================================================================
   Countdown (icaur/countdown)
   ========================================================================== */

.countdown { display: flex; gap: clamp(12px, 2vw, 28px); margin-top: 8px; }
.countdown > div { display: grid; min-width: 56px; }
.countdown b {
	font-size: clamp(30px, 3vw, 52px);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--gold-soft);
	font-variant-numeric: tabular-nums;
}
.countdown span { font-size: 12px; color: var(--wp--preset--color--white-70); margin-top: 6px; }
.countdown.done { display: none; }

/* ==========================================================================
   News
   ========================================================================== */

/* Ported 1:1 from .news-* in landing/css/style.css. Only the selectors core renamed change:
   .news-link -> .news-card, .news-img -> .wp-block-post-featured-image,
   .news-date -> .icaur-be-year, .news-card h3 -> .wp-block-post-title.
   .news-body is kept as a real wrapper in the markup, exactly as the source has it — without
   it the three text blocks become separate grid rows and get stretched apart by the image. */
.news-grid { display: grid; gap: clamp(28px, 3vw, 40px) var(--wp--preset--spacing--10); }

.news-card { display: grid; gap: 16px; height: 100%; align-content: start; }
.news-card > * { margin: 0; }
.news-body { display: grid; gap: 8px; align-content: start; }
.news-body > * { margin: 0; }

.news-card .wp-block-post-featured-image {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--line);
}
.news-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--icaur-ease-out);
}
.news-card:hover .wp-block-post-featured-image img { transform: scale(1.05); }

/* .news-date + .news-date b */
.icaur-be-year { color: var(--wp--preset--color--gold); font-size: 13px; }
.icaur-be-year b {
	font-size: 26px;
	font-weight: 400;
	margin-right: 4px;
	background: var(--wp--preset--gradient--gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* .news-card h3. The font size is NOT a fontSize preset attribute: the feature card needs a
   second, larger size for the same block, which one attribute cannot express, and a preset
   would emit .has-*-font-size with !important and win over both rules below. */
.news-card .wp-block-post-title {
	font-size: clamp(17px, 1.2vw, 22px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-card .wp-block-post-title a { transition: color .25s; }
.news-card:hover .wp-block-post-title a { color: var(--wp--preset--color--gold); }

.news-card .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* "อ่านต่อ" as the .link-arrow CTA the static feature card uses */
.news-card .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 500;
	letter-spacing: .04em;
	text-decoration: none;
}
.news-card .wp-block-post-excerpt__more-link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	transition: transform .35s var(--icaur-ease-out);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.news-card:hover .wp-block-post-excerpt__more-link::after { transform: translateX(5px); }

/* .news-card.feature — the first post. A Query loop gives every item identical markup, so the
   first item is selected positionally instead of by a class. */
@media (min-width: 640px) {
	.news-grid { grid-template-columns: repeat(2, 1fr); }
	.news-grid > li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.news-grid { grid-template-columns: repeat(3, 1fr); }

	.news-grid > li:first-child > .news-card {
		grid-template-columns: 1.4fr 1fr;
		gap: clamp(24px, 3vw, 56px);
		align-items: center;
	}
	.news-grid > li:first-child .wp-block-post-featured-image { aspect-ratio: 16 / 9; }
	.news-grid > li:first-child .wp-block-post-title {
		font-size: clamp(22px, 1.8vw, 32px);
		-webkit-line-clamp: 4;
	}
}

/* ==========================================================================
   USP / steps / forms / FAQ / map
   ========================================================================== */

.usp-list { display: grid; gap: 28px; }
.usp-list > * { padding-top: 24px; border-top: 1px solid var(--wp--preset--color--line-warm); }
.usp-list img { width: 36px; height: 36px; margin-bottom: 8px; }
@media (min-width: 640px) { .usp-list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1200px) { .usp-list { grid-template-columns: repeat(4, 1fr); } }

.steps { display: grid; gap: 28px; }
.steps > * { padding-top: 20px; border-top: 1px solid var(--wp--preset--color--line); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.reev-ways { display: grid; gap: 10px; }
.reev-ways > * { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--wp--preset--color--line); }
.reev-ways img { flex: 0 0 28px; width: 28px; height: 28px; }
@media (min-width: 640px) {
	.reev-ways { grid-template-columns: repeat(3, 1fr); }
	.reev-ways > * { flex-direction: column; align-items: flex-start; }
}

.space-grid { display: grid; gap: 28px var(--wp--preset--spacing--10); }
.space-grid img { width: 100%; aspect-ratio: 756 / 480; object-fit: cover; margin-bottom: 16px; }
@media (min-width: 768px) { .space-grid { grid-template-columns: repeat(3, 1fr); } }

.safety-grid { display: grid; gap: 32px var(--wp--preset--spacing--10); }
.safety-grid img { width: 100%; aspect-ratio: 1042 / 490; object-fit: cover; margin-bottom: 18px; background: var(--wp--preset--color--line); }
@media (min-width: 1024px) { .safety-grid { grid-template-columns: repeat(3, 1fr); } }

/* FAQ — core Details, brand skin: hairline rules and a gold + that rotates into ×. */
.icaur-faq { border-bottom: 1px solid var(--wp--preset--color--line); }
.icaur-faq summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 20px 40px 20px 0;
	font-size: clamp(16px, 1.15vw, 20px);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}
.icaur-faq summary::-webkit-details-marker { display: none; }
/* Two bars crossed; the vertical one rotates flat, so + becomes ×. */
.icaur-faq summary::before,
.icaur-faq summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 14px;
	height: 1.5px;
	background: var(--wp--preset--color--gold);
	transition: transform .35s var(--icaur-ease-out);
}
.icaur-faq summary::after { transform: rotate(90deg); }
.icaur-faq[open] summary::after { transform: rotate(0); }
.icaur-faq > :not(summary) { padding: 0 40px 20px 0; }

.map iframe {
	width: 100%;
	min-height: 360px;
	border: 0;
	display: block;
	filter: grayscale(.25) sepia(.1);
}

.nap-list > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.nap-list dt { color: var(--wp--preset--color--muted); font-size: 14px; }
.nap-list dd { margin: 0; color: var(--wp--preset--color--ink); }

/* Register band: photo left, form right, edge to edge. */
.register-grid { display: grid; }
@media (min-width: 1024px) {
	.register-grid { grid-template-columns: 1fr 1fr; }
	.register-aside { min-height: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer .footer-cols a,
.site-footer .footer-legal a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.site-footer a:hover { color: var(--wp--preset--color--contrast); }
.site-footer .disclaimer { flex-basis: 100%; opacity: .75; }
.site-footer .footer-legal { display: flex; gap: 20px; }
.site-footer .wp-block-social-link { margin: 0; }

/* Sticky mobile CTA */
.sticky-cta {
	position: fixed;
	z-index: 90;
	left: 16px;
	right: 16px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	transform: translateY(160%);
	transition: transform .5s var(--icaur-ease-out);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.sticky-cta.is-shown { transform: none; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ==========================================================================
   Reveal on scroll (opt-in: nothing is hidden without JS)
   ========================================================================== */

.js .icaur-reveal {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
	transition: opacity .9s var(--icaur-ease-out), transform .9s var(--icaur-ease-out), filter .9s var(--icaur-ease-out);
	transition-delay: var(--icaur-delay, 0s);
}
.js .icaur-reveal.is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.js .icaur-reveal { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   Rules the class-name audit missed
   Found by diffing computed styles against the prototype at 1440px, not by eye.
   The first audit skipped these because the class name also occurs as a preset slug
   in the markup ("fontSize":"lead"), so a substring check thought .lead was present.
   ========================================================================== */

/* .lead */
.lead { line-height: 1.8; color: var(--wp--preset--color--body); }
.icaur-intro .lead { color: var(--wp--preset--color--intro-ink); }

/* .showroom p */
.showroom-text { color: var(--wp--preset--color--body-warm); line-height: 1.8; }

/* .showroom .h3 — the prototype's .h3 line-height, not the theme.json heading default */
.showroom h2 { line-height: 1.35; }

/* .fact-value { font-size: clamp(15px, 1vw, 18px) } */
.fact-value { font-size: clamp(15px, 1vw, 18px); }

/* .usp-list h3 / .usp-list p */
.usp-list h3 { line-height: 1.4; }
.usp-list p { font-size: 15px; line-height: 1.7; }

/* .safety-grid p and .ticks li body tone */
.safety-grid p { color: var(--wp--preset--color--body-warm); line-height: 1.8; }
.is-style-ticks li { color: var(--wp--preset--color--body); }